Create a Website Wireframe Before You Design
This blog entry was posted on July 10, 2010.
A website wireframe is a schematic view of your web page layout. This is kind of a “first draft” used in planning and organizing a web page. It is a skeletal rendering of how the web page elements fit together onto the page.
Wireframing is generally done with grayscale block diagrams that illustrate the overall navigation and blocks of elements such as images, content and functionality. The call-to-actions are strategically located. 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. We use creating a sitemap and wireframing as the first two steps in website design.
How to create your wireframe
- 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)?
- Decide on the call to action for the page. Place it where it can be easily seen, preferably above the fold so it can be seen immediately by an arriving visitor.
- 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.
- 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 your 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:
- Planning with Website Wireframes
- How to Create a Website for Your Business
- How to Design a Website with CLASS
- How to Create Your Twitter Landing Page.
Filed under: Website Design
This entry was posted on Saturday, July 10th, 2010 at 4:49 am and is filed under 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.3 Comments
RSS feed for comments on this post. | TrackBack URL
[...] Web Design, Seo, Blog Marketing Tips » Create the Website Wireframe Before You Design [...]
Pingback by Collapsible SLR Camera Carrier — July 10, 2010 @ 12:24 pm
[...] Read More [...]
Pingback by Why Create a Website Wireframe Before You Design? | Wireframe Mockups — August 2, 2010 @ 9:42 am
mobile websites melbourne…
[...]Create a Website Wireframe Before You Design | Doug Williams SEO Services[...]…
Trackback by build a mobile website — October 23, 2011 @ 9:28 pm