Apr 10, 2011

MCAD Design Week 1: Examples of Good and Bad Design

1. Road Signs
a. Good. In these standard road signs, the meaning is clear. Something is happening which affects the road. The road is represented by the solid black line. In the first merge example, there are two before and one after. Clearly action must be taken to merge.


b. Bad. In this version of a merge sign the road is now indicated by its boundaries, and the insinuation is that the flow inside is constricted. But using the same metaphor as the good signs will lead your eyes to believe the model where some of the roads get just a little closer together, but no worry, they don't actually meet. The no passing zone sign is redundant in all situations since the same message is already indicated with solid or dashed yellow paint lines on the road.


2. Web Sites - respecting the visible area
a. Bad. These are two websites don't respect vertical or horizontal screen real estate. In the first, x10.com's bizarre home page delivers a whole web site of information in a single bottomless HTML stream rather than navigating to other pages for different topics. Www.anthem.com is another bad site but it takes the horizontal approach to unlimited screen real-estate. It's a common mistake by designers/developers blessed with dual large monitors to think their customers want or can afford to lose 100s of pixels of screen width for each website category color band. The most critical link in the website for a customer, the login, is far away to the right, probably offscreen on an Aspire One.


b. Good. I like BBC's sites for their clean look and feel. Radio1 has a slit-screen photograph feel that gives a techy edgy feel, a symbol which carries over as an animation to their player/streaming component. The colors are a little flamboyant but they harmonize. Catering to the customer, the dj/show search link is ready available at the upper left.


3. Web sites - consistency, fonts
a. Good. I saw this font on a student organization's mural on the Washington Bridge: Innovative Engineers. To me, that font is pure tech. It's inspirational like a Science/Tech/Eng/Math STEM counterpart to those groovy 60s music poster fonts.



b. Bad. CIA Factbook:The CIA releases a handy wealth of information about countries in the world. This is a great site for consise information - determining population, currency, politics, religion, etc. I like the site information, and the style within the "c-clamp" area.
There is not a consistent style for the site. There are over 5 fonts used on this page alone. To the left and right, an attempt is made to make the sidebars 3-dimensional. But this falls short as the shadow changes from the left to the right side.
Is usability part of graphic design? If so this is also an issue I (currently) have:
In the last couple years, they decided to change the layout of the page so that when you first come in, all the information is hidden. I call this the IMDB approach. IT COULD be easy to scroll, search using your browser for information on the page, but because it starts out as hidden (unexpanded) you can't see it. If you have a slow enough/wireless connection you can even see it for a second before they use script to hide it.