Call To Action Design: Trends and Best Examples
This page may contain links from our sponsors. Here’s how we make money.
Every great landing page or guided web experience has some call-to-action element. This could be a button, signup form, settings menu, or anything that gets the user moving through a predetermined experience.
I’d like to examine design features and trends that can be used for better call-to-action design elements.
There are many case studies and research articles detailing CTA action, but few cover the overlap between design and marketing.
Creating Calls to Action
Contrast Draws Attention
Digital art and design students often learn the value of contrast when first diving into studies. The term “contrast” describes a relational situation; certain elements create contrast when placed near other elements.
For example, the homepage of Sketch for OS X places a brightly-colored button next to a ghost button. Even a quick glance should draw your attention directly to the “buy now” button.
This was done on purpose to create a sense of urgency and curiosity. Sketch wants to sell more licenses. The creators know many people visiting the site have done the research and already want to purchase a copy. Others may just be looking for more info, but the path to purchasing a license is lit up like a Christmas tree.
A similar technique is used on Manpacks, a website selling collections of manly things like razors and undergarments.
Most of the site follows a white-and-black pattern with photos and icons interspersed throughout the content. But only a couple of buttons use the bright green background.
This builds high contrast on the page even if you don’t want to see it. The effect permeates through all visitors and it’s a proven technique for successful CTA design.
Matching Color Schemes
Just building contrast is not enough to secure increased conversions. It’s also worth noting that colors should be in agreement and match in a positive way.
The term “contrast” can include things like dissonance and juxtaposed elements that push users away rather than draw them closer. You should aim for the latter.
Let’s look at the homepage for Web Designer News. Darker shades of blue/purple meld together and fade into the background.
This leaves small highlights of bright pink that stand out clear as the morning sun. You’ll notice the pink color is only applied to significant elements; namely the logo, “submit story” link, and the newsletter signup button.
Once you understand the tenets of color you’ll have a better grasp of how to match color schemes with contrast. The more you study and practice(AKA applied study), the more you’ll learn and grow comfortable picking schemes that blend together.
Bixbi goes a different route by blending colors together. The page uses yellow with dark text but relies on a darker orange for button colors.
The contrast here is greatly reduced but still visible. The differences lie in tonality and design choice. But keep an open mind because your goals will vary with each project.
Enlarged Text And Buttons
Another relational design trend is size. If all other elements on the page are a similar size with one super-large button, guess what’ll stand out the most.
Eric Ries’ Lean Startup Pack uses varying text sizes and bright graphics. But one element in particular jumps off the page: a peculiar green signup button.
This uses both color and text size to draw attention. Again this doesn’t look annoying or out-of-place but it does stand out enough to capture attention.
Major news site TechCrunch has a similar technique. Their featured stories get spotlight attention with larger text and thumbnail photos.
Another vague yet important element is the “send us a tip” link in the top sidebar column. Although it blends into the background, this element uses large text and dividers to keep it segmented as close to the top as possible.
Consistency and Blending
It may seem counterintuitive but blending techniques are often the best ways to coax visitors towards interactivity.
Call to action elements shouldn’t necessarily blend in. However, it’s the other elements that do blend that help CTA elements stand out. A consistent design pattern keeps the page in balance and gives the design a professional slant.
For example, the Chartbeat header uses numerous buttons all styled in the same fashion. Yet some have different background colors to build separation from more general content.
But my favorite example can be found on the CakePHP website. Notice how two elements in the header use slanted angles and bright colors similar to that of a retro 1950’s sign.
One element displays the current CakePHP version number. The other is a link to the download page.
They blend naturally into the layout but only one is interactive. This is a great design technique to capture attention without being too obtrusive.
Plan Ideas For Each Project
It’s important to work with these ideas for every project you manage. What works on one site may not carry over well for another.
Be flexible and willing to try multiple solutions. A/B split testing is always a great technique for designers working on conversion rates. But ultimately the more you work on new projects, the more you’ll internalize which CTA design trends fit best for individual audiences.
