How to Build Wireframes for Increased Profitability and Scope Creep Avoidance

When you think of “wireframes”, the first thing to mind (unless you’re an old hat at building websites) is probably the Tron-esque graphical style that sci-fi movies of the ’80s and ’90s used to emulate futuristic computer graphics.

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:

website wireframe document in Adobe XD

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

Zoomed in image of website wireframe section

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

Image of website page that corresponds with previous wireframe image

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.

zoomed in section of website wireframe

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:

Image of website page that corresponds with previous wireframe image, illustrates changes that can occur during wireframe drafting

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!

website/app design and development flowchart with wireframing step highlighted

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…

closeup look at section of website development flowchart which includes wireframing to show where wireframing fits into process

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.

(Visited 190 times, 1 visits today)