« New Kid on the Paint Block | Main

Dave Robinson on Color and Web Design

drob.thumbnail.jpg

We recently talked with Dave Robinson about his view on color as it pertains to his work at AOL.

 

 

LHC:    Hi Dave, thanks for taking time to tell us about your perspective on color and branding and webdesign.  


Dave:    I am design director of AOL.  And I work on the core properties.  So I work on the AOL.com, and the first line products like My AOL, feeds, favorites, and stuff like that…personalization and stuff.  


LHC:    So getting right into things, do you think that color has become a more important design lever within website design?  


Dave:    Well, yeah.  I think color and website design has always been kind of really funny, because initially it started out really garish and with not a lot of options because you are dealing with a web safe color palette.  And that was largely due to operating system constraints. So you were always limited to this 256 color palette.  You really couldn’t move beyond that and choose other colors.  The magic color chooser of the web, back in the day, chose all these bright, garish, sort of neon type colors.  Today, we live in a different world where you can basically…any color you can think of you can display on the screen.  Because operating systems are capable of millions of billions of…showing millions of colors now.  And as far as it applies to, let’s say, designs today, I think it’s getting a lot more sophisticated.  And these, you know, web 2.0 companies as they are referred to, are…they are using a lot of colors that were traditionally never used online, like browns, and pinks, and other colors like that.  So I tend to think that the color palette is getting softer and a little more sort of, I don’t know, accessible and tasteful in terms of design.  


LHC:    So when you select colors for your products…your properties, is there a brand color palette that you have to live by, certain color language that you speak at AOL?  


Dave:    Well, I think it’s interesting. AOL does have a color palette that is in our style guide that outlines the attributes of the brand.  But a lot of that stuff is really just turning into more of a guide rather than a hard and fast rule.  AOL has divided itself up into different business units, and design isn’t coming from one centralized location any more.  They are coming from different vertical business units.  And you are seeing a lot of variance in the design now.  AOL has always been really bright and vibrant with their designs… almost to a fault.  We are seeing designers at AOL be given the freedom to explore new color palette.It also has to do with, meeting business goals, requirements and metrics.  And some of the color palettes that were chosen when the brand was created and have been modified slightly, over time.  The (inaudible) has to be scannable, and, you know, things needs to be easy to find, easy to click on, and these pages are chock so full of content that it’s hard to find anything, so color really plays an important role in terms of discoverability and scannability on a page.  


LHC:    How else is color used as a strategic tool in differentiation?  


Dave:    It is pretty critical, there are core AOL colors that are, define brand attributes.  If you look at AOL on the web today, you will see that it’s awash in blue. AOL has taken the stance that they own blue, just like YAHOO! owns purple and Google owns blue links.  And, that’s the old AOL.  what we are designing now, with AOL today, is the new AOL.  We are trying to move AOL to be less of a access type brand, somewhere of a content pure advertising driven, free content kind of thing on the web, so we are modifying our color palette quite a bit.  We are moving into grays, and blues, and greens, and stuff that makes pages scannable.  So we are taking a pretty far leap away from the traditional AOL blue that has, been so overused on the web and overused on AOL in particular.  


LHC:    Just out of curiosity, when you actually choose colors for your products.  Is it just left up to the whim of the designer?  Or is it a matter of trial and error?  Where do you go for inspiration and trying to find something new, or different, or interesting, that allows you to differentiate and sort of attract users’ attention for discoverability?  


Dave:    Well, a lot of stuff is pretty defined.  Like the standard metaphor for a link on a website is blue.  So what we have done at AOL is we have identified the color of blue that we want our links to be.  We are not reinventing the wheel.  A link is blue, and that’s it.  And no other text on the page is blue otherwise it’s confused as the link.  


LHC:    So for everybody, blue is the universal link language?  


Dave:    Blue is the universal link language, but that doesn’t mean all links are blue.  You’ll go to many, many sites where links are many, many different colors.  As long as it is standard across your site, you are going to find success.  AOL is a very traditional and large of web company.  It’s very large web company, obviously.  And we are not reinventing the wheel.  We know what works and we are going to continue to do that.  But as far as other colors go, we do a lot of testing, a lot of usability testing.  As far as scannability goes, we do some kind of focus group testing, but we don’t rely a lot on focus group testing.  It’s really difficult to gauge success, but AOL designers are pretty much free to sort of explore different color options for their different units that they are building.  Like if you are building a sports site on AOL, and, you know, sports typically have a lot of red color in it.  But you don’t want to use red, you want to use green instead, then you are free to explore that color.   


LHC:    Just for those people that don’t understand, people like myself, when you say scannability, what does that mean?  


Dave:    Having a page be easily scannable means that when you look at a page, and you quickly scan it with your eye, like you do when you get a newspaper.  You get a newspaper, and you scan the headlines for interesting things you want to read and something catches your eye, and you read the article.  The webpage are the same thing.  You quickly scan a webpage, and the things that catch your eye are the things that are going to move you to click on those links.  Increasing scannability is a huge thing when you are driving traffic from site to site to site, and driving traffic from site to site to site increases the amount of ad revenue you got, which increases the amount of money you make.


LHC:    How do you test scannability for like a page design?  


Dave:    Well, there is lots of ways to do it.  Some of the ways to do it, there is heat mapping software out there, software that looks at where your eye looks on the page.  So you can find out where people are actually looking on your page, and how people are scanning your page.  If they are scanning from left to right or top to bottom, or something like that.  


LHC:    That’s cool.  


Dave:    also there are some pretty standard conventions and wisdom around, scannability too.  Like if there is photographs on the page, people always look at photographs first.  And if there is bigger fonts, people look at bigger fonts first.  Eyes quickly go to things that are most easily personable.  


LHC:    So out of images, type size, graphics, and all that kind of stuff, where does color fit into that sort of scannability as far as it’s kind of important at drawing the users’ attention?  


Dave:    Well, the link color is the component of the webpage that draws the click.  And web pages are there to be consumed and clicked on.  That’s their primary purpose in life is to be able to consume the content, if it’s a content page, or clicked on to drive traffic to other pages.  Or if it’s more of a content specific pages or product page, the blue link is the trigger that makes you easily understand that this is the link in my mail application that says, “Oh, this is a new mail message.”  And I can read that by clicking on it.  


LHC:    In that case color is the key to people visually identifying where to click.


Dave:    Right.  


LHC:    What do you think is the biggest challenge web designers are facing with color online nowadays, now that you can do any color you want?  


Dave:    I think the biggest challenge is using color responsibly.  It’s so easy to be inconsistent with color on the web as a designer, because there is so many different components, like there is so many different sort of icons and different markers that have a definition, and they are different colors?  So, if they are different colors, do they mean different things.  Thus consistency, is a huge challenge, it’s something that isn’t very well done, that a lot of people think of consistency as something that is a nice to have, not a have to have.  
Like, you know, one of the areas that I think is a definite must-have is, the consistency on your page is just about as important as the usability of the page itself.   


LHC:    Do you have sites that you go to for color inspiration, or to choose colors, or look at color palettes, or online color tools.  I know there is like a bunch of them out there.  Do you use any of those tools?  


Dave:    I do when I need to research that kind of stuff.  But I don’t specifically have one that I go to.  Generally, if I decide that the header of my new product that AOL is going to be French Gray color and I want to find complementary colors to that, I’ll just go on the web, and I’ll start searching for, color tools and stuff, and look up French Gray.  What does French Gray mean?  What does it mean if I put it on my page?  Does it have a negative connotations in China?  Because we are such a global portal that we are designing for all over the world, does it have negative connotations in China?  If it does, what does it mean? Is it scalable?  Can I use it across multiple products, or am I just boxing myself into a corner?   


LHC:    Did you actually find information online about the associations of French Gray and different cultures? 

Dave:    No, I haven’t found that yet.


LHC:    Are you frustrated by the lack of information online about color in different cultures?  


Dave:    I am.  


LHC:    Well maybe I can help you out with that part.  


Dave:    Yes, it’s funny because we just designed AOL.com’s China portal for AOL.com in Chinese.  So it’s for Chinese people living in the United States.  So it’s not for AOL in China.  It’s AOL Chinese.  And red worked really well.  Then we were asked to design a portal for India.  What we did was take the sort of portal template that we used for China, and we imported it over to India, and a lot of the red stayed.  We didn’t think anything of it.  When we had our development team in India look at the mock-ups of the portal site, they absolutely freaked out.  They said, “If you use that red, you are sunk, because red here in India is widely regarded as a very negative.”  So as we all know different cultures react very differently to color.  Like in the U.S. if you use red it’s sort of like stock, nobody really reacts negatively to it.  People paint their living rooms red.  But if you went to India and somebody had a red living room, your neighbors would probably burn your house down.

 
LHC:    What color did you end up using in India?  


Dave:    Lots of greens, browns and very vibrant colors.  


LHC:    Do you have another example of another color that went into another culture that didn’t work?

 
Dave:    We are building out the portal for all of the E.U.  So there is many different countries that we are importing this over to.  I am not directly working on the color palettes for those things, but we are cognizant of it and doing all of that research.


LHC:    Well, you know, we did…I don’t know if this helps or not, but we did that global study for the pharma industry with regards to drugs in 12 countries.  We did a number of countries, in the E.U., Germany, Spain, England, Italy, and France.  As you suspect there is a lot of fragmentation with regards to color, and the associations.  Most people think they are pretty similar, because they are all in the same part of the world.

 
Dave:    It’s really funny that they are so close, and they are so different.  


LHC:    They really are different.  For instance, weird things would emerge, Italy would align with India, the U.K. aligns with Canada, and Canada does not align with the U.S., which was really interesting.  Most people would have thought that Canada and the U.S. would be the same.  


Dave:    Correct.  


LHC:    Thanks for the chat, it is really interesting how color is becoming such a strong component of your work.  

TrackBack

TrackBack URL for this entry:
http://lhcolor.com/colorconversations-mt/mt-tb.fcgi/29