7 Surefire Web Design Styles that Work

If you are a web designer, these 7 design movements haunt you. It‘s a love/hate relationship. You think to yourself, “I want to create something that‘s never been done before,” but you feel spellbound because you know “what works.” Unfortunately, you also know that “what works” has been done a million times before. No matter how hard you and other creative-types strive to do something new, history has created a set of “classic” styles that basically remain the same, save some minor updating.

Take the world of fashion for example. Fashion is in one minute and out the next because we get bored of looking at the same things day after day. The same pattern will occur in web design. However, just as there are mainstays of good fashion, such as the little back dress, there are also mainstays of good web design. Every site may not fit into each of the categories exactly and some may be combinations of styles, but you‘ll get the idea.

1. Collagism – Make it un-perfect.

The inspiration behind the collage is to create something new out of old pieces. The collage style in web design consists of elements such as paper, tape and grungy or dirty textures. Drips, sprays, splatters and coffee stains are also hallmarks of the collage. This style has a sense of tangibility and is a counterpoint to the geometrically clean perfection that computers naturally exude. You’ve seen this style on everything from snowboarding sites, church sites and even network sites. The trick to this style is to break outside of the grid. Use background images to make things look ‘askew.’ Even though your text may have to be straight, you can trick the eye with background images that are not straight. This creates a sense of movement with organization.

Artists who inspire: USSR Posters on Flickr, Max Ernst, Peter Blake and Hannah Hoch

1.1 Collagist Art Example:

Pablo Picasso

1.2 Collagist Web Examples:

DotComedy

KC Revolution

Knoxville.org

2. Ornamentalism – Interior decorating.

Ornamental design can be similar to the collage, but the essence of the ‘fleur de lis’ and Art Nouveau ornamentation separate this style from the rest. It is often seen on the web in background patterns or framing elements. Ornamental design is inspired by architecture, where ornaments are applied as decorative accents from stone, wood, precious metals or plaster. The easiest way to incorporate this movement is through a monochromatic damask background pattern which is subtle yet dramatic.

Artists who inspire: Gustav Klimt, Alfons Mucha, Mikhail Eisenstein and Hector Guimard

2.1 Ornamentalism Art Example:

Alponse Mucha

2.2 Ornamentalism Web Examples:

Dara's Garden

Resist Today

.cubeclub-chemnitz.de/

3. Glossism – Reflective, isn’t it?

This is the most popular style on the web today. You’ve seen it everywhere; it best embodies the phrase ‘Web 2.0’ when referring to design. It includes gradients with jewel-tone colors that are so shiny you just want to lick your monitor. Reflections, gradients and glossy buttons are fundamental for this web design movement. This style is here to stay even though a lot of people are already sick of looking at it. It creates a sense of cleanliness and easily guides the user through an interface that also include bold jelly colors, sun burst shapes, badges, rounded corners and talk bubbles.

3.1 Glossism Art Example:

Dale Chihuly

3.2 Glossism Web Examples:

Friends Eat

Bacardi DJ

Big File Box

koko3

4. Wordism – Words Become Art.

This movement is inspired heavily by the print world and is predominantly seen as the digital counterpart of traditional magazines in e-zines. Its characteristics use an overall grid-like layout and powerful typography in lieu of decorations or design elements. The typography itself becomes a visual stimulant, making it almost unnecessary to add other photographs, illustrations or decoration. Inspiration for Wordism can be found in the poster artists of WWI and WWII, who used illustrations combined with bold typography. Modern graffiti art could relate to this movement as well.

Artists that inspire: Robert Indiana, Adolphe Muron Cassandre, and International Posters

4.1 Wordism Art Example:

World War II Poster Art

4.2 Wordism Web Examples:

Presidentielles

http://www.jrvelasco.com/

Ux Magazine

People

5. Futurism — Think Like a Trekkie.

This was one of the first design movements on the web, but it’s not often used today. In the future I could see this making a comeback — not in exactly the same way but with a new twist. This style is translated through geometric shapes such as computer circuits, motherboards and mechanical gears. In essence, this movement is a reflection of technology and what we might envision the future to be like.

Artists who inspire:deviantArt , Joe Pogan and Chris Foss

5.1 Futurism Art Example:

Donald Davis

5.2 Futurism Web Examples:

Xmen

WA007

Michelin Man /Forward

6. Minimalism – Less is More.

The minimalist movement was a response to the abuse our senses took from early web pages when busy backgrounds, blink tags and rainbow colored text were the norm. “Minimalism” is a term coined by the art and literature circles to describe a movement toward extreme simplification of form and color. Minimalism, as it relates to web design, focuses on usability, aesthetics and letting the content be the star. This kind of design doesn’t have to be boring. In fact, proper use of white space gives a site a level of sophistication that is often missing from sites that have every little space crammed with something.

Artists who inspire: Artcyclopedia, Frank Stella and Ellsworth Kelly

6.1 Minimalism Art Example:

LG Williams

6.2 Minimalism Web Examples:

The Big Noob

RikCat

Dotkraft

Store.Vorsat

7. Retroism — A Blast from the Past.

Retro design can draw from anything in the past, such as the illustrative look of the 50’s, the flower power of the 60’s, disco of the 70’s or even the cool pop art of the 80’s. Mainstream styles and graphics of these eras were restricted by the limitations of the technology of the day. Retroism takes advantage of the iconic looks that these limitations created. The VW Beetle is the perfect example — compare the 1961 Beetle to the new convertible of the 2000’s. When using this style it’s a good idea not to over do it. There can be too much of a good thing.

Artists who inspire: iso50, Crazy Labels and Bastard Graphics

7.1 Retroism design Example:

VW Beetle 1961

VW New Beetle

7.2 Retroism Web Examples:

Elton Tom

Sottocosto Ska

Lana Landis

Fake French

Design may evolve, but the basics remain the same.

The world collectively shifts its visual thinking of what’s considered “in.” You see this collective thinking in everything from the colors we use to paint our walls to the shapes of fashion that adorn our bodies. Even though things are always evolving, basic movements will remain the same. So the next time you’re looking for inspiration, just go back to the basics and add your own twist. The 7 design-isms listed above are not the only design movements of the web; many have yet to be defined or even discovered. These design-isms may very well be the little black dress of web design — everyone uses them because they work — but with a little creativity it’s still possible to make them your own.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Comments

34 comments on “7 Surefire Web Design Styles that Work

  1. Pingback: 又一个 WordPress 博客 » Blog Archive » The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007

  2. Pingback: 80個必備網頁設計網站, Blog文章, 免費資源, 網站技巧教學 | HKWebDesignBlog.com

  3. I like best Wordism and Minimalism as are the best for getting the message across with "no headaches"… best for visitors get to what they are looking for quickly also…

    Cheers for the list,
    Alex

  4. Pingback: Website Layouts « STWebDesigns Blog

  5. Pingback: Webデザイン、七つのism | Oddwit

  6. Pingback: 7 Surefire Web Design Styles that Work | Chicago web designer

  7. Pingback: Penis Enlargement

  8. Pingback: natural herbs for male enhancement

  9. Pingback: natural male enhancement before and after