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:
What is a wireframe?
How to create a wireframe?
Tools we use for creating wireframes
What is a wireframe?
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:
The core content (What?)
The structure of the information (Where?)
A description and basic visualization of the interaction between the interface and the user (How?)
Designers find wireframes extremely useful for the following reasons:
Structuring design. You can envision where everything will be placed before you even get to the specific technical details.
Identifying problems early on. The menu navigation and layout determine how everything else in the project will be designed. If there's a problem, it's better to identify it at the beginning rather than at the detailed prototype stage.
Focusing on content, not appearance. Wireframes allow you to concentrate on structure and functionality without getting distracted by design elements.
Expanding room for creativity. A wireframe is easy to create so that you can experiment without spending a lot of time and effort.
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.
Low Fidelity You can sketch a low-detail wireframe using a pen and paper during an initial workshop.
“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.
High Fidelity On the other hand, you can create a high-fidelity wireframe with more detailed information and structure by including additional captions and explanations.
"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.
Step-by-step guide for wireframing
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.“
1) Mind map
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.”
2) User flow
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.
3) Basic elements
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.
4) Key design patterns
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.
5) Device screen frames
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.
6) Content scaling
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.
7) Combining screens
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.
8) Design testing
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.
Tools we utilize to create wireframes
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.
Terrastruct
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.
Terrastruct features:
Templates for diagrams and flowcharts
Tools for creating a standard structure
Easy and seamless movement of items
Sketch
Sketch is a well-proven design tool that speeds up the collaborative prototyping process.
Sketch features:
Instant view and export of code
Grids and guides
Vector image editing tools
Export of presets and plugins
Cacoo
This is a user-friendly tool for building wireframes with a nearly unlimited range of templates. There is also support for real-time collaboration.
Cacoo features:
Layout and prototype creation options
Block diagrams and communication diagrams
The ability to work collaboratively
Templates
Wireframe.cc
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.
Wireframe.cc features:
Interactive elements
Easy to connect and move objects
Collaborative work option
User-friendly navigation for the mobile UI version
Figma
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.
Figma features:
Instant access
Automatic work with plugins
Code generation tools
Summary
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.