BESD: Color vs. contrast--which is more appealing to the eye

BESD: Color vs. contrast--which is more appealing to the eye

Most people are familiar with color psychology, hundreds of articles, case studies, and even charts that are analyzed from different perspectives. The impact of color on us will affect every choice in our decision-making process. There is no dispute about this. However, we should not blindly follow a certain principle to discern. Today, we're going to test the effect of contrast in attracting attention.

The shift from soft, calm green to intense, vibrant red can attract more attention. Of course, this does not necessarily work. If there is no good foundation to make it stand out, then the attraction will be greatly reduced.

The "foundation" in this case is change. Here are the 10 classic cases we've collected, with a sharp shift that allows users to quickly get involved in the environment and be quick to draw attention to.

Color vs Contrast

A quiet shift:

ESPN Sports Programming

The home page of the ESPN sports program is a good example of how color works in transition. The site has two attractions: the first is intense, vibrant red, and the second is a solid background. Isn't this more appealing than the simple text on the right?

Moovrs

Although the button does not use bold red tones, the site is considered a successful site. Mainly due to the use of a strong transition, background and the main color scheme, CTA can immediately attract the eyeball, this is a success point.

Metaverse Mod Squad

This is another good example of a design that conforms to color psychology. The red tone of the site is a very important element and is a great tool for easily distinguishing important details. Although the background has a strong artistic flair, the burger menu buttons and other elements of the red tone still appeal to the eye.

S-trip

The Web Designer's button looks so unique and compelling. With a bright shade and contrasting background, these two points are enough to show the artist's breath.

Squad Digital

A deep red tone that makes the button the focus. Of course, you should not weaken the dark black background effect. A large number of white space and core components also do not take the attraction of the middle button.

El Passion

Although Green is usually a quiet, natural environment, in this case, the green button is attractive enough to be the focus of the entire page. This is primarily the result of background images and short text messages.

Icons Responsive

Icons Responsive website seems to be very busy, because there are so many interesting things for the sake of it. One animation is worth your attention, it is a short description, a high degree of identification of the navigation bar. Despite the richness of the content, the two strong green buttons are very eye-catching.

Chatrify

Not only choose bright, warm * * * as the background color of the button to set the environment, while also increasing the size of the visual weight and enhance the significance of CTA. As a result, the "Get started now for free" button looks so eye-catching.

Teletrack Plus

Teletrack plus a gorgeous and pragmatic atmosphere gives people trust and reliability. Although the landing page has elements for the device model and feature list, it is relatively small and the high saturation button placement is so compelling. As always, cleverly choose to avoid the main color tone to achieve the effect of highlighting an element.

MobiRise

Which button will catch your attention in advance? I believe that many people will choose the more solid and clickable orange button instead of the elegant Ghost button.

To tell the truth, it is not difficult to find examples of transitions and color seamless, which are everywhere. Nonetheless, we also have examples of changes that need to be improved to include CTA.

Thoughtful Acts

The thoughtful acts is a Web site that gives people a great sense of aesthetics. However, a small CTA is a composition composed of text and color. The red tone is clearly the most definitive choice, and it makes the button blend into the environment rather than stand out from it.

Lucerne Health

The Lucerne Health website has a spectacular view as a background image, so it's hard to draw your attention. CTA is a perfect blend of themes, cool and peaceful blue tone buttons. However, such a color can only make it a focus.

Convect Air

The Convect Air website is a great example of design. CTA lost in the background of luxury. The lack of change and the small size of the button is not distracting, can only serve as decoration.

Soundsnap

The site's two buttons are the same in appearance and have the same priority. More importantly, they are fully integrated into the background. The only thing that can distract you at the moment is the top information bar.

Wiser Digital

Ideally, the "Find out more" button should be differentiated from the overall design, contributing to the aesthetics of the site. Although the background has a good enough text and graphics base, the buttons are still unclear.

Spire

The CTA here has a unique appearance, and the only disadvantage is its size. Interesting backgrounds and some fancy stacking effects have a great visual impact, not to mention the big font slogans that occupy the center. Therefore, the site's buttons do not seem to be strong enough to attract visitors.

The Green Guys

This is the main hue of * * * and green. Obviously, White cannot be compared to these two colors and can only act as an auxiliary hue. So the white button on the website doesn't stand out as the core, let alone the size of the element.

Martin Wren

The Martin Wren website has won the visitors ' recognition in bright tones. Although the tone of the button black is more suitable for the overall design, the orange CTA has a stronger conversion rate.

Royal Albert Hall

The site is a lush, landscape-based environment that creates an aesthetic atmosphere and conveys information to visitors. The size is relatively large, making the brand look different. The sharp typography and search boxes, as well as the submit buttons, look smooth and seamless.

Desperados

The site creates a creative aesthetics through some decorative fonts and graphics. The additional graphical object CTA is highlighted.

Conclusion

The choice of color plays a great role in the design of the website. However, practice has shown that maintaining the contrast between the background and the CTA is crucial. If you want to improve your conversion rate and improve your user interaction experience, you should consider these two elements more in your design.

Original: Nataly Birch

Translation: User experience consulting agency BESD Design Lab Andy Leong

BESD: Color vs. contrast--which is more appealing to the eye