Every Friday, Myron Mariano, Senior Website and Graphics Developer at Miles Technologies, will bring you five tips and tricks about the latest happenings in the world of web and graphic design. This week’s tips are five ways to improve the use of color on your website.
When designing a website, color selection is one of the most important steps in setting the site up for success. The color scheme you use not only has to be visually appealing, it also has to convey the proper mood and messaging for your visitors.
Let’s take a look at some different ways to utilize color to make your website stand out.
1. Start with the logo
Your logo is the cornerstone of your company’s identity, so it stands to reason that much, if not all, of your design decisions should complement it. A good place to start is at Adobe’s Color CC. Upload your company logo, and the website will generate a five-shade color theme that you can download for use in Photoshop and Dreamweaver.
2. Employ Color Psychology to find the right crowd
Elicit a specific emotion from your visitors by using Color Psychology, or the study of how color affects human behavior. This is very helpful especially if you are targeting a specific audience to your website.
The Venetian color family of gold, yellow, and orange represents the wealth that was available to the people during the Renaissance. Most five-star luxury hotels employ this color scheme, along with black, to convey elegance.
Blue reminds us of the ocean and of the vast sky, two places that we associate with tranquility. Destination resorts and spas use this color often to give you a taste of how you would feel if you went to their place of business: relaxed and at peace.
Earth tones, such as green and brown, make the viewer feel nurtured and renewed—similar to how Mother Nature operates. It also gives a feeling of trustworthiness and approachability—useful if you’re a bank.
3. Go colorless
Sometimes, the best way to find out which colors will suit your sensibilities is to start with none. During the mockup stage, export a JPEG of what you have so far, and desaturate it completely. You may find that this sleek and modern approach represents the feeling you want to convey.
Alternatively, add color back in a small, but calculated, trickle: Start with color on the Calls to Action, then on the sidebar, and finally on the header and footer. Choosing the specific elements that receive colorization in a predominantly desaturated space helps you guide your audience’s eyes to the parts of your website that would benefit from a little extra attention.
4. Combine with purpose
How your chosen colors relate in the color wheel is as important as the selection process. Analogous colors—shades that are found next to each other—gives off a feeling of fluidity. A triadic approach—choosing colors that are equidistant to each other—is a surefire way of making your site colorful, while still appearing balanced. Complementary and split-complementary combos make anything that uses them stand out the most because of their high level of contrast.
Tweak how you present your colors depending on the overall vibe you want to convey with your website. Flat colors—a design approach that’s all the rage nowadays—emphasize tactility and minimalism. Textures and gradients, on the other hand, create a more immersive experience because of how they mimic three-dimensional space.
These are some of our best practices when it comes to color selection and usage. What are yours? How do you leverage your color scheme to help set your website apart? Share some of your ideas with us in the comments below.