Avant

Adobe

Project:: Kuler Web Application & Desktop Widget
Technologies:: AS3 / Flash, AIR
Services:: UX Consulting, UI Design, Flash Production & Programming

The most integrated community for creating and sharing color.

Kuler is a hosted application used for creating and sharing color harmonies and using them in Adobe's Creative Suite. You can visit kuler and create your own color themes at http://kuler.adobe.com. This project seeded the creation of Adobe's Emerging Markets & Technology team which is now responsible for some of the industry's most innovative digital product solutions. The success of Kuler's web presence was so great that Adobe decided to extend its features to the desktop. In order to extend the reach of Kuler, a desktop version was created using Adobe AIR. The Kuler AIR application extended the functionality of Kuler beyond the web and onto the desktop, allowing users to track and rate the newest, most popular, and highest rated color themes. The innovative palette-shaped design is transparent through to the desktop and offers an elegant and user-friendly way to browse color themes without being tied to a browser. This project was awarded the Information Design Award in Communication Arts' Interactive Annual.

• • • •

Create

We devised a method for creating 5-color themes using the same color picker in Adobe desktop products like Illustrator. The color wheel is a core piece of Adobe's Live Color features in Creative Suite.

Themes

Themes are the default view of the application. We created a layout that made the current selected theme apart of the overall UI - clicking on the larger theme above takes over the screen with a theme - only preview. Hovering over items in each list expands each smaller theme within the column. Each theme has tags and comments along with meta information and download options.

Themes

The expanded list view for themes shows a 3 column view for faster browsing.

Community

The community screen features a new artist once a month along with their saved themes and choice pieces of artwork.

Community Detail

The community screen has clickable thumbnails of featured artists works to view them larger.

Links

The Links screen utilizes the same 5 column grid as the last selected theme along the top.

Desktop AIR Widget

The kuler AIR widget was designed to use the kuler "tab" shape in the logo and display all the same categories of themes available in the web application. Each theme is linked to the same theme detail in the web application, and offers icon shortcuts for copying the theme hex values to the desktop clipboard and marking each theme as a favorite. One may also search themes from the widget.

Application Map (From Documentation)

A detailed diagram of the kuler application was produced to flush out the main sections of the application and help devise a production plan for design and engineering teams.

Color Space Wire Frame Concepts (From Documentation)

Early on, the design and engineering teams experimented with several color spaces and custom controls for generating color themes. After several code and design experiments, the best ideas were retained and the rest were archived.