The nice thing about designing Collectivus is being able to start from scratch with the brand identity and site aesthetics. It's also the bad part -- filling a blank page. I'm fortunate to have worked in the past with a lot of talented designers on projects big and small to help work this stuff out, but this is a personal project, with a small team iterating toward the first release, so I've got the designer and UED hat on this time, along with many others. I've talked about the evolution of the Collectivus Logo in a previous post. Today I'll recap how I spent Labor Day weekend developing and applying a color palette to the template and page elements.

I wanted the look have organic colors, but bright colors as well. I started thinking about paintings and other images which used colorful earth-tones. I'd throw images into a folder, then sample colors from them into some random blocks in Fireworks. I wasn't finding anything I liked. Then while brainstorming some other sources of inspiration, Traci provided a great suggestion: "What about 'Pushing Daisies'?"

Brilliant!

If you haven't seen the show, it's not only great in its characters and stories, but its visual eye-candy is fantastic as well. The use of color in the sets and wardrobe is just amazing too. I tried using photos of the set interiors for the "Pie Hole," but it's in the show's branding I found a starting point for the Collectivus color palette.

So the next step was pulling colors out and building a palette to use in Collectivus. Here's where I blew the dust of some bookmarks and tried using some online tools, looking for the best way to do this.

My solution came in an old post by UK designer Andy Clarke (aka Malarkey) called "Creating Colour Palettes." I liked it because it was simple, made sense, and used Fireworks, my primary graphics tool.

The premise is that you take a white and a black strip, then on top of it, pick a base color at various opacities in blocks on top of the strips to give you a selection of color tones to pick from.

So here's what I did:

  • Picked four major colors from the Pushing Daisies image using the eyedropper tool
  • Converted each of the color samples to their closest web-safe colors using this Color Scheme Generator
  • Applied each color to Malarkey's color palette technique
  • Saved the color palette file
  • Began applying the colors and adding additional design style to the previously grayscale page template

We'll talk more about the page elements on the receiving end of this color palette in future posts.