Topics from our forum
Topics from our forum
Figure 7.7 Example wireframe for a children's toy site
The use of static drawings or screenshots of the different parts of a web site to review the design concept with user groups. It can be used to develop the structure - an overall 'map' with individual pages shown separately.
Blueprints illustrate how the content of a web site is related and navigated while a wireframe focuses on individual pages; with a wireframe the navigation focus becomes where it will be placed on the page. Wireframes are useful for agencies and clients to discuss the way a web site will be laid out without getting distracted by colour, style or messaging issues which should be covered separately as a creative planning activity.
The process of reviewing wireframes is sometimes referred to as storyboarding, although the term is often applied to reviewing creative ideas rather than formal design alternative. Early designs are drawn on large pieces of paper, or mock-ups are produced using a drawing or paint program.
At the wireframe stage, emphasis is not placed on use of colour or graphics, which will be developed in conjunction with branding or marketing teams and graphic designers and integrated into the site after the wireframe process.
According to Chaffey and Wood (2005), the aim of a wireframe will be to:
• Integrate consistently available components on the web page (e.g. navigation, search boxes);
• Order and group key types of components together;
• Develop a design that will focus the user on to core messages and content;
• Make correct use of white space to structure the page;
• Develop a page structure that can be easily reused by other web designers.
Common wireframe or template features you may come across are:
• Navigation in columns on left or right and at top or bottom;
• Header areas and footer areas;
• 'Slots' or 'portlets' - these are areas of content such as an article or list of articles placed in boxes on the screen. Often slots will be dynamically populated from a content management system;
• Slots on the homepage may be used to:
- Summarise the online value proposition
- Show promotions
- Recommend related products
- Feature news, etc.
- Contain ads.
Was this article helpful?
Adwords or Pay Per Click advertising is essentially the 21st century equivalent of direct marketing, allowing advertisers to test ideas in hours rather than months. Learn more about Google Adwords and PPC advertising.