A word upfront: this is not intended to be a detailed description of a design process, but rather written for your entertainment. So, instead of a strict 1-2-3 workflow, I wanted to write down my journey on the way to the final version.
Icon redesign for the
upcoming iOS 7 release of the popular and powerful RSS News Reader “Mr. Reader”.
Before I start let’s have a look at the old icon of Mr. Reader:
The pre-iOS 7 icon from Mr. Reader
I am, as many others are, a fan of Mr. Reader. So I wanted to get it right and avoid comments from my Internet pals like these:
Gabe Weatherhead from Macdrifter:
I certainly didn’t switch for the icon. But then again, I’ve never used or avoided an app solely because of it’s icon. That’s just moronic.
Justin Blanton from Hypertext:
I’m not a big fan of the name or the icon.
David Sparks from MacSparky:
I took a few cheap shots at Mr. Reader’s icon yesterday on Twitter and received a mixture of scolding and agreement. I can’t help it. Those RSS eyes creep me out. Once you open, Mr. Reader though, it is a really nice experience.
Phillip Johns from Appstorm
The other complaint is the icon. The icon fits the name but it’s not visually appealing sitting in my dock. For some users I know these items are deal breakers but I find the functionality of the app far surpasses these minor annoyances.
I’m not trying to bash the old icon here. Matter of fact, I didn’t mind it at all (despite preferring and wearing a smaller mustache myself). It’s far from ugly. The designer obviously knows his craft. Beauty is in the eye of the beholder. And, like David Sparks experienced on Twitter; there are a lot of people who liked it as it is, too.
Still, having read the quotes from above, they are burned into my mind. Additionally, they are all from people I read and respect and who happen to like the app. It might be unnecessary to emphasize this, but one of my top priorities was to make a peaceful co-existence happen between the Mr. Reader that sits in peoples dock and on their home screen and the high-speed data highway that exists between their retina and the brains evaluation center. This is what my personal mission was all about. Well then, let the voyage begin.
A Slow Transition
The goal was to carry the spirit of Mr. Reader to the new OS. So the icon needed to feel lighter and right at home on iOS 7. I won’t lie, the design process itself for a typical icon of the new platform which iOS 7 is, allows for a much more simpler approach than in the pre-iOS 7 era. With iOS 7 icons you spend more time thinking about what works best with Apple’s paradigm of minimalism, rather than fine-tuning every pixel of a drop-shadow.
Usually my first step is to doodle, so this is what I did:
Phase 0: the quick and dirty phase. Doodle around to get all ideas out of the head.
The first idea I got was to keep the Gentleman theme going and stick to the key components of the original icon: bowler, monocle and mustache.
So, the one in the upper left was an idea I wanted to play with and see if it felt right. I did a few mockups in Illustrator:
Phase 1: Get a look and feel of what the sketches look like. Do a simple mockup.
Anyway, all the mockups weren’t that great and I knew it. I tried variations with…
- a thicker monocle,
- different monocles,
- different bow ties,
- different mustaches,
- and color variations.
But no matter what I did, the proportions were always horrible. In short: too much empty space, even for the minimal taste (which I tend to prefer), and, on iOS the icon looked just plain ugly.
The mockups above are just an abstract of the ideas that did not work out at all. I find it important to highlight the fails, too, not only the success. This would be a pretty boring read otherwise.
In addition, I also had some ideas which turned out to be rather nice and which where looking kind of cool, but I’ll spare you the details since I like the contrast between crap and actual design in this post (– plus, I can keep them in my pocket in case I can make use of them in another project).
A new direction
If you’re a Forrst member, you might have come across my initial draft which looked like this:
One of my first drafts for the new Mr. Reader icon.
The post I linked above highlights how the Forrst community helped me get rid of a lot of unnecessary elements of the icon.
As you can see in the screen shot below, the mockups of the 2nd idea already looked better on the home screen than my initial sketches.
Mr. Reader - The Deployment: invasion of a home screen.
Some users, Forrsters and friends of mine liked the whimsicalness of the final version of my 1st draft. But the feedback from Oliver Fürniß, the developer of Mr. Reader, was the most important part. After all, Oliver was looking for something more modern and not too retro.
U-turn in the right direction
Personally, I felt the same way. It just was too much detail and all of that. So, since it wasn’t exactly what I wanted see on my home screen every day and I went back to the drawing board. After bouncing back one or two ideas with Oliver I focused on my new idea: everything had to go, the monocle, the stache, even the lovely bow tie.
Letting go isn’t hard if you know you can do better. So after having settled with my new idea (see the image below) I did a few color variations… and at one point even a RSS mullet version. The point is, I instantly had a good feeling and my gut told me this is it.
Final Phase. Color iterations and a hockey hair version.
I don’t know why, but somehow I liked the idea that the shade could double as a finger with black nail polish.
Close your eyes and envision a goth kid opening Mr. Reader with the touch of his index finger. Now, breath in deeply. Can you smell the heavy scent of patchouli hovering in front of you? Bask it in and browse that dark feeds of yours.
Okay, admitted… pretty far fetched, and, thanks god it neither is a relevant association, nor one which should be obvious when opening the app.
Back to the facts. The only decision to be made was to settle for a gradient and play with the color of the shade until it fit the design.
Getting closer… last iterations.
So, I made the adjustments, deliberately decided not to use the golden ratio as the yardstick for all things and made the icon a tad smaller. After all iOS 7 is a new playground and nothing is set in stone.
The developer liked it, too, the beta testers also seemed to dig it. And this is how I got to design an icon for one of my favorite apps for the iPad. This was the best Christmas presents out of all of them.
So, what else to than to…
Mr. Dev. You’ve got mail.
In the rare case you haven’t heard of Mr. Reader and why it is such an amazing power tool for plowing through a horde of RSS feeds, head over to my blog and read the article about why this is a must-have tool for RSS power users.
Mr. Reader now feels right at home right at your dock. Here’s a picture of him among friends. They’re having a party at my dock.
All the projects in the list below have already been mentioned by fellow bloggers. Since my doings here on RocketINK aren’t time-sensitive in any way and I did not link to some of the following projects when they hatched, I figured it would be nice to give those people and their projects a dedicated post.
My friends and friends friends make awesome things on the Internet. So here’s a very special linklist:
Gabe Weatherhead - The Collaborator
Gabe had a run this year. He released CriticMarkup which is a benefit for everyone who writes in Markdown and needs to collaborate.
In addition, Gabe amped up his podcasting game with two friends and aside from having a superb new podcast with Technical Difficulties, he now owns the throne for the most beautiful show notes.
Shawn Blanc - A Sweet Tooth For Apps
The Sweet Setup does exactly what it says in the title:
We recommend the best apps for iPhone, iPad, and Mac.
Shawn filled a niche in the vast land of reviews that exist for apps in the Internet and build a site which is dedicated to feature the best of the best. The recommendations are on point and in-depth.
What I like best about The Sweet Setup is that it’s build to be an evergreen. If in trouble or in doubt when trying to choose one of the 1 million plus apps, you better check his site before making rash decisions.
Besides the new website Shawn’s also released the multimedia Delight is in the Details which is all about creative people and their route from zero to a finished product. Check it out.
Brett Terpstra – The Scripting Hydra
Where to start with Brett? He released new add-ons and scripts almost on a weekly basis. Just check out his projects page to get a vague idea of what you can expect when you decide to follow his blog. If you download one of Brett’s projects it’s like taking of one head of a Hydra, you’ll find yourself downloading two more… it’s an endless cycle.
The thing that made every Markdown user happy this year was Brett’s Marked 2 which offers a versatile Markdown toolkit that no writer should pass on.
As if this weren’t enough, there are smaller - but not less usefull - releases for the Markdown community like GrabLinks, Bullseye and ∞ (Brett is probably uploading more useful goodies while I’m typing this).
Justin Lancy – The Travelling Gadgeteer
I came across Justin’s Code Library at Veritrope several years ago. It was the best resource for AppleScripts I’ve met so far. It’s still one of my favorite places to learn AppleScript, find inspiration or missing pieces to a puzzle.
The good news is that he’s transitioning the code library to a new home soon: keep Inspired Tools on your radar for 2014.
Justin’s also a gadget nerd and you can find his recommendations on Traveler Tech – Tools for Modern-Day Explorers soon.
Federico Viticci – The iOS Evangelist
Federico needs no introduction. He started out in 2009 and now he’s a pillar of the iOS community. He published his first book
“Writing On The iPad: Text Automation with Editorial” this year, helped promoting his girlfriends excellent icon set (Essence – Icons & Coffee) and now has a podcast I regularly enjoy to listen to with The Prompt.
Go Federico, go!
David Sparks – Building An iBooks Empire
David continued his Field Guides series in 2013 and the latest addition is the MacSparky Email Field Guide. Just head over to his side and I bet you’ll find something useful for yourself or someone you know.
Side note: The list isn’t in any specific order, but I had to put David all the way down here because I’m a “beleidigte Leberwurst” since he didn’t mention RocketINK in his second MacPower Users Keyboard Maestro podcast. PS: This stanza has to be read like this: ◕‿↼.