If we asked you to name the first step that every designer, product manager, and developer should take when they start a project, what might you say? Our answer: wireframing. In our last article, we discussed wireframing basics and shared a few tips on how to create a wireframe for a website in 8 easy steps.
But what does the process of creating wireframes look like from the inside? What is the difference between wireframes, mockups, and prototypes? How do you know what to do and what steps to take? This time around, our design squad wants to highlight their practical steps to help you answer these questions.
What is a wireframe and why is it important?
Before we dive deeper into details, let’s envision what a wireframe is once again. UX wireframes are blueprints for web and mobile apps that help define the information hierarchy, content prioritization, and functionality intended. It’s one of the best ways to test drive the page layout and evaluate user flows.
UI wireframes are meant to bring all stakeholders on the same page and discover what works and what doesn’t early on. The best part is that you don’t need to worry about styling, color, graphics, or fonts.
Every project is unique, and sometimes, you can skip the wireframing stage. For example, we’ve had partners share mockups with us that already outline their exact vision. In these instances, we don’t need to make wireframes because they’ve essentially already been created.
However, most products require UX wireframes from the start, especially when you're building them from scratch. Even simple wireframes can bring substantial benefits to your design team’s projects.
Ignoring the wireframing phase early in the process can jeopardize your effectiveness and lead to more guesswork during the mockup or prototyping stages.
Unclear structure. Without wireframes, you can’t turn your abstract ideas into something tangible that all parties can see and use as a starting point.
Unclear interface. It’s vital to clarify how interface features work and where specific elements will appear on the page. It’s hard to understand that without prepared wireframes.
No navigation testing. Without wireframes, you can’t conduct usability testing on your new website or app, which means you might not be able to determine how clear and intuitive your navigation is.
No early feedback. Early feedback allows you to identify critical issues early on that help you avoid global fixes in the future. Skipping wireframes prevents you from getting early feedback and increases the costs of making changes at later stages.
No clear vision. Without wireframes in mind, it’s hard to understand what to build next and how the interface elements are supposed to function. Misunderstandings between stakeholders can delay the design and development process.
Now that we’ve reviewed some wireframing basics and once again established the importance of wireframes, let’s discuss the practical steps that we utilize at Remedy.
Over years of practice, our design team has refined our design process. We asked our Lead UX/UI designers Maxim Morev and Artem Belonozhko to share their extensive experience and explain their wireframing process.
Discovery phase and first workshops
“Initial feedback is the cornerstone of any project,” says Maxim. “That's why our first step is to gather all possible details about the project, its target audience, its users, and the ecosystem. After that, the designers come into play.”
Product Managers and Business Analysts (or BA) often conduct user interviews to get the information they need to validate a project. Aside from UX user interviews, our Business Analysts perform requirements elicitation and analysis with the goal of understanding what a product must do to meet the users’ needs.
There are three general questions we ask before wireframing:
Who will be using this product? (i.e., the target audience)
What is their final goal when using this product? What issue does this product or feature solve for them?
What are some of the actions or operations they are likely to perform? (i.e., the workflows)
With all data gathered, we can understand what functionality the product should have and what it is supposed to do to meet user (customer) requirements. BA then transforms the business objectives into criteria for the user interface.
With the criteria mapped out, designers start to get more involved in the process. They need to create something that organizes all of their ideas and presents their vision to partners in a clear way. We create a schematic structure of the page (wireframe) based on the criteria defined by our BA.
“When starting wireframes, using your favorite design tool could be a good idea, but I prefer sketching my thoughts with a pen and paper first,” suggests Artem. “Your primary mission is to come up with as many ideas as possible. You have to research what users want and what they need without forgetting about your business goals.”
As the images above show, our focus when we start wireframing is to create as many versions of an interface as possible while keeping our sketches and wireframes simple. We don’t include design elements like color or images so that we don’t distract people from focusing on the core structure and navigation. That’s why we use only black, white, and gray colors (and sometimes blue). Beauty isn’t your focus during this stage.
Low-fidelity wireframes
Many people believe that wireframes, mockups, and prototypes are exactly the same thing, so let's take a closer look and find out what the differences are. We’ll start with low-fidelity wireframes.
“A low-fidelity wireframe is the first representation of your vision that displays core design components in simple content blocks,” says Maxim. “It’s abstract, minimalistic, and has no distracting elements. Low-fidelity wireframes are flexible tools that provide room for experimentation and help facilitate team collaboration.”
“At Remedy, we create low-fidelity wireframes during the first brainstorming sessions using Figma,” says Artem. “We often wireframe the mobile version first given the number of mobile users growing rapidly each year.”
To simplify the process, designers tend to use rectangles, squares, circles, and Lorem Ipsum text as placeholders. Low-fidelity wireframes are relatively quick to produce, but because they’re simplified, this sometimes means that only the author can fully grasp the vision and appeal of the wireframe.
In these cases, we provide additional presentations with more details explained.
Other benefits of using low-fidelity wireframes are:
They allow us to be Agile and flexible
Our teams can come up with the right solution faster
We can figure out whether we should add or remove interface elements using just a small set of rectangles and squares
High-fidelity wireframes
“A high-fidelity wireframe is a more detailed representation of the end product,” says Maxim. “It has a more aesthetic look and more precise content blocks with colors, featured images, icons, and other UI elements that are closer to how they would appear in the final product. You can share this type of website wireframe without any additional presentation.”
“High-fidelity wireframes usually take more time to produce, but it’s still easy to make changes during the review process,” Artem explains. “We use them as a skeleton for the future design to save our time and effort when building the first mockups. Sometimes a hi-fi wireframe is all we need to perform user testing and gather insights on user interactions.”
Here are the major advantages of a high-fidelity wireframe:
Sometimes they’re clickable and respond to the user’s actions
It allows us to test user flow and get extra feedback
We can refine and improve spacing, graphics, and UI layout
There’s no need to provide additional details or explain every UI element
It can include realistic images and marketing text
We use approved wireframes as a basis for mockups
It allows us to align design decisions with the development team before coding the final product
Mockups
The terms wireframes and mockups are often mistakenly used as synonyms. In fact, they are two different concepts, each with its unique set of functions and intended uses.
Our BA and designers review the wireframes to check whether they cover all aspects from a business perspective. We then approach a stakeholder to approve the wireframes structure and make the last edits if needed.
Once all the changes have been approved, we craft graphical components to flesh out the design. The focus moves to the visual part here: we apply the design to the approved wireframe to align our vision with the partner. Then, we form a focus group to find the best design pattern. That’s what a mockup is.
The #1 goal of the mockup stage is to give stakeholders an idea of how the final solution will look from an aesthetic and branding point of view. Like prototypes, mockups look very similar to the finished product, allowing your partners to see every detail.
A mockup is much easier to comprehend than low-fidelity wireframes and is much faster to produce than a prototype. Mockups are good for gathering feedback and can be used in documentation.
Most of the time, we use Figma to present mockups to our partners. We also demonstrate how the design will look on different devices (smartphones, tablets, etc.) and sometimes add animations, which gives it more realism.
Prototypes
Simply put, a prototype is an interactive mockup. Prototypes not only show how the finished product will look but also how it will work. Stakeholders can approve the design, understand the user flow, and see how the interface works in just a few clicks.
The prototype should allow the viewer to:
Check the content and interface
Test the basic interactions as if it were a finished product
Prototypes are perfect for user testing and getting feedback before the development stage. We use prototypes to check the functionality and fix various bugs. By simulating the final interactions, we can also test the usability of the interface. This allows us to reduce costs during the development stage and speed up the development process.
On the other hand, it’s good to keep in mind that prototyping is quite an expensive and time-consuming form of design development. We recommend starting with wireframes because redesigning a prototype could require a lot of time and resources. However, prototypes can still be cost-effective when combined with usability testing.
Final thoughts
Before getting to the design of any product, you need to:
Identify the problems you need to solve
Research your target audience
Find similar products that your competitors may have done
Establish clear product requirements with stakeholders
Find out if the client requires you to start with mockups or prototypes right away, or if you can start with sketches and wireframes
Check if you have enough time and resources for an in-depth user research
When done well, wireframes can help you align your ideas with the client’s vision. By presenting information via wireframes, you'll be able to identify critical issues early on and consider all needs of the end-user.
Both low-fidelity and high-fidelity wireframes can help you set a clear direction for your design, making further stages much easier and more efficient.
Despite the benefits of wireframing, many projects can have tight deadlines and unique requirements, so be practical with your time and start the project at the stage that seems to be the most viable and appropriate.
Comments