Website wireframe is an important tool in web design. It is not only useful for designing a website but equally important for communicating the requirements to content creators, information architects and SEO experts. This article will help you to create a wireframe for your next web design project.

What is Website Wireframe?

First of all it is important to understand what a website wireframe is and how it is used in web design. Wiki describes website wireframe as a basic visual guide used in web design to suggest the structure of a website and relationships between its pages. Wireframe is an excellent tool in web design and is used for creating a high level prototype before work on the actual design is started. It also helps communicate the concept to different parties involved including the client, content creators and developers. Wireframes are like blue prints for websites that identify the content and functionality of the website.

Learn more about 10 Reasons to use a website wireframe.

How to design Website Wireframe?

Choose an appropriate format

A wireframe for a website can be as brief or detailed as required for a project.  It is not always necessary to build a complex wireframe. Quite often a simple high level drawing of the layout is sufficient.  The most common wireframes used in web design are simple paper prototypes of the design with simple line drawings showing the placement of elements on a web page.

Identify the elements

One of the first steps in creating a website wireframe is to identify the different elements of the web page. You can start by listing the elements.  It is vital that all important elements are included in the wireframe.  This can differ from project to project as different websites may require different elements.  A typical example of elements is included below:

• Logo
• Menu & Navigation
• Textual summary or introduction of the company
• Slogan or tagline
• Latest news
• Testimonials
• Login box
• Search
• Advertisements
• Social Media Icons
• Call to action.

Ensure all website elements are included in the wireframe

Once you have identified the elements, the elements should be positioned in appropriate places within the wireframe.  It is important to ensure all key elements are included in the prototype. This will ensure nothing is missed in the final design.

Organise elements based on importance

Positioning of elements is one of the most important features of a website wireframe and should be planned carefully. Important elements should be give more focus and should be positioned in a prominent place in the wireframe.  As far as possible, key elements should be placed above the fold. This will ensure maximum impact as it will catch visitors’ attention without having to scroll the page. Correct placement of elements can improve the overall effectiveness of the website.

Show the relationship between pages if required

For small websites, a single wireframe may suffice for the entire website. For many others, you may require one for the homepage and a common one for the rest of the pages. For larger or more complex websites, you may need to create a separate wireframe for each section or page of the website.

Apply proven techniques and principles

There is no fixed format for a wireframe.  It depends on the needs of the business and can be different for different websites. Nevertheless certain principles and concepts have proved effective. Certain types of website wireframes have proved popular in general and can help improve the quality of a website.

Example of a popular website wireframe:

One such example of a wireframe design that can work for most businesses is included below. This wireframe can be adapted and successfully applied to most websites. Many websites are designed on this wireframe and it is known for its effectiveness.

The video below explains this wireframe in detail.

Social Bookmarks

Close this WindowBookmark and Share This Page

Save to Browser Favorites

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BUMPzee! CiteULike co.mments Connotea del.icio.us

DotNetKicks Digg diigo dropjack.com dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl

Google Hugg Jeqq Kaboodle linkaGoGo LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb Netvouz

Newsvine PlugIM popcurrent Propeller Reddit Rojo Segnalo Shoutwire Simpy sk*rt Slashdot Sphere

Sphinn Spurl.net Squidoo StumbleUpon Technorati ThisNext Webride Windows Live Yahoo!

Email This to a Friend

Copy HTML: 

If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »