seeing red

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

Upload: shikanomon

Post on 24-May-2015

202 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Seeing Red

REDSTUDIOK&M

THE DESIGN & USABILITY EXPERTS .

SEEING

Page 2: Seeing 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?

PAINT THE TOWN RED

Page 3: Seeing Red
Page 4: Seeing Red

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.

Page 5: Seeing Red
Page 6: Seeing Red

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:

Page 7: Seeing Red
Page 8: Seeing Red
Page 9: Seeing Red
Page 10: Seeing Red

IS YOUR HEART RACING YET?

Page 11: Seeing 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.

THE WORLD WIDE WEB OF RED

Page 12: Seeing Red

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

CHROME BAGS

Page 13: Seeing Red
Page 14: Seeing Red

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.

Page 15: Seeing Red
Page 16: Seeing Red

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.

Page 17: Seeing Red

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

GORILLA COFFEE

Page 18: Seeing Red
Page 19: Seeing Red

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!

Page 20: Seeing Red
Page 21: Seeing Red

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.

Page 22: Seeing Red
Page 23: Seeing Red

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.

Page 24: Seeing Red

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

TAAMI BERRY

Page 25: Seeing Red
Page 26: Seeing Red

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.

Page 27: Seeing Red
Page 28: Seeing Red

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.

Page 29: Seeing Red

Here are some more dynamic red websites for your inspiration. Why not

try doing your own usability review?

MORE RED WEBSITES

Page 30: Seeing Red
Page 31: Seeing Red
Page 32: Seeing Red
Page 33: Seeing Red
Page 34: Seeing Red
Page 35: Seeing Red
Page 36: Seeing Red
Page 37: Seeing 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.

SHADES OF RED

Page 38: Seeing 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.

BRIGHT RED

Page 39: Seeing Red
Page 40: Seeing Red
Page 41: Seeing Red
Page 42: Seeing Red
Page 43: Seeing Red
Page 44: Seeing Red
Page 45: Seeing Red
Page 46: Seeing Red
Page 47: Seeing Red
Page 48: Seeing Red
Page 49: Seeing Red
Page 50: Seeing 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.

DARK RED

Page 51: Seeing Red
Page 52: Seeing Red
Page 53: Seeing Red
Page 54: Seeing Red
Page 55: Seeing Red
Page 56: Seeing Red
Page 57: Seeing 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.

LIGHT RED

Page 58: Seeing Red
Page 59: Seeing Red
Page 60: Seeing Red
Page 61: Seeing Red
Page 62: Seeing Red
Page 63: Seeing Red

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!

Page 64: Seeing Red

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 | [email protected]

THAT’S ALL FOLKS!