Five Looks, One Layout: How to Develop a Library of Web Design Styles at Your Fingertips

Dec 9th in Interface by Collis

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...

PG

Author: Collis

Hello! I started Psdtuts+ because years ago reading Photoshop tutorials was how I got into design. You can find me on Twitter or on my blog theNetsetter.

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.

Part of Web Design Week

This week our sister site ThemeForest launched a whole new category of items to sell that are particularly relevant to PSDTUTS readers - namely Photoshop Templates. The new category means you can now design and sell Photoshop designs, as well as regular Web Templates and WordPress themes to earn a side or even full income. And on the flip side if you're coming up short on inspiration, you can get a kickstart by grabbing a PSD design from ThemeForest. So to give the new category the launch it deserves, all this week I'll be bringing you articles and tutorials on web design as part of our PSDTUTS Web Design Week.


Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. Oh WOW!!! That is amazing!!! Great post…

    ( Reply )
  2. PG

    Vince December 9th

    Excellent post, shows that the layout is the most important thing. The way it “feels” comes second ;)

    ( Reply )
  3. PG

    Gabe December 9th

    That’s awesome – I can recycle my good layouts and use them over and over where there are appropriate!

    ( Reply )
  4. PG

    Aloke Pillai December 9th

    Wow, Collis, Great work!

    ( Reply )
  5. PG

    Federico December 9th

    What a job!! Thanks for share!!

    ( Reply )
  6. PG

    Watcher December 9th

    It’s a REAL masterpiece Collis!!!

    ( Reply )
  7. PG

    jc December 9th

    Great article! Love it. So clearly explains the style differences.

    ( Reply )
  8. Kick-Ass article – you are soo right – thank you for making this point, and combining it with tips “how to do it” is just awsome! Love the different styles and designs… Thank you!
    Greetings from Denmark!

    ( Reply )
  9. PG

    Sanne December 9th

    Great article! I will definitely use this information for my own site!

    Thanks!

    ( Reply )
  10. PG

    mobdick December 9th

    looks good (:

    ( Reply )
  11. PG

    crypta December 9th

    wow, this is what I need! sorts of layouts thx

    ( Reply )
  12. PG

    Matt December 9th

    Wow! Awesome!!

    ( Reply )
  13. PG

    postream December 9th

    eye opening article.. really!

    ( Reply )
  14. PG

    Nouman December 9th

    Great article!

    one mistake I found was under ‘Metallic’ is that when you listed the sites, the title is ‘Some Great Examples of Minimal Design:’

    ( Reply )
  15. PG

    tom December 9th

    very interesting article

    ( Reply )
  16. PG

    Rik December 9th

    great post, love it!

    ( Reply )
  17. PG

    Manuel December 9th

    boah! Nice article! Good job…

    ( Reply )
  18. PG

    Cose December 9th

    oh shit, already made two weeks that we are in the “web design week” =(

    ( Reply )
  19. PG

    Adam December 9th

    One of the best posts I’ve seen on here in a while. Definitely a great way for me to easily port styles and get the gist of what makes something minimalist/web 2.0/etc.

    ( Reply )
  20. PG

    Liam December 9th

    Love This Post!!!

    Collis If you had the time to produce tuts like this as often as you have in web design week, this site would be PERFECT!

    I just love your tuts/work, please keep them coming :)

    ( Reply )
  21. PG

    Talas December 9th

    Honestly, I am starting to lose interest in this site. I’ve been a follower since the earlier days when it was actually about the use of Photoshop. Now its all about this garbage that seems totally useless in design. The best tutorial on this site in my opinion is this one:

    http://psdtuts.com/tutorials/tutorials-effects/creating-a-mac-type-background-in-photoshop/

    I’m very disappointed in the way this site is moving and would like to see more of the old stuff.

    -Talas

    ( Reply )
  22. PG

    Gergely Marton December 9th

    Nice post!
    Maybe you could make a tutorial about creating the shadows of every layout and every element.
    Nice interface shadow tutorials are very hard to find. That would give you a boost! (for ex. Style 3 – metallic look – the project preview box’s shadow)

    Nice job !

    ( Reply )
  23. PG

    Ivo Ivanov December 9th

    great article!

    ( Reply )
  24. PG

    raze December 9th

    Lance Thakeray truly is amazing! He has a interface design forum that i am a part of and it is magnificent!

    ~raze

    ( Reply )
  25. PG

    Joel December 9th

    Site Build! Site Build! Site Build! (over at nettuts! (even if it’s for the upcoming Nettuts PLUS…)

    ( Reply )
  26. PG

    b00m December 9th

    Wow! another compilation style of Manilla.
    And interesting tips and website examples.
    Great article!

    ( Reply )
  27. PG

    Liam McKay December 9th

    Brilliant stuff, Digital mash and Addition are the wrong way round.

    ( Reply )
  28. PG

    RonnieSan December 9th

    Great examples and wonderful article illustrating various design styles with the same layout. In my opinion, many designers can learn from this since I know a lot get stuck in one similar style. Variation is the key to a great portfolio.

    A side note: what font is being used for the headings in the transparent version?

    ( Reply )
  29. PG

    James Harding December 9th

    Very nice stuff!

    ( Reply )
  30. PG

    :// December 9th

    This is an amazing article!

    ( Reply )
  31. PG

    sick_oscar December 9th

    very useful, thank you

    ( Reply )
  32. PG

    Max December 9th

    Great post, shows that there are many ways a design can go!

    ( Reply )
  33. PG

    aleso December 9th

    wow man this is amazing, i love it

    http://3dand2dmag.wordpress.com/

    ( Reply )
  34. PG

    Wicked Sushi December 9th

    Simply amazing designs there! Nice general overview for them as well.

    ( Reply )
  35. PG

    Britt December 9th

    Awesome tut! I admire when something is both simple and versatile.
    How could anyone say this is garbage or useless in design? This is exactly the kind of thing a lot of web designers have been looking for. And beyond that, the core concepts behind the styles don’t have to apply to web design specifically.

    Side note as well: Does anyone know if that abstract background is from istock or not, or where I could find it.

    ( Reply )
  36. PG

    Sandeep Sharma December 9th

    Wow! nice article..

    ( Reply )
  37. PG

    Kckfm December 9th

    Congrats

    ( Reply )
  38. PG

    seemore December 9th

    super article! thx for it …

    ( Reply )
  39. PG

    OpenSourceHunter December 9th

    Damm another great article, thanks !!

    greetz
    http://www.opensourcehunter.com/

    ( Reply )
  40. PG

    MiroARRR December 9th

    IDD dude :)
    u did great once more ;)

    ( Reply )
  41. PG

    Martijn December 9th

    Very, very nice post. Well structured and with a lot of usable content.

    ( Reply )
  42. PG

    Jeffrey Kaine December 9th

    This may be the best article on web design that I have ever read…

    ( Reply )
  43. PG

    David Hellmann December 9th

    Nice. The different styles are very good. my fav is the grunge, yeah!

    ( Reply )
  44. PG

    chris December 9th

    i must say this must be one of your top posts here… excellent! its a bit scary also – to see that the web is so adapting.

    ( Reply )
  45. PG

    Charles | Ad & mar December 9th

    Awesome post !

    ( Reply )
  46. PG

    yosrysabry December 9th

    its amazing work .. thanks for sharing ..

    ( Reply )
  47. PG

    Russ December 9th

    Very Nice.

    ( Reply )
  48. PG

    Rijalul Fikri December 9th

    Another nice post. I would like to see more of this :)

    ( Reply )
  49. PG

    justine December 9th

    cooool!

    ( Reply )
  50. PG

    Cory December 10th

    I’d love to see these on Themeforest :)

    ( Reply )
  51. PG

    Carlos December 10th

    nice post. but one quick comment. the Manilla is spelled with one L. Its based on the idea of a Manila folder which originated in the Philippines wherein the primary material used in these types of folders is found. Manila is the capital of the Philippines. But if this was intentional, then my bad. hehe… and good job!

    ( Reply )
  52. PG

    Javier Centeno December 10th

    Good work Collis. I have clients that often request a “Windows Vista” type of background (Abstract + Transparency). I’d love to see a tutorial about creating a background like that.

    ( Reply )
  53. PG

    Javier Centeno December 10th

    Nevermind, Talas posted a link for that. Thanks Talas.

    ( Reply )
  54. PG

    todd g December 10th

    simply put, your designs are brilliant!

    ( Reply )
  55. PG

    jehjeh December 10th

    I really love all these articles!

    ( Reply )
  56. PG

    Adrian Quevedo December 10th

    Excelent Post, really helpful! Thanks Collis!

    ( Reply )
  57. PG

    John Pitchers December 10th

    Maaaaaaaate! You rock!

    ( Reply )
  58. PG

    Alberto Villalobos December 10th

    OMG Amazing post , you give a lot of ideas, you rock

    ( Reply )
  59. PG

    AdrianMG December 10th

    YOU

    ARE

    THE

    FUCKING

    BOSS

    HOLY SHIT THAT METALLIC THEME IS SO AWESOME.

    ( Reply )
  60. PG

    Tao December 10th

    ^^^^^

    What they said!
    Amazing stuff… I bow to your HTML and Photoshop “Hand Of God” skills…

    ( Reply )
  61. PG

    Jobo December 10th

    Very nice. Thanks For Sharing

    ( Reply )
  62. PG

    Isis December 10th

    Masterpieces!

    I hope someday I could be a great professional of design like you.

    =D

    ( Reply )
  63. PG

    Chris December 10th

    Great post! Didn’t think the Manilla design could be so versatile. Any chance we could get an XHTML tutorial as well?

    ( Reply )
  64. PG

    Rishi Luchun December 10th

    nice post!

    liking the abstract theme

    ( Reply )
  65. PG

    neron-fx December 11th

    This is a truly great post! Thanks for sharing!

    ( Reply )
  66. PG

    Aaron Irizarry December 11th

    Awesome… great idea to recycle designs in a way that doesn’t compromise them (when applicable).

    ( Reply )
  67. PG

    Felipe Cangussu December 11th

    Lovely, lovely, lovely !!!

    ( Reply )
  68. PG

    Tadas December 11th

    Awesome !

    ( Reply )
  69. PG

    Rafael R.P (Raff) December 11th

    Nice layouts!
    the best is the metalic hehehehe

    THX

    ( Reply )
  70. PG

    Ariful Alam Khan December 11th

    Amazing. Thanks Collis!

    ( Reply )
  71. PG

    abdusfauzi December 11th

    nicely done tips! [^^]

    ( Reply )
  72. PG

    Chris December 11th

    I agree! What an amazingly informative post! Thank you very much!

    ( Reply )
  73. PG

    Henriko December 12th

    Kick ass this is great! :D
    I’m so hoping that you’ll make a similar post/site with Fireworks… prettyyyy pleeeaaaase!

    Thanks again,

    /H

    ( Reply )
  74. PG

    Seich December 13th

    Really amazing tutorial, I learned a lot from it.

    ( Reply )
  75. PG

    sean December 13th

    U the best!!!!!!!!!!!!!!!!!!!!!!!! thank you so much!!!!!

    ( Reply )
  76. PG

    music December 14th

    Thank you this is very helpful

    ( Reply )
  77. PG

    Durkin - Go Holga December 14th

    Awesome post, thumbs up on stumble for sure :)

    ( Reply )
  78. PG

    Adel December 14th

    I’ve never read an article and enjoyed it like this… really awesome work man. I don’t know how to repay you for this sharing of info..
    God bless you

    ( Reply )
  79. PG

    Rob Morris December 14th

    Hi Collis,

    Great work. I though I’d let you know, the text and images are the wrong way round for Digitalmash.com and Addition.com.au.

    ( Reply )
  80. PG

    Peter Schaefer December 15th

    Thats incredible! GREAT post!

    Best,
    Lautus Design

    ( Reply )
  81. PG

    Jasper December 15th

    The heading for the examples of metallic sites reads “Minimal”

    Great article – it’s interesting to see people’s approach to design. Especially as a programmer who doesn’t have the first clue of how to attack this stuff!

    ( Reply )
  82. PG

    EZ Computers December 15th

    Thats awesome man ;)

    ( Reply )
  83. PG

    Skateboard Forum December 16th

    Very nicely done, it took me a while to get through all of those designs, but I’m sure this will help me in the long run.

    Stumbled!

    Cheers
    Eric from Wheels and Wood

    ( Reply )
  84. PG

    sandstar18 December 16th

    Great post!! enjoy reading it!

    ( Reply )
  85. PG

    anyways December 16th

    Me want PSD’s.
    I would be so happy if I had the psd with the different versions and layer styles, etc. It would save so much damned time, grab em tweak em send em out :)
    But alas, this PSDtuts sites shows me what I cannot have, and after a lot of work sort of achieve if I follow my assumptions for the techniques used.

    ( Reply )
  86. PG

    hiperkarma December 16th

    Finally I could read till the end, amazing! :D

    ( Reply )
  87. PG

    Vladeta December 16th

    Great tutorial! You really show the point of web design! Not what everyone does: make layout, color it, make shadow, cut it. This is real stuff! Thanks mate!

    ( Reply )
  88. PG

    Yannick De Smet December 16th

    Awesome insight. I really like the designs as well. :)

    ( Reply )
  89. PG

    www.cerjy.net December 16th

    This is some great tutorial! Inspired me to go for web designing! Thanks a lot for this!

    ( Reply )
  90. PG

    Ahmed El.Hussaini December 16th

    Fantastic post, I’ve never stumbled upon an article so well organized and informal like this.

    ( Reply )
  91. PG

    MikeM December 17th

    Great post thanks for the awesome information as usual. My web design studio I work for utilizes posts like this all the time.

    ( Reply )
  92. PG

    Nokadota December 17th

    This has been a fantastic read. Thank you so much for this.

    ( Reply )
  93. PG

    thenetguruz December 18th

    Excellent! I like the minimal look and the web 2.0 ver. of it too. Will try this on my own old designs :)

    ( Reply )
  94. PG

    Jason December 18th

    absolutely wonderful. insightful and awesome guidance for many in the design world and out.

    ( Reply )
  95. PG

    -tikabanget- December 18th

    waw…!!!!! u amazed me…

    ( Reply )
  96. PG

    ann December 18th

    cool and useful web style!!

    ( Reply )
  97. PG

    sagbee December 19th

    people gossiping that it was nice article.. and those fools really don’t understand how much it takes time to make this Fantastic tuts for newbie peoples as well for me :)

    Collis, you did awesome job again!!!

    ( Reply )
  98. PG

    Pete White December 19th

    Really good to see the different designs on the same layout must have taken ages to write that!

    ( Reply )
  99. PG

    kuler December 20th

    It is very cool!

    ( Reply )
  100. PG

    Gercek December 21st

    Perfect!

    ( Reply )
  101. PG

    iEthan December 22nd

    Really nice display of different variations of the same style. Nice job Collis!

    ( Reply )
  102. PG

    Drama December 22nd

    http://www.aktiq.fr/

    Seems like they enjoyed this tutorial and the psd-files very much

    ( Reply )
  103. PG

    rashid December 31st

    aweeSommmeee!!! neat stuff!

    ( Reply )
  104. PG

    S.M.Riyaz December 31st

    Really an excellent article. Thumbs up to the author. A good guide for layout designers like us. Thank you very much.

    ( Reply )
  105. PG

    myfr3ak January 1st

    Nice article!!

    ( Reply )
  106. PG

    Jared Walker January 5th

    Great article. I liked the designs, especially the grunge and metallic ones.

    ( Reply )
  107. PG

    Josh January 6th

    Great article. Really helpful and I especially enjoyed the examples and links to tuts.

    ( Reply )
  108. PG

    Je January 9th

  109. PG

    Dyani January 12th

    Man…Thank you, I’ve really started the website designing coz of you.

    so thank you….

    ( Reply )
  110. PG

    dmk January 12th

    How useful is that?! Thanks for sharing AND inspiring me to go learn. You won’t know what you’ve started.

    ( Reply )
  111. PG

    shellie January 12th

    bookmarked! I’ll be coming back here for awhile to revisit. Very nice

    ( Reply )
  112. PG

    Xtence January 13th

    some of the “professional webdesigners” could learn some from these
    Great post!

    ( Reply )
  113. PG

    Paul Dean January 16th

    Thank you for this fantastic article, you have re-affirmed my belief that the layout should take priority over the colour scheme/style during the design process! A website is only as good as the sum of it’s parts.

    Incidentally, I was reading the article “The Six People You Meet In Freelance Internet Writing Hell” over at Freelance Switch, its funny to see that article proved correct here, I spotted 5, perhaps 6 of the “The Kindly Self-Promoter” personas it spoke of!

    Anyway, good stuff – thank you for the information!

    ( Reply )
  114. PG

    Khawar Pervez Butt January 20th

    Excellent Work! keep going..

    ( Reply )
  115. PG

    Faris Nasir January 20th

    yeah!!! i love this article!

    never thought a single layout could be re-engineered into several distinguished themes!

    i’d like to try this on my site later ;D

    ( Reply )
  116. PG

    sdjfnvjlnbsfjvb January 21st

    ive already built 3 sites using this. awesome shit fella

    ( Reply )
  117. PG

    Chris Raymond January 27th

    truly nice work…but I wonder how to translate this into standards-compliant html/css for a cms-backed site where content such as images and text are dynamically fed

    ( Reply )
  118. PG

    Geoserv January 31st

    Good post, great designs as well.

    ( Reply )
  119. PG

    Jon February 2nd

    I am a tutor of a web design course in London (http://www.digitalartscollege.co.uk) and I’m going to suggest that my students read this post. It is a great way to demonstrate how much you can do to subtly change the look of a site.

    ( Reply )
  120. PG

    Snowflake February 4th

    Got to say: woooooooooow

    ( Reply )
  121. PG

    weblizzer February 24th

    all i can i say it’s a real masterpiece and very loveli

    ( Reply )
  122. PG

    HirenModi February 25th

    wow, Just superb, Thanks

    ( Reply )
  123. PG

    Jamie Allsop February 25th

    This post just shows that if you have come up with a layout you are happy with, but cannot decide on the colour scheme / style of your design, you can try many different styles and each makes your website look completely different.

    ( Reply )
  124. PG

    elisa February 26th

    very very useful! thanks!

    ( Reply )
  125. PG

    Anton Agestam March 23rd

    I think you’re putting this really all wrong! Web 2.0 is not a style or a design, that’s absolutely not what it’s about! Web 2.0 is about interactivity and page content based on user events! Or am I totally wrong?

    Great regards / Anton Agestam

    ( Reply )
  126. PG

    Rodney April 1st

    Hi Collis,

    Its been a while since we had some lovely web design tuts. Where at thou?

    You are helping many of us here. Ta

    ( Reply )
  127. PG

    Joy April 21st

    Found a cool grungy one http://www.artmetal.md/en/

    ( Reply )
  128. PG

    Johnny April 22nd

    Hey Collis,

    Are you still with the tuts+ gang? Is it me or has the level of tutorials dropped? Everything you ever produced for learning has been brilliant.

    Really missing your tuts mate! Come back!

    ( Reply )
  129. Wow… what a perfect example of web style. Style is so important to reflect the tone and mood of a web site and is something we teach in Week 2 of our course

    ( Reply )
  130. PG

    Divergence April 24th

    Great article, trying to learn this stuff and your tutorial gave some great tips. Thanks!

    ( Reply )
  131. PG

    embang May 2nd

    I really likes it,
    so simple and this the best example how to diveide a box into very nice design, and the best thing is “start from simple layout”

    Thanks for share it.

    ( Reply )
  132. PG

    Pom Design July 18th

    This should come in handy, thanks for sharing.

    ( Reply )
  133. PG

    Sumeet Chawla August 1st

    Hey thanks for this tutorial.. I really love your layout! Its the exact thing I was looking for… Following your tutorial and innovating here and there I hope I can redesign my site to a better one and move to wordpress :) thanks again…

    ( Reply )
  134. PG

    Sumeet Chawla August 2nd

    Hey! I found a website inspired from your tutorial while browsing for inspiration! :) Even I was planning to innovate on your layout but I think people have already done that :) http://www.ilove2design.at/

    ( Reply )
    1. PG

      Sumeet Chawla September 19th

      Thanks to your awesome tutorial, I finally redesigned my site based on the metallic version you listed above :) I really love the shadow effect you used on the image preview section :)

      ( Reply )
  135. PG

    Zuntex August 7th

    Nice tutorial more of that, thanks

    ( Reply )
  136. PG

    Joseph Desmet August 13th

    Awesome article! Detailed and straight-up, love it!

    ( Reply )
  137. Liked the post and happy to see everyone involvement very good rare blogs can keep the good and fresh ideas great one

    ( Reply )
  138. PG

    Igor Ivankovic November 17th

    Excellent tutorial, one of best out there for designing web layout! Excellent explanation, and variation of the same theme in different styles! Bravo, and thank you!

    ( Reply )
  139. PG

    r4ge December 16th

    I’ve been a regular checking this site ever since it has been launched, And I JUST found this article after researching for some of my fav tutorials and this article was just amazing. Thank you Collis!

    ( Reply )
  140. PG

    Ben Stokes December 26th

    Well done on the blog, We Function was found to be very useful.

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    December 26th