Many bespoke websites will start out their life as wireframes. They are an important part of the design process and help both client and designer sort out the information, structure and functionality required. The easiest way to think of them is as the blueprint of the site.

Here are a few things to know:

What will a wireframe show?
A wireframe will primarily show four main things:

  1. Pages and page templates
    You will be able to see how many pages are needed for your content, and how these pages link together. We can see how many pages will have similar content, and how many page layout templates we will need to design.
  2. Content
    The information will be laid out on each page but won’t have any ‘design’ applied. This gives you the chance to focus on the content and to see where changes need to be made before moving on to how it will actually look when built.
  3. Functionality
    What does your site need to do? Standard elements such as buttons, forms and videos will all be shown, and other areas of functionality can be identified too – such as a shop needing to take payments or a calendar to display upcoming events.
  4. Basic Navigation
    You will be able to click on the individual pages and jump from page to page, but the content on the pages will be static.

Example wireframe – click to see interactive version

What will a wireframe not show?
A wireframe is not an indication of how the final site will look. Infact the wireframes are quite basic-looking and have no colour or design applied to them. This is for good reason – to provide clarity! We can be easily distracted by design and all the bells and whistles that go with it. Keeping things simple focuses on the content and will help to ensure the site will be correct when the design is applied, at the next stage.

Can a wireframe be changed?
Absolutely, we would probably expect changes to be made at this stage. And, it’s much quicker and easier than at design or build stage.

Do I need wireframes for my site?
If you have an existing site that you are happy is working well and you just need some additional pages adding or tweaks to the design here and there, then you don’t need to start afresh with wireframes. If you are happy to purchase an off-the-shelf package for your site, wireframes will not be required, as you don’t have enough flexibility – the page templates are already built.

What happens after wireframes?
Once the wireframes have been finalised and approved, the next stage is for us to move on to the design. The static content from the website will be used to form a solid basis for the design. The next stage you will see will look more like your final website with colours, fonts and applicable images added in, but will be flat pages with any interactive elements indicated on the design.

Example initial designs (using wireframe from above). Click to see final site.

It’s also standard practice to not design every single page on the site. Websites consist of a number of page layout templates (as defined in the wireframes) so the pages you see in the next stage are the pages which need a different layout in order to show the content well. Examples of pages requiring different layouts could be:

  1. Home page as this is always a unique page with lots of different content so will always have it’s own template
  2. Portfolio or gallery pages as they are primarily image based with small amounts of text
  3. Information page as they need to contain text and images and perhaps videos too
  4. Contact us pages need a combination of forms, maps and text
  5. E-commerce area of a site that might be selling a specific product and encouraging people to buy.

What is the benefit to having wireframes?
The major benefit for you to seeing a wireframe of your new site is that you will be able to identify your users’ needs at an early stage in the process. This is a vital part of good website design and should always be at the forefront of any good website.

Does this sound relevant to you and your needs? If so please contact us and we will only be too happy to help.

Nicki Francomb
Senior Designer