Using Wireframes in the Web Design process

Most of the time, we get asked for web design. This is fine – we do very nice web design – but describing the creation of a website as “web design” misses out some fundamental considerations that go into creating a successful website, such as online marketing and web development. It also misses out vital processes, like planning site structure, usability considerations and information delivery. We’re going to look at the first step in the grand process of “web design” which is known as: Wireframes.

Defining Web Design: Site Architecture and Graphic Design

We generally split our design practices into 2 distinct skills: Site Architecture, and Graphic Design:

• A Graphic Designer is concerned with colour, visual balance, guiding user interactions through visual emphasis and making the site look cool (or slick, or sophisticated, or the ever-descriptive “cutting-edge”). The Graphic Designer produces the look & feel for the website.
• A Site Architect is concerned with planning the layout of the website. This person looks at the proposed content for the site and works out how best the information can be delivered to users of the site. The layouts that the Site Architect produces are called wireframes.

What a wireframe looks like:

We usually describe wireframes as “unstyled layouts”. They are black & white versions of the website. They’ll have a big block across the top saying “Logo and newsletter signup here”. They’ll have a variety of other grey blocks and notes. Importantly though, wireframes are the right size and proportions, and they cover all of the elements that are going to end up on the finished website. If the site is going to have a left-hand menu, the wireframe will have a left-hand menu. The Graphic Designer works directly on top of the wireframes when he or she is applying styles to elements of the site. Have a look at the wireframes for www.africaignite.co.za:

Here’s a run down of what’s going on:

1. Left-column has the logo and an expandable menu. The wireframe has a grey block with the menu items. The graphic designer has chosen a bold orange & red colour scheme for this element. Note that the width and general layout of this column has stayed the same.
2. The Central column holds the main content. The wireframes have set a width for this, and a layout for a feature block. The graphic designer has chosen font styles and colours and has decided on a panoramic picture-strip to run the full width of this column.
3. The right column is for latest news article relating to this page, and additional features. The wireframes have specified the column width, and the layout of the news feed. The graphic designer has chosen font styles. Again, the overall layout & column width has stayed the same.

Why wireframes are good for your website:

Wireframes are designed to deliver the information - and information, whether it's from copy, images, interactive experiences or communication is what the visitors to your website are after. Wireframes are also a great way to get a feel for the flow of the site early on in the process so that, as a client, you can consider how your message is being displayed, and make changes without incurring large costs.