1. WHY DO YOU NEED IT? What is a wireframe?

2. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes helps clarify exactly what needs to be on the different page types of your website.

3. What to include in a wireframe? wireframes should include enough information to reflect what needs to appear on each page of your website. structural elements feature elements

4. Structural Elements Header Global Navigation Main content Sidebar – secondary navigation footer

5. Structural Features

6. Headers Headers makes an immediate impact on your user so it’s important to get it right. Think about what you’re trying to achieve, what’s the first thing you want to tell your users when they visit your site what will intrigue them and get them to read further? Examples of

7. Examples of creative headers http://cog.nitiondesign.com/ http://synchmedia.com/ http://franfernandez.com/ http://www.ctlonline.org/ http://viget.com/inspire http://greaterthings.lhc.org/

8. A. Primary Global Navigation also called “Main Navigation” Global Navigation –refers to navigation that runs across the top and bottom of every page, containing links to the major sections of that website. http://www.kutztown.edu/acad/commdes/ http://www.zolasvintage.com/ http://www.nordicruby.org/

9. C. Main content Primary Messaging, Text, and Image Area Will consist of a headline (image text) a key photo plus a succinct written description that highlights the clients custom services or global message. http://healogix.com/ http://www.rednoseday.com/

10. Navigation conventions: Organization's logo should appear on the top left of every page. It should also be linked back to the homepage. Search box should be available on every page of the site. It should be placed on the far right of the masthead. Every page should have a footer, containing global navigation as hypertext.

11. Navigation conventions: "Home" is the convention for the name of the overall homepage. "About" contains content describing the history, financial performance, goals, and mission statement etc. of the organization. E.g. "About Sony". "Contact" or "Contact Us" contains contact details such as email, telephone, address, or location details.

12. B. Secondary Global Navigation Though critical to the site, these links do not lead to areas of “core content,” as with the main navigation The relative importance of these areas is conveyed by giving clear indicators of where the user is going and why.

13. D. Side bar serves as way to call out noteworthy work to the surface of the site. Could also be used to include such things as customer quotes, interesting trivia, awards and accomplishments, links to important section that are buried below the main navigation. Affiliate links

14. Feature Elements Site identifier, could be logo, tag line, name of site Primary navigation Secondary navigation In main content:  main section title  Sub section title  Main graphic  Body text  Embedded links

15. Feature Elements Sidebar:  Title  content Unique features in sidebar  Sidebar section title  Showcase  External links Footer:  Copyright info  Legal info

16. F. Footer Typically contains privacy policy and copyright information. http://monocle.com/ http://www.ditto.com/ https://yourkarma.com/ http://www.kikk.be/2012/ http://insite.net/home/

17. E. Quick Link Drop down menu leading directly to any of the 8 core design service categories

18. Homepage feature elements

19. Secondary page feature elements

21. Citations 10 principles of navigation design Effective headers