Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wireframing Workshop - TiE Women Create-a-Thon

1,481 views

Published on

A talk given at the TiE Sydney Create-a-Thon on July 18, 2015 on what wireframing is, the benefits, what fidelity means, and tools and techniques to get started.

  • Be the first to comment

Wireframing Workshop - TiE Women Create-a-Thon

  1. 1. TiE WOMEN CREATE-A-THON Wireframing Workshop
  2. 2. PRESENTER ALL ROUNDER, CANVA KRIS HOWARD
  3. 3. 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?
  4. 4. FAIL FAST, FAIL OFTEN
  5. 5. 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
  6. 6. WORDS ARE AMBIGUOUS
  7. 7. WORDS ARE AMBIGUOUS GALLERY?
  8. 8. WORDS ARE AMBIGUOUS GALLERY? POP-UP?
  9. 9. WORDS ARE AMBIGUOUS GALLERY? POP-UP? LIGHTBOX?
  10. 10. WORDS ARE AMBIGUOUS GALLERY? POP-UP? LIGHTBOX? NAV MENU?
  11. 11. WORDS ARE AMBIGUOUS GALLERY? POP-UP? LIGHTBOX? NAV MENU? PANEL?
  12. 12. WORDS ARE AMBIGUOUS GALLERY? POP-UP? LIGHTBOX? NAV MENU? SHARE? PANEL?
  13. 13. 1) IT TOOK FOREVER.
  14. 14. 1) IT TOOK FOREVER. 2) NOBODY READ IT ANYWAY.
  15. 15. SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DOOS/5349701981
  16. 16. “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
  17. 17. Wireframing Benefits Pictures = less ambiguity
  18. 18. Wireframing Benefits Pictures = less ambiguity Cheap to implement
  19. 19. Wireframing Benefits Pictures = less ambiguity Cheap to implement Cheap to destroy
  20. 20. Wireframing Benefits Pictures = less ambiguity Cheap to implement Cheap to destroy Fast to generate
  21. 21. Wireframing Benefits Pictures = less ambiguity Cheap to implement Cheap to destroy Fast to generate Easy to test
  22. 22. DEGREES OF FIDELITY
  23. 23. SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DOOS/5349701981
  24. 24. SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/INTERACTIVEMARK/15033569833
  25. 25. SOURCE: MARYANA (WIKIMEDIA FOUNDATION) / CC-BY-SA-3.0
  26. 26. SKETCHING != DRAWING
  27. 27. Sketching Benefits Low cost (both in $ and time)
  28. 28. Sketching Benefits Low cost (both in $ and time) Collaboration
  29. 29. Sketching Benefits Low cost (both in $ and time) Collaboration Freedom to make mistakes
  30. 30. Sketching Benefits Low cost (both in $ and time) Collaboration Freedom to make mistakes Explore lots of ideas quickly
  31. 31. 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
  32. 32. 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
  33. 33. Tools: Paper or templates Pens or markers Sticky notes Rulers Photocopier & tape
  34. 34. 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
  35. 35. SOURCE: HTTP://WWW.SLIDESHARE.NET/ WEBWALLFLOWER/GOOD-DESIGN- FASTER-SLIDES-FAILCON-2010
  36. 36. Two Types of Sketching Exploratory Lots of ideas Rough Unsubtle Higher fidelity More realistic Refining
  37. 37. UI Flows Interface elements Different states Branching Pareto Principle: draw the 20% of functionality that will be used 80% of the time
  38. 38. SOURCE: HTTP://WWW.CODEPROJECT.COM/ARTICLES/111949/EXCERPT- FROM-DESIGNING-THE-IPHONE-USER-EXPERIENCE
  39. 39. SOURCE: HTTPS://WWW.FLICKR.COM/PHOTOS/DAGTJ/4964710675
  40. 40. 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
  41. 41. EXERCISE
  42. 42. M A D E I N C A N V A

×