Description
“A wireframe is a basic blueprint that illustrates the core form and function found on a single screen of your web page or application” (Hamm, 15).3 Wireframing is useful in the design stage of websites and apps to layout the basic features. This is usually done before the usability testing stage to create a mock-up of the intended product. Wireframing is usually done with a specific goal in mind for the intended user, such as directing them to a certain product. UX Consultants, while tasked with a variety of developmental processes, normally handle the wireframes and generative sketches.2
The Interactive Design Foundation describes wireframing as useful “to spot constraints and opportunities”. This allows a design team to explore all aspects of a potential design, and field possible errors. Particularly, the designers will consider the wireframe from both a consumer standpoint as well as a business standpoint. Wireframing can be done in a plethora of ways, include a basic drawing on paper, or using specific software. Either way, it is a very critical step in the design and creation process for websites and apps.
Challenge
This design challenge will allow you to explore the use of shapes, figures, and texts when creating a wireframe. This will also enable you, as the consumer, to recognize strengths and weaknesses of a website’s design.
Learning outcome:
Moderate a simple test to observe the participants ability to create a wireframe of a website.
Directions:
Set up the challenge: save a copy of the wireframing key to reference during this challenge
- Open up the homepage of your favorite or most used website.
- Create a wireframe of the homepage, using the wireframing key.
- This can be done as a drawing on paper or digitally.
- Note: not all symbols within the key have to be utilized.
Sources
- Adrian Mendoza. “Chapter 5 – How Mobile Wireframing Works.” Mobile User Experience, Elsevier Inc, 2014, pp. 67–86, https://doi.org/10.1016/B978-0-12-409514-4.00005-2.
- Bruun, Anders, et al. “The Role of UX Professionals in Agile Development.” Proceedings of the 10th Nordic Conference on Human-Computer Interaction, 2018, https://doi.org/10.1145/3240167.3240213.
- Hamm, Matthew J. Wireframing Essentials: An Introduction to User Experience Design: Learn the Fundamentals of Designing the User Experience for Applications and Websites. Packt Publishing, 2014.