Wireframes in Physical Design Yonglei Tao. 1-2 Website Wireframes A visual guide that represents...

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