Discussion on Wireframing Tools

The goal of this exercise and discussion is to identify various tools and approaches to wireframing.

Steps

  1. Consider the tools and approaches you have used for constructing a wireframe in the past. Even if your experience is limited, consider what you used for the wireframing exercise we did in class. Possible approaches could involve hand-drawn sketces, software development frameworks (e.g. HCI/HCI/JS, react.js, vue.js), general-purpose design tools (Adobe Illustrator) or tools intended for wireframes (e.g. Figma, Azure).
  2. Given your experience with a particular approach, consider the following:
    • How long does it take to create a one-page wireframe with a dozen interactive controls?
    • How easy was it to learn?
    • How well does it support collaboration?
    • What other features are you likely to consider for choosing to use or recommending this tool or approach?
  3. As possible, discuss your experience in groups of 2-4 people. For in-class and zoom, we will have breakout discussion, but this exercise can be completed asynchronously.
  4. Visit the Wireframing Discussion thread in the week 7 discussion board. There you will find a link to a Google doc summarizing various approaches. Contribute (everyone) in any combination of the following ways (try for at least two):
    • Add to the Google doc your experience with a listed tool/approach. If yours isn't there, add it to the list.
    • Review the Google doc and add any comments, using the comments tool.
    • Add to the D2L discussion about your experience with this discussion.