Details in the What, the Why & the How
A wireframe is a perfect tool that helps you visualize design ideas and test it out at the very begining stage of designing a website or mobile app. To help design beginners learn it better, this article explores what is a wireframe, in which situations is it useful and how to make a wireframe.
What is wireframe?
Either you are a designer, a developer, you’ve probably heard of the term “wireframe”. So what’s a wireframe? It is essentially a low-fidelity layout design. Unlike traditional design works, a wireframe puts less focus onto the visual aspects of things but focuses on the link logic of a button, the layout of a page in terms of information importance, and the general user experience.
Wireframes are fast, cheap, and easily reproduced. This quality affirms them entering a design process after the initial research gives new insights into implemented and before high-fidelity designs.
How to Make a wireframe in 6 Steps
Wireframes have the ability to invite people to work grounded details, to decide on a final version before handing over to designers for detailes. They are often utilized by UX designers, product owners or product managers in the process. Often, they are in greyscale with no images, fonts used only to displace differences in the importance of information. It is intentionally so so that the attention is kept only on the logic and functionality of the product. The follwing are steps of how to make a wireframe:
Step1. Conduct research thoroughly
Before we can start on the wireframe, you need to firstly define your core strategy of your product through research. This strategy needs to answer the following questions:
- What is the most important journey you want your users to walk through?
- Does this journey delivers the core value of the product?
- What is the tone of voice of your journey (exciting, suspending, heartwarming?)
Step2. “Download” your findings
Once gained these answers, a step needs to be taken to translate them into designs. Selecting facts they are useful and serves your core value of the product, keep the rest for future references.
Step3. Define your core customer journey (CCJ)
Now you are ready to generate the user flow of your product — the logic behind button structure, the flow of app behavior, all to serve the values from your findings. You can start with a few simple boxes and buttons according to your customer journey of the website of the app you are designing. Link these buttons and screens with one another.
Does it make sense? Can users arrive where you intend them to under your current design? Work it out until the flow is complete.
“It might not be always true that simpler is better, but simpler is surely simpler.”
Step4. Keep it Simple
It might not be always true that simpler is better, but simpler is surely simpler! Many designers have the tendency to over-deliver what we describe as our best intentions but reads as redundancy.
When these good intentions mean a few extra strokes or color blocks on a poster, the outcome might seem minuscule. But in wireframes, it could mean loose focus onto what’s important at this stage of designing. So it’s surely worth the while to ask ourselves: what is the simplest journey for users to reach the end goal? The answer is your wireframe.
Step5. Validate your hypothesis
Congratulations, by now you already have a fully working and elegantly simple solution in front of you. Now, you are ready to go a step further — fitting the tone of voice. Fitting the tone of voice in a wireframe hardly means it’s time to add in colors and logos, it means to fit the web/app experience with the tone of the brand.
This is an essential step in wireframing. Since your wireframe decides the flow and app behavior, the earlier on you take such things into consideration the better your outcome will be. When you have your wireframe ready, get user confirmation that your solution does solve their pain points. You can do this by creating a prototype from your wireframe.
Step6. Start prototyping, fast!
Often, a wireframe is used as a start point of a project between team members to work together as much as it is used as deliverables to designers. But next to this, the prototyping ability also allows designers and managers to quickly generate users’ feedback.
In many ways, a wireframe can also be read as a minimum viable product (MVP) that’s fantastically telling yet cheap as far as resources are concerned. For example, soon as a new function is designed and produced on a wireframe, a testing round with users can immediately be called in place.
When users are involved, we can see for ourselves if the designed function is being used as intended, if buttons and information can be easily found and if the initial strategy was on the right track at all (it’s a fact that sometimes we are fantastic designers, designing for other fantastic designers, not users).
In short, to validate our hypothesis before we even enter the developing phase, or to learn that the hypothesis is not validated by users and calls for a pivot.
If these steps do not give you a clue, watch this video:
Wireframing for UX: What it is and how to get better at it
The simplicity of wireframes enables it to be read by everyone involved in a team. The more stakeholders involved during the process the more robust the design coming out. This way of workings saves the potential back and forth between designers and developers, with the product strategy cleared and nailed and pre-agreed upon, the later stages come with the whole team more confident.
Best wireframe examples for your inspiration
Here we a wireframe or an app.
A many versions of wireframe for the same design, easier for comparison and selection.
Example of an website wireframe
Example of an website wireframe
Best Wireframe Tools You Should Not Miss Out
If you find the linking boxes and simulate an experience a somewhat awkward thing to do, you are in good hands. Currently, there are quite some products available on the market to help you with exactly that, offering users the ability to quickly make a wireframe including the ability to link, and simulate the interaction on mobile or web. Adobe XD, Axure , and Mockplus are examples of this line of product. They vary in functionalities and capabilities.
Adobe XD — has a sophisticated layout with a good set of wireframing possibilities.
Axure — offers more in-depth capabilities in comparison but lacking user-experience comparing to Adobe XD.
Mockplus — offers both offline software and web-based versions, with the ability to make wireframes and work together in a team. Whichever tool you take one, the criteria is this: a good tool can help you to achieve higher goals with ease.
Wrap Up
In conclusion, a wireframe is not only a good way to kickstart a project, it’s also a wonderful tool to test a design as well.
