What is a Wireframe in Web Design?

There are lots of different terms you’ll hear throughout the web design process. Some you’ll be familiar with, some you may not. One term that creates a lot of confusion is “wireframe.” It’s not quite a sitemap, not quite a design mockup. So what, exactly, is a wireframe? Let our web designers explain.

Defining “wireframe” in web design.

In the simplest of terms, a wireframe is a step between finalizing your sitemap and starting the actual design of your site. It’s essentially your site’s blueprint. With more detail than a sitemap but less detail than the design mock-up, the wireframe allows you and your web designer to take an in-depth look at the functionality your site will have and the content that your site will need.

So what do wireframes have that sitemaps don’t? Wireframes help you and your web designer outline:

• The range of functions you want available on your site
• The relative priorities of the information and functions
• The rules for displaying certain kinds of information
• How well it will display on different devices.

Why wireframes are popular?

Many web designers believe that wireframes are a crucial part of the web design process. There are a few main reasons for this:

1. Focus on usability
   When you construct a wireframe, you are forced to walk through every conversion path, every link, every navigation placement. By running through your site’s architecture in such minute detail, you are able to spot any flaws before they become problems. It also lets the client see the planned features without the brushstrokes of creativity, allowing them to focus on just the functionality, not what it looks like.
2. Allow for growth planning
   If you are planning to grow your business, expand your product or service offerings, or branch into new areas, you want a website that will easily grow with you, without necessitating a major overhaul to the site’s architecture or going through a redesign process. Wireframes can help you build your site to handle that growth.
3. Saving time and money
   Many designers prefer working from a wireframe because it creates a very specific roadmap that everyone has agreed on before development starts. It allows the development team to know and understand what they are building while the creative team has a clear list of what needs to be created to fill out the site.
4. Iterative design process
   Including a wireframing step in the design process allows you and your web designer to take site development step-by-step. Without this step, you are tackling creative/branding and functionality/usability in one step, which can get confusing from time to time.

Why we don’t believe in wireframes.

Wireframes were great five years ago. Mobile devices were less ubiquitous and there was a smaller variety of them. Ten years ago, a wireframe was helpful to layout a project from start to finish.

But this is not five years ago.

Today, we are asking more and more of websites and it’s just not feasible to capture everything a website needs to do and be in one, bare-bones document. No one wants to review the 20-page wireframe that captures a website’s responsiveness and how it will display on, say, an Android phone, an iPad, and a SurfacePro laptop. And that’s just three devices!

Wireframes hamstring designers. Something that makes sense on paper and in little gray boxes may not actually function or even look like you want it to in a live environment. But if there is an approved wireframe, a designer cannot exercise their best judgment and make the change.

Now, do not be confused. By eschewing wireframes, we are not suggesting a fly-by-the-seat-of-your-pants design process. We pride ourselves on how closely we work with our clients to develop beautiful, responsive websites that meet all of their needs. But we just use a different process.

We think the future of web design is designing in the browser. This process asks a little more of the designer. It asks them to be proficient with website coding as well as design. By being proficient with website code, the designer can create and tweak websites in their DNA, the code, and preview the results live in a browser. This allows you to see the effect of each font change, each image change, each feature size change instantly and across all screen sizes.

A wireframe cannot do that. A website mockup cannot do that. Our design in the browser process can.

Final word.

Wireframes are dead. A design process that uses wireframes is outdated and could lock you into a design that doesn’t function the way you need. A website design process needs to be as streamlined and innovative as the websites you want to launch. And that’s where designing in the browser comes in.

—

Thrive Design is a customer-centric web design agency from Seattle. Contact us today to find out how we can elevate your business online! Find us on Clutch, UpCity, LinkedIn, Facebook, and Twitter.

Category: Web design seattle