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

fresh styles for web designers

fresh styles coverbuy 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]


37s A. HTMinimaLism School:



617 B. Mondrian Poster School:

  • source inspiration: Piet Mondrian / TV Test Pattern Color Bars
  • techniques: color blocks without borders. holistic browser window design and negative space. navigation integrated into overall page design. intentional color palette.
  • commercial examples: vitra design museum (original splash | original site 1 | original site 2)



tpc C. Grid-Based Icon School:

  • source inspiration: Edward Tufte, Mies Van Der Rohe, Josef Müller-Brockmann, 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 example: Prototype 19, weworkforthem (original interface, screenshot), mike cina (  1  |  2  )



k10k 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, db-db



6fs 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: silbato (screen shot), sueellen (screenshot)
  • commercial example: Nokian Tyres (screen shot)



fg 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
  • commercial example: gurl



e8 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



d-d 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: , dream7



df1 I. Drafting Table/ Transformer School:



ff J. 1950s Hello Kitty School:



III. BONUS STYLE


collage 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



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: 8.22.14