47
Wireframes

Intro to Wireframes

Embed Size (px)

Citation preview

Wireframes

Deb MacKenzie

[email protected]/in/debmackenzie

Agenda1. Deb talks for a while

• What is a wireframe? • Why make them?• How to make them? • How to evaluate them?

2. Real world examples3. Activity4. Project time

Wireframes aren't a solution, they are a tool.

If you are marketing yourself as a wireframe producer, you'll end up

producing wireframes. If you market yourself as a problem solver, you'll

end up solving problems- Chris Nodder

Author of “Evil By Design”

What is a wireframe?

A wireframe is not a mockup

A wireframe is not working code

You are here

Low fidelity High fidelityMed fidelity

WireframePrototype / Mock-up

Different Levels of Fidelity

Flow charts -> Grey box frames

Low fidelity -> Medium fidelity

High fidelity mock-ups

Wireframes are a communication tool. Use the format that matches the conversation you want to have

Sketching

Paper Wireframe

Grey Box Wireframe

Digital Wireframes

Clickable Wireframes

Individual Component

Why wireframe?

User journey

Feature location

Content location

Screen layout

Unique Interactions

Sign offUser testing

Experience

Development

StakeholdersVisual designersUsers

UX designers

It’s All About Communication

Requirements

User Testing

Alignment On Requirements

Communicate Interaction

How to wireframe?

Comes From…

Collaborative creation

1. Group sketching sessions

2. Interactive wireframing

3. Combining several versions

Digital Tools

Go right to small screen

320

480

Squint test

Iterate

Iterate

Iterate

Evaluating wireframes

Make sure you can answer

How will users move around the site?

Does the wireframe address the business and creative goals?

Do you know what all of the elements on the page are?

Is anything important missing from the page?

Can you get to all of the major sections of the site from here? Should you be able to?

Do the wireframes have too much visual detail?

Think from the Perspective of the Persona

Examples of wireframes put to use

Example: Aviva

Working with: – Project Owners– Business Analysts– Solution Designers– Legal/Insurance Experts– Project Managers

– Developers (in-house and off-shore)

– Testers– Graphics Designers– Copywriters

Aviva Life Insurance UK - a set of web applications to quote and apply for Aviva insurance through partnerships with prominent UK banks.

I had…

1) set of detailed wireframes (about 300)

2) set of high level wireframes (about 30)

3) working prototypes

CommunicationDev team (off-shore) -> detailed wireframes

Dev team (local) -> detailed wireframes / click prototypes

Content writers -> detailed wireframes

QA -> detailed wireframes

Documentation -> detailed wireframes

Sign off -> high level wireframes

CommunicationDecision making -> high level wireframes

Visual design -> high level wireframes

User tests -> prototypes

Demos -> prototypes

Example: University Website

Working with: – Visual Designers– Developers– Project Managers– Outside Stakeholders

Post-secondary Institution – a responsive website to serve as the online face of the university

I had…

1) Desktop, Tablet, and Mobile versions of the navigation

2) 3 page types: Homepage, Landing page, Content page

Responsive Navigation

Page Type

Activity

Group SketchingDo a group sketching session of an interaction with a wearable device. Draw at least 3 panels of the interaction.

Thick and Thin lines: Define and Detail

Bright colour: Grab attention!

Grey marker: Depth

The CDM smartwatch for Canvas!

Group member 1: You’ve talked to marketing, it’s important that they have a sexy product to market.

Group member 2: You’ve talked to the project manager, the project scope needs to be kept to the Minimal Viable Product.

Group member 3: You’re talked to development, they want something new and interesting to code.

Group member 4:You’re from design, you believe the product needs to be simple and easy to use.

Group member 5:You’ve talked to the business, they need a product that will sell many units.

Thank you!