Have you wanted your web designs to have more life and pizzazz? There are a few simple steps to follow that will help take a design to the next level. Today, let’s focus on using color.
The Perception
As a beginning designer tackling a new project can often seem daunting and overwhelming. There are lots of aspects of design to learn and grow – typography, layout and grid systems, color theory, balance, rhythm, marketing – the list could go on forever. But one of the most powerful, and subtle, is color.
Colors contain an ingrained meaning – red is powerful, blue is soothing – but at the same time color can be one of the most subjective areas of design. Rarely do any two people perceive color the same way. In fact, humans perceive color differently than other species. Some animals can see a wider range of the color spectrum than humans and others, like dogs, only perceive a limited range (not just black and white).
The Tendency
A hurdle designers face is selecting the color palette of a site or app. The possibilities are literally infinite, varied, and sometimes completely overwhelming. Selecting good color requires confidence and experience, and that takes time to build up. Something I have seen designers struggle with, and I have experienced in my past work, is using basic gray hues for the majority of a design.
A monochromatic gray palette with one or two accent colors can be a good, simple way to go. But sometimes when using an abundance of gray tones a design may appear cold, stagnant, or barren.
Consider the example below, and then let’s talk about some ideas to bring life to our designs.
The Theory
Instead of using a flat gray color palette modify the gray tones to contain a hint of color. Add a touch of orange to warm, or blue to cool.
- Instead of using a flat gray color like #f2f2f2, add a hint of color to the gray. Try #ecf0f0 instead of #f2f2f2.
- Same with typography, I may use #323232 for body type color, but often times (especially if the background color is gray) I may add a hint of color to the gray.
Or you can reverse engineer the color selection method if you are working with brand colors. Input the brand color in the Color Picker and desaturate to create a nice brand-centric gray tone to work with.
Along the same line, try to avoid using the color black #000000. In his article Design Tip, Never Use Black, Ian Storm Taylor explains why using black in design can feel unnatural or out of place and gives great tips on using dark tones.
Coming Up With Color Palettes
Need help coming up with color scheme ideas? Here are some simple ideas to get started:
- COLOURLovers
- Sample colors from other projects and sites
- Sample colors from photos and inspiration
If you have questions or comments feel free to leave a note in the comment area below, or find me on Twitter at @calebsylvest.