web 2.0

Thursday, April 29, 2010

Noupe

Noupe

Link to Noupe

Multi-Layered Design: Guidelines and Examples

Posted: 28 Apr 2010 05:54 AM PDT

Advertisement in Multi-Layered Design: Guidelines and Examples
 in Multi-Layered Design: Guidelines and Examples  in Multi-Layered Design: Guidelines and Examples  in Multi-Layered Design: Guidelines and Examples

By Cameron Chapman

There have been tons of posts about minimalist and simple web design. It’s something every designer should consider and study, as minimalist and simple design principles are important in a lot of website designs. But there’s been such a focus on clean and minimalist design in recent years that many designers shy away from more visually-complex designs.

That’s a mistake. Just as there’s a time and place for minimalist designs, there’s a time and place for more complicated designs, too. Below are some guidelines to help you create more multi-layered website designs. They tend to require more graphics-savvy than minimalist sites, as well as a bit more advance planning. But they’re really no more difficult to create than a minimalist site (and in many cases are more forgiving).

Guidelines for Creating Multi-Layered Designs

We’ve already established that multi-layered designs are more visually-complex than minimalist sites. But that doesn’t tell us a whole lot about how to create them. They can be intimidating to many designers, especially those who started out with minimalist designs.

After all, there seem to be so many places you can go wrong with this kind of design.

Use Some Kind of Theme

The best designs like this have an overall theme or aesthetic they follow. They’re not just throwing together random elements. Sometimes this is something obvious like a particular type of image. Other times it’s a bit more subtle, such as grunge elements throughout.

Teamfannypack in Multi-Layered Design: Guidelines and Examples

A site with a very obvious grunge/antique theme throughout.

In either case, a common theme or element helps tie everything in the site’s design together and make it visually cohesive. If you just start throwing all sorts of stuff into the design, you’ll probably just end up with a mess.

Take Something Away

Coco Chanel recommended that when a woman got dressed in the morning that she remove one accessory before leaving the house. The idea behind this is that we often tend of overdo things and by removing something we give more importance to the things that remain.

Anna-pawelczyk in Multi-Layered Design: Guidelines and Examples

A great example of a site with lots of visual interest that doesn’t feel cluttered at all.

The same idea can be applied to your website designs. When you think you’ve finished this kind of design, see if there’s something you can take away. There almost always will be, and your design will likely be stronger because of it. This is related to the minimalist principle of perfecting a site when nothing else can be taken away (just in a much less extreme version).

Remember, the goal here is to create a design that has a lot of visual interest, not to create a design that’s cluttered and messy.

Don’t Overlook the Details

Details are what generally set excellent versions of this design aesthetic apart from the less-than-stellar examples. Pay attention to areas where an extra detail can really make your design stand out. Things like typography, narrow borders, etc. are all areas where small details can make a big impact.

Acuwellsolutions in Multi-Layered Design: Guidelines and Examples

A great example of how small details add a lot of interest and a much more polished and put-together look.

Examples

Here are thirty great examples of sites that are much more visually-complex than the current surge of minimalist sites that are flooding the Internet.

Harmony Republic

Harmonyrepublic in Multi-Layered Design: Guidelines and Examples

Margarita Shack

Margaritashack in Multi-Layered Design: Guidelines and Examples

Jeremy Bayone

Jbayone in Multi-Layered Design: Guidelines and Examples

MoonBeam Illustrations

Moonbeamillustrations in Multi-Layered Design: Guidelines and Examples

Eastpoint

Eastpoint in Multi-Layered Design: Guidelines and Examples

Vegas Uncork’d

Vegasuncorkd in Multi-Layered Design: Guidelines and Examples

Pixlogix

Pixlogix in Multi-Layered Design: Guidelines and Examples

Kidd81.com

Kidd81 in Multi-Layered Design: Guidelines and Examples

The Web Design Blog

Thewebdesignblog in Multi-Layered Design: Guidelines and Examples

Piipe

Piipeonline in Multi-Layered Design: Guidelines and Examples

KevAdamson.com

Kevadamson in Multi-Layered Design: Guidelines and Examples

Website Bakery

Websitebakery in Multi-Layered Design: Guidelines and Examples

Al Brown

Albrown in Multi-Layered Design: Guidelines and Examples

SieteDeFebrero

Sietedefebrero in Multi-Layered Design: Guidelines and Examples

Brown Blog Films

Brownblogfilms in Multi-Layered Design: Guidelines and Examples

RCIUK

Rciuk in Multi-Layered Design: Guidelines and Examples

The Bright Agency

Thebrightagency in Multi-Layered Design: Guidelines and Examples

Cool Tshirt Design

Cooltshirtdesign in Multi-Layered Design: Guidelines and Examples

Circa The Prince

Circatheprince in Multi-Layered Design: Guidelines and Examples

Mplusz

Mplusz in Multi-Layered Design: Guidelines and Examples

Electricurrent

Electricurrent in Multi-Layered Design: Guidelines and Examples

Studio7Designs

Studio7designs in Multi-Layered Design: Guidelines and Examples

Bidsketch

Bidsketch in Multi-Layered Design: Guidelines and Examples

Intuitive Designs

Intuitivedesigns in Multi-Layered Design: Guidelines and Examples

Varmland of Scandinavia

Varmlandofscandinavia in Multi-Layered Design: Guidelines and Examples

Panelfly

Panelfly in Multi-Layered Design: Guidelines and Examples

Synch Media

Synchmedia in Multi-Layered Design: Guidelines and Examples

Sky’s Guide Service

Skysguideservice in Multi-Layered Design: Guidelines and Examples

Digiti

Digiti in Multi-Layered Design: Guidelines and Examples

Larva Labs

Larvalabs in Multi-Layered Design: Guidelines and Examples

0 comments:

Post a Comment

Apture