A website wireframe is a basic visual guide used in a site’s interface design that sets its structure and helps maintain design consistency throughout your project. They are usually completed before any artwork is developed.
In this blog, I will take you step by step through the process of creating a website wireframe, like the one shown in Figure A, using Photoshop CS2 (PS). (I like using PS for wireframes because it’s the same tool I use for all my graphic design, and familiarity makes it easier.)
For the purposes of this blog, we’ll assume that your initial meetings with the customer have taken place and they have given the requirements for the website.
Let’s say we’re creating a site for The Juniper Wood Company, a leading handcrafter of wooden furniture, who wants to feature and sell their handcrafted products and services online.
The company wants to redesign their online presence with the following requirements:
- Simple yet elegant website
- Featured section for handcrafted items
- Information about the company
- Complete products with an online catalog
- Custom finishing services available
- Image gallery and featured videos
- Online ordering
For the sake of this tutorial, the initial template will be developed for a home page, with the remaining pages (the child pages) based on this main template.
Create a background
With Photoshop open, create a new image by selecting File, New from the toolbar. Then create a custom dimension of 800 pixels by 600 pixels as show in Figure B. This is about the absolute lowest resolution that most web browsers will allow. Keep the image resolution at 72 pixels/inch, RGB color mode, and the background contents set at transparent.
Select OK, and you’ll see the blank background shown in Figure C. This will be the base template size for the wireframe on all pages of the website.
Now, we’ll continue with the next steps.
Next, you’ll create a new layer by selecting Layer, New, and Layer from the menu toolbar. Then, double-click on the selected layer and rename it to “Background Color,” as displayed in Figure D. (Note: The layer becomes the active layer when it’s highlighted by clicking on it from the layers palette.)
With the new layer selected and active, you can now add a white background by going back to the Menu toolbar and selecting Layer, New Fill Layer, Solid Color…, as shown in Figure E. This brings up the New Layer Color Fill 1, shown in Figure F. Click OK. In the Color Picker dialog box, select the white solid color and be sure the “Only Web Colors” check box is checked, then click OK.
The Background Color layer pallet is now updated with the solid white color selection as shown in Figure G. Notice now the Color Picker lists the RGB numbers 255,255,255 and the coding #ffffff? This is a helpful reference for any manual coding that might be done later in Dreamweaver or any coding tools.
Now, go ahead and save the file. From the menu toolbar select File, Save As…, or select Shift+Ctrl+S, and name the file, then click Save. I’ve saved this file as a Photoshop document and named it WireframeTemplate.psd as shown in Figure H.
Now we can start adding text boxes, image boxes, headers, footers, banners, drop-down menus, and linked buttons.
For each element we will add a new layer to the document. To start with adding a top header banner element, we’ll add a new layer as we did in step two of creating the background. Before you start with adding the banner element, however, make sure your background color is a grayscale selection. You can go directly to the Color Picker from the toolbar as displayed in Figure I.
With the new layer active, select the Rounded Rectangle Tool, shown in Figure J, from the toolbar window, select the Geometry options (Figure K) and select Fixed Size, entering 780 px width and 100 px height. Make sure the Radius is set to 5 px. Then set your cursor to the top left of the document, as shown in Figure L, and click once and the new rectangle will appear. It may need to be centered just a bit–you can use the Move Tool for this task.
Once the rectangle top banner element is added we can tone down the grayscale color a bit by going to the active layer and adjusting the opacity as seen in Figure M (set it to 50 by sliding the Opacity scale or manually typing in the setting).
Follow the same steps for adding all the other elements, such as text boxes, advertisement banners, image boxes, etc. The dimensions will depend on the specific requirements for every project. For the next element I added a left sidebar as displayed in Figure N, and with the Rectangle Tool still selected, all I needed to do was change the Geometry options to 260 px width and 400 px height, then place the cursor just under the top banner on the left side and click once. The opacity setting for the grayscale is still set to 50% so there is no need to adjust that setting. I then added a right column with the dimensions of 510 px width and 400 px height, and then the footer element was added at 780 px width and 70 px height. Remember to save the file after adding each element. This is the wireframe template after the four main elements have been added, and displayed in Figure O. Notice how each element object creates a new layer in PS.
Now it’s time to add text descriptions to identify the purpose of each element we’ve added. Make sure your color palate selection will contrast with the background so the text will be visible.
With the Shape 1 layer selected, select the Horizontal Type tool as displayed in Figure P and then click and drag a text box on top of the shape. Then select your font, point size and type in your text–”Header Banner” in this instance, as shown in Figure Q. I am using Arial, Regular, 18 point, and Sharp.
Continue to add text descriptions to the other three main elements. Notice in Figure R that, with each text addition a new layer was added, and because the active layer was selected with each addition the text layer was added above the active layer, this ensures that the text will be visible above the grayscale element.
Next we will add sub-elements to further define the layout of the page. We use the same steps described in steps 1-5 of this section, with the only difference being that the grayscale will be a slightly darker shade. Specifically, the grayscale for these added elements is set to 70%. You’ll see the result in Figure S. Just remember to make sure that the element you are working on is the active layer and that you toggle the foreground color to white before adding in the text, then toggle back to the background color when adding the rectangle objects. The final template is shown in the image below. Remember to save your file with each element addition.
- Company logo - 200 px w, 70 px h, added to header banner
- Main Navigation - 550 px w, 50 px h, added to header banner
- Featured Handicraft - 245 px w, 125 px h, added to left sidebar
- Image Gallery - 245 px w, 125 px h, added to left sidebar
- Video - 245 px w, 100 px h, added to left sidebar
- Welcome - 490 px w, 100 h, added to right column
- Online Catalog - 490 px w, 100 px h, added to right column
- Dining, Living, Kitchen, Outdoor, - 110 px w, 80 px h added into the Online Catalog element, change opacity to 90%
- Blog - 385 px w, 160 px h, added to right column
- Banner Ad - 100 px w, 160 px h, added to right column
As a web developer you will find that every project, client, and situation is different, but when you make the initial effort to lay the foundation of the website it will reap rewards in the end.