---

I’ve seen many people underestimate the value behind website wireframing without knowing what effects it can have on the result. I will tell you why wireframing and structure thinking is what make a website meet the expectations and needs of its intended goal(s).

What is wireframing?

Wireframing is about defining blueprint or drawing for the content and functionality of a website in an abstract form. To establish a basic structure with an understanding of the goals you are trying to achieve on your website.

The first step is to define what specific goals you want to achieve, for example, brand recognition, more people buying your product, or maybe guiding visitors to your local store? You name it, but whatever that goal is, the next step is to simply drop the idea of thinking about colors, or any other design-related elements so that you can entirely focus on the structure of the website. Think of it as a blueprint for a house, that contains the components needed to build and iterate on the decisions you have with yourself- the team and the product owner.

The principal aim when creating a wireframe is to focus on the structure of the website solely — and figuring out if the structure will deliver to meet the expectations of you, the product owner, and the end-user. By doing that, you are more likely to find the real and critical problem the business is trying to solve.

A problem well stated is a problem half solved. ~Charles Kettering

To wireframe is to focus on content, and that delivers idea creation. It helps the product owner understand the challenges and what features need to implement, which enables you to lean towards building in a more fundamental way.

What is the next step after wireframing it?

It depends on the size of the project you are working on.

If it’s a relatively small project, then go ahead and start building the website while at the same time choosing the layout. The downside of this approach is that because you haven’t decided on typography, colors, element design before the development phase, you might have inconsistency in your layout.

For a relatively larger project with more time to invest in. I recommend you to finish a complete design for how everything in the website should look. If you want to take it to the next step, make a prototype of it, where you can navigate between pages to get a feeling of how things are aligned together.

What if I don’t have the time?

The idea of wireframing is to make it easier for you to understand what you are building, and if it will match your end goal(s). By wireframing, you will notice visible changes to rethink in the page structure. That will be the reason for a tremendous amount of time saved in a later design & development phase.

I encourage you to put at least 5 percent of the project timeline on making the wireframes for all pages, which equals 2 hours of wireframing for a share time of 40 hour project time allocation. The less time you have, the less you should care about the details.

Should I go digital or paper form?

There are some tremendous wireframing tools out in the digital world. I recommend Adobe XD and Balsamiq. Both have a learning curve to pass, but I prefer Balsamiq for faster wireframing, and Adobe XD for making mockups and clickable prototypes.

The advantage of only using Adobe XD is that you can easily create animated prototypes for your wireframes on the rush. I do also like the repeat grid feature where you can create one element of a list and repeat that same element multiple times, and when you make changes, it will be applied to all repeated items. That can be a time saver for lists, collections, and everything repeatable.

Another option is to use a paper, I have noticed that using paper can increase my focus because of not having to see all the options available on the screen. Your attention goes to the paper and your thoughts only. But that comes with the drawback of having less freedom to adjust and move elements quickly.

Conclusion

Well thought structures with consistency; It’s what makes a website great.

In many cases when you build a website, you have limited time and resources the most important thing to have is a clear path towards reaching the goal(s) you are trying to achieve or the problem(s) you are trying to solve.

Structural Wireframing can be your best friend to reflect and to focus on how the user will experience your website. I can assure you that putting the time to make structural wireframing will save you time on the entire project. It will push usability to the front and help the design process to be iterative at scale.