How To Develop Website, Ecommerce, Or Application Color Schemes
We’ve shared several articles on the importance of color in relation to a brand. For a website, e-commerce site, or mobile or web application, it’s just as critical. Colors have an impact on:
- The initial impression of a brand and its value – for example, luxury goods often utilize black, red implies excitement, etc.
- Purchase decisions – the color contrast may determine the trust of a brand. Soft color schemes may be more feminine and trustworthy, while harsh contrasts may convey a sense of urgency and discount-driven nature.
- Usability and user experience – colors have a psychological and physiological impact as well, making it easier or more challenging to navigate a user interface.
How Important is Color?
- 85% of people claimed that color has a significant influence on what they buy.
- Colors boost brand recognition by an average of 80%.
- Color impression is responsible for 60% of the acceptance or rejection of a product.
When determining a color scheme for a website, there are some steps detailed in the accompanying infographic:
- Primary Color – Choose a color that aligns with the energy of your product or service.
- Action Colors – This is missing from the infographic below, but identifying a primary action color and a secondary action color is extremely helpful. It educates your audience to focus on specific user interface elements based on color.
- Additional Colors – 11ional colors that complement your primary color, ideally, colors that make your primary color stand out.
- Background Colors – Choose a color for the background of your website – possibly less aggressive than your primary color. Keep in dark and light mode in mind as well. More and more sites are incorporating color schemes that switch between light and dark modes.
- Typeface Colors – Choose a color for the text that will be on your website – remember that a solid black typeface is rare and not recommended.
1I developed an online brand for a dress manufacturer that aimed to establish a direct-to-consumer (D2C) e-commerce platform, enabling customers to purchase dresses online. We understood our target audience and the value of the brand. Since the brand was predominantly digital but also had a physical product, we focused on color schemes that worked well across print (CMYK), fabric palettes (Pantone), as well as digital (RGB and Hex).
Testing a Color Scheme With Market Research
Our process for selecting a color scheme was intensive.
- We conducted marketing research on a series of primary colors with our target audience, which ultimately led us to focus on a single color.
- We conducted marketing research on a series of secondary and tertiary colors with our target audience, narrowing down some color schemes.
- We did product mockups (product packaging, neck tags, and hanging tags) as well as e-commerce mockups with the color schemes and provided those to the client as well as the target audience for feedback.
- Since their brand was heavily dependent on seasonality, we also incorporated seasonal colors into the design. This can be particularly useful for creating specific collections or visuals for ads and social media posts.
- We went through this process more than half a dozen times before settling on the final scheme.
While the brand colors are light pink and dark grey, we developed the action colors to be the shade of green. Green is an action-oriented color, making it a great choice to draw users’ eyes to action-oriented elements. We incorporated the inverse of green for our secondary actions (green border with white background and text). We’re also testing a darker shade of green on the action color for hover actions.
Since we’ve just launched the site, we’ve incorporated mouse-tracking and heatmaps to observe the elements that our visitors are drawn to and interact with the most, ensuring we have a color scheme that not only looks good but also performs well.
Colors, White Space, and Element Characteristics
Developing a color scheme should always be accomplished by testing it in an overall user interface to observe the users’ interaction. For the site above, we also incorporated precise margins, padding, outlines, border radii, iconography, and typefaces.
We delivered a comprehensive branding guide for the company to distribute internally for all marketing and product materials. Brand consistency is critical to this company because it is new and lacks industry awareness at this point.
Here’s The Resulting E-commerce Site with Color Scheme
Color Usability and Color Blindness
Don’t forget to conduct usability testing for color contrast across the elements of your site. You can test your scheme using the Website Accessibility Testing Tool. With our color scheme, we are aware that we have some contrast issues that we will address in the future, or we may even have options for our users. Interestingly, the likelihood of color issues with our target audience is relatively low.
Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish. Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females.
Usability.gov
The team at WebsiteBuilderExpert has put together this infographic and a detailed accompanying article on How to Choose A Color for Your Website that’s extremely thorough.
Related Martech Zone Content
