Prototyping and Wireframing
| Number of Participants | Facilitators | Category | Duration | Level of Difficulty |
| Individual or Group | – | Test | Dependent on material quality | Moderate |
Description
Prototyping is an important aspect in the design process, it is a process through which design teams showcase and implement all the work that has been done in the previous stages of the design process and what the product should look like and how the product will function. A prototype can vary from sketches on paper to pushing pixels that also include codes. These variations are called the fidelity. The fidelity conveys the level of interactivity, visual design and the content. There are three levels which are the low fidelity, mid-fidelity and the high-fidelity prototype. An example of the low fidelity prototype is the paper prototype which does not allow user interactions and an example of the high-fidelity prototype are computer based and are made with tools like sketch, figma or Adobe xd and allow for real time interactions. “I propose that low-fidelity prototyping is an appropriate means of gathering design information as it is an expedient solution and may serve as a method of testing the central tendency of entire classes of user interfaces.”(Virzi, 1989). In general, prototypes are essential when you want to pitch ideas, they are also great for usability testing.
On the other hand, Wireframes are a double dimensional depiction of how a digital product should look like, it focuses on showing only the function, the intended behavior, allocation of space and how the content of a digital product is prioritized. People regard wireframes as a low fidelity prototype. However, there are also the low fidelity and the high-fidelity wireframes. It is important to note that wireframes are only the architectural paths of the design. The main purpose of a wireframe is to make provision for insight early in the design phase for stakeholders. In all, do not make any attempt to create wireframes or prototypes without the user in mind.
More about Wireframes as a method here.
Materials
- Whiteboard/flipcharts
- Pen
- Paper
- Adobe XD, Figma, Proto.io, Invision, Axure, wireframe.cc, Balsamic, Miro
Preparation
No preparation needed.
A prototypes elements
- Logo
- Breadcrumb
- Seach field
- Headers & sub headers
- Navigation
- Body content
- Share button
- Contact information
- Footer
Step-by-Step Instructions
- Be clear about your goals. Ask questions like “what do we hope to achieve from this?”
- Design for flow. Ask questions like “what is important on this screen and how will a user interact with it?”
- Prioritize content layout/position and space so that everything is clear.
- Annotate (leave notes) – Don’t assume that wireframes speak for themselves. This is great for feedback
Remarks, Tips, Limitations
- Do not add too many details when creating the wireframe.
- Use simple and short annotations when wireframing
- There are many prototyping and wireframing templates that can be used.
- Prototyping could get expensive and it regarded as time consuming
- Wireframes can be confusing to stakeholders if they do not know anything about design
References
Engelberg, D., & Seffah, A. (2002). A Framework for Rapid Mid-Fidelity Prototyping of Web Sites. https://link.springer.com/content/pdf/10.1007%2F978-0-387-35610-5_14.pdf
Interaction design Foundation. (n.d.). What is prototyping? Interaction design foundation. https://www.interaction-design.org/literature/topics/prototyping
Stuyvesant High school. (n.d.). Wire frames. Web design. https://stuyhsdesign.wordpress.com/web-design/wireframes/
Usability.gov. (n.d.). Protyping. Usability.gov. https://www.usability.gov/how-to-and-tools/methods/prototyping.html
Virzi, R. A. (1989). What can you Learn from a Low-Fidelity Prototype? Proceedings of the Human Factors Society Annual Meeting, 33(4), 224–228. https://doi.org/10.1177/154193128903300405
Contributed by Maryam Moradian & Chinazom Emeregbam.
