Create Irresistible Content by Combining Design and Copy for Breakthrough Results

Discover How You Can Create Irresistible Content by Combining Design and Copy to Get You Breakthrough Results

When it comes to conversion rate optimization, there’s a bit of a debate whether it’s copy or design that brings forth remarkable results. 

Yes, of course, improving either of the two offers the opportunity to propel your business forward. But if you’re after impressive website performance, your best bet is to look at ways to combine design and copy. Because, ultimately, how far you get with one always depends on how well you’ve optimized the other.

Are you ready to supercharge your business site and maximize the impact of all its elements? Then here’s everything you need to keep in mind about the relationship between visuals and words.

Getting Exceptional Results: What Qualifies as Great?

Before you go about changing your website’s design or copy to improve results, you must set up efficient systems for measuring those same results. 

Whether you prefer to use free tools like Google Analytics or plan on investing in advanced software solutions, the most substantial part is that you properly define your goals. Once you’ve got sufficient data about those, you can start comparing your results to those of your competitors.

In general, the average conversion rate for all websites falls somewhere around 2%. But here’s the deal: that number isn’t just generalized. It’s actually problematic for two other reasons.

Firstly, it talks about averages. But, according to the Unbounce Conversion Benchmark Report from 2021, there’s a significant difference between average and median values. For example, during the past year, e-commerce saw an average CR of 12.9%. But, the median wasn’t even half of that at 5.2%.

Secondly, it would be absolutely pointless to compare a real estate agency’s performance to a low-risk purchase from a streaming service. For that reason, the best way to determine where you stand is to look at benchmarks from your industry. Once you’ve got a solid grip of those, you can start setting your goals and doing what it takes for them to come true.

Understanding the Relationship Between Design & Copy

Perhaps the best way to understand how design and copy work together is to try and picture one without the other. Even better, don’t imagine. Just go back to the look and feel of web 1.0.

If you’re old enough to remember those text-only websites, you’ll instantly recall how challenging it was for users to find the information they were after. Without much in terms of visuals, designers had to rely on colors and typography to get their message across. 

Just take a look at this archived version of CNN’s website from August 15, 2000. As you can see, the CTA buttons barely stand out. Most of the typography clashes with the background. And, there’s an entirety of 6 visual elements, most of which are so small that they’re barely visible.

Fortunately, however, web 1.0 is not the reality we have to work with anymore. Thanks to advanced website building software options, designers, copywriters, and developers can work together to create immersive, user-centric sites that are impressively efficient at communicating the desired message, like the example below.

On this brand’s homepage, every single element plays a role in convincing visitors to convert:

• The impressive hero image depicts most people’s dream vacation home.
• The headline emphasizes that the site offers only the “finest” of holiday accommodation.
• The logo in the top left corner plays a role in branding and reminds users where they are.
• The navigation menu makes it easy to explore the website.
• The banners communicate relevant information with efficiency.
• The search bar makes looking for vacation homes a simple affair, with to-the-point instructions and a nonexistent learning curve.

So what is it that you can do to combine design and copy on your business website successfully? The following are some of the basic rules to follow.

Matching Visual Branding With Voice & Tone

The first (and possibly the most difficult) step towards effectively matching visual appearance and message delivery on a website is precisely determining and following the brand’s identity.

With many inexperienced designers, the main mistake they make is that they fully immerse themselves in coming up with aesthetic solutions without thinking about how they correlate to the desired message. 

For example, take a look at the beautifully designed homepage for Thompson HD, a law firm from Washington, DC. Imagine if it used a CTA button that invited potential clients to try the firm’s services for free. Or if it assumed a laid-back tone despite the firm focusing on insurance recovery, hospitality disputes, and commercial litigation.

It wouldn’t work, now would it?

This website leaves such a good impression because it perfectly represents Thompson HD’s identity through words and visuals. The teal color palette combines green and blue to instill feelings of trust and calm. The sans-serif typeface exudes professionalism. And, the minimal amount of copy leaves the impression that hiring this company will result in an efficient legal solution.

Practicing Visual Hierarchy

The second most impactful design decision that helps images and text work together is choosing the correct visual hierarchy.

According to Adobe, “visual hierarchy is used to rank design elements and influence in the order you want your users to view them.” In other words, it’s a set of rules (or suggestions) designers can implement to bring user attention to the most valuable elements on a web page.

Size and Scale

Perhaps the easiest way to establish a visual hierarchy on a website is to choose the element that’s supposed to drive conversions and make it prominent by increasing its size. This can work particularly well when adopting a minimalist look, like in the case of The Shash, a slow fashion brand from Madrid, Spain.

Seeing how the brand aims to produce high-quality clothing that’s supposed to last a lifetime, the homepage uses visual hierarchy to draw attention to the word “Timeless.” Thanks to this, each potential customer knows what to expect when shopping with the company.

Alternatively, check out the Land Rover website, which combines the impact of header images with well-written copy that converts. 

In this example, the element that takes center stage is the product itself. Once the photo of the car grabs your attention, you can naturally direct your focus toward the following conversion-driving details: 

• the fact that it’s the most advanced SUV available from the brand
• the fact that its price starts at $53,900
• an invitation to “explore the vehicle”

Visibility

Another great way to help your website copy shine is to make sure there’s sufficient visual contrast between it and the background. Whether you use images or monochromatic backgrounds, make sure that you use colors that don’t clash with one another (a color wheel tool can be helpful in this regard). Furthermore, don’t let your headings blend into the background.

Check out Canva’s website and the way it uses color to build contrast. Yes, the top of the page does use a degree of gray. But, the choice of black for copy, combined with the bold style for the main heading, works well enough for the site’s purpose.

The Thesaurus website, on the other hand, has definitely got some room to improve. Using a combination of yellow, orange, and black, it achieves sufficient contrast, but at the price of visibility. Look at the page too long, and you’re sure to get a headache from too many brightly colored elements, all competing for your attention. 

Negative Space

The one thing to remember about designing for visual hierarchy is that clutter doesn’t make for a great aesthetic direction. At least not in web design that’s supposed to convert. So, if you want to ensure your copy really pops, don’t surround it with too many visual elements. Make sure you use sufficient negative space.

For an example of a brand that manages to nail negative space (despite including several elements on its website), check out MALIN+GOETZ.

This site’s hero section features an image that displays a product, two headings, a subheading, and a CTA. And although there’s plenty of content for web visitors to read, each element stands out sufficiently thanks to the combination of color and blank space. 

Not only does the blue stand out beautifully on the off-white background, but it’s also surrounded by enough empty space so that each chunk of text plays the exact role it’s supposed to.

(For some bonus inspiration, check out how the brand adjusts its visuals to match the copy, like in using the sign “+” instead of the word “and” or in displaying its products in the section that says “let’s smooth things over.”)

Layout

So, now that you’ve got the hang of letting your copy shine, it’s time you make it even more effective with design choices. And, to do that, you will need to know a thing or two about how web users consume online content.

For the past few decades, there’s been plenty of research about online reading patterns. Studies from the Nielsen Norman Group have discovered fascinating data, which can help designers place website text in the perfect position for visibility.

For example, there is a tendency for website visitors to scan content (instead of reading it). Moreover, there are preferred reading patterns (such as the F-shape) that can help identify the perfect page layout. And, the group has found that consumers tend to focus on images before text, signaling that the best way to present conversion-boosting copy is to make it visually appealing.

With all this in mind, brands who want to have their website design and copy work in tandem must find ways to use one to highlight the other. Bose does this well, especially in the Features section of its product pages. Here, each feature is represented with words and pictograms, ensuring that consumers don’t miss them but know exactly what they would be getting from a pair of headphones.

Repetition

Finally, there’s one more method of ensuring visual hierarchy on a high-value webpage: repetition. If you think about it, most websites use some form of recurrence. 

On homepages and landing pages, this might be the practice of placing CTA buttons in multiple positions.

In blog posts and on content sites, the repeated element is more likely to serve the purpose of lead generation. It can be an invitation for users to sign up for a newsletter, a free course (like the one below by SkillCrush), or the offer to download a free ebook.

Producing Amazing Copy

So far, our focus has been on the methods designers can use to ensure that website copy is visible enough to make a positive difference towards higher conversion rates. But that’s not all you need for breakthrough results. 

After all, if a website is going to inspire consumers to convert, it must also ensure that it uses exceptional copy.

Imagine a website that features a breathtaking design. Now, imagine if the copy it uses falls flat. If the messages are difficult to understand, they’re almost certain to detract from the beautiful visuals if they miss the point or highlight the wrong features. Moreover, they’re likely to hurt the brand’s reputation as well.

For example, check out the homepage of Karelia Software, an app development company. While it stands behind a few truly impressive tools for Mac OS, its website copy is anything but good. What does the “Your day just got bigger” heading even mean? What’s a “hit list” for iPad? Is it a productivity tool for mobsters or a system for ranking recorded music? And, why does the main CTA say “More info” when there are so many other compelling options that could encourage visitors to convert?

As you can see, writing website copy is not something you should DIY. In the long run, it’s much more cost-effective to hire a professional. 

And even then, you’ll need to improve it over time by: 

• tracking conversion rates
• boosting SEO performance
• using data from PPC advertising to optimize high-value elements like headings and CTA buttons

Final Thoughts

There’s a lot that goes into a well-made website. And it’s not just aesthetics. To set your business up for success, you must learn how to combine web design and copy to drive conversions.

Are you finding it difficult to wrap your head around the process? Try applying the Pareto principle. According to it, 80% of the results you achieve come from 20% of the input. 

In other words, ensure that you invest the majority of your energy into the most valuable elements of your site. That would be your unique value propositions, CTAs, lead-capture forms, etc. Make them compelling (both with copy and design), and you’ll be sure to see better results. 

Once you’ve got an idea of what works, you can make improvements to the rest of your website. Before you make any drastic changes, make sure that you consult analytical data first.

The featured photo is from picjumbo.com on Pexels.