A wireframe is a used to show a general layout of a site. It helps to graphically depict placement of the various elements on a web page (header, content, imagery, forms etc), all of which allows the designer to achieve consistency in design and aids with rapid prototyping. The wireframe becomes a crucial part of development as it enables clients to familiarise themselves with the site and navigaiton at a top level and from the earliest stages of a project.
Having a wireframes helps build a graphical communications between clients and agencies, with many clients wanting to see the site visually. Also, clients are able to decide which factor they like (and don’t like) about the site before building, saving a lot of time and headaches at the build stage.
Are wireframes static?
Not always. There a number of free and paid tools which allow for rapid and interactive prototyping. The exported results of these wireframes allow clients to engage with a given page or set of pages to truly get a feel for how buttons and links will work all before the site is built.
Are wireframes costly?
No. The wireframing stage should be straightfoward. As a client, you’ll get an early glimpse as to whether or not your agency is fulfilling your vision and will be able to help steer them in the right direction. In fact, the time your web design agency can save on the graphic design stages and HTML build as a result of using wireframes can literally save you £1,000′s of pounds over the span of a project!
What should I expect to see in a wireframe?
Dependent on the medium that your agency is using, you may expect to see different things in a wireframe. Paper based wireframes may not be interactive, but will allow for clients to see an overview of where a design layout is headed from the near beginning of a project. Using digital and web based tools for wireframing is often a preferred method, as changes are able to be applied quickly or in real time, as well as getting designs that are pixel perfect (matching the sizes of the final site design).
On any given wireframe, you should expect:
- A general idea of the site layout. This should include placement for the header, footer, content area(s) and other information
- Input and justifications as to the positions of key calls to action on a page by page (or even more granular) basis.
- An understanding for how the user journey will feed through from page to page. Scenario building before the wireframe is best practice when doing information architecture and user experience design.
- A clear approach to the layout for the site navigation. Is the visible menu wide (containing a high number of top level links), deep (containing a lot of child pages) or both? Knowing this at before creating a wireframe will help in choosing a menu structure that is function and usable.
What wireframing tools should my web design agency be using?
Each agency (and even designer) will have their own preferences and experience. Greensky as an agency uses Adobe Fireworks as its wireframing tool of choice, with the ability to create interactive prototypes for clients. When reaching the graphic design stages of a web project, saving. We’ve also been able to develop wireframing frameworks for other media such as email campaigns and mobile using Fireworks.
We’ve included links to some handy wireframing resources below.
- Mockingbird – A web based wireframing application
- Omnigraffle – A wireframing and stenciling tool for mac
- Smartdraw – A windows based tool for flow charts, project mapping, wireframing and more
