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
1X6.5X
15X
100X
WORDS AREAMBIGUOUS
WORDS AREAMBIGUOUS
GALLERY?
WORDS AREAMBIGUOUS
GALLERY?
POP-UP?
WORDS AREAMBIGUOUS
GALLERY?
POP-UP?LIGHTBOX?
WORDS AREAMBIGUOUS
GALLERY?
POP-UP?LIGHTBOX?
NAV MENU?
WORDS AREAMBIGUOUS
GALLERY?
POP-UP?LIGHTBOX?
NAV MENU?
PANEL?
WORDS AREAMBIGUOUS
GALLERY?
POP-UP?LIGHTBOX?
NAV MENU?
SHARE?
PANEL?
1) IT TOOK FOREVER.
1) IT TOOK FOREVER.
2) NOBODY READ ITANYWAY.
SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DOOS/5349701981
“Pictures can represent complex conceptsand summarize vast sets of information inways that are easy for us to see andunderstand, they are useful for clarifyingand 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 OFFIDELITY
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 ideasRoughUnsubtle
Higher fidelityMore realistic
Refining
UI Flows
Interface elements
Different states
Branching
Pareto Principle: draw the 20% of functionalitythat 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
Recommended
