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.
Why Nikola Tesla Was The Greatest Geek Who Ever Lived
Over one hundred years ago, a Serbian-American inventor by the name of Nikola Tesla started fixing things that weren’t broken.
In a time when the majority of the world was still lit by candle power, an electrical system known as alternating current was invented and to this day is what powers every home on the planet.
Unquestionably the best thing posted on the internet today. There hasn’t been a person born who has had more impact on modern daily life than Nikola Tesla.
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.
Nate’s Taco Truck has arrived. #rvahackathon (Taken with Instagram at Mobelux)
Lamplighter Kickstand is up and running. #rvahackathon (Taken with Instagram at Mobelux)
Custom blend. #rvahackathon (Taken with Instagram at Mobelux)
Well, it doesn’t get any more Richmond than having your name on a cannonball, does it? (Taken with Instagram at The Jefferson Hotel)
RVA Hackathon
No theme. No contests. 24 hours to make cool stuff with smart people.
We’re super-excited to announce RVA Hackathon, a free event for developers and designers on April 20-21 at Corrugated Box. We’ve been toying with the idea of throwing a hackathon for a while now, but we didn’t want to create something with prizes, judges, themes and agendas getting in the way of making cool stuff. This event is free-form, meaning that you can show up with a team or go it alone. Make something that you’ve been talking about but haven’t dedicated time to or go crazy and prototype out a new idea. Present your progress at the end or just enjoy the party. We, along with our sponsors will keep you fed and caffeinated along the way.
We think that by relaxing restrictions you’ll have more fun and make cooler stuff. We’d love for you to show up and prove the theory. Visit rvahackathon.com to learn more and sign up!
I’ve been excited about putting something like this together for a long time. Richmond is a vibrant place with a bunch of smart designers and developers making great things, both for themselves and for others. It’s well past time we all got together and collectively shared that enthusiasm. I hope you’ll join us!
Neil deGrasse Tyson: How Space Exploration Can Make America Great Again
Tyson in an interview with The Atlantic:
All the adults are saying, ‘We need to improve science in the world. Let’s train the kids.’ I’ve never heard an adult say, ‘We need more science in the world. Train me.
Neil deGrasse Tyson is a national treasure.
Emily wasn’t sure if it was time for a new can of Old Bay (look closely.)
So agonizingly true.
Stealing Your Address Book
John Gruber in response to Dustin Curtis:
I understand that Apple doesn’t want us to be badgered by too many permission-granting alerts, but address book data is sensitive enough to warrant it, in my opinion. Why not treat it like they do location data?
It may seem like a gaffe on Apple’s part at first glance, but I think it’s because address book upload is an edge case that Apple either never saw coming or never thought would be a wide-spead problem. The original intent for the API was to grant the ability to build custom views to navigate address book contacts in an app. Under normal circumstances, asking for permission to view address book data is along the same lines as asking for the music library in a music app (which is another personal data API that can be accessed without alerting the user.)
Put simply, Apple probably never thought about using the address book API as a way to spam your friends about a new social network.
Arguments Against Using Facebook Connect as Your Primary Log in Mechanism
Buzz Anderson, commenting on Bijan Sabet’s post:
For the (I suspect rapidly growing) portion of us who only grudgingly maintain any sort of Facebook presence, it’s like asking us to reaffirm our commitment to a religion before being allowed to eat in your restaurant.
I wholeheartedly agree with this, but it’s not the thing that bothers me the most about Facebook-based authentication (or Twitter-based authentication for that matter.) The benefits of using other platforms to lower the sign-up barrier don’t outweigh the drawbacks of being tied to the another property for something as pivotal as logging in to your own service. If you think Facebook is too big to fail, think again. Nothing lasts forever. No matter how long the timeline is, there will come a point on it where you’ll have to move away from 3rd party tokens for authentication. Whether it’s the downfall of Facebook/Twitter as a popular platform, their cessation of the authentication program or simply a political disagreement.
And then you’ll be stuck with the task of messaging, inconveniencing and supporting your user base through the log in process, which is, ironically, exactly what you were trying to avoid doing in the first place.
Gridiron League is a beautiful re-imagining of NFL team logos by Wes Kull. Even though I loathe the Patriots, that’s one tight execution.
Help Me Settle a Crucial Argument
Do you like black licorice?
