Collective Detective Blog Archives

Identifying with Internet Inspiration

I’m chronicling the development of Collectivus because I appreciate it when others share their stories and I wanted to contribute as well. With now ten years in the ‘Net biz, I have benefited from the advice and learned from the successes, failures, and online adventures of others. As developers, we search for how-tos when we get stuck; as entrepreneurs, we look for advice, tips, and lessons to apply to our own ventures; as designers, we look for new techniques, inspirations, and trends (both on their way in and out) to be aware of. And so on. The world moves at Internet speed because we can share and process information so quickly. Many times an article or helpful post or comment on sites both large and small have helped or inspired me. These influences are baking themselves into Collectivus and all projects I have a hand in — oh, and sometimes people are just curious how a project came to be.

I had seen something similar a few years ago. Ryan Carson and team at Carsonified ran a blog called “Bare Naked App.” It detailed the building of an app called “Amigo” in 2006. I remember reading through it at the time and thinking how refreshing it was to see what a team was going through in detail, while building and launching an app like that. That’s something the Carsonified crew continues to do today and I see a few other projects sharing their stories as they build new businesses. That’s awesome.

Interesting side note: I met Ryan in person at FoWA in Miami this year, but embarrassingly I didn’t connect the “Bare Naked App” project to him until I started thinking about writing this post. D’oh!

So why not spell out the entirety of the Collectivus game plan right now? Hopefully, there’s an air of mystery, anticipation and interest that will develop over time. Publishing all the wireframes, mocks, user stories, descriptions, and other information all at once isn’t a good strategy for building awareness and interest. Besides, I’m not sure exactly what will happen next either. Details change, sometimes daily. Not in a “directionless” kind of way, in an iterative and adaptive kind of way. The plan is to continue to share information as we can as it happens.

Whether you’re reading it hot off the “post” button or part of an archive in the future after Collectivus launched and you’ve became curious where it came from, we hope you find these posts interesting and maybe useful.

Thanks for reading!

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.