Archives for August 2015

Choosing a Color Scheme

One of the most important visual elements of a website is the color scheme, and it can be one of the most challenging elements to get right. A site geared at the elderly calls for a completely different color scheme than a site geared at children. And likewise, a site focused on serious issues, like health or social change will likely have different colors than a fan site for Bronies. Not only that, but if you’re working on a site for an international client, understanding a color’s cultural meaning is important. For example, using green in a site for the Western world may signify wealth or freshness, while in Chinese cultures, green may signify exorcism or infidelity according to About.com’s Visual Color Symbolism Chart.

In this post, I’d like to discuss a bit of basic color theory, and few tools we can use to get started in choosing the right color scheme for your next website project.

Choosing a Base Color

First, let’s assume that you already have a logo to work with. Why? Well, having a logo as a starting place makes it a lot easier to choose a base color. A good designer will have already narrowed the logo down to one to three colors, and those colors should already be doing a good job communicating the appropriate message to the target audience. So from there, we can analyze the logo and decide which color acts as the main color, and whether that works as a main color accent in our web design.

Let’s look at an example.

We recently completed a site design for the Piedmont Education Foundation. Our client provided us with a logo, which was purple and white. Straight away, it was easy to tell that our base color for the project would be purple, but how did we come up with the other colors in the project?

Choosing a Supporting Cast of Color

One of my absolute favorite tools for choosing color schemes is Adobe Color CC. You have a few different options for getting started, so let’s go!

Choosing a Color Scheme from a Base Color

    1. For this example, let’s start with a warm, sunny orange. Go to http://color.adobe.com and plug that hex for our sunny orange (#ff6500) into the middle box, and make sure the white base color triangle is in that box (if it isn’t, hover over the bottom area of the box until the tool tip pops up, and click Set Base Color).
    2. Now, let’s select a color rule from the upper left side of the screen. What do these color rules mean? Well, here’s a brief overview:
      • Analogous
        Analogous colors are three or more neighboring colors on the color wheel. Since we selected orange in this example, we should see yellow, yellow-orange, orange, red-orange, and red in our color swatches.
      • Monochromatic
        Normally, monochromatic colors are versions of our base color with black, gray, or white added to create variations of the color, but Adobe Color CC appears to use saturation (how bright, or how rich a color appears) as way to affect color for the monochromatic scheme.
      • Triad
        A triad scheme uses colors that are an equal distance from one another on the color wheel. The result you see may be less than lovely now, but with a bit of finessing, you can get some great results from a triad color scheme. Try pulling the dot sliders in toward the center of the color wheel, or adjusting the bottom slider under a color to add more gray or black to a color.
      • Complementary
        Complementary colors are two colors that are directly across one another on the color wheel. A good rule of thumb when using complementary colors is that the complement should have a contrasting level of saturation, or perceived brightness. Otherwise, the complementary colors will clash too much when used together. To adjust the saturation in Adobe Color CC, simply drag the color dot toward the center of the color wheel.
      • Compound
        In Adobe Color, a compound color scheme is a mash-up of a complementary and analogous color scheme explains Tony Harmer in The Design Jungle, an Adobe blog and design resource. In our example, it is finding the complement to the orange (blue), grabbing one color that is analogous to the blue (green), and two colors that are analogous to the original orange (two desaturated yellow-oranges).
      • Shades
        Shades are fairly straightforward, and simply show different amounts of black mixed into the originating color. What’s fascinating is that adding a lot of black to yellow can actually turn it green!

        An example of different color schemes created using a single base color.

        Left-to-right, top-to-bottom: an analogous scheme, a monochromatic scheme, a triad scheme, a complementary scheme, a compound scheme, and saving a scheme.

    3. If you have an Adobe CC account, then you can log in and save the color scheme to the Creative Cloud library. This is particularly useful if you are going to work in Illustrator, Photoshop, or any of the Adobe apps on the iPhone or iPad because you will have access to your scheme (trust me, this is super helpful when you’re working on a logo in Illustrator!)
      I like the compound color scheme best, so I am going to go ahead and save that. Click the Save button in the upper left corner.
    4. In the pop-up box, enter a name for your color scheme, indicate where you’d like to store it in the cloud, and add any tags you’d like to describe your color scheme. You can also indicate whether you’d like to theme Published to Explore, which will make it viewable by the public (it may be worth being careful here if you are creating a scheme for a client project).
    5. Now you can fire up Illustrator, and see your new color scheme in the Color Themes panel!
An example of the Color Themes panel in Illustrator CC 2015.

Illustrator has a Color Themes panel that allows you to import and use the color scheme you created with Adobe Color. The color scheme can be added to the Swatches panel for ease-of-use.

Choosing a Color Scheme from a Photograph

What if you don’t have a color scheme? Maybe you’ve been tasked with the logo design, and are looking for inspiration for the color scheme based on the content you’ve already received from the client (like a photograph), or you’ve worked with the client on a moodboard, and want to grab colors from there. Well, you’re in luck. Adobe Color has an option to upload a photo and choose a color scheme from there!

  1. Go to the Adobe Color website, and click the camera icon in the upper right of the screen.
  2. Use select an image from your computer. For this example, I’m going to use a photo of our gorgeous office building.
  3. Not unlike the previous method for choosing a color scheme, you can choose different “moods” based on the colors in your photograph.
  4. If you choose Custom, then you can drag the dots around to customize the color scheme based on the image. I wanted a calming vibe with a single pop of color, so I moved my dots around to get some warm grays into the mix.
Examples of a color scheme chosen from a photograph.

Left-to-right, top-to-bottom: a colorful scheme, a bright scheme, a muted scheme, a deep scheme, a dark scheme, and a custom scheme based on a single photograph.

Using either of these methods for choosing a color scheme may not work perfectly, and you may need to consider finessing the scheme in another program, like Adobe Illustrator. The key here is to find a starting point, and use that to guide you in the color-choosing process.

If you want to learn a bit more about color schemes and some high-level color theory, Tiger Color has a brilliant resource on Color Theory.

Mm Plugin: Equal Height Columns

Making columns that have the same height without explicitly setting a height on each of them has always been a web design challenge. Doing this in a way that is full responsive so that content never overflows and the heights are equal on all screen sizes has always been an extreme challenge. We’re pleased to announce that this challenge has finally been solved with our Equal Height Columns plugin for WordPress.

Our Equal Height Columns plugin is simple but very powerful. Once it is activated it adds a settings page where you input a CSS selector for the elements you want to have the same height. You can also input a breakpoint below which you do not want the plugin to equalize the heights. Simple as that.

This information gets passed to a jQuery script that does all the magic. When the page loads the script measures the height of all the items that match the selector and sets each item’s height to match the height of the tallest item. Then it sets up some event listeners for window resize and orientation change and re-equalizes the heights whenever these events are triggered.

Equalizing the heights on page load and window resize was good, but we took it a step further and added some extra functionality to make it bulletproof:

– We check the selector that was input and catch any errors that happen if the selector is malformed so that we never stop JavaScript execution due to bad input. This plugin will never break your site!
– We added some debouncing on the resize and orientation change events so that the plugin only re-triggers once as you resize the window
– It supports multiple selectors at a time so that multiple collections if items can be equalized without affecting each other
– It always grab the items fresh from the DOM so that it will still work in situations where a new item has been added to the collection via AJAX or cloned with jQuery
– We added a custom event ‘equalheights’ that can be used to easily trigger the equalizing manually with jQuery’s trigger method like so:

There are also two jQuery methods that you can call directly, initEqualHeights() and equalizeTheHeights(). The difference between them is that initEqualHeights() sets up all of the event handlers for when the window resizes and when the ‘equalheights’ event is triggered on the window, but equalizeTheHeights() simply does direct equalizing of the heights without involving any events. Both methods can be used in the same way and support the same 3 args:

There is also a filter that allows you to programmatically set up the selectors and args you want to use, which allows you set certain elements to always equalize heights regardless of whether their selector has been entered on the settings page:

After many, many hours of refactoring and improving, we’re very happy with the plugin and are using it on many of the custom sites we build for our clients. Check it out on the WordPress Plugin Repository and on Github and let us know if you find it useful.

-Mm