When you choose a color palette for your website, you likely intend to accomplish a few specific things. The colors you use can impact the mood of those visiting your site, reinforce your messaging and branding or entice visitors to click on a call-to-action (CTA) button.
The psychology of colors is quite complicated and multifaceted, but in a nutshell, it’s best to use complementary colors whenever possible. Complementary colors are opposite one another on the color wheel — red and green, for example. Using these opposing colors creates a harmony for your page, so it isn’t jarring for the site visitor. Complementary colors contrast with one another, so it’s vital to use a careful balance and to avoid putting text and background together as complementary.
There are several benefits to using complementary colors.
1.Stand Out From Your Competition
Using complementary colors is bold and not for the faint of heart. Use the wrong shade, and the colors simply won’t work together. However, when you choose colors in a palette that meshes well, you will create a finely tuned visual tension that will make the consumer sit up and take notice.
Opposite color combinations include:
- Blue and orange
- Red and green
- Yellow and purple
One thing that will ensure the colors don’t compete too much is choosing different saturation points for each. For example, don’t go for a combination that is a 50 percent saturation yellow and 50 percent saturation purple. Instead, choose a deeper purple, such as 80 percent saturation, with a lower-saturation yellow, such as 25 percent.
One example of a site that uses complementary colors to create a unique look is the Los Angeles Lakers’ NBA site. Notice how the page uses a deep purple with a bright yellow — the saturation differs between the two colors. This creates an overall look that’s eye-catching, but not jarring.
2. Make CTAs Stand Out
One benefit of using complementary colors is that the opposing color naturally draws the viewer’s eye. So, if you want to really make a CTA pop and capture the reader’s attention, you should use the opposite color on the color wheel for the CTA.
For example, National Fulfillment Services uses a fade from blue to green for the background in their heading. They then put the CTA within a box in the complementary color orange. This makes the CTA stand out and draws your eye. You immediately want to do what it’s telling you to do and click on the “learn more” button.
3. To Highlight Important Information
Using a complementary color to your main color can help you highlight information that otherwise might face into the background. Because the complementary color will contrast more sharply with everything else, it will draw the reader’s eye. For example, let’s say your overall color scheme is composed of blues and grays. You can use a pop of orange to draw the user’s eye to a headline, around an information box or as the navigation menu.
One example of a site that uses complementary colors to highlight important information is United Airlines. Most of their page is in blues or neutrals. Then, they have a pop of a complementary orangey-yellow color to highlight their MileagePlus program. This drives people to either log in or join. It is a sort of CTA, but a bit bigger than your traditional CTA.
You might also think they would use this to get people to book a flight, but the obvious goal for conversions here is to get site visitors to sign up so United Airlines can capture people’s email addresses and contact information. United can then continue to market to those qualified leads and let them know about special offers, with the goal of driving future bookings. United likely needs the positive marketing here to counteract recent issues they’ve dealt with regarding their overall image.
4. Take It to the Next Level
Another variation is to use a split-complementary color scheme. In addition to the base color, a split-complementary color scheme uses the two colors adjacent to its complement. For example, if you’ve chosen green as your primary color, its opposite on the color wheel is red. In a split-complementary color scheme, you’d also use orange or yellow-orange as an accent color.
The benefit of using split-complementary colors is you create a very eye-catching site that has multiple layers and a professionally designed look.
One key is to use your base color as your main color, and the two adjacent complementary colors only to highlight certain aspects of your site. Otherwise, the split-complementary look can become overwhelming and look like some bottles of paint threw up on your website.
Big Top uses complementary colors for a gorgeous design. Note that the main color is purple, and orange and blue are the complementary colors. It is eye-catching and memorable.
A complementary color scheme takes a bit of thought about what your base color will be, and which colors and shades of those colors will best complement that base. It’s a balancing act among colors that requires a bit of bravery and thinking outside the box.
However, the results can be stunning and encourage people to take the actions you most want them to, such as clicking on a CTA and converting into subscribers.
Check Out These Great Resources to help with your Marketing:
Try Commun.it to easily track brand awareness, discover new leads, share quality content, schedule posts and download progress reports.
Social Searcher is an amazing way to grow an online brand in leaps and bounds it simply takes creativity, passion and consistency to keep things moving in the right direction.
Iconosquare is the number one platform for Instagram & Facebook analytics and social media management.
SocialPilot is the Most Cost-Effective Marketing Tool. Powerful Publishing. Insightful Analytics. Seamless Collaboration.
Bluehost is a leading web hosting solutions company. Bluehost has continually innovated new ways to deliver on our mission: to empower people to fully harness the web. They provide comprehensive tools to millions of users throughout the world so anyone, novice or pro, can get on the web and thrive with our web hosting packages.
SEMrush is an all-in-one tool suite for improving online visibility and discovering marketing insights. Our tools and reports are able to help marketers that work in the following services: SEO, PPC, SMM, Keyword Research, Competitive Research, PR, Content Marketing, Marketing Insights, Campaign Management.
HubSpot offers a complete CRM platform with all the tools and integrations you need to grow better — whether you want to increase leads, accelerate sales, streamline customer service, or build a powerful website.
To check grammar and spelling to style and tone, Grammarly helps you eliminate errors and find the perfect words to express yourself.
Author
Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner
When it comes to efficient salesmanship, there’s more science than art involved in achieving success. Selling is a highly behavioral and psychological activity that focuses on persuasion with a transaction as its ultimate goal.
The science of selling is often brushed aside by e-commerce designers, which is a major detriment to business success. There seems to be a flawed belief that any website with a functional shopping cart module will convince visitors to make purchases. As a result of this defective thinking, many important elements of a website are often disregarded.
If you have a website that offers goods, services or activities, one of the things you need is a convincing call-to-action (CTA) element. Most of the time, this CTA element will be capped with a button that simplifies the completion of an action for the visitor. Here’s are several things you need to know about CTA buttons.
The Influence of Color
Themes, templates and Web design guides are usually grouped into color combinations that pay attention to balance and contrast. In the past, behavioral researchers believed that CTA elements needed to be of a specific color for the purpose of being effective; however, this is not true. What drives website to click on CTA buttons is contrast.
In general, a CTA button should stand out from the background. For example, a fashion boutique that caters to younger female shoppers can choose a light pink background, but the CTA button to sign up for a newsletter should be fuchsia. This is only one possible example, but the point is clear – always color your CTA button so that it stands out from the background.
Here’s an example of CTA and color usage.
Image Source: Pagewiz
Size Matters, and So Does Shape
Website visitors tend to respond better to rectangular shapes due to familiarity, so take that fact into account when creating your CTA. This is not to say that other shapes should be avoided at all cost, but it might be best to use recognizable elements. In any case, avoid sharp edges as they are perceived as being stern; rounded corners are friendly and inviting.
When it comes to size, CTA buttons need to be more than conspicuous, which means that they should be proportionally larger than other page elements. You want your CTAs to be noticeable and tell your visitors where to click, so make sure they are not too small.
Where CTA Buttons Should Be Placed
Years of Web design and development have conditioned visitors to expect a certain layout format. Most landing pages follow the formula of headline, persuasive message, sign-up form, and CTA button.
In general, Web designers should take cues from print media. Above the fold CTA buttons work better when visitors are already acquainted with the product, service or activity. For example, a pizza shop offering coupons to existing customers should place the CTA button above the fold, near the top. On the other hand, if the pizza shop is new to the neighborhood, the CTA button will work better when it follows the marketing copy below the fold.
The Message is the CTA Button
Like anything else that is being sold, a CTA button should present a value proposition. In other words, it must clearly answer the ever-present question of “what do I get by clicking this button?”, and appeal to human psychology.
The CTA message should be friendly while avoiding the use of passive voice. It should also not be pushy, so avoid imperatives like “submit”, “pay now”, and so on. Instead, make sure to always convey a clear message like “educate me” or “get my free e-book”. In general, keep it short, simple, and to-the-point. You can also benefit from words that create a sense of urgency like “now” and “today”.
Here’s a great example of messaging within the CTA.
Image Source: Noah St. John
CTA Narrative
The CTA button needs to be part of a larger narrative that should appeal to website visitors on an emotional level. To a certain extent, effective narrative should overcome the deficiencies of pedagogy, which means that it should teach visitors about something that is interesting and that can have a positive impact on life.
Try to think outside the box and regard CTA buttons as educational technology tools. In other words, if your visitors know they will learn something by clicking the button, they will more likely make that click. For example, an auto repair shop in Arizona can teach visitors about how high temperatures affect tires. In this case, the narrative can provide a quick physics lesson, and the CTA button can prompt readers to get on the email marketing list to learn more about how climate influences vehicle maintenance. Surely, you get the point – CTA buttons should always be put in an educational and informative context.
Image Source: Prezi
Designing Climactic CTA Buttons
The most effective marketing narratives evoke curiosity and build suspense. CTA buttons should be designed to look like they will reveal a secret with a click of the mouse or a tap of the touchscreen. This can be achieved by explaining some concepts in the narrative while promising a resolution that will come after the CTA button is clicked or tapped.
In the end, ideal narratives should keep visitors guessing while the CTA button should bring enlightenment. Think of it as a series episode that ends with a cliffhanger. Design your entire page in a way that it climaxes at the CTA – more clicks are guaranteed.
Final Words
Web designers who pay attention to colors, shapes, sizes and placement will ensure that their CTA buttons will be clicked on or tapped. However, it is equally important what the CTA says and what kind of a story it belongs to. So, when designing your CTAs, make sure to take all these facts into account in order to increase your click rates.
BIO: Natalie Smith, a freelance writer from Seattle, enjoys covering topics related to marketing, customer service, and social media. For more information, reach her @Natalie Smith
Do you want your customers to do something for you? Do you want your clients to reach your goals? Then you have to tell it to them in a specific and effective way – through a Call-to-Action.
A Call-to-Action is that little incentive you see on websites or in emails and that tells you to take action.
Here are some examples: Sign up now! Call us today! See our video! Leave us a comment!
When talking about Call-to-Action you already know that you have to pay attention to many things like visibility, color, size, font and phrase.
In this article we will talk about the last element we’ve mentioned in the list above: phrase. We will tell you how you can build powerful CTA phrases that will help you increase your conversion rate.
So, let’s get started!
Mention urgency
First of all, I’m sure you want your customers to act right here and right now. So you have to tell this to your clients – show them that this is the perfect moment to take action. A time limitation makes your calls to action a bit stronger because it adds a sense of urgency.
The most common word that people use to express urgency is “now”: Buy now! Subscribe now! Donate now! The urgency can be expressed in other ways, too: Order Today! Visit us this week! Call us within the next 2 hours! – Yes, you have many options, but the best formula is the one that fits your offer.
Use actionable language
This means that you need to use some strong words that can encourage your customers to take action: Download, Add, Subscribe, Donate, Read, Register, Change, Fight, Explore, Fight and so one. The verbs you use in your call to action phrases depend on what you want your customers to do and then to tell it straight.
Writing a call to action is more effective when the audience is only required to complete one task. Multiple phrases asking the audience to perform various tasks can be confusing and the public may lose interest when they think there is a lot of work involved.
Keep it short and clear
When you write a Call-to-action you have to keep it short and concise because you don’t have a lot of space. You need to go straight to the point. Tell them exactly what you want in as fewer words as you can. Linked to this tip is the simplicity one – make sure you have only one Call-to-Action and that you focus your efforts on it. Think about your main goal and work for it.
Now that you have these tips we’re sure you better understand how powerful Call-to-Action work and will be easier for you to create them for now on. Remember that the only secret formula is practice. In time, your call to actions ideas will become more effective.
Please don’t forget that if you want a good Call-to-Action you have to consider visibility, color, fond and size, too.
Take your time and test different phrases to see which one encourages your audience reach your goals.
What kind of Call-to-Action do you use now? Do you follow these tips when you create them?
About Rares Banescu
Rares Banescu is the CEO and founder of Retargeting.biz, a company which provides a marketing automation software for online businesses that reduces bounce rate and cart abandonment rate and increases conversions. We have more than 100 satisfied customers in Romania and around the world.
Google +: https://plus.google.com/u/0/107893068823835809987/posts
Sources:
http://www.printwand.com/blog/14-tips-for-writing-the-best-call-to-action-with-examples
http://www.evancarmichael.com/Marketing/5112/50-Powerful-Call-to-Action-Phrases.html
http://wiredimpact.com/blog/nonprofit-call-to-action-phrases/
Photos:
http://www.webdesigndev.com/amazing-call-to-action-buttons/
http://writtent.com/blog/7-effective-call-to-action-examples-and-why-they-work/
https://seo-hacker.com/call-action-content-marketing/