Visual Hierarchy: Machine Culture Website
Chimero, F. (2012). The Shape of Design. “Delight + Accommodation.”
Golombisky, K. & Hagen, R. White Space is Not Your Enemy: A Beginner’s Guide to Communicating Visually through Graphic, Web & Multimedia Design (2nd edition). New York: Focal Press.
Kadavy, D. (2011). Design for hackers: Reverse-engineering beauty. Ch 5 “Understanding proportion”; Ch 7 “Establishing a visual hierarchy”
Key Concepts
Delight, accomodation, empathy, surprise, clarity, visual hierarchy
Quotes
“The sign provides a great example of how to approach a design problem to create delight, and highlights what makes a design delightful: it empathizes with the audience and their circumstances, surprises in its delivery, and achieves a clarity in what it is trying to say or accomplish. A delightful experience is the overlap of these three things” (Chimero 104).
“ There is no way that you could accurately rank these pieces of information from most important to least important and have it apply to every situation. Establishing a visual hierarchy is much more expressive and less scientific than this. Pieces of information have personalities and relationships with one another” (Kadavy Ch. 7).
Analysis
The Machine Culture collective comprises a network of Chicago comedians, actors, musicians, writers and artists offering a platform to publish their work to a larger audience. Known mostly for their podcasts, the artists’ works are collected on their website, machineculture.com, which will be the subject for my analysis of visual hierarchy in design.
Starting with the opening page, information in the header is emphasized using colored text over a background image. The site logo is further separated from the other items in the header by a hazy border that makes it appear to fade into the backdrop. In the center of the header a large blue box contains the text “TWERCULES! TWERCULES! TWERCULES!” Both the capitalized text and the blue box visually draw the viewer to the object, which acts as a button that links to the most recent featured podcast.
Moving down the page, a large (50px) sans-serif font acts as a header for the “Shows” section. The section is arranged in two columns with a white space margin in between to distinguish between the two. Each show link begins with the show title in smaller font than the section header (20px) and a thumbnail graphic.
Beneath that are three more sections: a reiteration of the show title and date, an episode title and finally a description of the episode. These three items are delineated by font size and weight. Obviously, the reiteration of the title and the post date are the least important and are visually subdued by being set in a 13px font and a gray color (as opposed to the black or blue text found elsewhere on the page). Next, the episode title is set in bold typeface to establish it as the focal point of each show link, and in the expected header-body format, the description of the episode underneath is the same size, but in regular typeface instead of bold.
Question
The Machine Culture page is fairly minimal and makes ample use of size, color and text weight to establish a visual hierarchy. Does the way the information is presented seem to accommodate its audience in the ways Chimero suggests (empathy, surpise, clarity)? If so, how? If not, what design decisions could be made to make the site more acommodating or surprising?
