As Alfred App turned 5 years old last week and I've been lucky to work on the design, branding and UI during that period, I thought I would document how it has evolved.
Alfred beta
When Vero and Andrew came to me in 2009 with an idea for a new quick launcher for OSX, I jumped at the chance to create the original branding and website. They had a name –Alfred– but nothing else, so we thrashed out some ideas. Alfred is a quintessentially British name, so it inspired us to go with a classic bowler hat with an old-style magnifying glass for the app icon. I then proceeded to sketch out some initial ideas and throw some shapes in illustrator. Having never worked on an app icon for OSX before, I had to research best practices for formats and tools to create the icon. It also involved learning how to use the mesh tool in illustrator, which can be rather daunting when you've never used it before. We worked through some iterations shown below before we settled on the Alfred beta icon.
The next thing we needed to work on was the website. It had to be simple (reflecting the app itself), impactful and beautiful. I went with a simple 2-colour design with centered text and some small decoration items. The beta version launched in March 2010.
It went down quite well within the design community, even drawing the attention of a few 'web celebrities'!
Beautiful, simple, focused site: alfredapp.com
Alfred grows up - v1
The beta period was very well received by the Apple community and Andrew and Vero continued to refine the UI and add features based on the feedback from the beta launch. The version numbers were growing rapidly and we were nearing the launch of v1 in 2011. With this came a need to re-design the website and work on some of the interface iconography for the new features. We decided to keep the icon the same for now and just focus on a fresh look for the website plus the introduction of the Powerpack. I also worked with Andrew on some of the UI design for the Powerpack features. Andrew, who is also an excellent UI designer as well as a developer, already had most of the UI planned out so we just researched some ideas together for various aspects of the interface. A lot of this work was simplified down or shelved in the end but it's interesting to see some of the work in progress.
We also added a few variations on the Alfred icon for other features or marketing campaigns.
Alfred V2
Alfred V2 (2013) gave us the chance to not only refine and iterate on a lot of work we had done before, but also give a fresh lick of paint to the App icon and iconography. For the Alfred icon, I played around with new textures for the hat and better lighting, but the main focus was on making the magnifying glass look more realistic. I experimented with thick and thin bezels, leather textures, new lighting sources for the metal frame and even gold!
In the end we settled on a thinner bezel silver frame and adding a new leather texture on the handle, with better lighting and shadow effects for the glass and frame.
The iconography needed updating for the new retina screens that were just being released. Luckily I had done all the originals as vectors so it was just a case of redrawing a few to make them look more realistic and then updating the sizes and tweaking some of the paths to make sure all the pixels looked sharp and crisp.
For the website, Andrew & Vero didn't want to completely overhaul the look and feel we had defined with V1, so it was more a case of giving it a fresh look and bringing it up-to-date. We stripped it back to be more minimal and refined with small hints of the Alfred wallpaper and other decorative elements. It was also built responsively to work across all devices. Alfred V2 launched in 2013.
Alfred Remote and beyond
Late last year and early this year, I got to work on Alfred's newest product: Remote. The website needed to fit in with the current look and feel but also stand by itself as a separate micro-site. We used a fixed header photo led approach with a new intro video and a simple stripped back layout for the rest of the page.
So there you have it, an overview of how the Alfred brand and design has evolved over the last 5 years. Who knows what will happen with v3?