WireFrames In Modern Web Design

I Have recently been putting together a business model for my freelance work. The intention being that I will have a viable platform that I can use for clients of varying sizes and requirements. As part of this I have been doing a lot of research into wireframes.

This is something I myself have been guilty of overlooking in the past, however its important not to underestimate the need for wireframes in modern web design. To Better explain what wireframes are and why they should be used I have put together this short introductory guide.

Whats a Wireframe

In its most basic sense a wireframe is a document which describes the layout of information within a web page. This is not a document to outline style or colour. Instead a wireframe should show how to organize and display elements of the page. A wireframe could be the responsibility of a designer or a usability expert, but whoever is responsible should have a good understanding of information structure and an eye for layout and design patterns.

Whats The Benefit of Producing a Wireframe?

Apart from the obvious reasons why you would want to produce a wireframe, it can be an integral part of your brief. The wireframes themselves can become a brief which you or a client can refer back to throughout the process of a project. Its also important because it helps cement the foundation of what you are trying to create, so that’s the client can indicate their thoughts and feedback before the bulk of effort is put into the full mock ups and logo design.

This also helps massively with the design process, once you have a clear outline, it leads you to think how best you can dress up the site with colors, imagery and overall design. This is also something you can charge for, as part of the business model, another step which means another installment, assuming you are working with phase payments.

What Does a Wireframe Look Like

The structure of a wireframe will be wildly different depending on the client and the requirements, however there are a couple of ground rules that will help you out.

• Always work in black and white – this is a great way to detract from thinking about color or design, it will force you to focus on the layout and spacing of elements on the page.
• Keep the Fonts Simple - Its very easy to get caught up in how a fonts look, however you should resist, remember that its about the format not the style.

What Should I Use to Create A  Wireframe

There are several ways you can go about doing this, using photoshop, or omigraffle or even sketching on paper, however this may not be the best principle if you are going to present to your client. Once you have created a design it is best to create a PDF and a print out so that you can refer back to it if any issues arise later in the project.

Wireframes are not a designed as another hurdle to overcome in modern web design. Instead they should be considered as an aid in the design process. I hope to evaluate a few tools which can make this process much quicker and easier, I will post my findings when I have evaluated a few possibilities.