What is a wireframe and why should it be... ugly?
When you see a wireframe for the first time, you might be confused. The development company promised you the award-winning team of designers and now they’re sending you… this? Don’t worry, it’s not the final design! A wireframe is the initial step of the ideation process. It doesn’t include design elements because we want to focus on business goals rather than aesthetics. After the wireframe is finished, we can start working on the product’s UI, and change something in the structure later, if there’s a need. Read on to see what’s the purpose of a wireframe and how to do it smartly!
Table of contents
What is a wireframe? And why should it be ugly?
A wireframe is a schematic visual notation of a webpage (a website wireframe) or an application screen. You should treat it like a sketch, a visual way of explaining the idea for the solution to the problem you are trying to solve. A wireframe should reflect the content and hierarchy of the screen. It shouldn’t be treated as something final - wireframing is an iterative phase of finding challenges and possibilities. It should be minimalistic in its form and include simple shapes, without colors and pictures. Why? The answer is simple and related to the goal of the wireframe: it should provoke discussion about functionalities, the elements used and user flows, not about the colors or shape of the buttons.
The development teams and stakeholders should be discussing the goal of the website or app feature and solutions in general, not specific selected pictures and gradients.
What is a wireframe? It’s a way of communication between designers, developers and stakeholders. When wireframes are discussed and accepted by the team, everyone knows what to do next - designers can start to prepare the UI, developers are ready to develop the logic part of the app, and the content writer is able to start writing the copy because they all know the goal and general structure. I will explain this process later, with a real life example.
Types of wireframes
We can distinguish two types of wireframe with different levels of detail. Basically, there are low-fidelity and high-fidelity wireframes, but sometimes you can also find mid-fidelity wireframes. Personally, I don’t see the point in mid-fidelity wireframes so I won’t describe them here. They are a combination of both and thus are quite vague as they don’t fit any specific goal (neither looking for many initial solutions nor polishing the final one).
Low-fidelity wireframe
How do you use a wireframe? I prefer to always start with hand-sketched low fidelity wireframes (sometimes also called “lo-fi” wireframes). This is my way of synthesizing the information from the Product Discovery workshop and this is how I start to look for possible solutions. That’s right, in this phase we should be looking for more than one solution. This is why we shouldn’t spend too much time making the first wireframes pixel-perfect. Instead, we explore a few ideas, discuss them with other designers or the team, and after that select only the best ideas and throw the rest in the trash without any regrets.
Low-fidelity wireframes can be made using digital tools like Balsamiq, Figma or Sketch. But it’s important to remember to not go into too much detail at this stage - it’s quantity over quality.
I really encourage every designer to take photos of their hand-sketched wireframes and upload them to tools like InVision which allows linking screens into a clickable digital prototype. This way, we can easily test the user flow and select the best solution, based on testing not assumptions. It’s also a better way of presenting the wireframes to the client than showing a few .jpgs with some ugly sketches and long descriptions.
High-fidelity wireframe
The second type of wireframe is the high-fidelity wireframe, which is way more detailed and more readable. This option is used to go deeper into the elements of the screen. When more details are visible, we can start thinking about placing UI elements like buttons, helper text, etc.
High-fidelity wireframes are very detailed, nearly pixel-perfect sketches, but still they are only blueprints, not the final designs. To create some good-looking wireframes, I use Figma and take advantage of the wireframe library (Figma Community is the right place to look for materials).
Using helpers like Balsamiq or some kind of readymade library from Figma is also quite a good way to learn how to create wireframes and how to design website and app elements in general. Thanks to the gallery of elements, we can see how many options we have to solve each problem.
A horror story: I once skipped the wireframe…
Encourage your team not to skip the wireframe design phase. Sometimes you feel that there is no need to make a wireframe because the UI is ready or you’re using a design system like Material Design and it’s easier to build using the existing elements provided. It’s tempting, but it’s not worth skipping this step.
I remember when I made this mistake at the beginning of my career once. After a few sprints of iterative work on wireframes and UI, I assumed that because we had all the UI elements prepared we didn’t need a wireframe. I thought I could easily build the next screens using “copy & paste”. Oh, how wrong I was!
When I showed it to the client we had a very intense discussion in which the various topics and issues became confused - it was really hard to figure out if we were talking about placement of a button, how it looks or about the content. It was a chaotic and energy-draining meeting and after, I was very dissatisfied that I had to change something in a design that I’d thought was “ready”. Probably we wouldn’t have been in that place if we had started with wireframes first. Especially given that they are, by definition, something still subject to change. As long as your team works in Agile, of course!
When you skip the wireframe, you’re taking away the opportunity to talk with the team and the stakeholders about the content strategy level, content hierarchy and the goal of the page or app in general. Instead, the conversation goes straight to a detailed level of colors, button shapes, and typography. So, if you want to create a really good user experience, please don’t skip the wireframe stage - give yourself the space to discuss the principles first.
My pro tip for your team is:
Have a one-hour meeting and prepare some lo-fi wireframes, discuss your ideas, discover other solutions and then select the best one based on your criteria (with the product goal in mind). Believe me - you will be grateful for that!
How do you use a wireframe for better team alignment
The perfect example of the power of the wireframe design is the Marketing Team here at Boldare. We developed our own workflow to quickly develop new pages for our website but without skipping any important steps in the design process.
We always start with some board or document where we write down the business goal of the page we need to develop and the user needs. Throughout the process, we have all these things in front of us - on a shared screen. Based on the goals and needs identified, we describe what needs to be included on the page or app. Step by step, we discuss each section and its goals. After that, we build the hierarchy and narration, moving the sections around, keeping in mind the business goal and user needs.
We end the workshop with a wireframe which is a mix of our hand-drawn sketches and descriptions, but this is enough for everyone to start work. Thanks to the multidisciplinary team participating in the workshop, everyone is aligned and everyone feels like a part of the project.
After a workshop of less than two hours, designers are redrawing the wireframe to explore the solutions deeper, the developer can start the logic part, and the content writer is ready to start work on the landing page text. Thanks to using a wireframe, we save a lot of time on team alignment and we’re working in parallel instead of waiting for each other.
Summary of what is a wireframe?
Wireframes are very important, and sometimes underestimated, elements of the user experience design process. The purpose of a wireframe is to explore the best possible solution for the given problem before going into a discussion of the visuals, colors and typography. Involving the entire development team in the ideation process and production of a wireframe makes for the best results and instant team alignment.
Share this article:
