Seeing Red: Design Inspiration

Post on 07-Nov-2014

391 views 1 download

Tags:

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

REDSTUDIOK&M

THE DESIGN & USABILITY EXPERTS .

SEEING

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

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.

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:

IS YOUR HEART RACING YET?

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

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

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.

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.

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

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!

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.

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.

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

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.

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.

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

try doing your own usability review?

MORE RED WEBSITES

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

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

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

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

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!

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

THAT’S ALL FOLKS!