Inspiration

The Importance of Color on Your Website

Color psychology, the study of hues as a determinant of human behavior, is a tool that brands can use in website design to best connect with their audience on a psychographic and demographic level.

Color psychology, the study of hues as a determinant of human behavior, is a tool that brands can use in website design to best connect with their audience on a psychographic and demographic level.

Recent studies have shown that consumers are making judgments on products in 90 seconds or less, and that 90% of that judgment is based on color. Research also shows that color has been shown to increase brand recognition by 80%.

In the digital age, it’s crucial to factor in the importance of color into site design as color can impact the way audiences react to your offering. Here are some examples of sites using color in smart ways to differentiate their offering, influence their audience, and showcase their portfolio.

Sites that play with bold color

Cyclemon

Cyclemon, a French brand, plays with color on their homepage to showcase the different art prints they offer. They use muted tones in the background so the contrast of different bikes in the foreground becomes the highlight as users scroll the page. By using a variety of colors and not shying away from bold hues, Cyclemon creates a site where everyone can find a piece that appeals to them.

Vudu

Vudu is an IT consultation group that embraces the magic of technology. Their core brand color is purple, a rarity in the tech industry. By embracing purple and using complementary shades of yellow and green, Vudu’s site affirms their position as an exciting, whimsical brand that is not afraid to take risks.

M+ Museum

M+ is a museum in Hong Kong that houses some of the world’s foremost collections of 20th and 21st century visual culture. The bright blocks of color represent the excitement and modernity of the museum's collection. While their sites uses a wide array of colors, the site design is laid out on a grid, allowing the color to serve as a visual anchor amongst exhibition displays and general information.

Sites that play with grayscale

Charmer Design

Chamer Design Unit uses grayscale on their homepage for a sleek, minimalist look. By using shades of gray, the site serves as a toned-down portfolio, focusing on the names of projects and clients rather than the visual representation of the end product. In addition to looking clean, this also adds a sense of intrigue for viewers who are curious to dig deeper into the site and learn about the projects CDU has completed.

ADAM WIDMANSKI

Adam Widmanski, a digital creator based in Awsar, takes a similar approach to CDU on his site. The end-result is memorable and easily identifiable for its understated elegance. As viewers hover over a project, the grayscale image turns to color, showcasing the artistry behind each project while maintaining a cohesive look and feel as the user scrolls through the one-page site.

Sites that play with white space

Landdox

Landdox, a cloud-based land management software, pairs white space with a neon green to highlight what makes them unique. Traditionally, land management systems are not very colorful, making Landdox’s use of green a major differentiating factor. Combining this with a strategic site design utilizing white space allows viewers to easily view the main benefits of using Landdox over a competitor.

Beauregard

Beauregard, a jeweler making watches with a new world flair, uses white space to turn their site into a digital art display. The spacing between elements places the focus on the color and intricacy of every piece. The overall minimal approach to color feels high-end and adds to a sense of luxury, even when browsing online.

LM Chabot

LM Chabot, a Canadian photography duo, highlight their portfolio in a unique way. The simplicity of this design shines by balancing bright colors and floating shapes in an intentional grid with an emphasis on white space. Hovering over a shape turns a block of color into an image, while the neutral white background makes this transition seamless and easy on the viewer's eyes.

When used to its full advantage, color can change the way your audience views, interacts, and returns to your website.

©2022 Supergiant Digital Studio. All Rights Reserved.