mock it till you make it - a wireframing workshop

EIT DARE Design Thinking

Community of Practice 3

Mock It Till You

Make ItA Wireframing Workshop

What We’ll Cover Today

1430 Introduction, Expectations, Ground Rules

1500 Wireframing Basics

1520 Hands-on: Paper Wireframing

1545 Teabreak

1600 Digital Wireframing: Tools, Demo

1630 Hands-on: Digital Wireframing

1700 Wrap-up and Feedback

“When I buy jeans,

______ matters”

Begin at the Beginning…

What is a

Wireframe?

A wireframe is a visual guide that

portrays how a webpage [or a system

screen] may look.

It focuses on: space allocation and

content prioritisation, available

functionality, and intended behavior.

Wireframing is NOT

A finished concept

A graphic design

Necessarily content

Necessarily final

Why Wireframe?

Exploration1

Focus on Design2

Cleaning the Mess3

Early Stage Availability4

Communication5

Future Time Machine6

Show Me, Don’t Tell Me…

Wireframe

Examples

Fast, Easy and (not too) Dirty…

Wireframing

on Paper

Hands on:

Jeans Reloaded

On a piece of paper, wireframe a product page to sell a

particular model of jeans. It should allow users to customise

the most important factors.

Demo:

Prototyping on Paper

Video: https://vimeo.com/101373355

Alignment &

Allocation

Go to http://gomockingbird.com and

click on “Try it now for free”

Breaking Out the Big Guns…

Digital

Wireframing

Wireframes are Part of a Process

Static Wireframe

Testing Interactions

Interactive Wireframe

Mimicking the Experience

Full Prototype

Layout and Info Grouping

Wireframes are part of a Process

Static Wireframe

Testing Interactions

Interactive Wireframe

Mimicking the Experience

Full Prototype

Layout and Info Grouping

Wireframes are part of a Process

Static Wireframe

Testing Interactions

Interactive Wireframe

Mimicking the Experience

Full Prototype

Layout and Info Grouping

Wireframes are part of a Process

Static Wireframe

Testing Interactions

Interactive Wireframe

Mimicking the Experience

Full Prototype

Layout and Info Grouping

Demo:

Mockingbird

Hands on:

Jeans Revolutions

Using Mockingbird, create a digital wireframe based on

your paper one. Think about alignment and allocation.

Some of the Tools Available

Some of the Tools Available

Low-Fidelity

Some of the Tools Available

Medium-Fidelity

Mobile-Focused

Some of the Tools Available

Some of the Tools Available

High-Fidelity

Some of the Tools Available

Screen-Linking

Demo:

Invision

The End of the Beginning

Web Form Design byLuke Wroblewski

Everything is designed.

Few things are designed well.Brian Reed

Thank you!What was done well? What could be better?

What would you like to see for future CoPs?