why do you need it? what is a wireframe?. a wireframe is a wireframe is a simple visual guide to...
Post on 19-Jan-2018
220 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related