Color and Web Design: Beyond the Yellow Crayon

    Apr 14, 2015 Jessica Jones

    When you begin the process of working with a web developer to build a new site, one of the first things that you’ll be asked to decide on is the color scheme. Maybe this decision has already been made for you: your business may have an established logo with a color scheme that determines the colors that will be used on your site. If you work for a large company there may even be a style guide that dictates the colors and color combinations that can be used in marketing materials.

    Just because you always fought for Wild Strawberry as a kid doesn't mean it's the best choice for your website! <figcaption id="caption-attachment-3261" class="wp-caption-text">Just because you always fought for Wild Strawberry as a kid doesn’t mean it’s the best choice for your website!</figcaption></figure>

    Maybe, however, you work for or own a small business that hasn’t yet established the colors it uses for branding. You might not even have a logo yet - you may be choosing the colors to represent your business from scratch. If that’s the case, how do you decide where to start when it comes to colors? Let’s start by discussing a few places not to start.

    Your Favorite Color

    Now, as with anything, there are exceptions to this. There is nothing wrong with choosing business colors that are appealing to you - it’s your business, you ought to like the colors! If your favorite colors happen to work well with your business’s marketing, then by all means use them! Don’t, however, fall into the trap of choosing logo/website colors solely based on your preference of colors. Color choice is a very individual thing, and you want to make certain that your marketing tools are going to be appealing to as much of your target audience as possible. If your favorite color is purple, then deck out your house in floor to ceiling purple, buy a purple car, wear a purple hat - but making your law firm’s website purple may not be your best option.

    Of course, if your business is on the artsier side - a nail salon or a coffee shop, for example - you can take a lot more liberties with color. If no one is going to expect your site to be button-down professional then you’ve got more freedom. Keep in mind, though, that even a site that conveys a free-spirited business venture should be visually appealing to as much of your target audience as possible.

    The Color of Your Office Building

    If your building was specially designed and painted to spec for branding purposes, then maybe you’re an exception. If that isn’t the case, though, matching your website to the color of your building might not be your best option - and I’ll admit I’ve never quite understood the desire of some clients to match their site to a fairly standard and nondescript building. I once had a client send me a grainy cell phone picture of her brownish wall to illustrate the color that she wanted her website to be - and no, it didn’t at all match the color of her pre-designed logo.

    Here at Slamdot our interior walls are happy bright green and blue to match our branding, but not every business decorates their office to match their logo. The brick color of your building or olive drab of your office walls may look great in their context, but they may not be the best bet for your website. Unless they were specifically chosen for that purpose, your building’s colors aren’t generally considered to be a part of your branding, so you shouldn’t feel the need to match them to your marketing tools.

    But Where to Start?

    If you’re interested in delving into the psychology of colors, a Google search or two will lead you to a plethora of articles, studies and charts linking color to emotions and consumer habits. If you want to do your homework and start with colors that are thought to encourage the particular feelings that you’d most like a potential customer to associate with your company, research away - you’ll find plenty of ideas and theories.

    If, however, you don’t particularly care that blue is sometimes linked to trust, you just know that blue is where you want to start with putting together your color scheme, you can use a tool like Adobe Color CC to help you find other colors that complement the one you’re starting with. It’s a great way to get ideas if you have a starting point but aren’t sure where to go from there.

    Screen Vs. Print

    Another thing to remember is that colors used in print don’t always translate well to a screen. You may have more experience designing marketing materials for brochures or magazine ads, and some of that experience may be extremely helpful, but the same principles are not always applicable. One common print-vs.-screen issue is the desire to use a metallic color like silver or gold in web design. The client requesting a metallic color is generally going to be disappointed to see instead a gray or amber/yellow. Effects and patterns can be used to make something on a website appear metallic, but these should be used sparingly, especially given that modern web design is moving more and more towards flatness. Using effects could make your buttons appear silver, yes, but it will also make your site look dated.

    Colors also aren’t as static in web design - if you look at the same website on three different screens the color may appear to be three different shades. When you print a brochure you can be confident that the brochure will look the same to every potential customer that looks at it, but someone using an old laptop is going to see your site’s colors differently than someone using an iPad with a retina display.

    Usability Usability Usability!

    Color preference is extremely subjective, but one factor that you always need to keep in mind is usability. Certain colors or color combinations can be hard on the eyes, or make your site difficult to see/read. These are issues that will cause many users to leave your site immediately, so you want to make absolutely certain to avoid them.

    For further reading on color and usability, have a look at usability.gov’s Color Basics article and usabilitygeek.com’s article 12 Typography Guidelines for Good Website Usability. Both of those sites are good overall resources for learning more about usability in web design.

    We Have Your Best Interests At Heart

    Finally, if your graphic designer or web developer discourages you from using a particular color or combination of colors, you may want to take her advice to heart. Professional designers and graphic artists are generally well practiced in seeing color outside of the scope of their own personal preference, so if they tell you that your color scheme isn’t going to work, it isn’t just because it wouldn’t be what she would choose for herself. If she feels that the colors make the site hard to read or look at, or simply aren’t going to be appealing to very many people, she will try to guide you to something that will better serve your business.

    The bottom line? Color preferences are personal, but the design of your website generally shouldn’t be. While you want to end up with a website that you like, try to step outside of your personal preferences - doing so may help you to create a website that performs to its fullest potential as a business tool that will appeal widely to your target audience.

    More On This Topic