WIREFRAME

Wireframe

What is wireframe?

• Blue prints that define a Web page’s content and functionality
• Visual basic used for layout and placement of fundamental design elements.
• Allows maintain design consistency throughout the site

Create your wire frame model

Step 1: Create the wire frame

• Create simple HTML page for each block in the site map
• Include the title of page and purpose it serves

Step 2: Add Your Content

• Add main contents to page

Wireframe includes:

1. Key page element and their location (header, footer, navigation, content objects, branding elements)
2. group of elements, such as side bars, navigation bars, contents areas
3. labeling, page title, navigation links, headings to content objects
4. place holders, content text and images

Possible software for wireframe

1. Microsoft visio
2. Omnigraffle
3. Adobe Illustrator

Examples of wireframes

• http://www.gdoss.com/web_info/PRI_wireframes.pdf
• Need to go back to this website for reference of how wireframe works
• http://www.barrettcommunications.com/contentmgr/showdetails.php/id/378

I have downloaded PageBreeze to use for the HTML editor. I will design the wireframe using either PageBreeze or Visio.