mock it till you make it - a wireframing workshop
TRANSCRIPT
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
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?