Why do we need those wireframes

I remember when I first started my journey in the world of the internet, the most important thing was designing graphics in a way that made it relatively easy for a developer to implement. Back then, I often heard, "That can’t be done, design it differently." Today, both knowledge and capabilities have grown immensely. Just good graphics or flawless (really?!) coding isn’t enough to create a great website anymore. I’ve seen plenty of websites with amazing layouts, where everything works perfectly, but navigating them or finding what I’m looking for is not that simple. Can this problem be solved before it even arises? Most of the time, yes.
Why do we need those wireframes

The story of a system

Some time ago, we were working on the usability of a website for one of our clients. Opinions within the client’s team were divided—do we really need to design these wireframes? Isn’t it a waste of money? Why not go straight to the graphics? However, it quickly became clear that even by looking at a simple sketch of the layout, we could determine that there would be two types of accounts, so it made sense to immediately offer a choice between Account A and Account B. Often, just glancing at a sketch can reveal that what the client thought would work well in theory might actually introduce chaos into the website. But with a few small changes, it’s possible to propose a solution that works simply and clearly on both a monitor and a mobile phone, minimizing the risk that users will get lost and leave the site.

Example of a Wireframe
Example of a Wireframe

 

What is a Wireframe?

Wireframes, or page schematics, are simply website blueprints—sketches that outline the path a user will follow when navigating the site. The designer’s job when creating these schematics is to present the site’s structure and arrange key elements like logos, text, images, drawings, icons, and, most importantly, the places where we expect user actions (CTA buttons). Wireframes can vary in complexity, from basic sketches with empty boxes to gray-box wireframing (where different shades of gray are used to indicate the importance of elements), and even to wireframes that include colors or fonts that will be used in the final graphic design.

Do I Need This?

Wireframe design may not be essential for every project (though it’s always helpful), but even the simplest sketch can greatly improve the quality of the final product. It allows both designers and clients to think carefully about the site’s elements and functionality.

The truth is, if someone visits your site and can’t easily find what they’re looking for, they won’t come back. By preparing wireframes before launching the site, we can catch mistakes that would be expensive to fix later. We can also discover that sometimes tried-and-true solutions are the best, and that users expect certain elements to be in specific places. This helps us create a website (or app, system, etc.) that is easy to use.

By developing wireframes for the project mentioned above, we reduced the time spent on graphic design by 10% (compared to the estimated time) and significantly lowered the number of revisions during the testing phase.

O AUTORCE

Anna Owczarczak

Creative Director

Członek Zarządu i Dyrektor Kreatywny Yetiza. Zafascynowana typografią zwolenniczka powiedzenia 'lepsze wrogiem dobrego’. Lubi stonowane kolory i jednopikselowe linie.

  


anna.owczarczak@yetiz.pl


ARTYKUŁY


Linkedin

Meer te weten komen