You may not know it, but the wireframe stage is a critical step in any website design project. Ironically, it’s also often the most difficult concept to grasp.

In fact, you yourself may have had a frustrating experience trying to decipher these black and white boxy drawings. If so, you’re not alone.

Today, we’re going to change how you see wireframes.

We’re going to think of it in terms of a fish, the perfect catch to be exact, because your understanding of a wireframe will make your next website design project go from tiny minnow to perfect catch.

So, let’s begin this fish tale and learn why wireframes are important.

WHAT IS A WIREFRAME?

wireframe.jpg

A wireframe is a design element used to lay out the content and functionality of a website without all the bells and whistles or User Interface (UI). This part of the process helps demonstrate what elements will exist on key pages. This assures that the page caters to the key business and project objectives. Wireframes allow you to visualize your project solely on user objectives before design and content are added.

Now let’s compare your perfect catch to a wireframe in 5 steps:

Head.jpg

BUSINESS GOALS (Head)

What bait are you using?

Your company's business goals are the forefront of the website’s being. You wouldn’t just throw an empty line into the water now would you? Are increased customer subscriptions one of your business goals? The wireframe needs to include a way for customers to subscribe so that you can achieve your goal.

 backbone.jpg

NAVIGATION (Backbone)

You’re not going to catch anything unless the fish is able to get to where it’s going.

The site’s navigation is the first visual process for a project and provides the opportunity to objectively view the sitemapwithout distractions.

fin.jpg

CALLS TO ACTION (Fins)

How fast do you want that fish to get to you? Along with your business goals, you need to have clear CTA’s. Are the CTA’s prominent enough to drive the user? Don’t hide that subscription button. Make your CTA a prominent element on the page.

ribs.jpg

CONTENT HIERARCHY (Ribs)

Here’s a great place to look objectively at the features of your website. You’re allowed to be as critical as you want during this stage in the process. That’s what the wireframes are for. Don’t understand what we mean when we say “hero image?”- ask questions! Understanding your wireframe and how your content will be featured is essential to a successful website.

 skeleton.jpg

TEMPLATE (Skeleton)

Expecting a 10-pound bass? The arrangement of all these onscreen elements create your overall skeleton. Look at the features and arrangements of these elements and make sure they’re setting up the skeleton correctly to drive your business goals.

Would you cast a line just to reel it instantly back in? No, because it takes patience. Choices that are made during the wireframing stage are going to affect choices made throughout the entire rest of the process.

No need to spend countless hours staring out into the water. Instead, give us a call at Liquid and let us help you make that perfect catch!

Save

Tags:
Kaleigh Gyorfi

About Kaleigh Gyorfi

Kaleigh is a Web Designer who joined us fulltime in 2016 after interning at Liquid with the Creative Department the previous summer. Kaleigh designs creative solutions and experiences for our clients, and creates wireframes and interactive prototypes for websites and applications all with the goal of creating beautiful, functional user experiences.

Published May 27, 2016