Increasing Traffic, Increasing Conversions
503.389.5650

Planning with Website Wireframes

Doug Williams @ 5:16 am

This blog entry was posted on January 26, 2009.

Website wireframes are grayscale block diagrams that illustrate the overall navigation and blocks of elements such as images, content and functionality. They are the skeletal rendering of how the web page elements fit onto the page. These are an organizing plan and not a design. They are done before any artwork is generated.

The term “wireframe” comes from the world of computer graphics and 3D animation. Here wireframes are used for prototyping and because they are quick to generate and they use a minimum of computer processing.

Using a planning wireframe will often generate new requirements and questions that hadn’t been thought of before. It forces you to think through your website’s functionality at the page level. This helps minimize more costly changes later on in the development process.

How to make a wireframe

  1. Determine the basic layout such as how many columns the page will have. Should the navigation be along the top (horizontal) or on the side (vertical)?
  2. Decide on the call to action for the page. Place it where it can be easily seen, preferably above the fold.
  3. Organize and place the page elements such as the header, footer, navigation, content objects, and branding elements. Group and prioritize the elements according to how you want them seen.
  4. Label the navigation links, headings and content objects.

Use placeholders for text and images. Use dummy text such as lorem ipsum to show text areas.
The wireframe gives the web designer a visual guide to design from. This ensures the call to action and priority elements are placed on the page for maximum effectiveness.

If You Like this posting please +1 it!

Related posts:

  1. Planning Your Website: The Site Map
  2. Stay Active During Your Website's Planning Process
  3. Planning your Internet Marketing Strategies

Filed under: Internet Marketing,Website Design

This entry was posted on Monday, January 26th, 2009 at 5:16 am and is filed under Internet Marketing, Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 Comment

  1. Thanks for the tips

    Comment by lowell — October 3, 2009 @ 4:26 am

RSS feed for comments on this post. | TrackBack URL

Leave a comment