Section Logo
premium subscriber content

Interactive Annual 13:

kuler

Launch Live Site

“Interacting with this site took me back in time to my first box of crayons. Fascinating. Mesmerizing. You knew you were about to create something great. And this one won’t get you in trouble for coloring all over the walls.” —Jeff Benjamin

“A great collaborative tool.” —Liz Castro


Overview: Developed as a complement to Adobe’s Creative Suite software, this online application allows users to create, edit and share color themes with a community of users. Quick loading and easy to use, kuler can also export the created themes for use in desktop applications.

  • Developed using beta software
  • Dynamic generation of color themes
  • Tagging and other community features
  • Integration with RSS feeds

Creator’s Comments: “We wanted this to be a meaningful tool for everyone, so the process for creating new themes or building upon existing themes had to provide relevant context for anyone working with color in any format. Our biggest challenge was figuring out a fluid workflow for the theme creation tool since it would be pivotal in generating interest and building a community of theme creators.

“A lot of thinking and prototyping went into this state of the application. We wanted the themes integrated into the overall experience; we also wanted them to be playful and helpful at the same time. The solution had to balance the need to showcase themes without overdoing it with too much color all at once. We also wanted to build a platform where people could shop for color combos, then collect them easily for reference and comparison.

“We experimented with interactions for the drag-and-drop functionality between swatches and slider and color wheel feedback until the relationships between all of the elements in the creation tool seemed obvious and intuitive. The tray along the bottom provides visitors with a drag-and-drop ‘bin’ for themes that they pick up throughout the kuler experience, making it easy for people to save themes for later reference or simply compare themes from different parts of the application.

“Initially, there were a lot of concepts generated for the overall experience where the themes were intentionally small so that the amount of colors on the screen wouldn’t be overpowering. But at a small size they seemed secondary to the rest of the content (like comments and tags) when they should have been predominant. That was when we tried the exact opposite strategy. We played with multiple iterations of ‘branding’ the interface with themes before settling on the large theme previews along the top of the page. Clicking on one launches a full screen takeover so it can be viewed without any distractions. The interface is intentionally muted so there’s no visual competition.

“It was during the prototype and testing process that Tara, one of our producers, began using the application to help select yarn colors for her knitting projects. That’s when I realized how useful this tool could be not just for designers but for anyone being creative with color.” —Michael Kemper

Credits:
Danny Riddell, executive creative director
Michael Kemper, art director
Britt Miura, interface designer
Luigi Rosso/Tim Strickland, technical leads
Teri Pettit/Ty Voliter, programmers
Ketan Anjaria/Wes Gorgichuk/Lanny McNie, Flash programmers
Beau Ambur, technology director
Tara Beaton/Nora Calvillo/Evelyn Chan/Terry Hemphill/Sami Iwata, producers
Mike Lucaccini, executive producer
Lydia Varmazis, executive director
Diana Hu/Colin Toomey/Trina Wai, quality assurance
Metaliq, project design and development
Adobe EMT, client