Creating The Carousel Icon
I thought I’d wrap up Carousel’s anniversary week with a post about creating the icon. It was definitely one of the highlights of working on Carousel over the past year.
It was important to me that the icon feel at home on the Dock next to icons I appreciated and used every day. At the time there was a string of games that were iOS ports popping up in the Mac App Store. The icons for those games were all pulled right out of the iOS bundle and recycled for their OS X counterpart. The thought of anyone filling their Dock with round rects was petrifying so I was very committed to making the icon for Carousel feel like it belonged on the Mac.
Once the direction was set for the Carousel icon I started working up a few sketches before moving into development on the main form.
Once I had a few decent thumbnails it was time to gather up some photos of authentic samples to work from. My main sources of inspiration were these three Kodak projectors:
I chose later versions of the projector because while wonderful in their own quirky way, Kodak’s early Carousel projectors from the 60’s were a little clunky looking. As time passed the revisions to the projector cleaned up the form quite a bit and leaned closer toward the plasticky aesthetic I was hoping to capture. These photos of the hard-shelled mid-70’s Carousels did the trick. They almost looked like toys which I thought would translate wonderfully to a Mac icon. After getting all the source material together it was time to get to work. The only issue? I’d never made an icon for the Mac before.
Usually I go right from sketches to Photoshop when I work up an iOS icon. This time, however, the forms involved in what I was envisioning were too complicated to whip together out of shape paths. That meant it was time to turn to an old friend. I have quite a bit of experience from a past life modeling in Maya so I was able to build a simple wireframe pretty quick.
Hrm. While proportional to a real-life unit, there were quite a few issues with the first render. It was squat, looked like it was hovering and the materials left quite a bit to be desired. Furthermore, the perspective was off. After a few conversations and a little playing around it became apparent that the solution was to make it look more like a toy. There were a few things that worked. The body color was on the right approach, implying a connection with Instagram’s icon and the purple lens tied in to Apple’s new affinity with space themes in OS X. I ended up removing the bezel frame to reduce visual complexity, made the whole model taller and made the lens, adjustment knobs and handles almost comically large. Another key to getting the model to feel right was adjusting the camera angle of view from the standard 35º to roughly 12º. The net effect was that the model gained a lot of character and stature.
It still lacked depth, though. The color was pale. The lens had no life to it. The slide carousel reflections weren’t strong enough. From here I did a final render boosted to production settings and jumped over to Photoshop. A few blend layer effects really brought out the detail in the slide carousel and it didn’t take much to liven up the body color and the lens. Next up were the fine details, like the casting lines, Carousel embossment (in Futura Bold, of course) and the lens lettering. Finally, a multi-depth shadow lifted the model off the surface and completed the look.
I had a lot of fun making the Carousel icon. The icing on the cake was being asked to have it in The Icon Handbook by Jon Hicks late last year. It was quite a thrill getting to see my icon on its own page opposite the icon for Unison, an icon that I absolutely love. Hopefully I’ll have to opportunity to craft up more Mac app icons in the future.
Carousel: One Year Later
Well, that was fast.
Roughly one year ago Mobelux launched Carousel. It was a fairly simple idea. Make a straight-forward, simple way to view Instagram on the desktop throughout the day. This post is a retrospective of the process involved in shipping that app.
Here’s a very early (and rough) look at the original concept I threw together on a lazy Sunday in March, 2011.
While hideously simple, this first comp contained all the major elements of what Carousel would become. A single scroll view that held photos. Photos would present basic information and controls to take action on them. A toolbar for secondary actions and scope switching. It was very important that the design didn’t look and feel like an email client with Instagram photos in it. Packing the app with mediocre features and extraneous UI was unacceptable. I showed the first comp to Eddie a few days later and we had a more serious conversation about taking the design to the next phase. At first we were a little hesitant. Deciding to make a new app is not a simple decision for a young company. Risk and cost are serious factors to consider. Not only that, Mobelux had never shipped a Mac app before. It took a little time to come to terms with the complexities of a menu, keyboard commands and dealing with a dynamically resizable window. Ultimately we decided that it was worth a shot.
As with all software ideas it quickly ballooned in scope. What about saving photos? Comment moderation? The biggest drawback we had to deal with was that you couldn’t post a photo outside of the official Instagram app. What can we do well on the desktop that can’t be done elegantly in the official iPhone app? We thought hard about the things that would make a desktop app successful and came up with a feature list. Fast scrolling. Commenting and moderation. Liking. Viewing larger. Searching. Saving. It didn’t take long until we had to scale back all those features to a solid 1.0 and tuck the other ideas away for future updates.
Once we’d nailed down what it would do, we started talking about how the app would look and feel. Something about Instagram filters and the photos that resulted from them had always conjured up images of a Wes Anderson movie. So we went with it. It was a bit risky settling on such whimsy as the inspiration for the visual design on a Mac app. We knew that purists may take issue with the direction. But this wasn’t Mail or iTunes. Why not have a little fun? Eddie worked up some comps of what it might look like if we brought the textures and palette of Royal Tenenbaums’ home to the main window. We settled on the name Instaview for the app and got to work.
Not quite there, but it seemed to be moving in the right direction. Looking back I can’t believe we even entertained that giant label at the top. After a few design sessions we honed it to something more focused and somewhat traditional.
One of our favorite touches was that the frames matched the filter that was used. This was very important early on when photo frames weren’t optional on Instagram. It integrated each photo into the scrollview and made them feel coherent. Each photo frame includes a fair amount of distressing, lending to the aged aesthetic that the filters suggest.
With a design we were quickly becoming happy with it was time to scope the project and get to work building it. Initial discussions revolved around building a framework mimicking iOS navigation controller and UITableView. Shortly after we had that conversation, Iconfactory announced Chameleon, a clean-room implementation of UIKit. The timing was, needless to say, impeccable. Jeremy immediately got to work seeing how viable it was to use Chameleon as the core of Instaview. It wasn’t long before we had a working model with push-pop navigation, asynchronous fetching and popover support. It was time to wrap the Instagram API and start using real data.
In just under two months Instaview was almost ready to ship. As I started setting up all the accounts involved in branding it became apparent that using “insta” or “gram” in the name was going to be an issue. While it instantly tied our app to the Instagram bandwagon it didn’t feel unique. What if Instagram took issue with all the insta-infringers? What icon were we going to come up with that wasn’t a camera or a polaroid? Weren’t we getting sick of seeing all the tan and brown, rainbow-striped ripoffs out there? Furthermore, what if Instagram was acquired and shuttered? Wouldn’t we want to brand so that we could potentially switch services if there was a catastrophe? There had to be a better identity we could come up with.
I was driving around town with Emily and started explaining the issues with the name. I asked if she could think of anything that might work with the visual theme and the idea of artificially aged photos. She told me that in the pathology lab they routinely looked at slides on a dusty old Kodak projector from the late 70’s. It was called a Carousel. The name clicked. It was perfect. I immediately got to work on an icon and came up with a toyed-up version of a Carousel projector (we’ll save that process for a different post.)
Carousel shipped on May 11th, 2011. It’s been a ton of fun to work on over the past year. A few months ago we shipped an update that brought us up to date on all the features we set out to ship last March, including support for five languages. We’re very happy with where the app is. But don’t worry, we’re not resting on our laurels.
Now it’s time to get to work on Carousel 2.
Carousel Featured In The Mac App Store
It’s been an exciting first month for Carousel but we were genuinely surprised when we launched the Mac App Store last night and saw this:
And just in time for WWDC!
Thanks to everyone who purchased a license through the Mac App Store and the Mobelux Store. It allows us to continue developing apps like Carousel. We can’t wait to show you what we have in store for 1.1!
So proud of Carousel and the whole Mobelux team. On a somewhat related note, Jamie will be our official WWDC representative this year so if you see him walking around Moscone or at one of the many parties, give him a congratulatory beer. Or arm-punch. Or both.
Carousel and Open Source
Carousel (our Instagram desktop app for Mac) was conceived, designed, developed and released in an eight week period between client projects. How did we pull it off? By building to our strengths and utilizing available resources. Carousel is the product of hard work by good people that work at Mobelux and hard work by good people that make open source software.
We proudly implemented these open source projects in Carousel and we want to thank all the contributors that made them happen.
- Chameleon. The heart of Carousel. A clean room implementation of UIKit done by the developers over at Iconfactory. This is what displays each photo in each scroll view, allows the pushing & popping of views with a navigation stack and gives us popovers. The inclusion of Chameleon was what allowed us to rapidly develop our design instead of devote hours to hand-rolling an iOS-like framework. I cannot emphasize enough how much time and effort this saved us.
- SDWebImage. It was very important to us that as you scrolled through photos you felt like each photo was developed in front of you as it came into view. SDWebImage allows asynchronous downloading of each photo which allowed us to load photos as you scroll.
- SBJSON. Because parsing data that isn’t a .plist in Objective-C is nuts. Huge help in getting data from the API and dealing with it in a format that doesn’t drive you crazy.
- CocoaFOB. We’ve never written a desktop app before so licensing was a black art. CocoaFOB allowed us to get it done right. (Note that CocoaFOB is not yet mentioned in our about window. In the rush to release I didn’t update our string, but we will be adding it in the next update.)
- Sparkle. Sparkle is a drop-in framework that enables Mac apps to prompt for updates. Huge for installs that don’t end up in the Mac App Store.
- The Instagram API. OK, so this doesn’t technically belong in this post but I wanted to mention that Instagram built a beautiful API and gave us the opportunity to make an app that we wanted to bring to life. If you’re thinking of writing an API for your service take note of how Instagram designed theirs.
In closing, making apps that people love is very difficult. Leaning on a community of talented developers that have done excellent work in a specific area makes any app stronger, and made developing Carousel possible for a company like ours.