19 approaches to color

Default avatar.
January 25, 2013
19 approaches to color.

ThumbnailWith over 9 billion indexed sites on the web and counting, sites are having to do more to get noticed and encourage users to spend time on them.

With more websites competing for users' attention, color is becoming more and more important in making your page stand out. Here are some sites that do just that: use interesting colors in unusual combinations to stand out from the billions of standard color schemed sites out there.

Layrr

We all know that content comes second in drawing attention, and headlines have been used in newsprint for years to gain interest. Layrr uses understated contrast to achieve this, and even if you don't speak French, I suggest you go check this site out now, it uses small areas of color to create impact against the grey background, and achieves this in an astonishingly beautiful design. No wonder it received an Honorable Mention in the Awwwards design competition.

Layrr

Havainas

The landing page of Havainas, a very large flip-flops and sandals retailer is surprisingly, and wonderfully, colorful, a trait that extends to the regional pages of the site. The aim of this site is to illustrate their style, along with the bright colours associated with heat and summer, holidays and most importantly, their products. Whilst the color is part of their brand recognition it's refreshing to see the site of a large company that's been well designed color-wise, as you can probably tell by the list of the sites here, good coordination is often left to the little guys.

Havainas

ColourPixel

Besides being bright and colorful, what really caught my eye in ColourPixel's site, was the use of black, where other sites would have used white. The reason white is used is because the contrast between it and other colours is easier on the eyes, and so more accessible to users, but here larger black boxes have been used to encapsulate text, which is white. This actually achieves the goal of drawing my attention to the text within them, rather than the actual boxes themselves as part of the design. Other than that, the background of the site achieves what the designer calls an 'ethnic' look, using displaced pixels to achieve a tapestry effect. The Rainbows are used rather gratuitously, but offer a nice differentiation of color combined with the subtle curly brackets in the background.

ColourPixel

Will Fernandes

Will Fernandes' site uses many and varied colors, all jostling for attention to achieve his style. He reserves yellow, orange and white for the text and background, and mostly avoids using them in his artwork, to mark a differentiation from that and content. He offers a fullscreen viewing option, which is recommended if you want to view the work of this talented artist and web designer in a fantastic site with brilliant animations. It has obviously been worked on extensively to ensure that the right colours are used for the art and site whilst complementing each other.

Will Fernandes

Ryan Keiser

This is the first site we've looked at that deliberately uses offensive, overwhelming colors designed to clash, to achieve a high contrast effect. The designer enjoys using color so much that he has a 'color inspiration' palette at the bottom of the site. Ryan Keiser uses primarily yellow, a color with which much can go wrong if used incorrectly, here with cyan, and to a lesser extent, pink, the whole site pops. On a final note, the Cyan and Pink are very reminiscent of 3D anaglyph glasses, using a color scheme that has very unconventionally been absorbed into our unconscious lives, which one wouldn't normally expect to work but inexplicably does, because we now associate those two colors together.

Ryan Keiser

Ben Markowitz

Another very understated site with a very careful use of color, giving the interactive element of the site a machined look. For the design of site like this, using color in this way is unusual, designers usually go one way or the other, but this really adds to the title: 'Ben Markowitz', not only drawing attention, but offering differentiation, using a complementary palette with a large range. The only other use of color I feel this site would benefit from is with the social network icons at the bottom of the page, since they all use very neutral colours and would stand out and be a little more easily identifiable.

Ben Markowitz

Hugs for Monsters

Joe Lifrieri's Hugs for Monsters has the same aim as Will Fernandes' site we looked at earlier, but achieves it in an organic individual style, using color to highlight his unique style. I strongly suggest you have a look at some of his other pages, they all have different art in the same eclectic style you can see here.

Hugs for Monsters

Tim Bjørn

Unlike the others featured here, the landing page of this site is characterised by is lack of color, and by looking at the other work of Tim Bjørn, the artist, he obviously uses color very carefully and sparingly. It's very refreshing to see a site in simple greyscale that doesn't look like it was designed a decade ago! The artwork, like Hugs for Monsters above is very organic, and is the main focal point of the site, with subdued menus and almost the whole landing page devoted to a few key pieces.

Tim Bjorn

For Office Use Only

This is another site that uses a small amount of color to achieve high contrast against a greyscale themed site. In particular the case below, where the transparency on the logo creates a dull red against the image behind it. A further look into For Office Use Only shows that these guys know how and when to use color, and do it well.

For Office Use Only

Method Design Lab

The Method Design Lab's innovative news feed uses color in a fresh way, to signify the 'age' of the news, with an easily identifiable hot and cold color scheme, except the news only ever exists in the 'hot' section of the color scheme, a clever marketing idea, perhaps? Nonetheless, it's very easy to grasp that red is older news from 12+ hours ago, and yellow is more recent. Very well executed, and the color contributes to both the design and the function of the site, not something that can be said of many sites beyond their navigation. After stumbling upon it during research for this article this site found it's way into my bookmarks both for it's content and design.

method Design Lab

DesignWise

The theme for DesignWise is contrast through simplicity, with a subtle grungy feel, the pink on black works perfectly, and using an off-white for text content offsets the pink without the contrast being to sharp against the black. There is also contrast between the clean, yet textured background, and subtle touches of grunge splashed throughout the site.

DesignWise

Prius Harmony

The colors of this infographic are beautifully coordinated, both achieving the obvious mission statement of conveying 'harmony' and communicating the topics related to the colors. Whilst this is effectively a piece of advertising for Prius, it carries off it's job well, and even if you despise Flash, just appreciate it for the colors. This is another site with functionality in color, if only tenuously so, and one of the rare ones which uses block colors with transparency to create variation with the combined colors of two or more others overlapping, conveying (mostly) a sense of harmony, if you ignore the ugly black and brown overcolored and badly coordinated sections.

Harmony

Organic Grid

If you can forgive two Flash sites in a row, Organic Grid is a beautiful portfolio that can be forgiven by it's incredible use of color in a menu that'll change its scheme every time you return to it. Unconventional? Yes. Uncoordinated? Definitely not. Go for the colors, put the site in full screen mode, and stay to enjoy the incredible photos and artwork in the portfolios, if you can ignore the load times, that is.

Organic Grid

Matt Mullenweg

This Lichtenstein inspired site has to be included, if only for the sake of the father of WordPress, Matt Mullenweg's blog brings to life the block colors and cross-hatchings of pop art. Block primary colors can be wonderful if not overused, and this site gives us a dash. There's a brilliant pop art wave at the bottom of the blog, but you won't be able to look at it for long, as Mullenweg has so many posts you'll be scrolling for ever!

Matt Mullenweg

Vanity Claire

If you can look past the fact that this site has terrible usability, the artwork on every page is done incredibly well. Simple subdued colors are becoming more popular, and Claire's site manages to sneak in a little grunge too. This site is characterised by having a different single block background color on each page with a simple design horizontally across the middle of the page.

Vanity Claire

Glue

A website that's taken simplicity to a new level, Glue strips back all content in favor of a beautifully executed hourglass, with the sand falling upwards accompanied by the slogan 'Save Time'. The site used to have more content with the gorgeous orange highlights on grey, however has sadly since become invite only.

Glue

Microsoft

As much as it pains me to include this, as a stalwart apple supporter, Microsoft's online presence has come on leaps and bounds, presumably hand in hand with the surprising advance in Internet Explorer (It would probably have been embarrassing to have had their site date their browser). The tile based 'metro' interface of Windows 8 has clearly had some influence, and I have to say, it looks good. As we've seen with Google Chrome, Skype, and now Microsoft, block colored logos are the future, the days of tacky gradients and using 3D for the sake of it are over.

Microsoft

AdaptD

The inclusion of this site may have had something to do with the fact that it reminded me of a rocket lolly, a favorite childhood treat, or that it simply included color just for the pure joy of it. AdaptD brought a smile to my face simply with the 'something colorful' ribbon across the top of the site, because why not? A beautiful gem in an otherwise standard albeit well designed site.

AdaptD

ColoRotate

Finally we finish with a site that doesn't use color as part of it's design, in fact the site design is incredibly bland, but as a function - the site's goal is to help you browse and blend color pallettes. It seems appropriate to end on a site that uses color in this way, so if you decide your site needs a makeover after reading this list, there's nothing stopping you from choosing the perfect color scheme. ColoRotate also has an interesting information page on color if you fancy reading up about 21st century color theory, and how our eyes perceive color.

ColoRotate

How do you approach color? Do you play it safe, or strive to stand out? Let us know in the comments.

Dan Rajan

Dan Rajan is a film student, creative content designer, and passionate writer from the UK, follow him on twitter!

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…