colors

small design web icon

Do Your Brand Colors Help or Hinder Your Web Design?

Author: Eleanor Hecks

If you’re like most brands, you’ve probably spent a lot of time studying who your customers are and what they prefer. Your brand colors are ones you’ve tested thoroughly and used as you built your company’s image. Those colors have an emotional impact and people expect to see them aligned with everything you do.  

One older study conducted by Kissmetrics found 92.6% of people feel visual affects their purchase decisions more than any other sense. Around 90% of their assessment is based on color. Colors have a powerful emotional influence on people. Depending on your target audience, they can make or break your conversion rates. 

What happens when your brand colors hinder your web design instead of helping it? For example, you established your business and embraced a color palette in the early days, only to find those colors don’t translate well online. Perhaps you chose yellow and lime green and the colors just wash out your pages. 

Fortunately, there are many things you can do to use your brand colors for recognition while still giving your site excellent user experience (UX). Here are some of our favorites along with a few examples so you can see how other brands embrace the effort. 

1. Limit Bright Hues

If your brand colors embrace eye-catching shades of red, orange, fuschia or some other vivid hue, limit how much you use it. Perhaps your logo is an explosion of color, so you need to tone down your background a bit.

Think of your website in terms of layers. If you plan to have a bright logo on top, you’ll want a layer under that offers some contrast, such as white or pastel. You may also want to limit the number of colors on your page and combine complementary shades for your calls to action (CTA) and accents. 

Source: https://www.stoov.com

Stoov uses a bright orange for their logo. Instead of adding in too much orange and overwhelming the viewer, they use it in their logo, in the tags on the products showcased and for the CTA. Note how they used a very muted and soft green background to allow the orange to pop. Green is complementary to orange, giving the page a fun appeal. 

2. Be Consistent

Whatever layout you choose, make sure you’re consistent throughout your site for an excellent UX. You don’t want to use a color logo on the home page and then swap to a black and white logo on other pages. Of course, rules are made to be broken, but it’s important not to confuse your customers. 

3. Add Neutrals

One of the easiest ways to implement your color scheme on your website is to use it as accents and implement neutral shades to give the eye a break from all the pops of color. Note how big brands use whites, blacks, grays and tans to showcase content without overwhelming the user.

Think of your neutrals as part of your negative space on your site. Tap into a white background and high contrast black text for your body paragraphs. Use your brand colors for images, headings or CTAs. 

Source: https://www.nevsink.com

Nev’s Ink has brand colors in blue and a deep purple-pink. Note how they use a white background to make their clickable links pop. The blue draws the user’s eye. The entire site has a navigational hierarchy the user comes to rely on. CTAs are fuschia. Descriptive icons are blue. Headlines might be either.

4. Tap Into Emotions

Understand the psychology behind the colors you choose. Each hue elicits different emotions in the user. These can vary based on personal life experiences, though. While one person might love the color red and feel excitement, another may associate it with blood or a bad experience and shy away from the shade. 

Take the time to survey your customers. Conduct split testing to see if slight variations in tone make a difference. How well do the shades contrast with other elements on your page? Can you adjust your brand color palette slightly so it appears similar to your actual colors but contrasts better or pops on your website?

5. Consider Gender

Different genders prefer some colors over others. For example, both sexes love the color blue. However, men are more drawn to browns and greens. Approximately 33% of women dislike orange and 20% dislike brown. 

If you sell products better suited to one demographic than another, it is wise to choose colors the audience best relates to. 

Source: https://thrivecausemetics.com

Thrive uses blues and a pop of different shades of pink. The site caters mainly to women, so it makes sense they’d tap into the colors most beloved by their audience. The combination gives the site a festive, uplifting feel. 

6. Use Color Palette Tools

Still unsure of which colors might look best in your design? There are dozens of free color palette tools available on the world wide web. Punch in the main color or two for your brand and see what complements your brand’s look.

You may find some combinations look better than others. Ideally, you’ll use your choices on your website, social media and in newsletters you send out via email. You want to create a consistent look across all mediums, so don’t be afraid to try different combinations until you land on the one that works best for your users. 

Get Feedback

If you still aren’t sure how well your brand colors are converting site visitors into customers, ask for feedback. Talk to your regular customers about what they like and don’t like. If someone abandons their cart, send them an email and ask for feedback. Try different colors and designs until you hit on the ones getting the results you want for your site. 

4 Examples of Web Designs That Just Make Sense

Author: Eleanor Hecks

Have you landed on a website and just felt it perfectly embraced the purpose and personality of a brand? Finding just the right combination of emotional points and features isn’t easy. You must first figure out who you are as a brand. At the same time, learn who your audience is.

According to Internet Live Stats, there are approximately 3.5 billion Google searches every day. The number varies, but you’ll find ample opportunities to reach your target audience with your website.

Does Your Website Design Matter?

Once you get the traffic to your page, does your design resonate with users? You have just a few milliseconds to make a first impression, so making sure you hit every point is vital.

Many people begin their searches for a business, even a local one, via search engines. When they land on your page, do they fully understand the purpose? Is the design aesthetically pleasing? Does the layout guide the user to the next stage of the buyer’s journey?

One of the best ways to learn how to design a site that speaks volumes is studying what others have done. Here are four websites we think just make sense and match the purpose of the business or personality of the brand.

1. Use Brand Color Palette

Is your brand already well-established? If people are familiar with your logo or company colors, it’s smart to use the same look in your web design. While it might be tempting to throw in some unique looks to show you’re up on the latest trends, try to stay away from anything too trend.

It’s best to stick with what your audience recognizes. You can, of course, add in a pop of color for a CTA or slightly adjust the hues to better contrast on electronic screens.

Century 21 uses a large hero image of a modern room to grab interest. They use a semi-transparent bar to share facts such as how many homes, agents and offices are available in your area. Note how the shades are brown and gold with a bit of neutral mixed in.

The company is well known and their logo and color palette recognizable offline. Using similar shades taps into the comfort and familiarity most people already feel with this company. The design works perfectly to get across their message.

2. Highlight Your Tagline

What is your brand’s tagline? You may be able to utilize it in some of the imagery and design of your page. The more you can make all the elements work together to elicit emotion in the user, the more likely they’ll convert into a lead.

For example, if you’re known as a fun brand, you would use happy colors and images. Think about the emotions you’d like to evoke in your customers and center your design around them. Even the shades you choose tap into feelings. Understand buyer reactions to different colors, even if you have to survey them to find out.

MRCOOL uses the heading “Never Stop Dreaming” just above their name logo. To tap into this idea, they show a little girl in a superhero cape, looking across to the city skyline as though she’s ready to rescue the world.

The soft sunset colors make one think of dreaming and something a bit surreal. At the same time, if you click on the video, you get testimonials from those who love the product and want others to know how well it works. It’s the perfect mix of dream and reality to grab user attention in an unexpected way.

3. Have Fun

Don’t be afraid to show off your personality and what’s unique about your business. It might not be obvious to you at first what makes your brand unique. Spend time studying the competition so you can see what unique value proposition (UVP) each touts.

Once you understand the competition’s UVPs, come up with your own. You want something different than your competitors but also true. What do you thrive at? What makes you stand out? It’s okay to hone in on something others may not pay attention to as long as you stack up in other areas.

The Ugly Company sells dried fruit and healthy snacks. Their name is “ugly” and their goal is to reduce their carbon footprint while upcycling snacks. So, they choose colors that are a bit garish. When you first glance at the page, you note how ugly the yellow is there. It isn’t a color you see often in web design.

However, on second look it matches the overall tone and look of the brand. The fact that some of the elements fall into the category many consider unattractive coincides with the brand’s name and persona. The product packaging would also stand out on store shelves as these aren’t colors typically used on dried fruit bags.

4. Highlight Your Benefits

Leave room in your design to show off the benefits of doing business with your brand. Highlight what makes you special on your home page. Limit the number of options so users see clearly where to go next, whether to a shopping section, additional information or to a form that converts them into a lead.

Eliminate any clutter and focus only on what customers most want to know about your brand. You can ascertain the information they want by looking at questions they’ve asked your sales team or surveying them for input. You can also check heatmaps for your site to see where people head once landing there.

Case goes with a very simple layout to bring the products you most want to know about within a click or two after landing on their page. They start by showcasing one of their popular products in the image. They then share the benefits of choosing their furniture, such as great reviews, 14-day returns and delivery or pickup.

How to Meet User Expectations

Your number one goal for your website should be to meet user expectations. Why do people seek a site such as yours in the first place? Are they looking for information? Do they need to buy something? Make the overall process as easy and possible. Creating an excellent customer experience is the most significant thing you can do to keep your users happy and create a design that makes sense.

Eleanor Hecks is editor-in-chief at Designerly Magazine. Eleanor was the creative director and occasional blog writer at a prominent digital marketing agency before becoming her own boss in 2018. She lives in Philadelphia with her husband and dog, Bear.