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.



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:



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.



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.



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.



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.


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!


Kaleigh Gyorfi (Alumni)

About Kaleigh Gyorfi (Alumni)

Kaleigh served as a Web Designer at Liquid Interactive. Kaleigh designed creative solutions and experiences for our clients, and created wireframes and interactive prototypes for websites and applications all with the goal of creating beautiful, functional user experiences.