wireframing workshop - tie women create-a-thon
TRANSCRIPT
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?
SOURCE: IBM SYSTEMS SCIENCES INSTITUTE
0
25
50
75
100
DESIGN IMPLEMENTATION TESTING MAINTENANCE
Relative Cost to Fix Software Defects
1X6.5X
15X
100X
“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
Cheap to implement
Cheap to destroy
Fast to generate
Easy to test
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
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
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
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