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 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 Martijn van Welie’s Web 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”
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