Designing the endo icon

I'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, 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, shapes 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, surrounding 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 Firefox (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:
mikerohde, rohdesign, sketches, visual+thinking, design, makalumedia, drawings, icon

SyncBuddy 2.0 for Mac OS X

Received some great news over lunch today, which I wanted to share — Florent Pillet's SyncBuddy has been updated to 2.0 for Mac OS X!

I used to absolutely love Sync Buddy when I was an OS 9 user. I could plug my Palm handheld into my Mac and mount its internal RAM or removable card (back then, a Springboard module), just like a hard drive, with files and folders. It was excellent for quick backups, installation of new apps or copying single files to or from the Mac.

Not only was it quicker than HotSync for many activities, Florent had converters built into the tool, enabling on-the-fly conversion of text to Palm Doc format, simply by dragging a text file into Sync Buddy.

For its time this app was cutting edge on the Mac or PC, but eventually it fell out of my regular usage patterns once I migrated to Mac OS X. Now, with version 2.0 released, I can have my Sync Buddy back again!

Even better, the new version supports export of pictures from a Treo or Zire, and features transport over USB, WiFi or Bluetooth. As I'm soon to be the proud owner of a silver Zire 72, I'm becoming more interested in Bluetooth and WiFi support.

Sync Buddy is $25, though Florent is offering special pricing options for past owners of Sync Buddy and iTreo. If you are the owner of either application, look in your email for details, or contact Florent at his website.

Kula 1001 Icon

Received good news on Sunday night! Adriaan Tijsseling, the author of blogging tool ecto, dropped a line to tell me my new icon for 1001 (a Flickr photo stream management tool) was used on his latest beta. Alright!

I've been a user and fan of ecto since June, so when I learned via Michael Ashby that Adriaan was looking for some icon and design help with ecto, I dropped him a line. As it turns out, Adriaan found help with the ecto project with designer Neil Dixon. However, he was also in need of a new icon for his 1001 app, a tool for viewing and managing your own and others' Flickr streams. I felt honored to be offered the opportunity, so I immediately agreed to take on the project through the company I work for, MakaluMedia.

So, I began as I usually do, with sketches in my Miquelrius sketchbook. The concepts were scanned and emailed to Adriaan for review. The process went quickly, as one of the concepts in my sketches — an earth with photo streams wrapped round, being viewed by a loupe — resonated with both of us.

From there, I began the icon construction process. At first I tried to sketch the sphere with streams wrapping around it, but soon realized it would be difficult to get right without good reference. The next day I had an idea in the shower — why not wrap strips of paper with black photo blocks printed on them around one of Nathan's kickballs?

So that's exactly what I did — and it worked perfectly! The strips provided a perfect template for re-drawing in Adobe Illustrator. I then copied the vector art from Illustrator into Fireworks, to add color and paste photos into the stream blocks on the globe.

In fact, if you look very closely at the pics on the streams of the final icon, you can make out shots of Adriaan, his friends and several of my own family. It's always fun to see the icon, because even though the little pixelized photos are obscured, I can still remember the moment when each family photo was taken.

I had a blast working on this icon. It always feels great to see a project like this come together, especially when the process leading up to the final art was so much fun! :-)

Thanks Adriaan!

The Mac mini and Moleskines

Got up early this morning, scanned a few RSS feeds to start the day. I've been keeping an eye on Apple's new Mac mini, iPod Shuffle, iLife and iWork software suites, because I have a feeling all four of these will be big hits.

Janet Tokerud had a new post, Mac mini and iPod shuffle Don't Disappoint, so I stopped by to see her take on these two items. I wasn't surprised by her thoughts (they virtually mirror my own) I was caught immediately by the shot she includes of her pocket Moleskine on top of the Mac mini (see my cropped out version above). Wow! Immediate perspective!

That's my trusty pocket Moleskine there to give you some perspective. It is a full-fledged OS X computer that's tiny, weighs less than 3 pounds and is cheap. I am loving the prospect of watching this play out.

Its so funny — I had a look at the Mac mini's specs last night, including Apple's imagery and comparison to a standard PC tower. I thought "Hey, that's pretty small." But when I saw Janet's Moleskine on top of a Mini this morning, I really grasped its tiny footprint. Moleskines save the day again! :-)

To put the Mac mini into other journal related terms, it's even a little smaller than the footprint as my A5 sized Miquelrius sketchbook laid horizontally.

Amazing.

MailDrop 2.0 Icon Story

Okay everyone, time for a little horn-tooting PR for a “design the icon” contest I won on November 18th. I think the busyness of the season and Thanksgiving holiday threw me off, because I'd intended to mention this sooner. :-)

Anyway, Matt Henderson, the owner of MakaluMedia (the company I'm design director for), alerted me of an icon contest being offered at Erik Barzeski's NSLog weblog. Erik runs Freshly Squeezed Software, makers of various Mac OS X applications, including a Mail Merge app called MailDrop. It turns out that MailDrop is being updated to 2.0 and was in need of a new icon.

Well, I figured what the heck. While I have 15-some years of graphic design experience, I've never done a Mac OS X icon before. I thought this project could be fun, challenging and educational. Better yet, the icon concept they were looking for was somewhat cartoony, and hey, I love cartooning. So I took on the project.

Erik liked the direction in my sketches and rough icon ideas, so I proceeded with the icon project and ended up winning the contest. The final set of application icons are posted with this article. We're still in the process of finalizing the app's document icon.

My icon building process took a little time to sort out at first. I ended up working in Macromedia Fireworks, because I could use vector art, yet see immediately how my changes would appear in pixels. I also experimented with Adobe Illustrator and Photoshop, but because of my daily use of Fireworks and its vector/pixel feature, it just suited me best.

Once I had a final icon, I exported a master PNG file with transparency. Then I opened the file with Photoshop 7 for conversion into icons using a handy Photoshop plugin from IconFactory, called IconBuilder. At $69 It's not cheap, however, for the time it saves doing icons, I can see its value. I love that IconBuilder has no use restrictions (other than a nag screen which appears after multiple uses), because this allowed me to fully test it out before we decide to purchase it.

If IconBuilder is a little too high for your budget, there are other free and shareware tools out there, like Icon Composer (included with the Xcode Tools on the OS X developer CD) or the $15 shareware tool, Iconographer.

Should an icon for OS X be in your future, check out these helpful Apple documents: Icon Genres and Families, Suggested Process for Creating Aqua Icons, and Tips for Designing Aqua Icons. Here's another useful reference: OS X Icon Tutorial from O'Reilly's MacDevCenter.

Overall, it was a great challenge, and indeed, very educational. In fact, it felt very good to dive into something I'd never done before!

Ok, here's my final PR spiel for this Friday: If you happen to need a little icon work or any other type of design work (web or print), please feel free to drop me a line. :-)

Have a great weekend!