Wireframe Development#

For this task you should aim to do it for your own assessment project.

Readings

Task#
  • Take an A4 size paper or sheet from your process journal
  • Identify an activity you wish to wireframe for, this can be for an app, website, or for a physical interface
  • List out steps the user will need to complete in order to accomplish the goal of the activity you have identified, for example, if you are logging into your email account, you will need to enter a username, password, and click a button.
  • Identify the elements needed for each step. Ask yourself, how much information should there be on the same screen?
  • Draw out the interface elements required for the activity in that one step, e.g., 2 text boxes and a button for a login screen.
  • Continue this till you have developed a wireframe for your design solution that covers the entire activity you are planning to map out.
  • Recreate your drawn wireframe using Figma or a similar graphical software. Consider introducing interactive elements such as clicking to move to other screens or scrolling etc if your wireframe is for an app or website.
  • Observe the wireframe identifying the many paths and interactions a user can take in your interface to achieve the desired goal. Consider the heuristics and learnings from activities across the workbooks to assess your wireframe.
  • Submission: Add the wireframe to your process journal or submit to the forums as instructed. Try to be clear in how you depict interactions particularly when moving between interfaces such as between a smartphone to smartwatch etc.