Wireframing
Watch the video for an introduction to what wireframes are and how they are used in the UX design process.
Now that you’ve watched the video, see whether you can formulate a response to the following questions:
- How would you describe the benefits of wireframing in the UX design process?
- What do you think the difference is between a wireframe and a functional prototype?
- What advantages and disadvantages can you think of in terms of hand-drawn versus digital wireframes?
Share your answer to the third question in the comment section.
Wireframing
As you learned in the video, a wireframe is a ‘two-dimensional skeletal outline of a web page or app’ that provides a basic blueprint or overview of a product’s overall structure, IA, user flow and functionality. [1] Essentially, wireframes are early-stage visual representations that use basic shapes and mock content to convey how a product will work before functionality is added. They clarify and define features, and they enable teams to iterate early, which saves time and money.
Considerations for wireframing
There are many factors that UX designers should consider before creating wireframes. Let’s take a look at some key considerations for one of the most common design challenges: designing for different devices.
Which devices are you designing for? The preference for mobile devices has driven the need for mobile-first design strategies that prioritise responsive design. [2] When it comes to wireframing with a mobile-first approach, there are three factors to keep front of mind:
1. Screen size
When it comes to wireframing, this means designing with the smallest screen size in mind and then scaling up for larger screens such as laptop and desktop devices. The limitations of smaller screen sizes will ensure that you prioritise your most important features and content over extraneous details.
As the size of your screen is reduced from desktop to mobile, the amount of content you see on the screen will reduce as well and will need to be presented using different breakpoints. A breakpoint is the specific screen width at which your content presentation changes. [2] It is best to let your content lead each breakpoint so that users can easily consume content on any device.
2. Behaviour
Think about how you interact with a desktop computer versus a mobile phone. On a desktop, you will likely use a mouse or trackpad to select an element and a keyboard to input text. On a mobile device, you will select elements and input information by tapping on a screen. When creating a wireframe, consider how to design each screen and element so that they are optimised for your users’ behaviour.
The following article about the placement of call-to-action (CTA) buttons for mobile applications shows the importance of understanding user behaviour in your design.
3. Interaction
Think about how users interact with apps across devices. Your users may access an app on a mobile device on the go and require low bandwidth or offline access for an optimal experience.
Your app is likely to be competing with multiple distractions and daily tasks for their attention. Desktop or laptop access is usually more stable and users are likely to be more focused on the specific task at hand rather than being distracted by daily life.
Next, you’ll create and complete wireframe for your design challenge using your information architecture overview.
References
- Hannah J. What exactly is wireframing? A Comprehensive Guide [Internet] CareerFoundry; 2021 June 23. Available from: https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#1-what-is-a-wireframe-and-who-uses-them
- Justinmind. Complete guide to mobile first design [Internet]. Justinmind; 2018 Jan 22. Available from: https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/
- Anthony. Optimal placement for mobile call to action buttons [Internet]. UX movement; 2019 Jun 25. Available from: https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
