Fresh Styles getting a bit stale? Try new & improved freshER styles! >>

• buy the book -->
• read some reviews: A * B * C * D
• read some chapters: HTMinimaLism [part1 | part2] * lo-fi grunge * gothic organic

I. INTRODUCTION

Problem: The look and feel of most U.S. corporate sites is very similar due to inbreeding. If they do it at Microsoft.com, that must be what a professional corporate site is supposed to look like, and then all sites look like Microsoft's site (or Amazon, or Ebay, or...)

Solution: Look elsewhere for design inspiration. Introduce some new web design ideas into the mix -- new blood for the design gene pool.

Where to look for fresh design ideas:
Experimental Home Pages/ Non-Print-Based Design firms: To them the web is not new media, it's THE media. They aren't looking to magazines for inspiration. They're looking to medical diagrams, early-80's software interfaces, grocery bags, cartoons, and the browser window itself.

 

II. TEN FRESH STYLES   [8/2001]

A. HTMinimaLism School:

• source inspiration: html code, Jakob Neilsen's brain
• techniques: CSS Font Control, Strong Reliance on Color for Meaning, Thin-Loading Gif Logos, HTML Text as Design, Negative Space, "Liquid" Layout
• home page/ design firm examples: 37signals manifesto, test pilot collective, coudal partners, speak up
• commercial examples: creative time, gettyone, miles aldridge, opsound

B. Mondrian Poster School:

• source inspiration: Piet Mondrian / TV Test Pattern Color Bars
• techniques: Holistic Browser Window Design, Navigation Integrated into Overall Page Design, Intentional Color Palette, Color Blocks without Borders, Negative Space
• home page/ design firm example: method
• commercial examples: vitra design museum, bauhaus archive, art21

C. Grid-Based Icon School:

• source inspiration: Edward Tufte, Mies Van Der Rohe, architectural blueprints, retro-electronic interfaces
• techniques: Geometric Shapes at 45-Degree-Angle Increments, Melding Photography with Grid-Based Layouts, Using Chartjunk as Design
• home page/ design firm examples: we work for them, Prototype 19
• commercial example: you work for them

D. SuperTiny SimCity School:

• source inspiration: Sim City, Commodore 64 computer games, Japanese candy wrappers
• techniques: Tiny Pixelated People, Buildings, and Objects; Pixelated Fonts; Extreme Compartmentalization
• home page/ design firm examples: kaliber 10000, flipflopflyin, fun fun fun, db-db
• commercial example: cnn.com chaos contest

E. Lo-Fi Grunge School:

• source inspiration: David Carson, Raygun Magazine, non-digital printing, smudges, blurs, interference
• techniques: Background/Foreground Gif Pairing, Scanlines, Brushes for Smudges, Dots and Dashes for Borders
• home page/ design firm example: non-stops

F. Paper Bag School:

• source inspiration: turn-of-the-century (1900) cartoons, paper bags
• techniques: Paper Bag Textures, Intentional Misalignment and Sloppy Boundaries, Judicious Color Usage (mostly duotone, color for emphasis), Nomadic Navigation Bar, Hand Lettering
• home page/ design firm examples: Funny Garbage, p2/output, NCC, stereomedia
• commercial example: gurl

G. Gothic Organic School:

• source inspiration: human body, organic real-world textures, Vaughan Oliver
• techniques: Analogesque Background Textures, Foreground Images with Irregular Borders, Transparent Animated Gifs, Intentional Exploitation of Vertical Scrolling
• home page/ design firm example: Entropy8Zuper
• commercial examples: new icon-school of denmark, Janet Jackson: The Velvet Rope

H. Pixelated Punk Rock School:

• source inspiration: chaos, irregular machine behavior, programming code, George Seraut, dadaism, punk
• techniques: Fake Malfunction; Rigged Navigation; Missing or Misleading Signposts; Perpetual Motion and Noise; Unorthodox Image Cropping, Enlargement, and Subject Matter; Rogue Multimedia; Big Old Ugly HTML Text
• home page/ design firm examples: titler, dream7
• commercial example: requiem for a dream

I. Drafting Table/ Transformer School:

• source inspiration: Zaha Hadid's architectural blueprints, technical manuals, 3D graffiti, transformer robot toys, bar codes, graph paper, fine print disclaimers
• techniques: 3D Modeling Software, Tiny Illegible Type, Single Bold Design in Semi-Negative Space, Spatial Navigation
• home page/ design firm examples: hyperprism, chapter3, modernStyle

J. 1950s Hello Kitty School:

• source inspiration: cute girl comics/ woodmation chirstmas specials/ 1950s' campers
• techniques: Tiny 3D Bubble People; Large 3D Text; Rounded, Organic Borders; Pastel Palettes; '50s Fonts/'50s Art
• home page/ design firm examples: Future Farmers, Atlas Magazine, glasgowland, Milky Elephant
• commercial example: Avant Card

III. BONUS STYLE

K. 1970s Dayglow Outline School:

• source inspiration: mid-70s Scott Baio spraypainted sunset t-shirts
• techniques: Illustrator reductionism, flash vector animation, bright colors, campiness
• home page/ design firm examples: rinzen, upso
• commercial example: collage foundation

IV. CONCLUSION

These styles are not cut and dry. Use them to greater or leser degrees; mix them; create your own styles. Each project will dictate its own direction. I just mean to add some extra tools to your web design toolbox.

It's useful to note that you create the context of your site. If your site works in and of itself, it will fly regardless of how it fits in with other sites. It doesn't have to match the rest of the corporate web, it just has to match itself.

Some take-aways: Avoid sterility. The best solution might not always be the standard solution. And finally, contrary to popular belief, beauty enhances usability.

Curt Cloninger
home | garden | archive

 
updated: 6.28.08