Using Color In Design

Using Color In Design

Websites

Why Use Color?

Color is the number one tool in terms of design from a creative perspective.  It is not only used in brand graphics eg. logos but it is also used for text (think headings and links), icons (think the search loupe) and design graphics such as buttons.

To work for you, your color choices have to consistent with your branding and engage site visitors by its appeal.  Of course it also has to support accessibility guidelines. But, most importantly, it needs to support your Calls to Action (CTAs) by guiding site visitors to them and getting them to click.

Color Design

60-30-10 Rule

This is a classic decor color rule. Think of paint colors in a room.  Normally a color palette consists of a dominant color, a secondary color and an accent.  It is saying use 60% of the dominant color, 30% of the secondary and 10% of the accent.  It is suggested this same rule be applied to websites. But how?

First off this color principal does not apply to your site background (which is generally white like ceilings) nor does it include your body text, which is generally a variation of black (think floors).  So it applies to the rest.

You would choose:

  • Primary color (ideally coming from the logo)
  • Secondary color (either from the logo or other branding that complements the logo)
  • Accent color (perhaps a new color that perhaps contrasts from the other two).

And you would use 60% primary, 30% for your secondary color, 10% for your accent on your site.

How does that translate?

For Text:

  • Menu Items would be your primary color with Accent hover and Secondary Active states.
  • Page titles (H1) might be your primary color
  • Body headings (H2 etc) your secondary color
  • Links would be the accent color.

For Backgrounds:

  • Menu Background, if colored, could be primary requiring text to be a contrasting color (a variation of white).
  • Page Titles could use your primary color as the background and use a contrasting color (a variation of white) for the text.
  • CTA sections could use your secondary color (or a variation) as their background and, again, a contrasting color for the text.

For Buttons:

  • Your primary CTAs would likely be your primary color (solid with possible outline hover)
  • Your secondary CTAs would be your secondary color  (again solid with an outline hover or vice versa).
  • Other CTAs, such as read more button links, could be your accent color (likely outlines with solid hover).

Consistency

When site visitors come to your site they need to learn how it works.  To this end, there is a standard layout for websites: header, body, footer:

  • Header design has conventions in term of content and its placement (logos, search boxes, menus)
  • The body can have optional left and right columns. It also has a heading section of its own.
  • The footer also can have columns; at the very least it normally has a Copyright statement and a privacy policy link.

Keeping to such layout conventions, lessens the effort on the part of site visitors to use the site.

When using color, being consistent works too.  For instance if internal links are the accent color then all internal links should be that color.  We achieve this level of consistency by creating a style-guide for a website.

Styleguide

The styleguide needs to set rules for colors as well as other aspects of the typography:

  • Color pallet including primary, secondary, accent and text/alt text colors.
  • Text fonts (limit to three max) including weight and use of bold.Fonts need to be tested in the colors to check readability.

Once determined, you then need to determine:

  • Menu Items, including font, size, weight and color for all states
  • Heading definitions covering H1 – H4 including font, size, weight and color
  • Primary Buttons, including hover
  • Secondary Buttons, including hover
  • Bullet points, including bullet color and style as well as indents
  • Numbered lists, including numbering style and indents
  • Links, including open in same (internal) or new tab (external)
  • Text including font, size, weight and color plus use of bold and italics.

The development of a styleguide would take several iterations and require actual presentation in HTML (browser format) for review.  A PDF is not enough given different browsers render colors and fonts differently. When reviewing, ask yourself:

  • Does the color usage support a visual hierarchy?  This is particularly important for menu and headings.
  • Do the colors draw the eye to the desired elements? Meaning are you using the right colors for the right elements?
  • Do the colors create contrast? You should perform accessibility tests.
  • Are the colors being used consistently (your HTML test should reveal this).

Remember websites are tools, they need to do their job and color is one aspect of design that aids that

You may also like