Well, we aren’t talking about 3D modeling or graphic design, but the etymology is the same. In digital modeling, a wire framework is built, and then the ‘skin’, or surface-level appearance of the thing, is added on, as the gif below shows with a digital bust of Hercules.
The same process is used in a number of things, including construction (you build the frame of the house first, right?) and web design.
And web design is what you’re here for.
What is a Wireframe in Web Design?
Fundamentally, it’s a basic skeleton, the bare-bones proof-of-concept which you build the final product from.
Although, that’s less literal in web-design, as they’ll be separate files. It might be more useful to think of it like a blueprint.
What Web Design Wireframes Look Like
So what does a website wireframe look like? Take a look at this real-life example of wireframes:
Here is a zoomed-out look of a wireframe document. There are a couple of programs that can work for this, but in this case, we’re using Adobe XD, which is specifically a wireframing and site-building tool.
Wireframe Examples: From Conception to Build
Here’s an example of an initial wireframe compared to the finished site-build.
The Wireframe
With the wireframe for this ADA Compliance tool website, you can already see how the site’s front-page will look. The buttons and blurbs are already in place. The free assessment is featured front-and-center.
The Finished Site
The above image is the top of the final webpage. The assessment tool is clearly visible, though some of the rest got pushed down the page due to the graphic being added in after the initial wireframe process.
Placeholders in WireFrames
Spaces for pictures are also already blocked off in the wireframe. So while you may not have an image in mind yet, you already know where it’s going and what text will be accompanying it, allowing you to be more exact when selecting the image for greater impact.
Of course, like every creative endeavor ever, the design of the website will go through multiple drafts. Nothing is final until the website goes live. For instance, the products and services section in the wireframe above was changed for the final site to this:
Changes are made between conceptual design and final design, and the reasons why can vary – sometimes practical, sometimes artistic, and sometimes a mix of both. The important thing to take away here is that communication, throughout the design and build phases, is crucial to building an exceptional product. So when your UX designer or GFX artist makes a suggestion, hear them out.
While wireframing may be an important step in the process, and exceedingly useful, it’s never going to be perfect.
Where Does Wireframing Fit Into the Site Build Process?
Yes, building a website or SaaS product is a process. And the process can have many steps and you may return to previous steps as needed. This may seem counter-intuitive, but there is order within the chaos – and your process should be outlined in your Scope of Work and project proposal.
The method is incredibly important, but many web agencies do not have a thorough process that can be mapped out.
Yes, every project is unique, but you’re not reinventing the internet either. There should always be a formula. An order-of-operations ensures that you’re not flying by the seat of your pants and that no steps are overlooked. JHMG finds this so important that we created a flowchart!
This flowchart represents our entire process from start to finish. And the step which includes wireframing is highlighted with a red box. Here. Let’s zoom in…
The step labeled “Wires & Flows” is where we do our wireframing. This comes, naturally, after project kickoff and before the style guides and mood boards. And, if your project requires content, that gets started at the same time.
It Might Look Complex, But it’s a Simplified Version
You have a whole team, and you don’t have everybody doing the same job – because, obviously, that won’t work. You’ve got designers doing one thing, programmers doing another, and so on.
Because of that, this works much more like a guideline. You’re actually going to be starting on style guides and mood boards long before wireframing is “done”. And wireframing will be most efficient if you’ve already got a solid start on content. Because content should always come first.
Yes Always, Content Always Comes First
This is because if you do the design first, you end up working within the constraints of the design in ways that ultimately won’t support your efforts to efficiently get your message across or to allow for efficient SEO.
For instance: “That textbox is too small, but making it bigger throws off the balance of the page.”
Ultimately, stick with a content-first approach. It’ll save you headaches down the road.
