WHY DO YOU NEED IT?

What is a wireframe?

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.

What to include in a wireframe?

wireframes should include enough information to reflect what needs to appear on each page of your website.

structural elementsfeature elements

Structural Elements

HeaderGlobal NavigationMain contentSidebar – secondary navigationfooter

Structural Features

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

Examples of creative headers

http://cog.nitiondesign.com/http://synchmedia.com/http://franfernandez.com/http://www.ctlonline.org/http://viget.com/inspirehttp://greaterthings.lhc.org/

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/

C. Main content

Primary Messaging, Text, and Image AreaWill consist of a headline (image text)a key photoplus a succinct written description that

highlights the clients custom services or global message.

http://healogix.com/ http://www.rednoseday.com/

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.

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.

B. Secondary Global Navigation

Though critical to the site, these links do notlead to areas of “core content,” as with themain navigation The relative importance of these areasis conveyed by giving clear indicators of where

the user is going and why.

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 ascustomer quotes, interesting trivia, awardsand accomplishments,links to important section that are buried

below the main navigation.Affiliate links

Feature Elements

Site identifier, could be logo, tag line, name of site

Primary navigationSecondary navigationIn main content:

main section title Sub section title Main graphic Body text Embedded links

Feature Elements

Sidebar: Title content

Unique features in sidebar Sidebar section title Showcase External links

Footer: Copyright info Legal info

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/

E. Quick Link

Drop down menu leading directly to any ofthe 8 core design service categories

Homepage feature elements

Secondary page feature elements

Secondary page feature elements

Citations

10 principles of navigation designEffective headers