How to Wireframe…because it just makes good design sense

Design is everywhere. It’s in the chair you’re sitting in, in the last restaurant meal you ate, in the landscaping of your favorite park and in the layout of every website. Oftentimes, design is easy to forget or push aside since content is king. But bottomline is, if it doesn’t look good, you are less likely to gain readers or any kind of following. As the master of your site, it’s up to you to use design to best highlight your content. So putting some thought into your website layout is a must.

Wireframing is the easiest way to clearly block out how you’ll design a page online. Photoshop is a great program to use to wireframe, but it can be pretty intimidating. This tutorial should help you understand the value of wire-framing. It will help you create a wireframe in Photoshop and label it so your design is easy to understand.

Email me with questions at

If you can’t watch the video–here are point by point instructions:

Start by opening Adobe Photoshop. Select new and choose the size of your canvas. I usually choose ‘web’ preset 1024 x 768 so the size is formatted for web page screens. Press OK and you’ll see your main canvas.

Wireframing is a screen blueprint. It’s a skeletal framework of your website design. Basically you’re marking out blocks of space and defining how they’ll be used to organize your website’s content.

As the second step, we need to put a grid in the background of your canvas. You won’t be able to see it in the final design mock-up but it’ll help you gage the proportion of your wireframe blocks. Navigate to File-Preferences-Guides/Grids/Slices. Choose a custom color for your lines, even if it’s gray, so you can see the grid. Gridline should be set to 50px and subdivision 5px. Press OK.

Now we’re ready to start the layout. Click the rectangular marquee tool in the upper left-hand corner of your Photoshop tool bar. Click and hold the tool on the canvas to create your space. When you let go, the defined perimeter should animate. Choose a color in the color swatches panel. Then fill the shape with that color using the quick key stroke option+delete. Use the marquee tool to layout your header, your main content boxes and your footer. It should look something like this:

Wireframe Mock-Up

Now we’ll label the layout so anyone can understand your design. Click the T icon on your tool panel, standing for ‘text.’ Similar to the marquee tool, it defines the space where you’ll put your text. With the T took in use, you can select your text color from the color swatches box on the right side of your screen. Then just start typing. Once you label a defined area, you can highlight your text and change its size or font by choosing the character tab on the right side of your Photoshop screen. You can also click the arrow tool, at the very top of your Photoshop toolbar, and move the text window to place it wherever you prefer. A labeled wireframe looks something like this:

Labeled Wireframe

Finally, you can save the document as a .psd which is a Photoshop document. However, as a more web-friendly file, you can save it with a .jpg extension. This will create a copy of your document. Image files are much smaller and fit your needs if you want to send the image or your work in an email to your client or save it in a blog for reference.

I hope this has been a helpful tutorial to get you started in wireframing your website. Good luck!



Dig it? Share it.

About The Author


Other posts by

Author his web site


10 2011

Your Comment

Add video comment