What are website wireframes?

What are website wireframes? an example of a wireframe

Wireframes have been around for years and chances are you have been creating them for all sorts of projects – not just web / website related ones. It is essentially a name given to the process of drawing out rough sketches of what the website will look like, so all of those pencil sketches you have been doing when thinking about your website, poster, business card etc could be classed as Wireframes.

There are varying levels of wireframes from the simple diagram showing how many columns the website will have to the complex coloured designs that overlaps with fully fledged website design, however as a tool the middle ground provides the most benefit to the project team. This method of representing the design in its simplistic form enables the whole project team to review the structure of the page and make changes quickly as the changes can be implemented in a fraction of the time required to adjust a full website design. It also enables members of the team who have a good understanding of the project but not design to produce a visual guide for the designer to work from – this could be the client who wants to define the structure of the site before paying for a full design or a web developer ensuring the website has a sound SEO strategy in place.

The speed at which the design can be reworked means the project team can create an initial wireframe of the site which is submitted for review by the internal project team or even the client to gain feedback, with the results the wireframe can be updated to address the feedback. If you are familiar with Agile Programming wireframes allow the same methodology to be applied to the design process.

Looking past clients changes wireframes give the website developer input on the design ensuring that it is functional and works with the sites SEO strategy, it also means that all elements on the page go through a review process so ‘design’ features that look good but add several hours of additional development time can be removed to make the project more streamlined.

 What tool should you use to create a website wireframe?

While it is possible to use software you already know (word, powerpoint and photoshop for example) there are some dedicated wireframing tools available, my favourite is Pencil which is a free program that runs on Mac, Windows and even Linux it is also available as a firefox plugin. I would suggest downloading the independent program so that it is not affected by Firefox updates.

Being free and available on all the major platforms it is the perfect tool to aid the creation of wireframes by the creative team as all members of the team (and even the client!) will be able to edit the wireframes if required.

Example of the Pencil interface


33 Great Examples of Web Design Sketches – some really nice examples of hand drawn wireframes showing that you dont need to use a computer to achieve good results!


Blog post by Alex Wells

Blog post by: Alex Wells

Based in Saffron Walden, Essex, I have over 10 years experience in crafting bespoke websites for a wide range of clients, I love helping businesses and individuals achieve their digital goals through smart deployment of modern web technologies.

Follow Alex Wells on LinkedIn