Web Design & Development Guide

Website wireframe

Home | Up

In web design, wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements in the interface design. Because of this they must be completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. They also allow for the development of variations of a layout to maintain design consistency throughout your site. This is an important part of the initial development stage because it creates user expectations and helps to develop an awareness and familiarity throughout the site.

Creating a set of wireframes for any project also act as a communication tool to clients and stakeholders, such as content creators, engineers and developers. Over the course of a project the wireframing exercise functions as a stable base on which to consider changes, diverse user paths and new requirements. The information architect and information designer typically use the wireframes as a meeting of the minds, in terms of having solid working documents on which to establish the language, content and structure of interactions users will have with a given site or project.

The creation of wireframes also helps to define the positioning of global and secondary levels of navigation in a prominent and intuitive position, as well as providing an area for utilities such as helpful information and search facilities. When creating your wireframes it is critical to ensure that branding is central to the identity of a site so as to communicate the personality of the site.

Website Wireframing Tools

• Microsoft Visio (Windows)
• Intuitect Professional (Visio Add-on - Windows)
• Axure RP Pro (Windows)
• Omnigraffle (Mac)
• Adobe Photoshop (Mac & Windows)
• Adobe Fireworks (Mac & Windows)

External links

• Homepage & Sub-Page Wireframe Samples
• Wireframe yourself!
• Website Wireframes examples and best practices!

Home | Up | Cascading Style Sheets | Printer friendly | Brochureware | Digital strategy | DOM scripting | Fahrner Image Replacement | Microformat | Progressive enhancement | Rollover | Spacer GIF | Techniques for creating a User Centered Design | URL redirection | Web Interoperability | Web modeling | Web template | Web-safe fonts | Website architecture | Website wireframe

Web Design & Development Guide, made by MultiMedia | Websites for sale

This guide is licensed under the GNU Free Documentation License. It uses material from the Wikipedia.