Buy my Books!


The Sketchnote Workbook is a fully-illustrated book and video, showing how to use sketchnotes in new ways, along with advanced tips and techniques.
Learn about and buy the book →
Download a FREE chapter →
Watch a FREE video sample →


The Sketchnote Handbook is a fully-illustrated book and video, designed to teach regular people how to create sketchnotes.
Learn about and buy the book →
Download a FREE chapter →

Mike Rohde (Color - Square)

ROHDESIGN is the website of designer Mike Rohde, who writes on design, sketching, drawing, sketchnotes, technology, travel, cycling, books & coffee.
Read more about Mike →

SIGN UP! Get the Rohdesign Newsletter.

« T-Shirt Designs: Ideas and Questions | Main | Leica Camera Marker Renderings »
Friday
Mar102006

Designing the endo icon

Endo-v4_128x128.pngI'm very excited reveal my latest new icon design for endo, a syndicated feed reader developed by Adriaan Tijsseling. This new app approaches syndicated feeds as "streams" rather than the common "email app" approach most aggregators use.

The icon was developed in collaboration with Adriaan, the developer of blogging tool ecto and Flickr stream manager 1001, which I'd designed the icon for last year. While we worked out the new icon, I'd been under an NDA with Adriaan (as design director at MakaluMedia) but since endo has been released, I'm free to share. :-)

(Click on graphics below to see full sketches)

Initial Concepts v1
I began the project by writing out thoughts and sketching some initial ideas, and having designed the 1001 icon,endo-1.jpg felt that the icons might benefit from having a "family" feeling between them. So, when you look at the initial v1 sketches I did, you can see this quite clearly.

While the final icon veered quite a bit from the initial sketches, I like to point out that very often a designer must work through what is in their heads in order to progress to the next step — a bit like flushing out the immediate ideas to get at the deeper ideas.

Sketches v2
In the second round of sketches, I began exploring the idea of different shapes, endo-2.jpgshapes breaking planes and swirls of data surrounding shapes. As endo was to be different than other aggregator/readers because it treats feeds as "streams" I wanted to convey the idea of a stream of data — as chaotic swirl or plane.

While breaking a plane was an interesting concept, the more chaotic swirl appealed to both Adriaan and me, because it felt much more like the real net, with wild streams of feeds spinning out of control. Endo was to be the calm in the midst of this storm of data; helping its users wade through this swirling cloud.

Sketches v3
In my 3rd revision of sketches, I focused entirely on the idea of a swirling cloud of data, endo-3.jpgsurrounding various shapes. You can see in the larger sketch that circular swirl with a central "hub" containing a magnifying glass at the center of the swirl. This represented the application at the center, filtering good signal from the noise. These concepts were attractive to both Adriaan and I, though we both wanted to see one more round to finalize the concept before I went to Fireworks and Photoshop on the Mac.

Sketches v4
In this round, Adriaan had the idea to include the newly standardized Feed Icon, which is already used in endo-4.jpgFirefox (and will also be used in IE7), so I tried several icons with the Feed icon integrated. I tried a variety of angles, until in sketch E you can see the idea of having the feed icon appear in the central hub and also appear in the shadow below, since the central hub would be transparent (like a marble).

Once Adriaan and I saw sketch E, we were both in love. Adriaan gave the Ok to move to the Mac, and there, the new endo icon was born, using Fireworks to build the icon (with vectors and layers) and then exported in Photoshop, using the excellent IconBuilder 8 from IconFactory.

Only minor tweaks were needed to finalize the icon on the Mac and deliver the needed icon, and source files Adriaan needed to spruce up his endo application and the new Kula website.

Conclusion
I'm very pleased with the new endo icon; it's simple, different and I think conveys the concept of a feed aggregator sifting signal out of the syndication noise — just the idea Adriaan was trying to convey with his very different application. One commenter on the BWANA Weblog suggested the endo icon "has the best application icon since Shiira." which was flattering indeed. :-)

Thanks Adriaan for trusting in me to help on this project and all of his excellent collaboration. Working on this project was truly a pleasure!

If you're on Mac OS X and want a alternate way of deal with feeds, try out endo. It offers a very different approach, which may just suit your needs.


Technorati Tags:
, , , , , , ,


Reader Comments (7)

Congratulations on a great icon, Mike. I gave endo a spin and the first thing that jumped out at me was the great icon and how it's used in the "splash screen" effect.
March 11, 2006 | Unregistered CommenterJon Trainer
I think that design really does convey its use. It looks simple too! I'll have to check it out.
March 11, 2006 | Unregistered CommenterTim Dorr
Thank you for sharing Mike.

I'm a fellow-designer and I appreciate that you share your design/development process. I try to do the same as much as possible and I believe it's one of the best ways to improve our design skills!

Cheers!
March 11, 2006 | Unregistered CommenterNaina Redhu
Another interesting design article Mike. Thanks for sharing it! One thing that you don't talk about here (which you have discussed in the past) is your choice of colours. Of course, I can see how the orange colour is used for the feed icon, because that's standard, but I'm curious how you decided on the purple/blue combination for the ellipse round the outside.
March 13, 2006 | Unregistered CommenterNeal Dench
Jon and Tim, thanks for the kind words! I was also happy with how Adriaan made use of the icon throughout the application.

Naina, thanks for the comments! I'm glad you are also aware of and sharing your design process. Recording it is good for me, since I can crystalize the ideas as I progressed through the design. It's also a nice document for others to see how the process works. Nice work on your own site BTW! :-)

Neal, as for the colors on the ring, it was a matter of exploration. I wanted to again convey the idea of "chaos" and therefore, used multiple colors to show this. I ended up with a tilt toward purples and blues, mainly because it was a nice compliment to the orange oval in the center of the icon.
March 14, 2006 | Unregistered CommenterMike Rohde
Hey, Mike. Awesome icon and logo design. I love it. Best thing I've seen in a while. Thanks so much for taking us through your process. If found it fascinating.
March 14, 2006 | Unregistered CommenterJanet Tokerud
Janet, Thanks so much! I had a blast doing the icon � it was quite a bit of hard work for Adriaan and I to nail down. I found the process fascinating myself, so it only made sense to share. :-)
March 14, 2006 | Unregistered CommenterMike Rohde

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.