The Importance of Wireframing

Designs are part of our life, they can be found everywhere. Everything we create goes through a design process, from cups and chairs to houses and parks. This process usually starts with an idea that we have and can draw on a piece of paper and then it carries on until we have our final product, but to get there, one of the most important parts of the process is to understand why we are doing this and how will it work. Wireframing helps us navigate through those questions.

Wireframes are the skeleton of the product that we're trying to create and it's crucial to understand how we arrange and design each piece of the design before bringing it to life. In the digital space, this is part of something we call UX Design or User Experience Design which has its roots in designing for the user's needs.

There are multiple rules we can follow to create wireframes that give meaning and a reason to the designs we want to bring to life. Here are some tips that can help you to build better wireframes:

Understand the project

Before working on your idea, it's important to understand what you are building and its purpose. Analyze the requirements you received or the problem that you're trying to solve. You can divide these into bullet points to get a clear idea on what's your approach for this.

Do some research

Once you understand the requirements received and the problem that you're trying to solve, you can start looking for some ideas that can help you get inspired and understand how other people approached similar solutions. These ideas can be from fully developed concepts to Wireframes as well so you can get a sense of the designer's journey through their process.

Define user flows

After you get inspired and understand what you want to build, it's time to put on the user's shoes and review how they'll navigate through your idea. You can start just by writing general areas of the software and connecting them with arrows to get a glimpse of how navigation will occur. This helps to set a base for the logic and structure of the wireframes.

Start sketching basic ideas

Once you get inspired and have a lot of ideas, you'd want to jump right into creating a beautiful interface with cool transitions, but we're not there yet. Your first sketches should be rough, they don't need to be precise or have a specific color or form. You can start with basic lines and shapes to understand the idea that you're trying to build.

Follow hierarchy and patterns

Just because you have a lot of ideas on how to design solutions, it doesn't mean that all of them are going to work. It's important that, as we start to draw and sketch, we don't forget conventional patterns and hierarchy. Users expect things to work or be located in certain areas (header, footer, search), and sketching things by following these concepts can help us guide our users visually in a better way.

Highlight key aspects

As you build through sketching ideas, you'll move through wireframing phases as well. From low to high fidelity, it's important that as you bring your ideas to life, you start to highlight the important parts of the sketches you do. You can review the flow process and what the users need to pay more attention to and start giving more context to those ideas with text, icons, and the occasional color highlight.

Build components

As your designs grow and you start to get into more complex wireframes, if you're using a digital software tool, you can start to define components to speed up the sketching process. Things like blocks of text, shapes, and buttons can help to organize your sketching process and avoid having to recreate them every time you need them.

Iterate and gather feedback

We can always improve on what we create. It's important to showcase your concepts to your peers and superiors and discuss the strengths and weaknesses of what these concepts do to help the users. Active listening is important throughout your journey as it can help the people reviewing to be heard and you as a receiver can reflect on the opinions given and iterate to form new concepts that will help to solve the issues presented.

Backup everything

You could think that the designs that were rejected could be deleted, but that's not the case. Sometimes requirements change, technical difficulties arise or we just remember certain scenarios that would make us go back to a previous iteration that we thought didn't work anymore. Back up everything you create so you're always prepared for these scenarios to come up.

Finish the journey

Once you've gone through multiple iterations and improvements on your sketches, you can tell the story of what you built before moving to final mockups. You can divide it by starting on the background of your project, the problems that are being solved, and how your design helps to solve them. This can be showcased via a Wireflow or through a prototype for the audience to follow closely on the journey.

Conclusion

These are just some tips that can help improve the way we create products for our users, especially in the Wireframing process where it's important to have an understanding of what our product will solve and how will it do it. Wireframing can be challenging as it is the part where we just have rough ideas and concepts that we can't fully showcase yet, but it also can be liberating as we can explore multiple things or concepts that, in a high-fidelity form, could take us more time, resources and even steer us away from the real issue we're trying to solve.

It's important to stay with an open mind in this process and gather all possible ideas and feedback that we can as we go through this journey, users will thank you later for it.