How to Structure Your Wireframe

How to Structure Your Wireframe

Here's how to structure your wireframe using the concept of templates.

Your wireframe doesn’t need to represent every page on your website. It only needs to show those pages which are different to others. These are called templates. So, as you can imagine, your wireframe will only contain the pages which have functional or content differences between them.

For example, you can easily imagine that your services page will have one layout into which all your services will fit. Equally, your products page might contain exactly the same functions for all of your products (“Buy Now” button, related products list, etc.). Your About Us and Privacy page might also share a template layout as they are typically just plain text pages. As you go through your site structure you will naturally see that certain pages group together and can be expressed through one single template.

Let’s mark them up on our fictitious structure:

Wireframe Page Hierarchy Diagram

We’ve now reorganised our hierarchy into a table where different templates list the pages which are common to them. In other words, we are saying that all the Services (plumbing, boilers, etc.) will share the same layout and functionality and also that the News Template shares a common template, and so forth. This now tells you how many individual wireframe templates you need to create. (There would be little point wireframing all your products if they all share a common template.)

As you can see from the example (below, left)  we have a Home Page Template. Obviously, the home page almost always has its own template because it is unique on your site. The other template (below, right) shows the wireframe for the key service pages. These are the top-level sections.   


Wireframe of Two Website Pages


Tools For Wireframing

If you fancy a go at building your own wireframe there are some terrific online tools available to you:

We use Protoshare it's a great application if you want to build bigger sites which automatically ‘glue’ all the pages together. This means that you can navigate around a Protoshare wireframe as though it were a real website. Plus it’s got some nice collaboration features.  You can also take a look at iPlotz and Balsamiq both good all-rounders and produce nice-looking wireframes.

Published by digitalROAR