Fresh Styles for Web Designers: Eye Candy from the Underground, by Curt Cloninger. New Riders, 2001, 211pp., US$35, CDN$52.95
Originally an online article, Curt Cloninger's new book describes ten "schools" of creative web design, gives examples and technical tips, and then explores the commercial viability of each style. Cloninger decries the current state of commercial web design, blaming blind obedience to usability gurus, copycatting, and dependence on the ill-fitting conventions of print design. His book is an attempt to jump start the creative process for designers who feel constrained by the design limitations of current commercial sites.
Here are the ten styles:
This style, whose originator was Aurelia Harvey, uses real-world textures and images and mostly dark backgrounds to convey a sense of the irregularity and even mystery of the experience awaiting the web surfer. Commercial applications of this style have mostly been limited to the creative arts. Both of Cloninger's examples are sites dealing with the music industry.
Almost the complete opposite of the Gothic Organic style, this style is all about precision and the artificiality of machine-based design. Cloninger showcases the work of Mike Cina and the Test Pilot Collective, and their frequent use of what he calls "chartjunk." By using "high-tech" interface elements in an ironic way, designers of this school still manage to produce legible, usable sites, and so the commercial potential for this style is almost limitless.
Using the design of Raygun magazine's founder David Carson as a springboard, this style is a reaction to the precision and orderliness of digital printing methods. Using mostly distressed fonts and antigrid layouts, web practitioners like Miika Saksi bring the lo-fi aesthetic online. So far, commercial applications have only included sites aimed at the "extreme sports" crowd, such as snowboarders and consumers of sports drinks and footwear.
Successful web design firms P2 and Funny Garbage have a long list of commercial clients, so Cloninger opines that they've "earned the right to play" by deliberately filling their own sites with asymmetrical fonts and scanned sketches. The Paper Bag style is whimsical and playful and uses elements for their kitsch value rather than for any formal reason. The use of this style in any commercial web sites has been limited to "vintage" products, such as Vintage Levi's, but Cloninger sees its potential as a style that would appeal to children.
Cool, uncluttered, and liberal in its use of color, the Mondrian Poster style is both visually appealing and easy to navigate. Its elegance is particularly well-suited to sites that have a fairly small amount of content to communicate on each page. Although this style has almost unlimited commercial potential, Cloninger points out that many online museums have chosen this style to showcase art objects or design examples.
It's fitting that this is the only style for which Cloninger fails to find a commercial example. Decidedly un-user-friendly, even disorienting, this style mocks the conventions of usability and even of our relationship with technology. A "punk" designer might program a page to throw up an error message that looks like it's from the user's computer, or design navigation that sends the hapless web surfer off to a seemingly random page. This type of "design," if it can be called that, is more a political act than an aesthetic statement.
Drawing its inspiration from early videogame design, this style places constraints on itself, using pixelated graphics and fonts as well as extensive compartmentalization to fit the maximum amount of information into the allotted space. Far from being spare, this style usually crams lots of charming lo-res graphics as well as text into each page. Some experimental sites make the browser window look more like a game screen than a sheet of paper. Perhaps the best use of this style is at the Kaliber10000 site, although commercial sites such as CNN have also partially adopted it.
In many ways similar to the Mondrian Poster style, this style seeks to convey spare elegant design through the use of HTML and CSS alone. Eschewing fancy graphic elements, designers of this school present information in easy to read, easy to navigate pages. These designers, although partially under the influence of usability gurus such as Jakob Nielsen, are not content to simply make fast-loading but ugly pages. They seek to reduce what they see as needless clutter and eye candy, and to fashion beautifully spare pages, focussing on the most pleasing presentation of text. It's not hard to believe that most of the commercial examples of this style, including 37signals.com and Apple's site, were designed by people who know both their fontography and their code.
The hallmarks of this style are the use of sharp-edged 3D shapes ("shards") and illegible text to achieve a look that might be lifted, in Cloninger's words, from the pages of an "interactive instruction manual for a futuristic interplanetary fighter craft." Sites designed in this style also often have non-intuitive navigation, reinforcing the often aggressive attitude projected by the other design elements. It is possible to use this style commercially, especially for appealing to adventurous consumers with edgy, futuristic products. Examples include the sites for Mercury vehicles and MTV2 in the UK.
A mish-mash of styles, combining "cuddly Japanese comics, Swiss marionettes, animated woodmation characters from those bizarre TV Christmas specials...and 1950s chrome metal campers," this style was created almost single-handedly by San Francisco designer Amy Franceschini. It is characterized by the use of 3D bubble characters, pastel palettes, and fonts that recall what people in the 1950s thought the future would look like. Although both this style and the Drafting Table/Transformer style are marked by the use of 3D models, the 1950s Hello Kitty style is much less aggressive, dare I say feminine, with cuddly characters drawing the user in rather than intimidating them. This style has the potential to be applied to a fairly wide range of commercial projects, and Franceschini's company, Future Farmers, has a client list that includes such heavyweights as Adobe, Lucasfilm, The New York Times, and Wired magazine.
Though I thoroughly enjoyed the book, I can't escape the feeling that it is a little like one of those SNL sketches that has been expanded into a movie. There is so much white space in the layout that one feels that there was a target "page count" demanded by the publisher, and the poor author may have felt like he was back in high school playing with his margins and font sizes to reach the magic number of pages.
Additionally, it is a little bit ironic that Cloninger bemoans the attitude that the web is being treated too much like print when his own book feels a lot like a web site printed out. Especially jarring are the pixelated JPEG graphics that are used throughout as illustrations. Surely the publisher can still source hi-res pictures for inclusion in the book, even a book about web design. I suspect that Mr. Cloninger had to bear the task of sourcing his own graphics and emailing them to his publisher along with his text. Some of these graphics don't benefit from being enlarged to fill half the page, which in addition to looking blocky further reinforce the feeling that the book has been "padded." The screen shots of actual web sites, however, look fine, and are just the right size.
These are minor quibbles overall. The book is an especially useful one, and the same material online wouldn't be half as useful. Cloninger has done what so few have dared to do: he has begun to organize the "art" of the web into categories. As such, he will provoke disagreement and discussion, but the act of categorization itself is a natural one and helps us to wade through the complexities of design. As such, "Fresh Styles for Web Designers" is a helpful roadmap through the current state of site design. At the current rate of redesign churn, Cloninger could make this an annual. His categories will soon break, and I get the feeling that instead of annoying him, this will reinforce his overarching themes, that web design conventions are for stretching, and that a designer's passion is her greatest asset.