1. Wireframes in Physical Design Yonglei Tao

2. 1-2 Website Wireframes  A visual guide that represents the framework of a website  Created for the purpose of arranging elements to best accomplish a particular purpose

3. 1-3 Wireframes (Cont.)  Depict  Page layout or arrangement of the website’s content  Screen elements and navigational structures  Focus on what a screen does  Usually lack typographic style, color, or graphics,  Help to create template layouts  Impose a consistent structure throughout the interface

4. A High-Fidelity Wireframe 

5. 

6. A Low-Fidelity Wireframe 

7. A Compromise

8. 1-8 Elements of Website Wireframes  Navigation  Placeholders for screen elements including images and content  General layout locations of key elements like header, footer, content columns, navigation  Additional pages to show  A site map that shows where different pages might live on the site  Simple workflow for interactive elements

9. Adding Annotations  Provide more detail for wireframes and patterns as needed  Any elements that are conditional – when and how they should appear  Links and buttons – what happens when a user clicks them  Any details that you cannot show due to space constraints – like all the options in a long drop-down list  Any elements having business, logical, or technical constraints – such as the length of a password in a field

10. An Example 

11. More Example 

12. Create Wireframes with Patterns  Wireframes can comprise many different patterns  Each is a discrete element with specific functionality  May include instructions, images, text fields, buttons, links, …  Patterns are used to create a complete Web page

13. A Pattern  Call to action  Placeholder for the pattern above

14. Sample Pattern Resources  Yahoo!® Design Pattern Library Yahoo!® Design Pattern Library  Martijn van Welie’s Web Design PatternsWeb Design Patterns  “Designing Interfaces” by Jenifer Tidwell  The Diemen Patterns Repository  “The Interaction Design Patterns Page” by Tom Erickson

15. Creating a High-Level Wireframe  Map out what the page will contain at a high level

16. Refining the Wireframe  Once you’ve identified the patterns you want to use and started to fill in the high-level page structure  Decide where each pattern should be placed

17. Creating a Pattern Library  Patterns are often domain-specific  Many of them are reusable  It is better to have an existing library of patterns for the designer to draw from

18. A Design Process for Web Pages  Choose design patterns  Find a wireframe  Create a design comp and code  Complete a Web page

19. 1 – Choose Design Patterns 

20. 2 - Find a Wireframe 

21. 3 – Create a Design Comp and Code 

22. 4 – Complete a Web Page 

23. General Tips  Get organized  Version control  Use patterns  Use stencils or symbols  Use master pages and backgrounds  Master pages hold elements that appear on many pages  Background add visual impact or emphasize individual elements Easy to create and ensure consistency in design When updating an element, it will update throughout all wireframes

24. Tools to Use  Desirable features  Diagramming and vector drawing  Stencils and backgrounds  Master pages and easy page navigation  Clickable prototyping capability  Options  Visio for Windows  OmniGraffle for Mac  HTML/CSS  inDesign and Illustrator

25. High-Fidelity Wireframes - Mobile App 

26. Low-Fidelity Wireframes - Mobile App 

27. References  Lindsay Ellerby, “Wireframing with Patterns”  http://www.uxmatters.com/mt/archives/2007/03/wireframing-with- patterns.php http://www.uxmatters.com/mt/archives/2007/03/wireframing-with- patterns.php  Todd Warfel, “Wireframing with InDesign and Illustrator” http://www.uxmatters.com/mt/archives/2007/01/wireframing-with- indesign-and-illustrator.php