The Importance of Wireframes in a Design Process

What are wireframes?

Wireframes are the starting point for any website or application layout. They’re low-fidelity, greyscale mockups that designers use to quickly solidify the structure of a site or application before actually embarking on the visual design.

Why do we use wireframes?

Creating wireframes helps the process move along quicker and smoother. It’s easy for designers to get bogged down in the granular details of visual design: making sure elements of the design are pixel-perfect, ensuring those last two paragraphs of text are aligned just right, or finding that color combination that is nothing short of flawless.

This can quickly turn into a rabbit-hole.

By establishing the structure and creating content prior to design, we’re able to visually piece together the flow and experience of the site from a much more detailed perspective without getting distracted by design. Solidifying final content in this phase also creates a more accurate idea of how the copy will be treated and how much space it will take up in the actual interface design. This is much easier to modify in wireframes than completely re-route it in design.

“You can’t paint the walls of a house that isn’t built yet. The same logic applies with wireframes and design.”

Wireframes also create the space for designers and developers to have early conversations about potential animations and transitions. It incorporates interaction as an intentional, vital part of the project as opposed to an afterthought after the design is already created.

Wireframes promote involvement with both stakeholders and clients early on in the project so that there are no surprises and the project adheres to the timeline. They’re designed to align expectations from all sides as early as possible, which helps prevent any significant changes toward the end of design or development.

When you’re building a house, you wouldn’t move the furniture in before the foundation was built, right? You can’t paint the walls of a house that isn’t built yet. The same logic applies with wireframes and design.

Who typically designs wireframes?

At Brunch, our design team handles both the wireframes and design deliverables. Because of our smaller, more nimble size, we’re able to jump between both phases with ease. It promotes a constant line of communication between the design team and development team to iron out and anticipate any potential issues as early as possible.

Brunch Wireframe Best Practices

  • Establishing as close to final content as possible (as early as possible) is very important. Having final copy in the wireframes ensures that the design will look as all parties expect it to. It prevents us from making last second changes in haste to accommodate types of content that weren’t anticipated.
  • Wireframes should be greyscale and simple—the goal is to focus on structure, interaction, and general layout, not visual design.
  • Our team has grown to love using Axure for wireframe production. It allows for quick, modular creation of elements while maintaining the ability to introduce interaction (transitions, hover effects). We’ve also used different combinations of InVision, Sketch and Illustrator, which do the job as well.
  • Design out every page instance you anticipate in the site or application. Leaving as little as possible that could be open to interpretation promotes transparency. It’s always helpful to layout each page visually, even if it’s more work in the short-term. It will prevent any potential user experience issues down the road.