DesignM.ag

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

Create a Nature-Inspired Painted Background in Photoshop

Create a Professional Portfolio Design in 17 Easy Steps

Create a Sleek, High-End Web Design from Scratch

Watercolored Design Studio Blog Layout

Create a Web Design with Grungy Paper

Chocolate Pro WordPress Style Layout

Making the “Clean Grunge” Blog Design

Website Gallery Layout Design

Design a Fresh Blog Theme on the 960 Grid

Company/Business/Software Web Layout

Create a Business PSD Layout in Less Than 10 Minutes

Design a Sleek Real Estate Website

GreenPress WordPress Theme Design

Create a Magic Night Themed Web Design from Scratch in Photoshop

How to Create a Grunge Web Design in Photoshop

Design a Cartoon Grunge Website Layout

Full Photoshop Web Design – Journal

Creating a Professional Magazine Web Layout

How to Create a WordPress Theme from Scratch – Part 1

Design a Website Using the 960 Grid System

Carbon Fiber Layout

Design a Clean Business Layout

Making Your Own Portfolio Webpage

Real Estate Web 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

Design Page Layouts Using CSS

Super Simple Two Column Layout

Simple 2 Column CSS Layout

Advanced CSS Layouts: Step-by-Step

How to Create a Horizontally Scrolling Site

Creating a CSS Layout from Scratch

Multi-Column Layouts Climb Out of the Box

In Search of the Holy Grail

Creating Liquid Layouts with Negative Margins

Breaking Out of the Box with CSS Layouts

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 – Part Two

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

Build a Sleek Portfolio Site from Scratch

How to Convert a PSD to XHTML

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

Layouts from Dynamic Drive

CSS Creator

Sample CSS Page Layouts from Max Design

CSS Layouts from Intensivestaion

Layouts from CSS Play

Layouts from the Noodle Incident

Layouts from Iron Myers

Layouts from Code Sucks

CSS Easy

For more design resources, please see:

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!

Tutorials for Creating Website Layouts in Photoshop:

Tutorials for Creating CSS-Based Layouts:

PSD to HTML/CSS Tutorials:

Layout Resources:

About Steven Snell

Leave a Comment Cancel reply