Players: 2-6
Age: 12+ years

Contents

Game Board
100 Question Cards
50 Music Samples
6 Movers
1 Dice

Object

Answer questions about jazz to advance along the board. Player who reaches the final destination first wins.

Set Up

Each player selects a mover and sets it on the board’s start space.

Cards

There are four sets of cards. Each set has its own color and category.

• Album: Questions related to jazz albums
• Artist: Questions related to jazz artists
• Style: Questions related to jazz styles
• Terminology: Questions related to jazz terms

Audio

A jazz application that plays 10-second sample of a jazz tune. A smartphone or a computer with internet connection is required to access the application.

Board

The path is made up of spaces with the same colors as the cards with the exception of black and audio color. For the black space, the player gets to choose which question he wants to answer.

How to Play

Each player rolls the dice to determine who goes first. The highest roller starts. The first player rolls the dice and moves according to the number on the dice. The color of the space he lands on determines the question he would be asked. If the player provides the correct answer, he gets to roll the dice again and advanced until he misses the question.

Challenge

If one player lands on the same space as another player, he has two choices to make.

1. He could answer the question himself. If he answers the question correctly, he gets to advance and the other player gets sent back to the beginning. If he misses the answer, he gets sent back to the beginning.
2. He could challenge the other player to answer the question. If the other player answers the question correctly, he is safe and the challenger gets sent back. If the other player answers the wrong question, he gets sent back and the other player stays.

Bonus

For each audio challenge, each player only has to answer either the artist or the title of the tune. Once he answered the first part correctly he could answer the second part for a bonus point. If he answers the bonus point correctly he gets to advanced one space. If he misses the answer, he moves back one space.

To Win

A player must land exactly on the last red space. Once he is on the last red space, he must answer both parts (the title and the artist) of the audio challenge correctly to win.

Once the player reaches near the winning zone, he must roll the dice until he lands exactly on the last red space. Even if he couldn’t land exactly on the last red space, he could still answer the question related to his current space and roll again. If the player in the last red space gets the question wrong, he stays there and play continues as it is a normal turn.

My lovely wife wears many hats. In addition to taking care of me and my boys, she’s my only usability tester and browser checker. Every time I make some front-end updates to this site, I would call her up to ask how is my site looking on her IE8.

For the past few weeks, she said that the homepage banner doesn’t show up on IE8, which is intentional if I am using an SVG banner. A few days ago, she called me and said, “Is your site hacked? I keep getting the CAPTCHA box.” I then realized that I set the security on CloudFlare really high. As a result, if CloudFlare thinks you’re a spam, it will ask you to fill out CAPTCHA.

I went back into CloudFlare today and turned down the security setting down a bit. You still need to fill out CAPTCHA, but it won’t expire for a month. I apologize if it is causing you any inconvenience of accessing the site, but I rather be safe than sorry.

In the past couple of months, I have been thinking about redesigning the Mason Law web site. One of the things I would like to accomplish is to clean up all of the menu items. One of the approaches I wanted to explore is having one menu button that would launch the entire navigation system. As I started to look around, Disney is doing it. The problem is that the menu system is not implemented across all of Disney sites. The bigger issue, though, is that the launch nav disappeared with JavaScript turned off.

The new Teehan+Lax site also taking the same approach and having the same no JS issue. Even with the JavaScript turned on, I started to get annoyed rather quickly that I have to make that extra click every time I want to go to another section of the site.

Accessibility wise, the JavaScript dependency is not going to work for a higher educational web site. Design wise, it is not going to get pass my superior. I am actually reworking the homepage to include more links. It is getting way overwhelming. So now I am going to need to figure out a different solution.

This site’s homepage is now sporting a slideshow that uses only scalable vector graphics (SVG). The benefit of SVG is obviously the small file size and scalability. My goal is to focus on color and typography for the slideshow to jazz up the homepage as well as to show off client works. I also would like to play around with SVG because I am loving Adobe Illustrator.

After doing my research on how to best use SVG, I decided to support only modern browsers. That way I don’t have to create a PNG fallback for all the graphics. I am all about doing less work, not more. Since this is an enhancement feature, it is ok if legacy browsers don’t get it. Users can still access the blog. I have a dilemma about this whole approach. I am not sure if users on IE and below are lucky that they don’t have to these big graphics or users on modern browsers are being punished with these rich visual. I don’t know.

On the technical side, the slideshow is based off Nivo Slider, the jQuery version. After testing out many sliders, I find Nivo to be the simplest. I also purchased the WordPress plug-in license for a client, but than he decided not to use it so I implemented on the Lancaster Education Foundation.

The WordPress plug-in is very easy to set up, but my main issue is that the plug-in injects quite a bit of unnecessary JavaScripts and CSS into the page. On the other hand, the jQuery version is highly customizable. I was battling if I should use the WordPress plug-in or jQuery for the client and I decided on the former. The main reason is that the client can update the slider herself. As for my own site, I do the updates manually; therefore, I chose the jQuery version, which is free.

For the second project of my Advanced Web Design class, I am going to build a simple web app that target jazz aficionados, fans or anyone who appreciates jazz music. The concept is to challenge the player to see if he could recognize a tune in ten second.

The functionality is straightforward. A player taps on the clip to play the music than guesses the name of the tune and who played it. Then he could tap on the answer button to check if his guess is correct. To play another tune, he simply taps on the button that would load up another clip. The game could also be played more than one player. Everyone can make his own guess.

Even though the class project only required a prototype, I am going to build out the app using jQuery Mobile framework. To make the app fun and easy to use, I am keep the interface very simple. There will only be three components: the audio clip, an answer button and a reload button. The audio clips will be loaded randomly; therefore; I would need a simple PHP script and text file to store the data. Another approach would be to use WordPress as a backend management, but that might be unnecessary for the purpose of this project. I am, however, considering developing this concept further and making it into an app that could be placed on Apple or Android app store.

As for the name, I am calling it “Jazzapp.”

Last night at Refresh DC event, some of the team members who are responsible for the redesign of USA Today online shared their design, development and implementation process. With the relaunch their goal is to set the industry-wide benchmark for online news. They moved completely away from the heavy-ad trend to focus on the users. They ditched web site and gear toward web app.

They went through many revisions to incorporate more video, media and gallery into the design. They wanted to offer a much richer experience for the users, especially for tablet readers. The relaunch was striking in design, but facing negative criticisms. The users who come to USA Today don’t want rich media, gallery or large photos. They just want to read the content. The team is now working on the next release to focus on creating a true reading experience.

Some of the front-end technical challenges they presented were also useful. I am a bit surprised that they are not using any preprocessor to manage CSS. Given that they are using many new elements of CSS3 animation, a preprocessor would help them tremendously with just vendor prefixes. One of the reasons they stay away from using preprocessor was that they don’t want to produce too much nested selectors. I disagree completely because they don’t have to create nested selectors if they don’t want to. A preprocessor like Sass doesn’t make them do anything they don’t want to.

Aaron Gilbreath writes:

[T]he more I listened to Davis’s music, the more his approach started to influence my writing style. His solos in “Diane” and “It Could Happen to You” show how measured, uncluttered phrasing increases rather than decreases the impact. Unlike so much fat-cat prose, Davis’s solos didn’t divert from their emotional center by wowing the audience with speed and facility. With less distraction, the force of his music landed more squarely on me.

While Gilbreath writes with Miles, I design with Miles.

My current title at George Mason School of Law is web services developer. I am responsible for server administration and web design and development. I redesigned the main Law web site and made it responsive.

Outside of my fulltime work, I offers full web services including visual design (brand and layout), front-end development (HTML5, CSS3 and JavaScript) and content management system customization (WordPress and MODX). My recent projects include Black Bag, Poplar Springs and GWbusiness.

As for personal work, Visualgui is my design playground as well as writing archive. Simplexpression is an online jewelry store I work together with my wife. She makes all the art piece. I am just in charged of the web site. Even though I don’t work with Flash anymore, an archive of my slideshows are still available for prosperity. Another personal project of mine is Sketches of Miles. The site was created when I needed a project to learn CSS3 web typography. Each page has its own art direction. Eventually I want to build this site further for my final project for the completion of my MA in Graphic Design.

Speaking of graduate school work, I made a landing page for Real World Design, a collaborative project with my graduate classmates in my last seminar class. I also created a few printed materials for my Advanced Typography class. Checkout the graphic section for details.

That’s just a quick presentation of my work for my seminar class.

I started learning Sass a while back but it never caught on. Not that the process is intimidating, but over the years I have developed a practice of keeping my CSS as simplified as possible. I wanted to see everything on one page and combine or eliminate repeated elements as much as I could.

I could continue to work with straight CSS, but Sass is gaining so much ground in the CSS pre-processor world that it is hard to ignore. Even Dan Cederholm is converted and I was going to wait for his book, Sass for Web Designers, to pick up Sass again, but I just wanted to dive in again.

Yesterday I spent a couple of hours converting this site CSS into SCSS. Panic 2’s native support with color code makes working in Sass easy. The set up through command line is a breeze. Import is a very handy feature to keep SCSS clean. It helps me make updates to the latest version of HTML5 Boilerplate. I still have much more to learn in Sass, but I am now converted as well.

Two new podcasts added to my listening list: “Design Matters” with Debbie Millman and “Unfinished Business” with Andy Clarke and Anna Debenham.

In “Design Matters,” Ms. Millman interviews top designers including Steve Heller, Erik Spiekermann and Khoi Vinh. Ms. Millman has a raspy, sultry voice for podcast and her questions are direct and intriguing. Apparently Ms. Millman have always done her homework before an interview. The episode with Erik Spiekermann is my favorite so far even though the German typographer uses quite a bit of flowery language. Eventually I’ll get to all of the episodes on “Design Matters,” but I am going through all the names that I am familiar with. Each piece runs about half an hour to 40 minutes with no sponsor, which is a nice, uninterrupted listening experience. Podcasting is no easy task and I completely understand that sponsors help paid for the hard work, but they do get a bit annoying, especially when an episode has three sponsors.

“Unfinished Business” is a new podcast (only three episodes so far) on the business side of design. I really appreciate the honesty Andy and Anna shared on how they price their works. They help me to rethink about own business practice, which, I must admit, I am not very good at. The good thing is that it’s never too late to learn. Right now I don’t rely on freelance as my main source of income; therefore, I still have the luxury of picking and choosing the clients I would like to work with. Mad kudos to Andy and Anna.