Collective Detective Blog Archives

Posts Tagged ‘design’

Collectivus Branding Revisited

Just a short update on our branding for Collectivus. You may have noticed that the logo has been punched up a little and is sporting a shiny new color-scheme as well.

collectivus logo 2009

I had taken a crack at revising the original Collectivus logo from 2003 about a year ago, but not being a graphics pro, there’s only so much I could pull off with my limited art skills. So as part of the development for the Collectivus application, we brought in a professional to tweak the logo and create additional branding assets for us. Tara Petrilli of Eye-Volt Design has been doing a great job meeting our graphic design needs for this project.

Original (circa 2003)

collectivus logo circa 2003

Old (2008)

collectivus logo 2008

New

collectivus logo 2009

What do you think?

This is just a small preview of the look of Collectivus. You’ll be seeing more sneak peeks and additional information rolling out faster as we countdown to launch.

Speaking of launch: Beyond the CD blog, become a fan of the Collectivus Facebook page and follow Collectivus on Twitter for news and other ways to check out Collectivus early.

Coloring Collectivus

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.

The Collectivus Logo

collectivus logo circa 2003

I created the original Collectivus logo in 2003. The cube in the logo was designed around the concept that individual connections could combine to make something bigger and greater.

collective effect logoThere were two designs used on the site: one of just the block of cubes with a small cube off to the left-side, the other a circle of cubes surrounding the larger block. The latter was also used in a project called “Collective Effect,” which applied the power of collaboration to raise money and awareness for charity and a satellite effort of CollectiveDetective.org

The font for the Collectivus logo is “Murray Hill Bold BT.” I hacked together some of the letter alignment; the “v” especially was raised much more than the other letters. I’m not sure what I was thinking regarding the colors.

I knew I still wanted to use all these elements for our new web application. With a few more years of experience screwing around with graphics under my belt, I took a crack at revising the logo for 2008. Being a lean start-up, there’s still a lot of DIY; I don’t claim to be any great designer. There were a few issues I wanted to address:

  • Alignment of the letters
  • Moving the single cube to also represent the “dot” in Collectiv.us
  • In the old version, the individual cube didn’t have anywhere to “fit in.” So I made a slot in the block of cubes.

The style guide is still not locked for Collectivus, so for now I’ve just applied the same color palette used here on Collective Detective.

Here’s the updated logo:

collectivus logo 2008

So that’s the short story of the Collectivus logo. I’m happy to hear your feedback or suggestions.