How to Create Compelling Wireframes for Your Website Design
How to Create Compelling Wireframes for Your Website Design

It always amazes me to see how many well-established companies have terrible websites. For some, it’s just a poor mobile UI. For others, it’s placing an important call-to-action at an awkward location. Or wasting the best real-estate of the site to information that brings little value. But what most of these companies don’t realize is how much this impacts their business. 88% of online consumers are less likely to return to a site after a bad experience. Eighty-eight percent. That’s basically everyone except that one guy who is a true fan and ready to go through anything to be a customer.

The reason for many of these virtual eyesores is often the same: a lack of planning. A well-built website is likely to have gone through a thorough pre-production process. And that process often starts with proper wireframes.

The different steps of wireframing

“What is this wireframing thing you speak of,” you may ask? Well, the explanation is in the name. A wireframe is an illustration made out of wires (lines) that convey the frame of the future website. It’s like if you had a picture in your head and wanted to share it with someone by drawing a general outline. To build wireframes effectively, we recommend following three steps.

Step 1: Build sections

First, start by naming the different pages of your website, along with the titles of the sections that will appear on each of these pages. For example, your Home page will have a Splash or Hero section at the top. That’s what you want your visitors to see first when they land on your site. You can then add a Benefits section under the Hero – which will explain the benefits of working with your company. You can then follow with a Customers section, a Products section, etc.

If you’re not sure what pages/sections your website should have, look at industry standards. Check out the websites of your competitors, partners and customers. See how they present themselves and take ideas that would apply to your business. The most important is to follow common sense. Think about what information you’d want to see if you were in the shoes of a visitor. You can even highlight in the page the parts that you think are the most important. Here is an example:

You can go a step further and create two versions of your pages to A/B test later. Let’s say for example that you want to A/B test your Home page. You can make a version A that has a Benefits section under the Hero, and a version B that shows the Products section after the Hero instead. Using an A/B testing software, you can then show page A to 50% of your visitors, and B to the other 50%, and see which page is generating the most traction.

Step 2: Build boxes

The person in charge of sales is often best suited to do Step 1 of the wireframing process. They know the customers best and can anticipate what information they’ll want to see. But for Step 2, it’s a different story. While step 1 defines the information to show, Step 2 decides how it’s presented. And no one better than an experienced designer will know how to make a visual impact.

During Step 2, the designer decides how to place content in each of the sections. They determine whether a section should have columns or buttons, and the amount of text it should contain. These decisions are often based on experience and design standards. Now if you’re not a designer but still want to build your detailed wireframes yourself, you’ll need to use inspiration from the web. Look at some of the most trendy websites on the internet and see how they’re built. Focus on companies in the same industry as yours, since they’re probably targeting similar customers. Details such as placing a button can sometimes have a dramatic impact on your conversions. Here is an example of what a wireframe looks like when it reaches Step 2:

Step 3: Add text

Now that you’ve defined the general user experience, it’s time to add copy. Use your company or product messaging document to do this step. If you don’t have one, then make one first. We have an article here talking about how to create your company messaging.

If you’ve followed all the steps until now, this part will feel somewhat easier. The secret is to be brief but impactful. Make sure to also be consistent throughout your site. That’s why referring to the messaging document can be very handy. One important detail: all button text should actually describe what the button does. Avoid ambiguity at all costs.

Above all, create copy that is meaningful and honest. If you write your copy with the goal of increasing your SEO in mind, it won’t be good. Instead, focus on what you are trying to communicate, and what will be valuable to the viewer.

How to create unique and impactful wireframes

As discussed in Step 1, choosing what to show on your website and how will depend on different factors. The most important one is your target Persona. The Persona determines what your typical customer looks like. You can learn more about what Personas are and how to find yours here [LINK].

If you’re selling baby products and your target Persona is a young urban parent, you’ll want to make sure your website makes them feel safe. You’ll need information about product safety to be front and center for instance. If instead you’re selling B2B software to engineers, you’ll want to highlight benefits. Yes, the safety of your products is important here too, but isn’t a differentiating factor. What the engineers will want to know first is how your product will improve their lives, especially compared to competitors.

Talking about competitors, they’re another factor of a good website wireframe. Your website should convey the ways in which you differentiate from them. Let’s say that you built a strong community around your product, but your competitors did not. The community becomes a differentiating factor you’ll want to showcase. You could do so by offering ways to join the community at the top of your Home page for instance.

In any case, your wireframe needs to organize information in a way that inspires trust. Don’t try to hide things or make it hard for customers to get value right away. Focus on giving. Give your website visitors knowledge, power, comfort, and whatever they need to feel that you are a trustworthy company.

If the prospect of building wireframes seems a bit overwhelming, work with experts. A professional designer will know how to make the user experience seamless. An experienced writer will help convey your messaging in a way that creates trust. You can find both on the Gravitr platform here. See you soon!

Notify of

Inline Feedbacks
View all comments