Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wireframing + User Experience Design with Balsamiq

D2e0d836be0ce8685ad40291e4547dc6?s=47 bcarlson41
November 07, 2019

Wireframing + User Experience Design with Balsamiq

In this presentation at Columbia College Chicago we discuss what wireframes are, why we do them and traits of successful wireframes. We followed this up with a wireframing activity.



November 07, 2019


  1. Wireframing + User Experience Design BI LLY C AR L

    S O N @ COLU M BIA C OLL E G E | T H U R SD A Y N OV E M B E R 7 T H , 2 0 19
  2. Design Education Writing, Content Strategy, Podcasting, Interviewing, Workshops, Courses Adjunct

    Professor Introduction to Human Centered Design aka Design Thinking and Doing User Experience Design
  3. None
  4. None
  5. Director of User Experience Co-creation and Design Facilitation, Experience Design,

    UX Strategy, Product Design, Mobile Products, Ecommerce.
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. If you don’t have it, go to balsamiq.com/product to use

    it for today’s activities
  15. None
  16. None
  17. None
  18. None
  19. None
  20. What are Wireframes?

  21. What is a Wireframe? A wireframe is a schematic, a

    blueprint, used to help designers and programmers (and more) think and communicate about the structure of the software or website they are building.
  22. What is a Wireframe? A visual guide that represents the

    skeletal framework of a website.
  23. What is a Wireframe? A wireframe is an illustration of

    an interface that focuses on space, prioritization of content, functionality, and intended behaviors.
  24. Is this a Wireframe?

  25. Is this a Wireframe?

  26. None
  27. None
  28. None
  29. Sketches Group Ideation When you are working together to generate

    lots of ideas, sketches are the best way to come up with broad, high-level views of concepts. Enhancing Existing Features If you have an existing app or website and you’re adding small feature or short page to it, sketches are great because there is an established site to use as the guide for designs. You’re using the sketch to show placement of content, and any interactions that need to be on the page and where.
  30. Lo-fidelity Sharing Rough Ideas When working on a close-knit team

    and sharing design ideas for small projects, or pieces of one—rough, lo- fidelity wireframes are a great place to start. They allow you to work asynchronously, and play around with the placement of the content quickly.
  31. Mid-fidelity Sharing Externally When you are presenting your wireframes to

    an external group, or you are presenting concepts for a totally new idea, mid-fidelity wires are great. They include real text, image placement, and a suggested layout. This would be the best fidelity for lots of different groups to review and make comments on.
  32. High-fidelity Sharing with External Developers High-fidelity wireframes are best used

    for sharing the project “blueprint” to external development teams. Ones that the design team would not have a lot of contact with. I think of it as similar to an architect handing over his designs to a contractor. The more detailed and clear the plan is, the better the outcome will be.
  33. Why Wireframe?

  34. Focus on Exploration over Refinement In the early stages, more

    ideas are better They encourage exploration instead of refinement in the ideation phase. In the early stages, more ideas are better.
  35. They Invite Collaboration Anyone can make good ones They are

    just boxes and arrows. Sketches. Visual ideas. Nothing to be intimidated by. The more input from multiple people or stakeholders in the early stages, the better. Have everyone responsible for the design in the room collaborating on ideas.
  36. Show Your Ideas, Instead of Tell A picture is worth

    a million bucks If you tell a story, everyone will have their own picture of what is happening. To avoid this, create visual representation of your idea. Showing what your idea invites far better feedback and aids collaboration.
  37. They’re Designed to be Criticized High fidelity designs are intimidating

    High Fidelity designs and wireframes can be tough to criticize. And they can invite feedback that is not helpful in early concept stages.
  38. They’re Designed to be Criticized Lo-fidelity looks criticizable Low Fidelity

    wireframes invite much better feedback. Feedback that is based on the content within the design, not specifics like icons, color or font choice which are important later in the design phase.
  39. They Invite Conversation What do you think? Wireframes facilitate conversations

    that lead to the right solution.
  40. They are Quick to Make …and disposable. They are cheap

    to update, change, scrap and start over. You cannot fall in love with every detail of a wireframe because they intentionally lack them.
  41. Why wireframe? Exploration They encourage exploration instead of refinement in

    the ideation phase. In the early stages, more ideas are better. Collaboration Anyone can make them! You don’t need to be a designer to draw a few boxes and explain your thoughts Criticizable Conversation They are not intimidating. They are just lines and boxes, so they feel impermanent. Wireframes facilitate conversation toward the right solution. Show > Tell Showing what your idea is invites far better feedback and collaboration. Speed They are easy and cheap to update, change, scrap and start over.
  42. Successful Wireframes…

  43. Generate a Lot of Ideas In the early stages, more

    ideas are better. Generating an abundance of ideas will help you discover the design that fits best.
  44. Quickly Create Refined Ideas They’re great for quickly combining ideas

    into concepts After you’ve generating many ideas, it is very easy to take all of those ideas to create more refined concepts.
  45. None
  46. None
  47. Quickly Iterate on Refined Ideas Try many options Wireframes are

    also great for picking apart the details of a design and allowing for refinement. Not sure of the nav?, create 3-5 more options to try out.
  48. Articulate a Solution They demonstrate your understanding of the problem

    It's not about understanding the problem, it's about reflecting your understanding of the problem. “This” is what I heard and my solution is “this”.
  49. Communicate Intent to Everyone Make ideas easily understood Use wireframes

    to get everyone on the same page, to ensure that all the people responsible with having to get the product built agree on the plan, and to make sure that it's a product users actually want.
  50. Communicate Intent to Everyone Make ideas easily understood You can

    also annotate the heck out them to explain to the viewer more details, or what the intended interactions could be.
  51. Successful Wireframes Articulate Demonstrate your understanding of the problem Refine

    Communicate Allow you to keep refining and not get too attached to specific idea Make your ideas easily understood Generate Producing more ideas and will lead to more thoughtful outcomes
  52. How to Wireframe

  53. You just have to do it! YO U G OT

    TA J U M P R IG H T IN
  54. Crazy - Eights I DEA G E N E R

  55. None
  56. 1 2 3 4 5 6 7 8

  57. Get into teams? One minute each for eight rounds Share

    your ideas with the team then you’ll have after that
  58. Prompt Design your ideal music streaming app T HI NK

    S P OT IF Y , A PP LE MU S IC , G O O G LE P LA Y , E T C
  59. Prompt Sketch 3 Key Screens Home > Playlist > Album

    Home > Playlist > Search Whatever you want, its yours! or or
  60. GO!

  61. Stretch Your Imagination 6. Must be voice controlled only 7.

    For preschoolers 8. It lives in the world of Star Wars
  62. Spend 5 minutes: Share them with each other Each person

    sketch a new version inspired by what they saw and heard after that
  63. Shareout Time

  64. Prototyping S H OW U S T H E S

  65. None
  66. None
  67. None
  68. None
  69. None
  70. Thank You! BI L LY C AR LS ON |

    B ILLY @ B A LS AM IQ . C O M | @ BIL LY C A R LS ON