Website design – wireframes

What is a wireframe? A wireframe is an essential element of web page design. It is like a plan for a construction job, it sets out the layout, the style, typography, the look and feel of the web page you are going to create.

A wireframe can be made up using a variety of methods including:

• Hand drawn – as a sketch or a technical drawing.
• Using a presentation application such as Powerpoint or OpenOffice Impress.
• With a drawing or photo editing program such as OpenOffice Draw, Adobe Illustrator, or Photoshop.

Whatever your comfortable using, the point is to get your ideas onto paper (or screen) so you have something to work from for your final web page design and coding. The wireframe is very useful when it comes to the point of coding your xhtml and css and can be a very handy resource to set the structure and style of your web pages.

Below is an example of a wireframe. Note that the wireframe will not always look exactly as the final product but it can be a strong starting point and will help you to work out your basic elements and how you will lay them out.

A wireframe example created with a presentation application

Some of the items to consider including in your wireframe are:

• Dimensions of text area, navigation, sidebar, header etc.
• Layout and positioning of the basic elements such as header, body, content, menu, footer, sidebars.
• Typography – example and description of typography and font color, style, size and spacing to be used. This can be done using Greeked text. Greeked text can be found at this website: http://www.lipsum.com/. Greeked text is a website design standard for typography examples.
• Background and color schemes, play around with different looks and colors to get a visual representation of your ideas.

A wireframe can give you a visual representation of what you have in mind and can be very helpful toward reaching your final design. Whether you are using a hand drawn sketch or a computer application to draw your wireframe you can always play around with different looks and colors etc until you have something you like and you can work from.

Next week – Content and Navigation, how to and what information you need to include in your content and navigation.

Leave a response, did you think this article was helpful ?

© 2010 – 2011, Enrique. All rights reserved.

No related posts.