Website Layout Toolbox

by Steven Snell

on April 27, 2009

in Resources

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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+