Wireframe continue.....

I believe that I have almost come to the end of the wireframe process. Images from these wireframe can be modified later, but for now images from these serve as visual aid purposes. These images will be substituted with well-designed images.



Example: 1st half of the HOME PAGE





2nd half of the HOME PAGE






1 half of the PROGRAM OVERVIEW







2nd half of the PROGRAM OVERVIEW

Wire Frame continue....

I found some of the cool websites that teach me the fundamental of wireframing.
http://totheweb.com/learning_center/website-wire-frame-home-lrg.html
http://images.google.com/imgres?imgurl=http://www.graffletopia.com/images/stencils/91.gif&imgrefurl=http://www.graffletopia.com/stencils/91&h=662&w=550&sz=92&hl=en&start=18&sig2=Vb-QAQK_Zw4Prfa0Ws7vjA&um=1&tbnid=2md_A95qz461gM:&tbnh=138&tbnw=115&ei=HJDoR--COZCSetX6hZQP&prev=/images%3Fq%3Dwebsite%2Bwireframe%2Bpicture%26um%3D1%26hl%3Den%26sa%3DG
http://www.noisebetweenstations.com/ia/examples/FoxSports/Foxsports_wireframe.gif

Some more wireframe

These are all the wireframe pages that I worked on during my spring break. I am not completely done with it.
My perspective about wireframe is that it is very effective yet time consuming. During the creation of wireframe I found it a little confusing because I started out with something similar to a wireframe. Again, I found wireframe is very useful if I used the sitemap that I created.

Wireframe Rough Draft Page 1

This is only the first page. Contents will be added later....Disregard the color .. I am in the progress of making wireframe for each page from the site map.

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.