TiE WOMEN CREATE-A-THON
Wireframing Workshop

PRESENTER
ALL ROUNDER, CANVA
KRIS HOWARD

Canva makes graphic design simple for everyone.
You can use it to create beautiful and on-brand marketing
materials, social media graphics and documents.
What is Canva?

FAIL FAST,
FAIL OFTEN

SOURCE: IBM SYSTEMS SCIENCES INSTITUTE
0
25
50
75
100
DESIGN IMPLEMENTATION TESTING MAINTENANCE
Relative Cost to Fix Software Defects
1X
6.5X
15X
100X

WORDS ARE
AMBIGUOUS

WORDS ARE
AMBIGUOUS
GALLERY?

WORDS ARE
AMBIGUOUS
GALLERY?
POP-UP?

WORDS ARE
AMBIGUOUS
GALLERY?
POP-UP?
LIGHTBOX?

WORDS ARE
AMBIGUOUS
GALLERY?
POP-UP?
LIGHTBOX?
NAV MENU?

WORDS ARE
AMBIGUOUS
GALLERY?
POP-UP?
LIGHTBOX?
NAV MENU?
PANEL?

WORDS ARE
AMBIGUOUS
GALLERY?
POP-UP?
LIGHTBOX?
NAV MENU?
SHARE?
PANEL?

1) IT TOOK FOREVER.

1) IT TOOK FOREVER.
2) NOBODY READ IT
ANYWAY.

SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DOOS/5349701981

“Pictures can represent complex concepts
and summarize vast sets of information in
ways that are easy for us to see and
understand, they are useful for clarifying
and resolving problems of all sorts.”
- DAN ROAM IN THE BACK OF THE NAPKIN

Wireframing Benefits
Pictures = less ambiguity

Wireframing Benefits
Pictures = less ambiguity
Cheap to implement

Wireframing Benefits
Pictures = less ambiguity
Cheap to implement
Cheap to destroy

Wireframing Benefits
Pictures = less ambiguity
Cheap to implement
Cheap to destroy
Fast to generate

Wireframing Benefits
Pictures = less ambiguity
Cheap to implement
Cheap to destroy
Fast to generate
Easy to test

DEGREES OF
FIDELITY

SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DOOS/5349701981

SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/INTERACTIVEMARK/15033569833

SOURCE: MARYANA (WIKIMEDIA FOUNDATION) / CC-BY-SA-3.0

SKETCHING
!=
DRAWING

Sketching Benefits
Low cost (both in $ and time)

Sketching Benefits
Low cost (both in $ and time)
Collaboration

Sketching Benefits
Low cost (both in $ and time)
Collaboration
Freedom to make mistakes

Sketching Benefits
Low cost (both in $ and time)
Collaboration
Freedom to make mistakes
Explore lots of ideas quickly

Sketching Benefits
Low cost (both in $ and time)
Collaboration
Freedom to make mistakes
Explore lots of ideas quickly
Easy to discuss/share/critique with others

Sketching Benefits
Low cost (both in $ and time)
Collaboration
Freedom to make mistakes
Explore lots of ideas quickly
Easy to discuss/share/critique with others
FUN

Tools:
Paper or templates
Pens or markers
Sticky notes
Rulers
Photocopier & tape

Only show as much as you need to:
Squiggles for text
Boxes for images
Buttons
Techniques:
Only show as much as you need to:
Squiggles for text
Boxes for images
Buttons
Press here

SOURCE: HTTP://WWW.SLIDESHARE.NET/
WEBWALLFLOWER/GOOD-DESIGN-
FASTER-SLIDES-FAILCON-2010

Two Types of Sketching
Exploratory
Lots of ideas
Rough
Unsubtle
Higher fidelity
More realistic
Refining

UI Flows
Interface elements
Different states
Branching
Pareto Principle: draw the 20% of functionality
that will be used 80% of the time

SOURCE: HTTP://WWW.CODEPROJECT.COM/ARTICLES/111949/EXCERPT-
FROM-DESIGNING-THE-IPHONE-USER-EXPERIENCE

SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DAGTJ/4964710675

Takeaways from Today:
Benefits of wireframing
Low vs. high fidelity
Use the right tools and annotate
Don't get lost in details
Share your wireframes

EXERCISE

M A D E I N C A N V A