Wireframes in Physical Design Yonglei Tao
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
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
A High-Fidelity Wireframe
A Low-Fidelity Wireframe
A Compromise
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
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
An Example
More Example
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
A Pattern Call to action Placeholder for the pattern above
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
Creating a High-Level Wireframe Map out what the page will contain at a high level
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
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
A Design Process for Web Pages Choose design patterns Find a wireframe Create a design comp and code Complete a Web page
1 – Choose Design Patterns
2 - Find a Wireframe
3 – Create a Design Comp and Code
4 – Complete a Web Page
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
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
High-Fidelity Wireframes - Mobile App
Low-Fidelity Wireframes - Mobile App
References Lindsay Ellerby, “Wireframing with Patterns” patterns.php patterns.php Todd Warfel, “Wireframing with InDesign and Illustrator” indesign-and-illustrator.php