+

Introduction to Wireframing

+Overview

Storyboarding and wireframing your site before you start to code is another step in the website design process.

Both the storyboard and the wireframe pages are simple steps to help you plan your site, and then it becomes the blueprint from which you will follow.

+Why Wireframe

Consider all of the 3D animations in any of today’s movies.

All of these computer generated graphics, started out on paper, then made their way to a wireframe model, and after that to the screen as the final product.

+The Wireframe as a Website Development Tool

The wireframe models for the movie is the blueprint for what the final graphic or CGI model will be.

A wireframe is your blueprint for layout, text and image placement, navigation components, color scheme, and other webpage components.

Instead of just jumping to a full-blown web design, take the time to create a wireframe to plan the sites layout.

With a wireframe you and the client can point at things and have a mutual understanding of what is to be done.

+Follow these steps to be able to create a wireframe. Keep it simple at the start.

Follow a basic layout, such as left link or right link with a header and the content in the middle.

Identify all of the links, if you are using color pencils or pens, pick a link color and stick to it. Identify your graphic image placeholders and note the sizes near them. Identify your content and content type. Remember that you are not putting content here, but content identification.

Remember this will be a layout of where the webpage components will be placed. It is not a design pre-view. It will be generic or even ugly, but that is OK. Sketch out the layout to the best of your ability. The import thing is that this will be the blueprint for your webpage, and

website.

+Wireframing Examples

+It is not a design pre-view.

+It will be generic or even ugly, but that is OK.

+Sketch out the layout to the best of your ability.

+The Wireframe Handout

+The Wireframe Handout Information

For this activity we will be using a Paper Browser that was developed by Rain Creative Lab Design, Inc.

This tool is a design canvas that is 1024x768px within the website area.

The website area is made up of grids that are 32x32px in dimension. With this you will be able to translate your component sizes in pixels.