During the earliest years, when our team was tiny — basically just me — our website design workflow was classically simple. The designer (me) laid out visually rich mockups, and the developer (also me) brought those mockups to life with pixel-perfect code (Ha!). This method worked well enough, especially given the complexity of the projects we had going at the time. But we often ran into hurdles with getting the grasp of a fully functioning and fleshed-out website. Important aspects like content hierarchy, user flows, interactions, and calls to action got overlooked and sometimes forgotten. We needed a better way.

Wondering what a wireframe is? Learn more here:
* What Is a Wireframe?
• Using a Website Wireframe to Convert More Customers 

Wireframes for General Organization

Our first idea was to come up with a way to get a general organization and content outline decided upon at the outset of a project. This resulted in basic wireframes to rough out the bare-bones structures and layouts. We quickly realized how much smoother web design projects went for us and how greatly improved our workflow was with these outlines. The more we put into the front-end planning, it seemed, the better the end product became. From those early beginnings, we established the wireframing phase as a cornerstone of our process. We’ve been working to improve that process ever since.

How Wireframes Shape Our Web Design Process Today

I consider our wireframing phase to be the single most important part of the entire website design and development process. It informs every other phase that follows and we would not be building the quality websites we do today without this phase. Yes, it’s simply that integral to what we do. Since those early simple wireframes, we’ve continually expanded and improved how we design and organize our current iteration. It’s important to understand how we use them today and in what capacities.

Facilitating Discussion & Alignment

One of the most important aspects of our wireframe workflow is to clearly communicate and align with our clients’ overall goals. Our wireframe process details in a visual manner how we plan to achieve the business goals we’ve surfaced during our research phase. Our clients are deeply involved in reviewing, discussing, and determining if the site structure, content hierarchy, user flows, and calls to action are in line, all before we get into the aesthetics of the site. Important structural decisions are more easily made before mixing in pretty visuals and design candy.

Prioritizing Content & Functionality

Starting with a wireframe allows our team to focus fully on the content and structure of the site. A poorly designed but well-structured and organized site will outperform a highly designed but unstructured site nearly every time. Getting the content hierarchy, organizational structure, and user flow dialed in allows us to feel good about the phases that come next. It’s great to know you’re 60% of the way there before even opening a design tool.

Solid Design Foundation

Creating a well-designed site is obviously important to us too. It’s where we began this journey, and the wireframes we create now provide a solid starting point for our design efforts. There was a time when we looked at the design vs content question as an egg vs chicken problem — which should come first? We now firmly believe that content primarily drives the design. Our wireframes are where we begin to ask the question: What are we designing here? A clear call to action is easier to design than “a pretty section that entices a user to click a button.” A full-page wireframe that details clear user flow is easier to design than “create some pretty sections that the user can follow to the end then do a thing.” And yes there is a distinction there 🙂

Are there times when the design can influence the content and structure? Yes, absolutely, but only after the wireframe has shown the way, and our designers have determined a better design solution. It’s an iterative process.

Enabling Agility & Iteration

Speaking of iterative… Our wireframes are relatively simple documents with built-in modularity. Changes made at this stage are fast and nimble and allow us to rapidly devise, discuss, and discard concepts before converging in a final direction. This efficiency makes our website better, allowing us to spend time on the good, hard things rather than time futzing with the fuzzies. It makes our sites a better value for our customers as well. If we had to make pivots after the visual design began, these efficiencies would *poof* evaporate.

Development Guidance

Once we’ve made it through the design process and on to development, we still refer back to the wireframe for guidance. We mainly develop based on design concepts, but the wireframes are still a metric to ensure we’re building what we set out to build. We’ll continually ask ourselves, does the site functionality match the goals set out from the beginning?

Bottom Line: Wireframing Is the Cornerstone of Our Web Design Process

If that sounds overly dramatic, then bring on the 🎭. Wireframing has transformed how we design and build websites, for the absolute better. Today, wireframing is a vital, institutionalized phase in all our web projects. These humble skeleton blueprints provide a strong conceptual core that visual design and coded implementation build upon. Thanks to wireframing, our web design process is more collaborative, user-focused, and defensible against project curveballs.