Earlier in Web Design Week we saw how a simple layout can be mixed and matched with different backgrounds, patterns and photos, today we’re going to take that one step further. We’re going to completely change the look of a website by changing not just the background, but the overall style of the design.

We’ll begin with the Grungy Paper Texture Site we created in a past tutorial, then we’ll change the design to look minimal, metallic, abstract, and web2! And after that we’ll talk about the process of learning a library of web design styles. So let’s get started…

Style 1 – Grungy / Textured (Original)

So as you recall from our original tutorial the site design looks like this:

It’s a grungy looking, textured design based on a simple, solid, underlying layout. What we’re going to do is take that underlying layout and treat it like a coathanger, swapping different styles in and looking at why each look works.

Some Characteristics of a Grungy / Paper Look

In every style there is plenty of variation, but here are a few hallmarks of a grungy sort of look:

1. Textured Backgrounds
2. Skewed and Off Placement Elements
3. Distressed Typography
4. Hand-Drawn or Collaged Design Elements

Some great examples of Grunge design:

• 

  Adventure Trekking

  A relatively clean design married with some grungy elements – paper, textures.

  Visit Site

• 

  Team Green

  Off placement text, collaged elements and textures.

  Visit Site

• 

  WeFunction

  A good example of a grungy look put to ordered use in a blog structure.

  Visit Site

• 

  30 Examples of Grunge in Web Design

  Plenty More Examples of all things grungy!

  Visit Site

Good Articles on Grunge Design

1. The Secrets of Grunge Design
2. Ultimate Resource for Grunge Design
3. Hand-Drawn Styles in Web Design

Style 2 – A More Minimal Look

Our first design step is to pare back our look completely and get rid of anything that isn’t essential. We want to do this so that we have a starting point for the other designs, but along the way we’ll be creating a sort of minimal look.

These are the steps to take:

1. Remove any background layers, leaving only a straight white background.
2. Swap our grungy separator element for a simple 1px grey line
3. Get rid of hand drawn elements, the watermark, the turned paper corner in the top right
4. Remove all colour by desaturating elements and replacing them with black and grey versions
5. Swap our fonts out for plain Arial for the body copy and Helvetica for the titles

Here is our minimal version:

Of all the looks we’re going to do today, this is the least suited to this layout – in particular to the tabbed area. Still it’s an OK approximation…

Some Characteristics of a Clean, Minimal Look

In every style there is plenty of variation, but here are a few hallmarks of a minimal sort of look:

1. Lots of Space

2. Simple, clean (and often big) typography
3. Precise Alignment
4. Great Photography (I couldn’t really show this in this particular design)

Some Great Examples of Minimal Design:

• 

  Marken Personal

  Really Minimal with a Colour Scheme

  Visit Site

• 

  DigitalMash

  Minimal typography and clean lines mixed with a dash of bold photography/design elements

  Visit Site

• 

  Addition

  Minimal meets Flash – and check out the portfolio of work which includes lots more examples of minimal designs.

  Visit Site

• 

  25 Beautifully Minimal Designs

  Plenty more minimal design to check out

  Visit Site

Good Articles on Minimal Design

1. Designing with a Grid-Based Approach
2. Excellent Examples of Web Typography

Style 3 – Metallic Look

Taking the minimal look we just created, we can now add some style back in. This time we want to make a metallic sort of look. For that we need some light greys, and these look especially awesome on a dark background.

These are the steps to take:

1. Switch the background to a darker background – here I’ve got three panels, a dark, a lighter, then a darker for the footer
2. Change the tabbed area to a linear light grey to slightly darker grey gradient. Then on top of that we give it a radial gradient shine in the top left.
3. Change our fonts to an elegant, simple typeface – I’ve used Gotham Light – and give it a layer style (see below)
4. Change our separator elements to 2px bevels (see below)
5. Switch the View Projects arrows to be more like embedded elements, using a shadow behind the work sample to give it a three dimensional illusion.

Here is our metallic version:

And here’s some notes:

Some Characteristics of a Metallic Look

In every style there is plenty of variation, but here are a few hallmarks of a metallic sort of look:

1. Subtle Metallic Gradients
2. Embedded Elements
3. A "Physical" Look (Bevels, Shadows etc)

Some Great Examples of Minimal Design:

• 

  Apple

  Apple have been using a metallic top nav bar for some time now, with slight bevels on the text, an embedded Apple icon and a few other metallic effects.

  Visit Site

• 

  Lance Thackeray

  Lance is a master of Photoshop interface design, check out his portfolio of metallic interfaces

  Visit Site

• 

  Unblab

  A very slick looking metallic design.

  Visit Site

Good Articles on Metallic Effects

1. Create a Cool Brushed Metal Surface
2. Apple Leopard Text Effects

Style 4 – Abstract + Transparency

A look that’s always popular is to use an abstract background, some transparency and some super clean typography. So that’s we’re going to do next!

So, starting again from the minimal design:

1. Add some sort of abstract background
2. Change the tabbed area to be a transparent black, alter the background tabs to be a lighter version of transparency
3. Switch the fonts around to something modern and clean looking – I’ve used Chalet
4. Change the colouring to match the background

Here is our abstract version:

And here are some notes on the design:

Some Characteristics of an Abstract/Transparent Look

In every style there is plenty of variation, but here are a few hallmarks of a this look:

1. Elegant and simple typography
2. Large, visual Background Image
3. Semi-Transparent Content Areas

Some Great Examples of an Abstract / Transparent Design:

• 

  Noe Design

  Stunning smoky background look.

  Visit Site

• 

  Avalon Star

  Combines a brilliant grungy background with layers and sections to great effect

  Visit Site

Good Articles on Abstract/Transparency Looks

1. Create a Sleek, High-End Web Design from Scratch
2. Getting Creative with Transparency in Web Design

Style 5 – Web 2.0!

Our last style stop is in the cliche’d land of Web 2.0 design. I must admit I’m not even really sure what web2 design really is, but I’ve tried to make this version kind of friendly and approachable – which I guess is the main characteristic of the style.

Starting again with the minimal design:

1. Change the background to a gradient fading to white – always a popular look with web 2.0
2. Grab a friendly colour palette – I’ve used bright, light blue, yellow, dark brown/grey and a spot of red
3. Add some icons – I’ve used the free Milky Icon set a gorgeous set from IconEden

Here is our web 2.0 version:

And here are some notes!

Some Characteristics of a Web 2.0 Look

In every style there is plenty of variation, but here are a few hallmarks of a web 2.0 sort of look:

1. Big, Simple and Friendly
2. Use of Illustration or Icons
3. Bright Colour Palette

Some Great Examples of Web 2.0 Design:

• 

  37Signals

  For me these guys really started a lot of what I associate with Web 2.0

  Visit Site

• 

  Cork’d

  I love that little guy! An ace design by SimpleBits.

  Visit Site

• 

  Blinksale

  A super bright gradient makes this website.

  Visit Site

Good Articles on Web 2.0 Design

1. Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided
2. 99 Resources for Web 2.0 Design

Five Looks, One Layout – What This is Meant to Show

So here they all are, you can click the image below to see them at full size. Also if you are a Plus Member, you can grab all five PSD files from the Plus area.

So let’s be honest, the five layouts aren’t necessarily particularly good examples of their respective styles. My aim rather in this tutorial is to show you how you can give a design a certain look or style by following certain visual cues. You should be able to see that you can dress the same layout in different ways.

To really produce a great example of a certain design style, you would probably change your layout more specifically to suit that style. And of course they’d all need a lot more time than I had :-) Still I hope this swapping of styles illustrates how you can start to look at web designs in order to learn different design styles.

Learning a Library of Web Design Styles

In our previous article – 8 Ideas, Techniques and Tricks for your Web Design Toolkit, I mentioned that it’s a good idea to have a library of styles to draw on.

When you’re drawing a blank when starting a new project, it can sometimes be good just to fall back on a predefined stylistic choice and then let that guide you. Inevitably you’ll wind up with something totally different to anything you’ve designed before, and it’ll at least help get you started. But be very wary of using the wrong style just because it looks cool, and not because it is appropriate for the client / message / content. The only antidote to doing this is to know and have a lot of different design styles.

In this article we’ve briefly looked at five looks or styles, and there are millions of styles, substyles, combinations, adaptations and looks that just defy style all together.

Visual Learning

The only real way to learn design styles is by looking at them. Now there is looking and then there is looking! A regular person will usually look at a website, poster or some other design and just see the content, the message and maybe the feel of the design. As a designer you need to look at everything in an analytical way, look to see why a design has a certain feel, what message the design itself is giving, what fonts have been used, what visual elements and techniques the designer has used, how it’s been combined and how it’s been arranged.

You should always be looking at design – not just online, but everywhere – because design styles are in no way limited to websites. Posters, advertisements, television credits, flyers and anywhere there is design, there is an opportunity to learn.

Styles at Your Fingertips, but Expressed in Your Own Voice

The more look and learn, the more you will have at your command. When you sit down to design a new project, you’ll be able to pull up new visual ideas even when faced with a blank canvas. When you’re given design materials or brands, things like typefaces, logos and messages will trigger stylistic choices like clues to a mystery.

When you do make use of styles you’ve seen before, you should always strive to let your own design voice be heard. Give it your own spin, you’re own particular mix or look, so that your design voice is heard. And always, always, make sure you are applying design that suits and enhances the message – don’t fall into the trap of only thinking of the aesthetic.

Remember form follows function. The style and aesthetic choices you make are there to help the website fulfil its function.