A wireframing workshop I had the privilege of conducting as part of a design thinking community of practice session.

1. EIT DARE Design Thinking
Community of Practice 3
Mock It Till You
Make It
A Wireframing Workshop

2. 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

3. “When I buy jeans,
______ matters”

5. Begin at the Beginning…
What is a
Wireframe?

6. 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.

8. Wireframing is NOT
A finished concept
A graphic design
Necessarily content
Necessarily final

9. Why Wireframe?
Exploration1
Focus on Design2
Cleaning the Mess3
Early Stage Availability4
Communication5
Future Time Machine6

10. Show Me, Don’t Tell Me…
Wireframe
Examples

13. Fast, Easy and (not too) Dirty…
Wireframing
on Paper

14. 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.

15. Demo:
Prototyping on Paper
Video: https://vimeo.com/101373355

16. Alignment &
Allocation

17. Go to http://gomockingbird.com and
click on “Try it now for free”

18. Breaking Out the Big Guns…
Digital
Wireframing

20. Wireframes are Part of a Process
Static Wireframe
Testing Interactions
Interactive Wireframe
Mimicking the Experience
Full Prototype
Layout and Info Grouping

21. Wireframes are part of a Process
Static Wireframe
Testing Interactions
Interactive Wireframe
Mimicking the Experience
Full Prototype
Layout and Info Grouping

22. Wireframes are part of a Process
Static Wireframe
Testing Interactions
Interactive Wireframe
Mimicking the Experience
Full Prototype
Layout and Info Grouping

23. Wireframes are part of a Process
Static Wireframe
Testing Interactions
Interactive Wireframe
Mimicking the Experience
Full Prototype
Layout and Info Grouping

24. Demo:
Mockingbird

25. Hands on:
Jeans Revolutions
Using Mockingbird, create a digital wireframe based on
your paper one. Think about alignment and allocation.

26. Some of the Tools Available

27. Some of the Tools Available
Low-Fidelity

28. Some of the Tools Available
Medium-Fidelity

29. Mobile-Focused
Some of the Tools Available

30. Some of the Tools Available
High-Fidelity

31. Some of the Tools Available
Screen-Linking

32. Demo:
Invision

33. The End of the Beginning
Web Form Design by
Luke Wroblewski
Everything is designed.
Few things are designed well.
Brian Reed

34. Thank you!
What was done well? What could be better?
What would you like to see for future CoPs?