Caffeinated: The Beautiful Google Reader Client

Caffeinated is a new and beautiful Google reader client for the Mac. It looks very OSX like, while it packs a lot of custom UI elements that fit right in with the rest of the OS and makes the app feel fresh, fun and polished.

Caffeinated was designed and developed by Curtis Hard, with a great looking icon designed by Kevin Andersson. Curtis and Kevin took some time to answer some questions about designing and developing the app!

Can you give us a quick rundown on your new app Caffeinated?

Curtis: Caffeinated is a new Google Reader client for mac, sporting all the features that Google reader has. Featuring a unique and what I think beautiful interface. It takes the more traditional mac experience approach by using Apples controls but adding subtle differences and a more elegant UI to them, the sort of things you would find in iOS applications.

How long have you been working on Caffeinated?

C: This is a good question! Caffeinated was started way back in probably end of 2009 / early 2010. Back then I was learning the in’s and outs of Object-C so was more of a learning curve of what can and cant be achieved. Your probably wondering why its taken 2 years to come about. Well Caffeinated to begin with was never supposed to be public, it was a personal project to learn Object-C and back then there were no GR[Google reader] clients I liked, so I thought I would build my own. In the development process, it got 2 complete start from scratch rewrites, because you learn and read back on old code and think it could be a lot better, so I rectify this. Obviously, this increases the time but I had no dead line as it was never supposed to go public. Caffeinated is an evening job for me as I’m a full time Web Developer, so development only happened when I was free in the evenings or at weekends.

What are some of the main differences you’ve com across in designing and developing for the web vs native Cocoa?

C: I dont really design for web, my day job I’m solely a developer. Developing for web I think is simpler, the languages are easier to understand – most web languages, PHP, JavaScript, ActionScript 3 etc do all memory management for you were as ( not until recently ) Object-C did not. Design patterns are similar in a way but web sites run from top to bottom when being processed then stop. Application run constantly until you quit them and also are on the users machine. So developing you have to be as efficient as possible with the users hardware. The big difference is drawing to the screen, sure on web you can create an element and give it a style, where-as within AppKit you have to create a view and then physically write the code that draws the colour or shape you want, I prefer this in a way, but it could be simpler.  I like developing for both – just gets confusing sometimes when I start typing Object-C within PHP, but thats when you know you need a coffee!

Is this your first Mac App?

C: This is my first “major” mac app. Ive written a few small utilities just for myself but nothing worth mentioning.

How do you start designing an app, and how do you evolve and grow that design as the app changes?

C: This is a question I find hard to answer. The general UI for Caffeinated was thought up in about 30 seconds in my head after I thought “what would I want a client to look like?”. Personally, I don’t sit down and design something and then build it. Due to this being a learning process, I just designed and modded things as I went along. Originally Caffeinated used sheets to add subscriptions and folders etc, but they somewhat seemed old, so I spent 2 weeks making a popover system which worked a charm. For me it was a constant evolving process, it was all in my head with a few mock ups in photoshop, but no physical sketches or design process behind it. Im very much a code monkey, so I have the gift of being able to map out everything in my head and then just building it. For early designs you can see a few iterations on

What are some of your favorite RSS feeds to follow in Caffeinated?

C: Im a very geeky person, I follow a-lot of code blogs, for instance cocoa is my girlfriend, or a few PHP blogs. Apart from those I follow the general Apple ones, TUAW, Macstories and of course, The Industry. I also love a laugh, so anything from the cheezeburger network.

Is there an iOS version in the works?

C: This is one question that I have had the most, currently I have no plans on bringing Caffeinated to iOS, I have not dabbled with iOS since the API’s were first released by Apple with the iPhone 3G. I personally feel with the time I have to do things, up-keeping and updating one app is far more practical then trying to manage a few with the free time I have.

Where do you draw inspiration for your designs?

C: Caffeinated was inspired by a few applications, Mail and Espresso on mac, Twitter on iOS and just iOS as a whole. I wanted to bring some iOS style’s and features across to the mac in a practical way but also so you still feel like your using a mac app and not some iOS port. I generally probe the net and look for sites or screenshots of other inspirational user interfaces and see if anything could be incorporated to make Caffeinated or any project better to use.

Kevin: I get my inspiration from everything around me, and of course other designers. When I see great designs, I often try to recreate it myself to get into the head of other designers. Recreating designs can give you great insight in how to create specific details & effects. I love nudging pixels around though, as a shameless plug I made more than 1000 icons for Tabsicons.com.

Kevin, how did you get involved with the project?

K: I can’t remember how I got in touch with Curtis in the first place, but several years ago I made a couple of icons for him, as well as the old Caffeinated icon. I got in contact with Curtis again recently, because I wanted him to help me with a Mac theme editor (iClockWorks) for iClock a iPhone app with user created themes. Curtis mentioned he had to finish Caffeinated, so I mentioned I would have another go at the old icon. After that I went on to create new preferences icons as well as a couple of other glyphs inside the app.

Can you talk about the process of creating the icon for Caffeinated? 

K: Hopefully you grow as a designer over time, and when Curtis was about to release the app – I had another look at the icon. Two years had passed since I looked at the icon, and I didn’t think it was up to par to what I can create today. So I gave the icon another go. Actually, I made over 15 different handles, obsessive, I know. It was quite a challenge to get the perspective right because the cup had to sit perfectly in the dock. Sometimes it’s really simple things that take time. I took several photos of my own cups for reference. The perspective handle will actually look quite wrong if you photograph it in the same angle. I hope I nailed it now though.

The icon is created in photoshop, using layer shapes. It gives you a lot of control, as well as the option to scale your icon when you are done. Smaller sizes are either redrawn or optimized in each step they are scaled, to get a pixel perfect icon.

Thanks to Curtis and Kevin for taking the time to talk with us! You can learn more about Caffeinated on it’s homepage, the Mac App Store, and on Twitter. Try Caffeinated free for 15 days, but I’m pretty sure you won’t need that long.

Good Design is Environmentally-Friendly

Fashion and Tech

Designer as Architect

Good Design is Thorough Down to the Last Detail

What I Would Wear on My Wrist

Metis NYC Product Design Bootcamp: Acquire Skills, Build a Career

Good Design is Long-Lasting (Part 7)