This presentation features an introduction to color theory and the color red, usability reviews of red websites, and red designs for your inspiration.

1. SEEING
RED
STUDIOK&M
THE DESIGN & USABILITY EXPERTS .

2. PAINT THE TOWN RED
We here at Studio K&M love colors. As artists, how can we not?!
Colors have been our tools ever since we opened our first box of
Crayola Crayons and experienced the sweet smell of variety (or maybe
it was wax). As we grow as artists and designers our appreciation and
understanding of color grows as well, but how many of the decisions
that we make regarding color are intuitive? How often does the science
of color come into play?

4. Not everyone believes in color theory, and I will admit that it is hard to
assign black-and-white meanings (pun not intended) to specific colors.
But whether explicit or intuitive, different colors can definitely convey
specific meanings and trigger certain emotions.

6. Red is dynamic, red is bright. Red can overwhelm the eyes in large
doses, but can also provide a great accent color to grab someones
attention. Red has been known to raise blood pressure and heart rate,
and increase appetite. It’s no surprise that red is often used in logos for
sports, cars, and fast food. Just take a look at some of these examples:

10. IS YOUR HEART RACING YET?

11. THE WORLD WIDE WEB OF RED
Red can be associated with passion, adventure, and violence, which
explains why many of the following websites chose to feature it in their
color palette. But is color alone enough to convey your message and
create a site that’s easy to navigate? Let’s take a look at some red
websites and see whether or not their use of color affects their usability.

12. CHROME BAGS
Chrome is a company that makes high quality messenger bags and
other apparel, most of which features their famous red seat-belt closure.
Here is their Design Manifesto (from their website):
Chrome’s design is born of utility and purpose. We’re anti-nonsense.
Everything we make is functional. Every piece of our bags, shoes and
clothes is there for a reason. If it doesn’t have a purpose, it’s gone.
www.chromebagstore.com

14. Given this strong design sensibility, it makes sense that Chrome’s
website is gorgeous and usable. The color palette is sleek and
grayscale, with their trademark red highlighted in the logo and working
well as an accent color. The strong red banner communicates the mood
of the brand and educates the user about the company. Bright red
calls to action highlight special offers like free shipping, and a clean grid
keeps the rest of the information organized. The navigation is easy to
find and use, and turns red when hovered over.

16. On their product page, there is a lot of information, but it is clearly
organized. On this page red plays a similar role, acting as bread crumbs
to let you know where you are on the site and highlighting product
names and categories.

17. GORILLA COFFEE
We were initially excited when we found this visually striking website for
a Brooklyn based coffee shop, but it soon proved to be slow and hard
to navigate.
www.gorillacoffee.com

19. The website is flash based, which immediately raises red flags. This
means long load times and clumsy navigation. From the home page,
we were unsure where to go next. The bright red background is a
little much on the eyes, and their logo almost gets lost, especially in
juxtaposition with the giant black gorilla. The only clear call to action is
the word shop, so that’s where we chose to click (though who wants
to shop if they even know what they’re shopping for?!). The home page
doesn’t even say the word coffee once!

21. The shop is overwhelmingly red, with the yellow and red types of Coffee
bordering on illegibility. The buy now buttons are lost, as they are the
same color as the background. This site would have been much more
effective if the background was a different color and the red was saved
for the accents. At this point we’re starting to get annoyed by the flash
based navigation, so we try to find out more about the company by
clicking “From A Little Town Called Brooklyn”, figuring that might lead to
some sort of about page.

23. And it does, sort of. It leads to a menu of more vaguely worded links
that eventually give you some information about the company. Once you
make it past the loading screen. However, we have a feeling that the
average user would have already clicked the back button.

24. TAAMI BERRY
Our last usability review is for a site advertising and selling something
called a táami berry. According to the site “the táami berry is a small
miracle fruit that has the power to flip our perception of flavors, making
sour and bitter flavors taste extremely sweet and delicious.” Their target
audience seems to be health and beauty conscious women, which
would explain the feminine color palette.
www.taamiberry.com

26. This earthy chic site uses a scarlet shade in a unique way. Most of the
red sites that I saw paired the color against stark black and white, but
táami berry uses beige and olive green to create a much softer, but still
very elegant feel. The berries themselves are red, and this color turns up
again in the logo, slider, navigation, and calls to action.

28. The e-commerce page is clearly organized, with the complimentary olive
green defining important information in a more subtle way, with the red
highlighting specifics such as price. The company appears to be on a
hiatus (all of the products are out of stock). So maybe they don’t get
points for dynamic content, but they definitely rock a solid design and
information architecture.

29. MORE RED WEBSITES
Here are some more dynamic red websites for your inspiration. Why not
try doing your own usability review?

37. SHADES OF RED
How does red fit in with regards to the rest of the design world, such as
packaging and printed pieces? How can different shades of the same
color communicate such a multitude of meanings? Wikipedia has 47
pages dedicated to different shades of red, and with this sheer variety,
it is bound that different colors will have slightly different psychological
associations. Let’s take a look at some other uses of the color red and
reflect on the color psychology behind these designs.

38. BRIGHT RED
Bright red has been a popular color throughout history, and although
there are many variations in hue, they all convey power and strength.
Bright red is very effective for creating a memorable impression. It
makes sense that many red designs are about passionate subjects
(politics, love, health), and bright red also has a timeless quality that
makes it perfect for creating a classic brand.

50. DARK RED
Whether it’s maroon or burgundy, dark red can be an elegant alternative
to brighter shades. It is often used for food and restaurant designs, as it
still promotes appetite without being too aggressive. Dark red can have
also have a more serious tone and can make for visually striking posters
and packaging, and it is associated with courage and leadership.

57. LIGHT RED
Light red is a color that has been gaining popularity recently. It is a softer
alternative that can have a warm vintage feel, making it both trendy and
trustworthy. Light red is associated with joy, sensitivity, and love.

63. It’s interesting to note how the mood of each design changes based
on which shade is used. For those who are afraid to embrace the
boldest shades, lighter and darker versions might provide a more subtle
alternative. Viva la red!

64. THAT’S ALL FOLKS!
We’re Studio K&M, a New York based, full-service web and graphic
design/concept firm. Our passion is to improve the user’s experience on
the web and deliver powerful online solutions that help drive sales and
increase conversions.
Follow us on Twitter for more usability tips and updates! @StudioKandM
www.studiokandm.com | 212.987.0076 | info@studiokandm.com