How to create a Website Wireframe with Paper

Website Wireframes help in approaching the task of designing websites in a planned manner. It also helps identify the website owners choice from the design options considered by a website designer.

Creating a website wireframe and using it to communicate and exchange ideas with a customer leads to designs which find easier acceptability and appreciation from the website owners.

There exist various methods and tools used to design website wireframes, and designers eventually develops their own preferences according to how well a tool works out for them.

But then, these are Artists we are talking about, and many of them are very good artists both with hand and on a computer.

Many website designers and their teams still persist with using website wireframes drawn on and made with paper and other standard stationery easily available within an office.

Creating a website wireframe with paper allows designers to create wireframe models which depict proposed layouts by placing hand drawn place holders for major elements that make each page.

The general work flow and ideas that are used to create a website wireframe are as below:

Plan the pages: As a new website design starts, it is important to know the pages and have a general idea about the content in each page. Internal linking and other concepts which aid in the design and development of a website are also better prepared well in advance, as this allows for a easy, planned approach to sketching the website wireframe models.

Website Wireframe Page Construction: Generally most main pages are very important as they form the basic design from which page follows.

Draw a big rectangle on the page, as big as the page allows, to form the outline of the monitor / computer screen.

Identify the portion of the header and draw a rectangle around it. Then decide the logo’s position and draw a circle to mark its position and size.

Continue sketching rectangles to mark the main areas which would constitute the page, like navigation menu, body text, space for any advertisements or graphics, etc.

If the website / business it represents has some special certifications or awards, then mark the place where it would proudly display these to the visitors.

You can now write the important things within the areas to help the customer to understand the layout better, but keep the amount of writing to a minimum.

When you finish the main page, you can draw wireframe models for all the remaining pages in the same way to complete the entire websites wireframe model.

Typical sketched website wireframes are constructed in the above manner, however if you wish you can add interactivity and some more areas of interest, maybe to illustrate drop down menus or individual sections that change depending upon option selection.

One of the easiest method to create a drop down menu is to cut a strip of paper to match the width of the dropping menu and write the menu options on it. This strip can now be pasted in its position and folded upwards to indicate a closed menu, and whenever you wish to show its contents, just unfold it.

In the same way use your ingenuity and create areas with post-it or tabbed cards most of which is generally available in office stationery.

At the end of the day it, what counts most is that your customer gets an idea of the design you are proposing and is able to select from within one of your proposed website wireframes. Any creativity you add to in order to make it more interactivity is always a big plus, just remember not to forget that it is a wireframe model, so keep it black and white as much as possible!

Related posts:

  1. Wireframe Models – Website Wireframes
  2. Why Create a Website Wireframe Before You Design?
  3. Wireframes for Website
Responses are currently closed, but you can trackback from your own site.

Comments are closed.

Subscribe to RSS Feed Follow me on Twitter!