Mar 23
SXSWi 2009 Color Angels session
2009 at 07.36 pm posted by Veerle Pieters
South by Southwest Interactive (Austin, TX - US) was really a blast as usual. This year Cindy Li, Leslie Jensen-Inman and I decided to enter a panel with the title “Color Angels, Episode 1: Colors: It’s Not Black and White”. Our session was about exploring the challenges in color combinations as a key to successful website designs. Advice on what tools you’ll need in your arsenal to be inspired. Navigating through cultural and accessibility differences in color and showcasing some of the best uses of color the web has to offer…
The theme: Charlie's Angels
Our session's theme was based on Charlie's Angels which I believe was a perfect match for the 3 of us. A little entertainment is always a plus to maintain the audience' attention. Definitely for a session at 5 p.m. (Monday March 16th).
Dressed in our favorite (website theme) colors we hit the play button to start off our presentation. A 30 seconds movie was played based on Charlie's Angels to introduce ourselves presented by Matt Harris as being Charlie. In between slides, Charlie, Matt, asked us questions as sort of an announcement in between sections of our presentation. All of them were of course spy-related. We were on a mission, a mission to talk about color.
Color Theory
We wondered if it would be necessary to talk about color theory, but since most attendees' background is only web and not print, we thought it couldn't hurt to mention the basics between RGB and CMYK space and how color is structured.
Assessing Your Target
After I've covered the color theory part, Leslie talked about the importance of determining your target audience and understanding your clients’ goals when working with color.
Agent: Recon
Leslie continued talking about the importance of asking questions when working with a client. Buzz words like organic, modern, fresh, dynamic,... are often used in a briefing. Understanding what the client is trying to say here is vital.
International Encounters
Cindy talked us through the cultural differences of color. Some of them are really drastic and are even opposite to what we are used to. For example, in China and Korea red is perceived as being positive and green as negative. It's not always enough to use colors alone to represent stock exchange data for example. For this kind of information, a symbol such as an arrow up or down or a plus or minus symbol is needed.
Accessibility
Does color really make a difference? In this part Leslie shows us the different types of color blindness. Or session's logo was used to show the audience how they perceive colors. Contrast is important, especially for completely color-blind people as they can only recognize black, white and shades of grey. Furthermore, examples of bad color combinations, especially for color-blind individuals were shown: such as red text on a black background and vice-versa.
Agent Arsenal
Every good agent has gadgets and one of mine is called ColorMunki Design. For this section, I briefly talked about this easy-to-use monitor calibrating and scanning device.
Agent: Assignment
It is often a good idea to think about your designs living in print and on the screen. How will your design look printed on a t-shirt? Is the branding that you create able to be accurately printed on a brochure or letterhead? If you have the opportunity to take a project from concept to completion, you have to make sure that the logo that you create is able to be as powerful in black and white as it is in full-color. Many times logos get printed in newspapers and all the client can afford is a black and white ad. Therefor it is vital that you think about how your design would hold up throughout multiple mediums. This also means creating color palettes in a number of different color options. Such as Pantone Matching System (PMS) for printed work, CMYK for printed work on digital presses, HEX for websites, and RGB for screen.
Agent: Research
Where do you find your color inspiration? Most inspiration can be found in photographs, nature, design magazines, and of course the Internet in general.
Agent: Outfitting
When choosing your color palette, there are a few guidelines you need to keep in mind
- make sure to set the right mood
- that there is enough contrast (readability, create impact)
- choose colors that go well together so there is color harmony in your design
- create enough rest points
- keep it simple, don't go overboard
Case studies
SocialSignal
I chose SocialSignal as case study because it seemed like the perfect project to talk about. Social Signal is a social media agency that provides strategy, development and community management. The very bright and wide range of colors for the logo and house-style, makes it rather challenging. It's a matter of applying them correctly, defining which are primary ones and which ones are only used on occasions to set certain elements of the design apart. The mainly warm color palette reflects the openness and friendliness of this company. In different slides I show and explain to the audience about my color decisions for the creation of their website
The Whuffie Factor
Cindy talks about why she chose that particular color combination for the cover design of Tara Hunt's book 'The Whuffie Factor'.
WaSP Interact
Leslie talks about one of her student's projects she directed, called the WaSP Interact. WaSP InterAct is a living, open curriculum based upon web standards and best practices, designed to teach students the skills of the web professional. She runs us through her process in terms of colors for the printed matter, promotional materials and website.
Agent: Debriefing
Last but not least, I share a practical tip of saving Adobe 'Swatches for Exchange' as a palette per project. This way you can use the color swatches (via the Load Swatches function) across Adobe applications.
Resources
Inspiration resources and color pickers
- Adobe Kuler
- ColorLovers
- ColorMatch
- Colorsheme
- Painter's Picker
- Color Consultant Pro
- Colorschemer
- ColorMatch Remix
15served
1
Thank you Veerle for providing these useful resources and ideas. Excellent as always.
2
Really interesting, as always - and color is so fascinating!
I would like to warn you that in your released pdf, at page 79 (“Resources”), Adobe Kuler isn’t linked and ColourLovers is linked to Kuler.
My best,
Valentina
3
I was front row center for this one! While the information was (of course) super clear and helpful, the best part by far about the entire presentation was the humour. I absolutely loved the ongoing conversation you each had with Charlie, and the funny little moments of genuine humour (“I mean, who doesn’t love spot varnish”).
Loved every moment of it Veerle, thanks!
4
valentina said:
Thanks for mentioning ;) I wasn’t aware of this. It’s probably because I used 2 different text boxes on top of each other in Keynote: 1 with the titles and 1 for the URLs on top. The clickable segments of the URLs overlays the title of the next item below in the list and so there is a missmatch in the URLs on the titles :S I’ve just fixed it in Acrobat Professional and uploaded a new version. All links should work fine now.
@Derek Allard, thanks for the nice words :) Happy you enjoyed our session.
5
It’s perfect :) Still, other clickable segments are mismatched (even on the last page), but I’m sure you noticed already.
Thank you again for the pdf - it’s a good resource.
Valentina
6
I wish i could have attended! Sounds really interesting. BUt what i really wish for is that i had an colour angel in my camp!
7
Nice observations, expecting a details color theory article from you.
thanks
8
Very cool overview. Particularly appreciate addressing the accessibility issue and taking into account that web colors also need to translate to off-screen mediums. Those are factors that are often overlooked.
While I couldn’t make SXSWi, this at least gives me a really solid feeling for the presentation and an understanding of what concepts you were addressing. Thanks.
9
For me ,a beginning student ,your article is very useful resource .
Expecting more articles from you.
thanks!
10
Hi,
Maybe I’ve missed something while reading your posts, but can we still vote for this one?
If yes is it some online voting system or only on SXSW itself?
Greets
11
Thank you for the PDF. I agree that the use of colors can be very inportant and make the look and feel of the website. Thanks for the inspiration.
12
Veerle,
I must agree with Derek Allard, being front and center for this panel was great! While not a designer by trade, loved every minute of the presentation and the humor too.
Hope the three of you will do another panel next year!
13
Thank you for posting this run through. Even though I wasn’t there to hear it (unfortunately), I feel that just this summary has some very key ideas for color. Thank you again for sharing it!
14
Once again very interesting
15
Dear Veerle, I just want to mentioned that the last link in “Inspiration resources and color pickers” doesn`t have “p” in “http://” so the URL doesnt work.
anyway thanks for your great posts.
[Veerle: Thanks for spotting this, it is fixed now.]
Commenting is not available on this article.