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.

Comments

  • http://www.tankes.com.tr trafik işaretleri

    Hmm. Avesome works ;)

  • http://www.hbdg.com henriksen butler

    Great works I like the designs.. Especially the women, it's very artful.

  • http://www.hbdg.com henriksen butler

    Great works I like the designs.. Especially the women, it's very artful.

  • http://www.hdbflatsforsale.com HDB Singapore

    He he, I loved the retro designs. Especially a fan of the VW beetle.

  • ironmal

    You gave me several great ideas to play with on my next PhotoShop session.

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    Some nice examples, I do like the minimal look! A nice easy design style to teach.

  • http://www.mgswebdesign.com/ MGS Web Design Ireland

    Very nice round up of the type of website designs that are out there today. Some really cool ones there.Tom

  • http://www.mgswebdesign.com/ MGS Web Design Ireland

    Very nice round up of the type of website designs that are out there today. Some really cool ones there.

    Tom

  • http://freewebsitedesign.co.nz Free Web Design

    Oh I absolutely love the 'Glossism' examples. I am bookmarking this page for inspiration for sure!

  • http://freewebsitedesign.co.nz Free Web Design

    Oh I absolutely love the 'Glossism' examples. I am bookmarking this page for inspiration for sure!

  • http://www.jankoatwarpspeed.com Janko

    Interesting and refreshing point of view. Thumbs up!

  • http://kixvix.blogspot.com kixvix

    Two years have passed since this article was posted and yes.. these designs still work! :)

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

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

  • http://www.websondesign.com Web Design Studio

    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

  • http://www.nextgen-design.co.uk web design leeds

    some really nice designs.. i do like the simple minimilistic ones!

  • Pingback: Website Layouts « STWebDesigns Blog

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

  • http://www.santhos.nl Website Bouwer

    Wow, very nice article with great examples! You did a good job, thanks!

  • http://www.askalemi.de sohbet

    thanks admin good post

  • http://www.insidethewebb.com/ Jake Rocheleau

    Ran into your site from DZone, really inspirational collection of designs!

  • http://www.jsxtech.com Jaspal Singh

    Nice post, awesome examples. thanks for sharing the wonderful stuff.

  • http://www.himili.com/blog/ Nishad T R

    Inspiring….

  • Charlie Brown

    Nice work, for newcomers to the web design like me.

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

  • http://www.marctimes.com krilin

    art is a beautiful thing. also a refinement of art as something that ordinary ordinary. beautiful art and design ..

  • http://www.graphicdesigncollegesonline.com/ graphic design colleges online

    Minimalism is the way to go! Clean design, simple typography and lots of white space will always look great.

  • http://www.designzillas.com/ Johnny Hughes

    has anybody met this web designer..

  • http://www.idcreate.net Cheap Web Design Edinburgh

    very good article
    keep it going guys

  • http://www.sellingonlinemadesimple.com.au perth web design

    Very nice those design are the best and really attracts lots of clients.

  • http://www.topoftheburg.com Fredericksburg Web Design

    real and cool design.a good example for designer..

  • Pingback: Penis Enlargement

  • Pingback: natural herbs for male enhancement

  • Pingback: natural male enhancement before and after