Designing Interfaces: Patterns for Effective Interaction Design

9.1. SAME CONTENT, DIFFERENT STYLES

To explore how styles evoke different visceral and emotional reactions, we can try applying different visual styles to identical content. The actual content isn't even that importantwe're looking for immediate, pre-rational reactions here, not the impressions gained from reading and interacting with the content.

The "CSS Zen Garden" web site (http://csszengarden.com) offers us exactly that situation. Invented as a showcase for CSS-based web design, this site provides a single HTML page to all participantseveryone gets the same body text, the same HTML tags, and the same lists of links. Participants then create unique CSS files to define new visual designs for the page, and contribute them to the site. Visitors can browse through all the contributed CSS designs. It's a delightful way to spend an hour or three, especially if you're teaching yourself about visual design and trying to understand what you do and do not like.

The following eight figures present a sample of these designs. In each case, the basic content is the same; only the design has changed. Take some time to observe each one. When you look at each design, what is your immediate, visceral reaction? What words come to mind that describe the page? Does it draw you in, repel you, make you nervous, or delight you?