Wireframing is an essential weapon in any professional web designer's arsenal. Giving proper time and thought to the underlying structure of your design can be the difference between an ok design and a great one, so this is an important skill to practise.

While there are a number of different ways to actually do your wireframing, depending on personal preference, the goal is always the same.

  • To structure the site content in an easy to navigate way
  • To create a content hierarchy that shows the importance of certain page elements
  • To clearly define different sections of a page

Wireframing also allows you to make revisions quickly, since you're working with only the basics and not spending time on colors and effects, so you're more able to react to client feedback and change requests without resorting to murder.

The wireframing process

Have a rough sitemap before starting

Before starting a wireframe you need to know the basic site structure, a mindmap or simple list of pages will be of help here. If you don't know how many pages you need, you can't create the best possible navigation system, for example.

Remember your goals

The point of design is to communicate information. Keep whatever you're trying to communicate in your mind while wireframing, do you need a large call to action or some way of guiding the user through a series of steps?

Don't worry about the rough bits

As long as the wireframe makes it clear which element is which and where they'll go, there's no need for anything more fancy. It could be jotted down on the back of a beermat and still be an effective wireframe, pay no attention to making it look "nice" or "tidy".

Try multiple layouts

You might already have an idea of how you want the finished page to look, but it's always a good idea to at least quickly sketch out some other layouts in case you've missed something that would work a bit better.

Work in grayscale

Don't add any color beyond shades of gray, your goal is to create a layout that is functional without any distractions.

If a layout doesn't work in grayscale, try something else, since you never know who will come along to your site with colorblindness or images turned off and be confused by a non-intuitive layout.

Wireframing methods


Sketching your wireframes has the advantage of probably being the quickest method, you can easily get your ideas down on paper and see instantly which are working and which aren't. You can then recreate your final idea(s) on your computer to share with the client.

Graphics software

Maybe you prefer to just get straight into your software (Fireworks, Photoshop, GIMP, etc), after all this does make it easy to add design elements once the wireframe is approved. It can be more difficult to get started with this method, if you find yourself staring at a blank screen I'd advise you to give sketching a go instead.

Wireframing tools

There are various wireframing options around, both free and paid. A quick Google should turn up a few to try if you think this option would work well for you.


Some more experienced designers prefer to create mockups in HTML, which has a couple of big advantages. It saves you time further down the line, since the basic markup is already in place, but it also displays text accurately in diffrent browsers so you can see if there are any potential problems.

Not really recommended for beginners.

Time to get some feedback

Upload an image to your own server and email a link, attach the image to an email, print it out and pin it up on the office wall, whatever.

The entire wireframing process is a way to get crucial feedback early on in the design process and save time in the long run, so get your mockups out there for the world (or your client, at least) to see!