Wireframes: the blueprints for successful web design
Bureau Blank’s latest post comes from Ellery Mann, a designer on our team.
Before jumping into the execution of any project, one of the most important things to have is a plan. Planning ahead helps create a clear path that is driven by strategies and objectives which help lead to desirable outcomes. It is often said, “If you are not planning ahead, plan to fail.” When it comes to web design, the best way to not fail is to plan your project around strategy objectives and follow a tried-and-true design process. A crucial part of that process is wireframing, which is the first step in shaping the site itself and reflects the project strategy and content organization in a tangible medium.
Wireframes are used to establish the content organization and structure, as well as the interaction architecture of a site before moving into visual design. In terms of a complete design process, wireframing falls after both the content strategy and site map have been developed, and before the visual design and development phases.
Generally, wireframes are presented in either sketch or digital form, and stripped of any design elements (graphics, logos, photography, color, etc) beyond what is necessary to understand what is being outlined in the wireframes. Take this scenario as a baseline example of best practice: it is not valuable in the wireframe stage to decide whether a button should be red or blue, but it is valuable to use shades of gray to indicate active/inactive states, hierarchy, or other information).
There are three main reasons why wireframes should consistently be a part of the design process.
- Low-touch design makes it easier to experiment, explore, and generate multiple ways to arrange layout and content hierarchy. This makes it easier to conduct iterative user testing on a variety of layouts, allowing the designer to narrow in on the solutions that work best.
- Rapid prototyping and running user tests with wireframes is an efficient way to study how well user interactions and flows are working while allowing for the ability to make revisions on the fly.
- Wireframes are great to review with clients as a way to confirm content hierarchy and site functionality will meet client needs and align with communication goals while the design itself is still flexible.
The ultimate goal for wireframing is to get stakeholder buy-in and approval on content structure and hierarchy, as well as interactions and high-level layouts. Once this approval is given, designers are free to narrow their focus on the visual design stage, confident they are building on top of a strong foundation.
Want to see how some of your favorite websites look like in the wireframe stage? Check out the links below.