Imagine that you're in a museum, looking at a masterpiece. Get up close, really close. Take out a little knife, and scrape off the paint. Beneath a first, a second, and maybe even a third layer you'll start finding sketches. It's true, even the masters used sketches to lay out their designs. They didn't start painting right away, and why should you be any different?
In the realm of web design, this initial sketch is known as a wireframe, an indispensible tool in every designer's toolkit. Before starting on colors, fonts, and images it's essential to think through your website or application's structure. With a wireframe, you're essentially unraveling the way everything will function.
The beauty of wireframes lies in their flexibility. They allow for rapid iteration and easy transitions between versions and ideas. It's far less painful to discard or alter a wireframe than to tweak a pixer-perfect design after you've realized something doesn't function as it should.
While wireframes can be as simple as pen-and-paper sketches, tools like Balsamiq, Adobe XD, and my personal favorite, Figma, elevate the process. These tools introduce easy interactivity, facilitate collaboration, and streamline projects.
Low and high fidelity wireframes
Wireframes can range from quick, love-fidelity sketches to detailed, or high-fidelity, representations of a design. 'Fidelity' might be a bit of a jargon term, but think of it as the level of detail and realism in your wireframe.
Quick sketches, therefore, are low fidelity, while more detailed wireframes are high fidelity.
It's standard practive to start with low-fidelity wireframes and gradually layer in more details. As you progress, your wireframe will increase in fidelity and thus will start resembling the final design more and more.
The level of detail you should aim for in your wireframes depends on several factors, not least the scale of the project. A major e-commerce site like Amazon might use wireframes that look almost exactly like the real design, while your local pet shop only needs a quick sketch on the back of a napkin.
