Wireframe Creation for Dummies. Part I

In this short tutorial we want to give a quick introduction on interface and web wireframing. What are wireframes? Why use wireframes and what can you do with wireframes? When these questions do not ring a bell, you should definitely read on.

What is a wireframe?
A website or interface wireframe is a first visual outline used in interface design and web development. With a wireframe, you plan and communicate the overall idea and structure of a website and specify it down to its pages. Wireframes have first been used in rapid paper prototyping in which interface concepts are drawn by hand with pen on paper. All elements of the website are just outlined (in the narrower sense of the word) and placeholders for pictures and other content (e.g. text) are used. Typically, wireframes with all link structures are completed before any artwork is developed.

Why use Wireframes?
Wireframes help you to go the long and rocky road from a general idea for a website to the specification with all detailed information for the designers and programmers. The important thing is that web design is an iterative process where new ideas and requirements turn up while developing the site. Therefore ideas that seemed good at the beginning turn out to cause problems when the website concept gets more and more into detail. As an example, a horizontal navigation bar might be a good choice in the beginning, but later turn out to provide not enough space for all navigation topics, thus navigation in the sidebar is more appropriate. Imagine you spent hours of work on designing all pages in detail with the horizontal navigation and now everything has to be changed! In a wireframe these changes can be made in no time and what you have to throw away did not take long to sketch. With a wireframe, you keep your flexibility refining the design concept until the end.