Skip main navigation

Wireframing

A wireframe is a sketch of a digital interface which details the key elements or skeleton of the design. Watch this video to learn more.
5.3
A wireframe is essentially a low-fi sketch of a digital interface. This means it details the key elements or skeleton of the design. The purpose of a wireframe is to help the UX designer organise the features on the screen before they get too involved with the details of the design. An added bonus of wireframing is it enables UX designers to get feedback on their work in real time. A wireframe can also be used to test with users to gather feedback before making final design and UX decisions. UX designers will create wireframes for each screen of the interface. This helps them plan exactly how to guide the user to engage with tasks and key elements.
45.6
Traditionally, there are two types of wireframes: hand-drawn sketches and digital wireframes. Sketched wireframes are usually hand-drawn with pen and paper and digital wireframes are created using a variety of different tools, like Miro and InVision. Whether it’s a sketched wireframe or a digital wireframe, they’re both made up of the same basic fundamental shapes to represent the key elements that you would see on a screen. For example, a “send” key.
76.2
Initial wireframes are usually created in black and white because the most important thing about wireframes is to keep it simple. At this stage, UX designers need to make sure the design is solving their design challenge before adding the details. Wireframing helps UX teams to quickly sketch out and plan the information that needs to be on the screen. By adjusting the basic fundamental properties of the core elements on the screen, they can design the primary action as the most obvious for the user and use these wireframes in user testing to gather feedback before product development.
111
Wireframes have the potential to save a company a great deal of time and money by helping internal team members and stakeholders align by understanding the final product design before product development starts.

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:

  1. How would you describe the benefits of wireframing in the UX design process? 
  2. What do you think the difference is between a wireframe and a functional prototype?
  3. 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

  1. 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 
  2. 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/
  3. 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/
This article is from the free online

Introduction to UX Design

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education