Website Layout Toolbox

by Steven Snell

April 27, 2009 in Resources

Laying out a website is obviously one of the most important parts of the design process. In this post we’ll feature a number of helpful resources, tutorials and articles for various aspects of layouts:

Tutorials for Creating Website Layouts in Photoshop:

These 20+ tutorials will show you different ways to design the layout of your site and each one takes a slightly different approach.

How to Create a Sleek and Textured Web Layout in Photoshop

Sleek and Textured Web Layout

Create a Nature-Inspired Painted Background in Photoshop

Create a Nature-Inspired Painted Background in Photoshop

Create a Professional Portfolio Design in 17 Easy Steps

Create a Professional Portfolio Design

Create a Sleek, High-End Web Design from Scratch

Sleek, High End Web Design

Watercolored Design Studio Blog Layout

Watercolored Design Studio Layout

Create a Web Design with Grungy Paper

Creta a Web Design with Grungy Paper

Chocolate Pro WordPress Style Layout

Chocolate Pro Layout

Making the “Clean Grunge” Blog Design

Clean Grunge Blog Design

Website Gallery Layout Design

Website Gallery Layout Design

Design a Fresh Blog Theme on the 960 Grid

Design a Fresh Blog Theme on the 960 Grid

Company/Business/Software Web Layout

Company Web Layout

Create a Business PSD Layout in Less Than 10 Minutes

Business PSD Layout

Design a Sleek Real Estate Website

Sleek Real Estate Website

GreenPress WordPress Theme Design

WordPress Theme Design

Create a Magic Night Themed Web Design from Scratch in Photoshop

Magic Night Themed Website

How to Create a Grunge Web Design in Photoshop

How to Create a Grunge Web Design

Design a Cartoon Grunge Website Layout

Design a Caroon Grunge Website Layout

Full Photoshop Web Design – Journal

Journal Web Design

Creating a Professional Magazine Web Layout

Creating a Magazine Layout

How to Create a WordPress Theme from Scratch – Part 1

How to Create a WordPress Theme from Scratch

Design a Website Using the 960 Grid System

Designing a Website Using the 960 Grid

Carbon Fiber Layout

Carbon Fiber Layout

Design a Clean Business Layout

Design a Clean Business Layout

Making Your Own Portfolio Webpage

Making Your Own Portfolio Webpage

Real Estate Web Design

Real Estate Web Design

Premium WordPress Theme Design

Premium WordPress Theme Design

Tutorials for Creating CSS-Based Layouts:

Want to learn more about achieving a certain layout with CSS? Here are 12 tutorials that will show you a variety of different layouts.

Three Column Fixed Layout Structure Using CSS

Three Column Fixed Layout in CSS

Design Page Layouts Using CSS

Design Page Layouts Using CSS

Super Simple Two Column Layout

Super Simple Two Column Layout

Simple 2 Column CSS Layout

Simple 2 Column CSS Layout

Advanced CSS Layouts: Step-by-Step

Advanced CSS Layouts

How to Create a Horizontally Scrolling Site

How to Create a Horizontally Scrolling Site

Creating a CSS Layout from Scratch

Creating a CSS Layout from Scratch

Multi-Column Layouts Climb Out of the Box

Multi-Column Layouts Climb Out of the Box

In Search of the Holy Grail

In Search of the Holy Grail

Creating Liquid Layouts with Negative Margins

Creating Liquid Layouts with Negative Margins

Breaking Out of the Box with CSS Layouts

Breaking Out of the Box with CSS Layouts

The Perfect 3 Column Liquid Layout

The Perfect 3 Column Liquid Layout

PSD to HTML/CSS Tutorials:

Once you’ve got your layout done in Photoshop, these tutorials will show you how to code the layout in HTML and CSS.

Converting a Photoshop Mockup (video)

Converting a Photoshop Mockup

Converting a Photoshop Mockup – Part Two

Converting a Photoshop Mockup

From PSD to HTML, Building a Set of Website Designs Step-by-Step

From PSD to HTML

Build a Sleek Portfolio Site from Scratch

Build a Sleek Portfolio Site from Scratch

How to Convert a PSD to XHTML

How to Convert a PSD to HTML

Layout Resources:

The various resources in this section will provide you with starting points for your layouts. Some are blank templates and others are resources to help you with creating the layout that you want.

Layout Gala

Layout Gala

Layouts from Dynamic Drive

Layouts from Dynamic Drive

CSS Creator

CSS Creator

Sample CSS Page Layouts from Max Design

Sample CSS Page Layouts

CSS Layouts from Intensivestaion

CSS Layouts

Layouts from CSS Play

Layouts from CSS Play

Layouts from the Noodle Incident

Layouts from the Noodle Incident

Layouts from Iron Myers

Layouts from Iron Myers

Layouts from Code Sucks

Layouts from Code Sucks

CSS Easy

CSS Easy

For more design resources, please see:

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design.Connect with Stephen on google+

  • joyologo design shop 2.0

    Apr 28th

    very helpful tutorials, thanks for the wonderful list..

  • Youssef El Hodaigui

    Apr 28th

    Wow you have great collection of web site lay out.

  • Joel S

    Apr 28th

    Great list. I have seen a lot the PS layouts already as single posts and have used a few for production sites. Very nice to have all these resources listed in one post. Thanks!

  • Jim S.

    Apr 28th

    This is an awesome collection of resources. Thanks a lot for putting this together!
    ~ Jim
    ~ tweet: @seo_web_design

  • php web development

    Apr 28th

    Excellent source of information. Keep up the good work!

  • Azad

    Apr 28th

    Brilliant list. Now I just need to spend an hour a day following the tutorials. I have already done Manilla and it is awesome.

  • Steven Snell

    Apr 28th

    Thanks for the feedback everyone. I’m glad it’s helpful.

  • Ivy

    Apr 28th

    Very nice, especially helpful with the WordPress theme designs.

  • Christopher Ross

    Apr 28th

    Amazing collection! Thanks for posting.

  • Matthew Heidenreich

    Apr 29th

    thanks for featuring my tuts at psdvibe, and the one I wrote for sixrevisions :)

  • Arun Kumar

    Apr 29th

    I would like to get one web-site designed by YOU, provided it is cost-affordable/reasonable. Please advise minimum price for comparative consideration. Thanks.

  • Papilouve

    May 30th

    Thank tou for your helpful resources,It’s great :)

  • Web dizajn sajtotekar

    Jul 1st

    Steven Snell, tutorials are excellent. The best web site design layout in photoshop is „sleek and textured“. The best css based layout is „The Perfect 3 Column Liquid Layout“.

    For me as a web designer, web design layouts are in first position step and foremost part of every web site design process. Because a useful web design layout and seo are very tightly interconnected.

    Very good choice. Thanks a lot for making quite an effort.

  • Alex

    Jul 17th

    wonderfull list..

  • rvv

    Sep 21st

    Excellent! You always have the best content on your site! =]

  • ASP.NET Web Develpment

    Nov 3rd

    This is a great resource list. Thank you

  • ELITE Solution - Web Design (Web dizajn)

    Dec 29th

    Good composed web design layout of any page is the always the first and most important step when you decide to create serious web page. However web page layout must have appropriate graphic design elements, limited number of colors. Off course for this projects is always important to secure requested functionality in keys that we plan to develop some serious web applications.
    Integration existing web design (web dizajn) project with some server side structure (web programming language) such as( PHP, MySQL, Java) in most cases depend of initially created page. So above layouts show us very good compositions of colors, also CSS styles are good implemented using new standards. This is the way – direction that quality web design projects or personal web pages should track.

    Also visit our small web dictionary of web development terms:
    http://www.elitesolution.net/index.php?id=web_dictionary

  • Suriya Sankar

    Jul 5th

    Nice collections..!!
    It helps me a lot to get some clear idea

  • Web 3.0 Textures

    Aug 26th

    Fantastic design work and texture integration! I will be bookmarking this page for design inspiration :)

  • Ken Pegues

    Dec 30th

    Hey I just wanted to let you know, I actually like the composition on your blog. But I am utilising Flock on a machine running version 9.04 of Xubuntu and the design is not quite correct. Not a strong deal, I can still essentially read the articles and explore for information, but just wanted to inform you about that. The navigation bar is kind of tough to navigate with the config I’m running. Keep up the superb work!

  • cell signal jammer

    Feb 11th

    I have been studying your entries during my morning break, and I should admit the entire article has been very enlightening and rather well written. I thought I might permit you to recognise that for some reason this weblog does not view well in Internet Explorer 8. I want Microsoft would prevent converting their software. I have a query for you. Could you thoughts replacing weblog roll links? That might be truly neat!

  • Leave a Comment

    Your email address will not be published. Required fields are marked *