Ever been daunted by designing a website layout? Not sure where to start? Well in this tutorial I will show you the process of creating a basic website with grids in a ‘Web 2.0’ fashion.
Just a note though, this tutorial does require you to be acquainted with Photoshop and know simple things like drawing out Shape Layers, making Guides and adding Layer effects such as Gradients. I will be explaining a lot of the process but along the way there is an assumed knowledge as this is a more advanced tutorial.
Before diving into the steps we need to prepare by downloading a few things to make the whole process easier. For all my icons I usually go to iStockphoto.com as this site is great for cheap icon packs, as well as great little graphics like the laptop vector in this mockup. As for social icons there is a great pack from Jwloh over at Deviantart.com: http://jwloh.deviantart.com/art/Aquaticus-Social-91014249
The most important asset for the project is the grid layout. Now I am working off a system called, the Grid System: http://www.thegridsystem.org/. Here I have selected a 12 column grid for Photoshop from the templates area: http://www.thegridsystem.org/categories/templates/
Now you might ask, why Grids? Well, grids help organize the information in a neat, clean, easy to follow layout, making for better design practice. Read this great article from Smashing Magazine called, designing with Grid-Based Approach: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
When beginning a website design, always have a plan before starting and the best way to approach this is a wireframe. Now I have drafted up a simple one using Illustrator. There are various tools out there to use for creating wireframes and even a simple sketch will do sometimes.
The site is broken down into three main areas;
- logo and header
- welcome message and sign in area
- feature and news section.
This site is a fictional site promoting a product or person, it is only the home page, as it is prompting people to sign up for notification when the fictional item is available.
Let’s begin designing! Create new document 1200×850. The website won’t be that wide though, the actual measurements optimized for a 1024px resolution is 950px wide.
Now I have decided to make the background a light gray so fill the background area with a light gray by using the Paint Bucket tool (G) #f7f7f7.
If you downloaded a grid from ‘The Grid System’, add it to the document by pasting it on a new layer. If not create a grid system out of guides yourself (in this tutorial though I use the 12 grid system with horizontal lines)
For the most part the grid is there to help you align your elements and keep the layout in order, but I hide the layer by clicking the ‘Eye’ icon for the Layer in the Layers Palette and lock the layer so that it is not accidently moved or altered.
So the next part is to make the top section in my wireframe; the logo and header section. Here I will make a New Layer (Ctrl+Shift+N) and Paste (Ctrl+V) in a lovely background gradient image I happen to have.
Now separate the logo from the blue/green gradient to give it some segregation. Create a New Layer (Ctrl+Shift+N) and select the Rectangle Tool (U), making sure Shape Layer in the top left hand is selected. Draw out a bar across the top of the document, then double click the Layer in the Layers palette and select Gradient Overlay and make a gradient going from gray to black. Here I have used gray: #2a2e31 and Black: #000000.
That bar is a little bland so let’s spice it up a bit with some great metal mesh texture. I found this on a site called Brusheezy:http://www.brusheezy.com, it has some great patterns, and I used one called the Spiderman pattern.
On a new Layer (Shift+Ctrl+N) add the company logo, now remember that nifty little grid you added into the document, turn that Layer back to visible by clicking the ‘Eye’ icon that is grayed out for the grid Layer, this should turn the layers visibility back on. Align the logo to the edge of the grid.
Next we will add some text, mostly I have made up some headers and body text, but the most important thing I am showing you is how to style and the general layout.
So again we want to align the text with the left-side of the grid, and add a Drop Shadow and a Gradient Overlay. For the Gradient Overlay, a soft gray to white makes the text pop out more, using soft gray: #eeeeee and white: #ffffff. As for the Drop Shadow a black at 100% Opacity, Default Angle and Distance of 2px, Spread of 0% and Size of 1px.
For the body text over the blue/green Gradient use a drop shadow of Distance 1px and Size 0px.
For the next area I want to separate the header from the main body of content, so I’m going to create a banner area. This is basically an area where my product can rest upon, yet a good transition graphic that smooth’s out the main blue/green gradient header with the next area.
Here make use the Rectangle Tool (U), to create a bar with a gradient of light gray: #ededed to white: #ffffff.
Also add a very small 1 pixel width line (again you can use the Rectangle Tool (U) or select the Line Tool, which can be found in the Rectangle Tool list on the toolbar) above the white banner area so to make a smooth shadow-like border along the top, add a gradient or make it a dark gray.
Add in a product image or a showcase image. Here I have added in a laptop with the showcasing site displayed and again you can see I have the grid turned on and am aligning things within the grid system.
One thing to note, it is good design practice to keep your layers in a structured folder system. This is good later on for finding things and also for clean files for cutting and coding. Here I have grouped the layers into folders, this can be done by selecting in the top menu Layer > New > Group… or Group from Layers, if you have multiple layers selected.
On to the next area; the welcome and sign in form sections in the wireframe.
The Welcome area is just some text, title, subtitles and body text aligned along the Grid system.
Next the feature section, here I have used 4 segments and aligned it in such a manner so that there is enough white-space to rest my eyes but in line with the Grid System. The icons can be sourced at istockphoto.com, there are some great sets you can purchase there.
For the next section I’ll create the shadow divider section that separates the sign in form from the welcome message. A divider is a great way to segregate blocks of information, you could however use boxes to contain the information but with a minimalistic view in mind I opted for the sleek divider.
Create a new layer and on this layer we will use the Line Tool (U) – this is underneath the rectangle tool, just click and hold down on the rectangle tool and select from the list the line tool.
Make sure the Line Tool is set to Shape Layer, and the color I have used is: #d4d4d4, make the line about 2pixel width and 200px height.
Now create a New Layer (Shift+Ctrl+N) and draw out a rectangle with the Rectangle Tool (U), I have used a lighter gray # e5e5e5 similar height to the line.
Next with the rectangle layer selected, go to the top menu bar select Filter > Blur > Gaussian Blur about 9.3 pixels, this will make the over layer blurry.
Hide the layer the line is on and now we need to make one side of the rectangle sharp to create the divider effect, so with the Marquee Tool (M) select the whole left side of the rectangle and delete it.
Now we need to merge the line layer and the rectangle layer to finish off the divider shadow. Select both the Rectangle and line Layer and right click selecting ‘Merge Layers’.
Let’s finish this off by smoothing out the top and bottom. Select the Marquee Tool (M) and at the top in the ‘Feather’ box enter in 20px, this will soften the edges of the selection and we will be deleting the top and bottom edges to create a nice soft blend to the top and bottom.
Let’s align the divider shadow by turning the grid back on and aligning it near the top section next to the welcome message.
Now for the text in the sign in area, we need a title and body text. Throughout the designing of the layout, using the Grid System will give you an overall strong structure for the site, another way to help align the smaller elements and text is using guides, as you can see in the image below I have used guides extensively to align the text and icons, but the Grid System is used as the main structure for the overall layout.
Now to add the form area for the sign in, this can be done by using the Rectangle Tool (U), with a 1 stroke of a dark gray, I have also added a Notify button, I won’t show you how to make a button in this tutorial but there are plenty of stock web buttons that can be found at such sites as istockphoto.com.
The next area is the news and social icons area. Here I have added another stock icon of a light bulb, title, and body text. Underneath the social icons are lined up with the body text of the news area. These icons were created by Jwloh over at Deviantart.com, here is the link to his great social media icon set:http://jwloh.deviantart.com/art/Aquaticus-Social-91014249
So there we have it; a great, clean website designed with some base principles such as Grid Systems, wireframing and layout. The key points throughout are to remember to create a wireframe before you start and use a grid system as it helps significantly to the overall structure of the site. By the use of guides and grids you can create stronger, cleaner layouts.
This was a brief overview to creating a site and we will explore more to do with wireframing, grid systems and icons in other tutorials to come!