Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/deb7131n5/domains/maxvoltar.com/public_html/2009/textpattern/lib/txplib_db.php on line 14

Deprecated: Function split() is deprecated in /home/deb7131n5/domains/maxvoltar.com/public_html/2009/textpattern/lib/txplib_misc.php(570) : eval()'d code on line 471
Maxvoltar - From start to finish: Kukoo

Maxvoltar is the personal weblog of Tim Van Damme, a freelance interface designer at Made by Elephant.

50° 54' 47" N, 4° 25' 50" E


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.

From start to finish: Kukoo

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:

Screenshot: Kukoo.com

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…

15Comments

  • Mark Otto

    3515 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

    3515 days ago

    More behind the scenes posts would rule! I love seeing other people’s processes.

  • Christoph

    3515 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

    3515 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

    3515 days ago

    Good post and fantastic finished icon. Top notch.

  • Andy

    3515 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

    3515 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

    3515 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

    3515 days ago

    Aw, cute birdy :)
    Lots of details in those wings, that must have take quite some time and effort. Nice work!

  • Nick Looijmans

    3515 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

    3515 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

    3515 days ago

    Glad to see you all liked this post :)

    • @Christoph: Like I said, Photoshop is the only drawing tool I know (as I usually don’t do logos), so I didn’t see the purpose of using something unfamiliar.
    • @Andy: The icon took me about 8 hours of work. That’s without emailing and chatting with the client.
    • @prisca: The pattern in the little feet felt too “perfect” in the first try. Perfect is boring, you always need to add a “sharp side” to keep things interesting.
  • Paul Randall

    3515 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

    3514 days ago

    This is absolutly stunning, Tim. I agree with everyone here about the step-by-step posts, they’re very inspiring.

  • Adrià

    3512 days ago

    Great post!

Commenting is closed for this article.


Home

Powered by Fusion