1. There are Different Purposes for Navigation Global links go on ALL the website screens: Goes to OVERVIEW section screens Local/Inline Links usually go to only information on a landing or section screen: Goes to SPECIFIC content in only that section Global-Utilities goes on ALL the website screens: usually in the Header or Footer areas (Log-in, Register, Help, Support, Legal, etc.- links not related to specific content)

2. Global Link Navigation Example Present on every screen – it is the main navigation bar

3. Local Link Navigation Example Present only on sub- category screens – this screen is one click away from the main navigation menu at the top

4. Global Utilities Navigation Example Search bar, registry, store locator, shopping basket are present on every screen – makes it easy for user to get to high level interactive features such as the Shopping Cart at any time

5. SKELETON STAGE: WIREFRAMES Screen Layout with Page Elements that show Function

6. Liberty Blueprints All structures start with detailed blueprint plans before building the final work

7. Wireframes Blue prints of the individual screens - the arrangement of content & features on a screen - like an individual building floor plan layout Screen layout of content (wireframes) much more detailed than architectural diagram NO color - NO graphics Comes AFTER the Architecture Diagram - which gives the road map of the site’s content placement

8. Architectural diagram Acts like map to the website screens – include numbers for screen IDs & arrows to show click paths

10. Wireframes ID each wireframe with a number system that matches with the site map number system. Page details noted on the side of the wireframe - give more detail about the content & features on the screen layout. Use actual page titles and sub-headings and link labels - draw from what you have learned with the card sort technique Establish visual hierarchy with page titles & sub- heads - page titles and sub-headings should be different sizes & weights

11. Wireframes Starts with a GRID for page element organization 1.EDGE MARGINS = 30 PIXELS 2.SPACE BETWEEN EDGE SINGLE BLUE GUIDES = 10 PIXELS 3.DOUBLE BLUE GUIDES HAVE SPACE BETWEEN COLUMN GUTTERS = 20 PIXELS 4.EACH PINK COLUMN WIDTH = 60 PIXELS This is a 960 pixel wide screen grid, from left to right edge, that has 12 columns (in pink). The blue guides represent gutter space between the columns and at each edge of the grid.

12. Wireframe Elements Designer uses standard wireframe elements to show what kind of content is used and where it is placed on the screen grid Button 1 Button 2 Button 3 Button 4 Button 5 These examples are common types of wireframe elements NavigationMedia – Image & Video Text Headlines. Sub-headlines & Body copy with Greeking or placeholder Headlines Sub-Headlines Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel urna leo. Pellentesque tincidunt faucibus elit ut imperdiet. Pellentesque cursus vulputate turpis, sit amet gravida orci aliquam eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius, sem porta rutrum suscipit, mauris lorem dapibus nunc, nec cursus augue metus laoreet sapien. Nunc varius mollis justo sit amet suscipit. Donec et imperdiet nisi. Donec ac enim augue, vulputate sollicitudin nibh. Praesent dictum posuere leo non cursus. Nam porta ipsum dui. Etiam orci turpis, porta in ornare in, tempor non augue. Nullam eu augue nibh, quis facilisis turpis. Nam libero orci, aliquet id faucibus a, rutrum gravida ipsum. Body copy Icons

13. Full size screen Wireframe Example 1.Name of Web screen and Flow chart ID number at the top of grid to show where this screen is positioned on the Architectural Diagram 2.Navigation labels are present on the navigation bar 3.Images and media are clearly labeled as to the content to be shown 4.Titles are indicated 5.Greeking or placeholder text is used for Body copy to show how the text will look on the screen 6.Page elements show clear alignment to the grid and each other 7.Page elements placement shows consistency and logical information flow 8.Screen shows clear hierarchy – header, body & footer areas Header Area Body Area Footer Area

14. Mobile Wireframes Mobile devices have smaller screen size for screen layouts than desktop computer screens Also uses a different kind of interface Screen layouts have to be condensed to accommodate different screen size Just reducing desktop screen layout is NOT user friendly!

15. Mobile Wireframe Examples Much smaller screen environment requires different interaction than desktop screen environments Mobile List view Mobile Profile view