June 4, 2015 | Melanie Chandler

How to Design a Great Call to Action (CTA)

Design Call to Action

Before diving in, I'm going to take a moment to answer the question "What exactly is a call to action?" You know, just in case you forgot.

As elements of website design, Calls to action (CTAs) are clickable images that direct your website visitors to important pieces of content or places where they can take an action. For example, you may use CTAs to encourage people to subscribe to your blog, submit a form, or download a piece of premium content. They can also be used to drive traffic to other important parts of your website, like an upcoming event or offer. 

Brilliant Earth CTABefore writing the content for your CTA, there are a few things to think about. Most importantly, what is the ultimate action that you want your visitors to take? The copy for the CTA needs to be clear, concise, and focused on what the offer is and how it will benefit the viewer.

If you need help or don't know what direction to take, now would be a good time to subscribe to our blog. Our wonderful copywriter, Emily, is writing a blog post about how to write CTA copy that earns clicks, and we'll be happy to let you know when it comes out.

Now, let's dive into creating an eye-catching design.

Using Contrast in a CTAThe goal of a CTA is to attract the attention of visitors. One way to do this is to design it to be a different scale (i.e. bigger) than the surrounding content and design features.

You want your design to stand out, but not overwhelm the rest of the page. So, think about the size of the CTA and the placement on your site, as well as where people will be in the buyer's journey when they see it.

Contrast is crucial in CTAs, and it's the fastest way to grab someone's attention. Make your CTA stand out from the rest of the page by choosing dominant colors, particularly for the essential parts (like the button or link text). Keep in mind that each color evokes certain emotions, which can influence people in your favor. You want to choose colors that complement the page and stand out at the same time.

Using Different Fonts in CTA

Another tactic is to use different fonts in your calls to action to create contrast and catch the eye, as in the example above. Try emphasizing certain words by making them larger, bold, italicized, or in an accent font. Just make sure you choose legible fonts!

Rounded Buttons in CTADon't be afraid to design outside of the box—literally. Many CTAs are square or rectangular, but you can get great results with unconventional shapes. Even subtle differences like rounded corners can play to your advantage.

Another way to draw the eye is to incorporate an image into your CTA, whether it serves as an attractive background or directly represents the contents of the offer.

The examples to the left from Spotify include rounded buttons, featured photos, and eye-catching colors. They were also displayed full-width on the website, so they can't be missed.

To top it off, the offer (3 months of Spotify Premium for $0.99) is a pretty good deal, so I'm willing to bet that their click-through rate is insane.

A well-designed call to action can make a huge difference in clicks, form submissions, downloads, and sales. And isn't that the point? So you might as well make the effort to do it right!

Here's my favorite CTA from VIEO. Does it make you want to click?

New Call-to-action

Melanie Chandler

Melanie Chandler

As design director, Melanie Chandler leads the design team and works with them to create consistently compelling and engaging website designs, images for digital marketing, and other visual content to communicate corporate identity and drive traffic on websites and social media.

Related Post: