As the relaunch of this site has been receiving positive responses, I thought it might be useful to discuss its design. This will have the secondary goal of indirectly informing my students; my fulltime 1st year classes have a design project coming up, and I lack the opportunity to discuss aesthetics in my (mostly technical) courses.
The redesign of this blog had several goals: not only was a visual refresh long overdue, but the site’s functionality desperately needed improvement. Using the blog as a reference in class, I was aware of the ways in which people interacted and sometimes struggled with the site. I needed a design that was familiar enough to long-term users so as to not completely alienate them, which implied an evolutionary advancement, rather than a revolutionary change.
Design Principles
If the new design had an aesthetic statement, it would be Dieter Ram’s famous dictum “less is more”. I wanted to present a user interface that was clean, uncluttered, consistent, responsive, and easy to use. This site is heavy on content; graphical elements are additions to the design, not features. At the same time, human beings are predominantly visual; I needed a way of attracting the user’s eye and then keep their attention with informative content laid out in a strong, compelling manner.
A useful way of checking a page’s balance is to simply remove the graphics; if the site still holds up, it’s a good indication that you’re neither too content-heavy nor graphically over-the-top. The central rule on the web is that users are attracted by good design but stick around for content.
Keeping to these principles made many of my design decisions for me: I created simple, monochromatic icons using my semantic CSS sprites technique, with activation or interest indicated by a subtle deepening of luminosity. Color is used sparingly through the site, concentrated in the headings and banner images of each article (and thus leading the eye inwards to content).
Typography
The previous version of the site used a serif font; in the remake, I decided to use Erik Spiekermann’s FF Meta Web Pro for body text. I chose Anonymous Pro by Mark Simonsen for code samples, and very occasionally use Blue Highway by Ray Larabie as headline test in article headers, due to the fact that text in that section is often manipulated with a filter to demonstrate the associated lesson, and I needed something thick and solid that would withstand distortion. The relative lightness of FF Meta and Anonymous, combined with a generous line-height, kept the site “breathing”. I measured all typography in rems.
Sources of inspiration
The work of German designers, particularly Dieter Ram and Erik Spiekermann, was fundamental to the blog’s design, perhaps most directly the site Spikermann launched with Carolino de Bartolo to promote their new book, Explorations In Typography. The Tumblr effector theme by Carlo Franco was highly influential; the archive feature of Tumblr also inspired this site's archive page. Also: The Genius of Design, a wonderful BBC documentary, together with The Age of Persuasion and Under The Influence, excellent CBC radio shows on marketing.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
