From start to finish: Kukoo
Around Easter Tijs Vrolix asked me if I wanted to design a logo for one of his (many many many) upcoming projects: Kukoo. Here’s the progress of that logo together with some notes.
Me: “What should the logo represent?”
Tijs: “We want something similar to what you did for 10to1, but it has to be a bird.”
Me: “A Twitter bird?”
Tijs: “Whatever you do, no Twitter bird.”
Me: “Can it be blue?”
Tijs: [the user has left this chat or lost connection]
Kukoo is an app that lets people know when you’ll be checking your email, so they know when to expect a reply. The combination of a cuckoo and mail gave us the idea to use a cuckoo, holding… your mail. Rocket science, I know.
The first thing I did was grabbing my Moleskine, and started sketching. After about 5 birds, we had one we both liked (Step 1). Not Twitter-like, baseline Pixar-like. Something cute, and something you could possible use as an icon for a Mac app.
Now, as blue was out of the question, I started looking for color schemes we could use. A cuckoo is a grey bird, with some brown. This was way too boring, so I poured in some bright red for the wings. Step 2 shows you my scientific approach to picking colors for an icon. It’s just a simple drawing with my laptop mouse on top of the sketch, but does a remarkable great job at previewing the color scheme.
After Tijs agreed with the color, I started drawing the basic shapes. I also added some basic shadows and gradients, to make it pop out of the screen a bit more (Step 3). I use Photoshop, simply because it’s the only drawing app I know, and paths in Photoshop are a great tool.
After 1 or 2 more rounds of revision, you get Step 4, which is the final icon. Feathers and details were added (I hate feathers), and some minor things changed.
Here’s a screenshot of the final destination of the icon:
I’m going to try writing more “Behind the scenes” posts. It’s a great way for me to remember the course of the project, and maybe even interesting for you guys…
Commenting is closed for this article.
15Comments
Mark Otto
319 days ago
Awesome post, Tim! Love seeing pieces of other designers’ process like this. Also great to hear that you have good relationships with your clients. Sounds like that process (getting feedback, moving forward, etc) went smoothly as well.
Look forward to seeing everything finalized. And nice touch with the hatchling tag :)—shows great attention to detail.
Travis Schmeisser
319 days ago
More behind the scenes posts would rule! I love seeing other people’s processes.
Christoph
318 days ago
Great icon and nice article!
I really like those “Behind the scenes” posts where you can see that it takes more than 1 or 2 steps to create an icon or logo.
I’m really suprised that you used Photoshop for this, as I always thought Photoshop is the wrong tool for managing multiple paths and gradients.
Elliot Jay Stocks
318 days ago
Yes, more behind-the-scenes posts, please!
(Then I can steal your secrets, put you out of work, and then laugh – mockingly – as you are forced to live on the streets. Mwoo-ha-haaaaaaa!)
Jason Reynolds
318 days ago
Good post and fantastic finished icon. Top notch.
Andy
318 days ago
Wow, stunning work! What kind of time did it take to get from Moleskin to final product on the logo, just out of curiosity?
prisca
318 days ago
Lovely :)
and yes, have to agree with everyone here – nice to see the working process :)
Wondering why the curved lines in the birds feet changed between the last 2 versions? ~ just curious ;)
Philip Prinz
318 days ago
Oh, I love that bird. If it was a blue bird it would kick every twitter bird’s ass!
I am officialy affraid of you now. I always thought you were a great webdesigner, but now you’re an awesome illustrator, too …
Erwin Heiser
318 days ago
Aw, cute birdy :)
Lots of details in those wings, that must have take quite some time and effort. Nice work!
Nick Looijmans
318 days ago
I’m really digging this icon and this “behind the scenes” post. This is way better than the average tutorial you see on other websites. Keep it up!
Jake
318 days ago
Icon looks great Tim. I agree with Nick, this is better than tutorials because it relates to a real project. These articles are good and are a great read. Keep em coming.
Tim Van Damme
318 days ago
Glad to see you all liked this post :)
Paul Randall
318 days ago
A great step-by-step. I love things like this.
I try to keep versions of site (and logo) revisions, in the hope that one day I will make a post about the design process. Seeing iterative changes can be so insightful.
Joel
318 days ago
This is absolutly stunning, Tim. I agree with everyone here about the step-by-step posts, they’re very inspiring.
Adrià
316 days ago
Great post!