When Worlds Collide Pt. 2: Designs That Convert

by Ryan Miller
on July 25, 2015

TL;DR

Being a marketer doesn’t mean being visually oriented or even artistic. But it DOES mean knowing what kind of designs will convert – as well as the elements that make up those designs.

I have a confession to make: I love the phrase “designs that convert.” It rolls off the tongue so smoothly! I’ve used (err, overused) that line dozens of times, but you know what? It packs a world full of meaning and consequence for the marketing-oriented web-designer.

When I last discussed the connection between design and marketing, I mostly referenced semantic markup, something that few marketers and only the most knowledgable designers/developers adhere to.

When it comes to conversions, however, that’s a language any marketer is going to be fluent in. It’s their sole purpose: to generate traffic for clients and convert that traffic into a paying, returning customer.

The best of the best understand not only the importance of conversions and the role they play in strategy, but also the formula for designs that convert. This is somewhat distinct from web design in and of itself. From an aesthetic standpoint, social proof may look fine below the fold, but conversion-savvy marketers know otherwise.

And yes, there are some other clashes between design as an idea and designs that convert, all of which would better serve the client by marrying the fields of marketing and web design.

The Call to Action & The Offer

The call to action: the basic building block of a landing page. It only has to be a few simply words that inspire. Sounds pretty simple, right?

As far as the copy itself goes, packing a concise statement of value and purpose into only a few words is pretty tough. The CTA has to not only summarize your business, what it does and what it has to offer. It also has to be catchy enough to stand out and convince your audience to act upon that offer.

[su_button url=”#” background=”#000000″ size=”7″ radius=”0″]Do You Really Want to Click Me?[/su_button] [su_button url=”#” style=”flat” background=”#F79647″ color=”#d9ebf5″ size=”7″ radius=”10″ text_shadow=”0px 0px 0px #000000″]No – You Want to Click Me![/su_button]

 

Using Color Psychology

Design is how we make it stand out. I once read a KISSmetrics white paper that surveyed consumer opinions on colors and stated that orange was unequivocally the best color suited for CTAs. I used it, albeit sparingly, on the attributes I considered most important, i.e. the ones I wanted to stand out. The CTA, buttons and links are orange for a reason: that’s how we get you to notice them.

The CTA of the Future: Thank You, CSS3!

By the way, did you notice that little bouncy effect we put on the offer and the call to action? We bet you did notice it. In fact, the reason it’s there is so you will notice it. It’s one thing to miss a beautifully written CTA with the most stand-out of colors. But sprinkle a little animation on it and your eyes physically cannot ignore it.

The one caveat with animated CTAs is the JavaScript component. As I’ve said, I’m primarily trained as a writer and not as a developer or web designer. So I’m sure it’s par for the course to say that, when I learned how to write JavaScript, I used it everywhere.

Yet, the obvious problem was apparent: too many scripts = slow site speed, and as an SEO I knew all too well how important this was. Fortunately, I’d been fully inculcated in CSS3 by that point and I already knew that many neat JavaScript effects could be achieved with CSS alone: i.e., in a way that doesn’t reference bulky, external scripts. Voila — the bouncy CTA stands out, but doesn’t delay anything above the fold from rendering!

CSS3 Makes better designs that convert
We love JavaScript, but when it comes to designs that convert? Opt for CSS3.

Narrow Focus: Both in Presentation AND Content

Yet another thing that marketers have in common with web designers is an appreciation for concision. I’ve always had problems with copy text that spans thousands of words, so the design concept of “white space” came to me rather naturally.

White space can be thought of as allowing your user some “breathing room,” lest they become so overwhelmed with content that they exit the site. All of us here at TM34 — Dave, Jared and myself — have a tendency to be a bit long-winded at times…yet we all agree that, when it comes to clean, friendly designs that convert, less is always more.

Sure, we fill some of our content with cheeky, ironic remarks (which do serve their purpose), but we still prioritize the content that appears above the fold (i.e. the first part of the page you see). It’s short, it’s sweet, but it still speaks volumes.

Where the Designer Really Gets to Shine

Now we come to the part where it’s almost all design — the proof that good copy is only one, albeit extremely important, element in a fully-optimized landing page. I’m talking about tidy visuals. I’m talking about the placement of page elements. I’m talking about fully responsive, resolution-savvy layouts.

Play Hard-to-Get With Visual Elements

Statistically, less and less of your audience will get further down your landing page. Strictly speaking, this fact is meant to imply that all the most important attributes should be placed above the fold. In reality, this is often impractical. And rarely do even those that preach this practice actually do it.

Here’s a creative solution, though: play “hard-to-get” with your visuals. By this, I mean give your audience some incentive to scroll down or view other pages within your site. You obviously can’t fit your entire portfolio above the fold, so design a catchy button that directs them to a page dedicated to the work you’ve done.

Just be sure not to be too demanding or lose their interest too quickly. Remember, you’re trying to incentivize interaction, not force it out of them.

Go Responsive or Go Home

Responsive Web DesignBelieve it or not, more and more conversions are occurring outside of the 1280 x 800 Macbook screen. As much as I love my laptop (and hate Safari), I do use my iPhone to go shopping with some frequency. And if I come across a website that looks like garbage on my phone, good luck earning my purchase.

In this day and age, it’s nothing less than imperative to have a website that looks great on any screen. And for landing pages in particular, there’s an additional concern: keeping those important elements above the fold, even when the “fold” shrinks to a mere fraction of its original design!

Responsive web design is one thing, but responsive landing page design is a true art. Everything we’ve talked about here — the value statement, the offer, the call-to-action, and the visual stimulation — has to remain intact and legible, much less visible.

In my own experience, that was accomplished only after months of frustrations and a number of mockups I’ve lost count of. But guess what? It was worth it. Designs that convert always are.

Like This Article? You'll Love Our Work.