The process behind the Espresso illustration

posted by Veerle Pieters
16 April 2009

When Jan Van Boghout of MacRabbit and CSSEdit fame contacted us to work on something for a new upcoming Mac application we were immediately very excited and curious to what it would be.


Both Geert and I are very happy users of CSSEdit, and the fact that it is being developed in Belgium is even sweeter. When we learned that CSSEdit would get a companion named Espresso, we couldn't wait to try it out. Espresso is a brand new code editor for the Mac that shares many interface similarities with CSSEdit and the same polished interface that we are so found of. With the introduction out of the way lets take a look at the work we did.

Research, thinking process, and sketches

Usually when people ask us to create an illustration I take my sketchbook to do some brainstorming with Geert. My initial idea was to create an illustration around coffee and caffeine, using a dark brown background with a jute fiber structure in combination with some bright colors.

Espresso sketch 1

We thought some funny text doodles would be a cool idea to add in the illustration as if they arise from the damping espresso cup. We were thinking along the lines of: once you start using espresso, you are on caffeine and become an unstoppable coder. You code like you never coded before. The feeling you have after a strong double espresso shot. You feel like you have all this energy and that you can conquer the world.

Dark brown background with a jute fiber structure in combination with some bright colors. Click on the image to see the full size on Flickr.

Our client liked this general idea, especially the doodles. However the very vertical shape of the illustration didn't really work well. There was also the issue of a brown background not really fitting with the application's interface. My client really liked the colored lines and the doodles. So he suggested to try out to implement the lines in a different way with the doodles still in place and on another background color, definitely lighter, preferable lighter grey. We created many variations. This is only one of them.

Espresso tryout number 2

The issue with most of them was that the illustration needed to stand on its own in the center because having them aligned at the bottom wasn't really practical. My client also suggested to try to spread the doodles a bit to create a more natural flow. He also wondered how things would look if I rearranged the colored lines, adding a few and using more color variations.

Espresso sketch 2

After several trials we ended up with this version, a version we are both happy with.

Espresso final illustration

Promising newcomer

Espresso is a promising newcomer in the Mac development scene with great potential. Knowing Jan's passion I know that exciting new features are planned. If you want to read a good review on the application I recommend this article. Even without this project I would fully recommend that you try it out. Excuse me now as I go back to coding and wondering about any upcoming new features. :)

What we did

Graphic design.


  1. 1 jgraston Thu Apr 16, 2009 at 02.14 pm

    I really dig the beige background on the first comp. Not that the final version doesn’t work, but in school they always said your first instinct is usually the right one.

  2. 2 Daryn St. Pierre Thu Apr 16, 2009 at 02.28 pm

    Since I started beta testing Espresso a while back, I always loved the icon and the general feel. When it went public and I got the final version from MacHeist 3, I absolutely loved the artwork used in the background of the initial window. I also had no idea that Duoh had designed it, but now it all makes sense. The style is right up there with everything else you create. I love it!

  3. 3 Narshada Thu Apr 16, 2009 at 02.51 pm

    I’m a fan of Espresso and tried the demo before buying it as part of the Macheist 3 bundle - it has some very slick features. I love the illo - nice to know the story behind it!

  4. 4 Cindy Li Thu Apr 16, 2009 at 03.08 pm

    I should have known it was you that designed that. It is beautiful, playful and sophisticated as usual!

  5. 5 Esch Thu Apr 16, 2009 at 03.18 pm

    I must confess, I drop Coda for a while because of the Espresso icon :)

  6. 6 Simon Cox Thu Apr 16, 2009 at 03.39 pm

    Thanks for sharing the process Veerle. My favourite is the muted third image - more productive than caffine but I did recognise your handywork as soon as I opened up Expresso!  Great stuff.

  7. 7 Raphael Bek Thu Apr 16, 2009 at 04.40 pm

    It’s such a nice tool! I was using it when it was in beta and it’s very cool. I bouth it with the MacHeist 3 bundle. THANK GOD! LOVE it.

  8. 8 Angger Atmawarin Mon Apr 20, 2009 at 03.05 am

    I learn something today. Thanks Veer. Now, gonna spread the words.

  9. 9 Cyprian Gwóźdź Tue Apr 21, 2009 at 12.32 pm

    I wish one day to feel colors the same way you feel and see. I remembered this cup of espresso and then I found your site. Thanks for your work.

  10. 10 nuriz Mon Jul 6, 2009 at 11.49 am

    wow!!! i love the lines of color!! and i’m fascinated with all your works!! they are very clean and minimalist…
    can you explain how to do that lines! they have me crazy! hahaha
    and thank u for for all your tuts!! they are very useful!
    pd: sorry for my english! hehe ;)

  11. 11 Benedikt R. Tue Aug 18, 2009 at 06.28 pm

    Great. Always, when I open a project file in Espresso, I asked myself, who did this beautiful graphic. Now I know it :-D