The Entrepreneur’s Guide to Design
Use Color with Intent
Picture your favorite product. How about its packaging, website, or its ad? Now, drain all color from it. Quite different, isn't it? That's the transformative impact of color. It forms a crucial part of our perception of brands and products. As an entrepreneur, working with color can seem like an impossible task at times, but here’s the good news: there are a few tactics you can use to help you leverage and maximize your use of color.
1. Create a Balanced Palette with the 60-30-10 Rule
Designers have a little secret called the 60-30-10 rule. It's a classic principle that helps create a balanced, appealing color palette. It simply suggests that you use three colors in your design in a ratio of 60%, 30%, and 10%. Here's how:
60% is your dominant hue: This is the main color that occupies most of your design. It's usually a more neutral or lighter color that sets the overall tone. On a website, this might be the background or a large content block.
30% is your secondary color: This color supports the main color but is different enough to create a contrasting effect. It can be used in areas like headers, sidebars, or smaller content sections.
10% is your accent color: This is your bold, stand-out color. It should be used sparingly, to draw attention to important elements like your CTAs or key messages.
Quick Win: Look at your product and estimate the percentage of each color you use. Does it align with the 60-30-10 rule? If not, consider adjusting your colors to fit this framework.
2. Color Basics: A Quick & Easy Overview
Color theory might sound high-brow, but it’s pretty straightforward. You've got three primary colors - red, blue, yellow. Mix them together, and you get secondary colors - green, orange, purple.
You can create striking designs by understanding how these colors relate:
Complementary colors: These are the "opposites attract" of the color world. Think red and green or blue and orange. These pairs create a vibrant contrast.
Analogous colors: They are "neighbors" on the color wheel, like blue, blue-green, and green. They usually blend well and are soothing to the eye.
Monochromatic colors: Think of a color. Now, imagine its different shades. That's a monochromatic scheme. It's simple, yet sophisticated.
Quick Win: Use online color generators. You can use Canva’s color generator to generate an entire color palette from a single picture or use just one color to generate a color palette like UI Colors. Play around, and see which combinations you like.
3. Colors = Feelings
Colors can make us feel certain ways. Red can energize us. Blue can make us feel calm and trusting. Green often reminds us of nature and health. By choosing colors that represent your brand, you can communicate what you’re all about before a word is even read.
Quick Win: What three words would you like people to associate with your brand? Find colors that represent these feelings. Canva has another great tool, Color meanings and symbolism, to help you understanding the meaning of color.
4. Easy on the Eyes, Please!
Remember, not everyone sees color the same way, so it is vital to consider visual impairments. Try to provide a good contrast between your text and its background, and never rely on color alone to share important info.
Quick Win: Use an online tool like the WebAIM Color Contrast Checker to make sure your text and background colors have good contrast. Contrast is a good color contrast checker for Figma.
5. Colors and Conversion Rates
The right color can nudge your visitors to take action like clicking on a "Buy Now" button. Usually, a button that contrasts with the colors around it grabs attention, so make sure there is enough contrast with everything already on the page to make the button clearly identifiable. Keep in mind that this is not the place to get too creative with your CTA: make it clear and easy to read.
Quick Win: Red has been studied to have the best conversation rates with green coming in as second. However, these colors might not be suited for your brand, so as you make color changes to your CTA, keep an eye on your click-through rates to see if it makes a difference. Also, make sure to check out the CTA section from this guide for how to design great CTAs.
Color Recap
Colors don’t have to be intimidating. They're one of the most fun aspects of designing a product. Start with these basics, and remember that there's no one-size-fits-all in color selection. It's part science, part personal preference, and a whole lot of trial and error.
Design Resources For You
There are a lot of great resources out there to get you started. Many of them are free: here are some resources that can help you with color for your product.
The 7 Design Principles
-
Design Great CTAs
Design CTAs that convert.
-
Design Effective Typography
Get tangible tips for improving your product’s typography.
-
Use Color with Intent
Color can help introduce your brand, show your personality, and help with conversions.
-
Make Navigation Intuitive
Make it easy for your customers to find what they are looking for.
-
Create Pixel-Perfect Layouts
Build layouts that not only look great but work better for your users.
-
Make the Most of Social Proof
Word of mouth is everything: leverage it.
-
Start with the customer experience first, and work backwards from there
Set your customer experience as your Northstar.