A wireframe is a two-dimensional screen blueprint that represents the skeleton of a website or app.
Wireframing is one of the earliest and most ground-breaking steps in design and development. The primary purpose of using wireframes is to get a full picture of the project, outline its key features, and keep both the customer and developer on the same page.
UX wireframes allow you to clearly convey your initial ideas and introduce changes with minimal effort.
In this short guide for beginners, we’ll share a few wireframing basics and cover the following aspects:
Think of a wireframe as a blueprint for a house that architects create before beginning the interior design stage.
Like a blueprint, a wireframe is a skeleton of your web or mobile application with a strong focus on structure and functionality rather than visual aesthetic. A wireframe can contain buttons, forms, widgets, and other elements, but it doesn't reveal their final appearance.
Wireframes define information hierarchy and help determine where elements are placed. They can be used to map out how you would like your users to process the information.
There are three questions a wireframe should answer:
Designers find wireframes extremely useful for the following reasons:
To create a wireframe, you need to know the product’s target audience and core functionality. You can use competitors and similar products in other industries as a benchmark or even inspiration.
Conducting user interviews will help you extract initial feedback from the target audience and validate your idea before building a new project. You can then analyze your UX research findings to develop a customer-centric wireframe.
UX wireframes can range in levels of fidelity, visualization, and interactivity, from a simple hand-drawn sketch to a multi-page clickable structure. You get to decide which one you need at the moment.
“Don’t jump into mapping things out on a screen,” recommends Mio Akasako, Co-founder and VP of Design at Ash.“Starting with a pen, paper, or whiteboard lets you move quickly through ideas and jot down questions and comments that you come up with while sketching things out.”
This basic wireframe is a great way to get started; however, it can feel awkward and incomplete without additional details. It also can be challenging for others to visualize the final product in this case.
“We typically rely on detailed user flow diagrams to help inform our design and prioritize key screens and flows,” says Adam Perlis, CEO of Academy Product Design. “This kind of content mapping helps teams to determine information architecture, taxonomy, or navigational flow and helps clients to confirm the path forward.”
Creating a high-fidelity wireframe or mockup requires more time and the use of tools like Sketch or Figma.
Remedy Director of Design, Andrei Tarasevich, recommends an 8-step process for creating wireframes.
“Customers sometimes might feel they don't need the process or artifacts leading up to the wireframing. That's right,” says Andrei. “However, it is what designers need to build a well-knit and fully personalized product that meets all the customer’s needs. Without diving into the details of your product, we can't do our job well.“
A mind map is a method for generating ideas and organizing data that allows you to solve various kinds of problems. In the design process, mind maps help designers find original ideas quickly.
Using the mind mapping technique, an individual or a group can brainstorm a variety of ideas and hypotheses for solving problems or approaching different tasks.
Remedy Senior UX Designer, Maxim Morev, suggests, “Including more participants in these sessions will generate more potential features and functionalities to discuss and analyze before deciding what to include in development.”
When designing your application, you will need to understand your product and plan out the way you will connect application screens.
Users don't like when they're forced to perform multiple actions in apps to get what they want. Make the script that your users will walk through clear and intuitive to ensure that users can achieve their goals smoothly.
Your users may have a lot of thoughts and opinions about how your app should work. Conduct user interviews and UX research to make sure you've taken your target users’ perspectives into account. This approach will help you come up with the best user experience.
Now it’s time to visualize the resulting user flow. You may be tempted to use digital sketching tools, but we suggest doing it on paper first.
“Starting out by sketching non-digitally allows me to ideate more freely,” says Google UX Designer, Denise Nguyen. “I can sketch without worrying about the constraints of technology, dealing with software, or thinking about being pixel perfect. After I sketch, I ask for feedback from someone else.”
Working through your ideas first on paper and then digitally will give you a better idea of what kind of design you need. Always sketch the main elements of your wireframes from the user's perspective.
A good user-oriented UI is crucial for the success of your web or mobile application. Make sure to design an eye-catching and intuitive interface that will attract and engage users.
Create a frame using a digital mockup of a device’s screen, rather than just placing the screen design elements within a rounded rectangle. Take a look at the device you plan to run the app on in the future (mobile, tablet, PC, or others). Using a gadget image to create wireframes saves you from creating additional elements.
The same layout will not display correctly on every mobile screen. Let’s say you put your content on an iPhone 4s screen. It won’t work properly for an iPhone X, so you will need to adjust and scale your content for that type of device.
Each wireframe may need to be modified depending on the screen sizes of different mobile devices. Always check that the content is displayed correctly on different gadgets.
To verify the quality of your UX design decisions, we recommend making a clickable model or prototype based on the wireframes of separate screens.
By combining your screens into a logical structure, you can see your application as a whole and test your user flows. At this point, you can uncover and fix any possible design issues before they get too expensive.
The last vital step is to check your wireframes for errors and inaccuracies. You need to test the final design of your applications. Always take time to test the final stage of wireframing to save resources and time later on.
There are many tools that facilitate the creation of wireframes for mobile applications on the market. Let's take a quick look at the most popular ones that you can leverage during your design process.
This tool was created to meet the needs of software developers. It allows you to build diagrams on several layers and create abstractions for each of them.
Sketch is a well-proven design tool that speeds up the collaborative prototyping process.
This is a user-friendly tool for building wireframes with a nearly unlimited range of templates. There is also support for real-time collaboration.
If you need a tool that can speed up the wireframing process, then this tool is for you. You can choose templates that fit both mobile and web pages.
Figma is a favorite at Remedy. This tool is widely used thanks to easy-to-use prototyping and graphic design features. You can create wireframes of different detail levels — from simple to complex.
Good interfaces are meant to solve problems. You can spend weeks or even months creating a captivating design, but users might still have trouble performing certain operations. That's why it is necessary to adopt cost-efficient solutions like wireframing. Wireframes are the best tool to help you get to your final goal quickly with the least effort.
While creating a website or mobile app, think of wireframing as a tool that you would use in combination with other design tools like mockups and high-fidelity or low-fidelity prototypes. In our next article, we'll consider the differences between prototypes and wireframes and when it's the right time to use them in your design process.