Choosy Icon

Choosy is one of those tiny pieces of software that quickly becomes indispensable. Its premise is beautifully simple: open the right link in the right browser, every time.

That premise belies its incredibly power though. Choosy also lets you set behaviours and customs actions. Always open mail:to links in Chrome? No sweat. Send a link from Chrome to Safari? Easy. The accompanying extensions – for all of the major browsers – make that a piece of cake.

I was introduced to Choosy by George Brocklehurst, a former colleague and Choosy's creator (when he saw me copying and pasting links between browsers). I used it for years and was dismayed when it finally stopped working because of changes in OSX.

The old version of the Choosy icon

The old version of the Choosy icon

When it came time to update Choosy, I happily took George up on his offer to update the icon. The previous icon felt complicated, especially given how simple Choosy is to use. In fairness, the original icon was a product of its time and reflected Apple's Aqua aesthetic with reflections, gradients, and 3D effects.

My goal for the icon’s redesign was to simplify it as much as possible. It needed to feel elegant, simple, and straightforward.

After some thought, I chose to base the new version on one of the original icon’s triangles. This creates a tie between the original icon and the new one. It's a strong geometric element and communicates the concepts of direction, navigation and movement.

Finding the proper balance of the C to the triangle proved to be a surprising challenge (turns out that mathematical alignment was completely visually wrong). I also found drawing a geometrically perfect triangle with rounded corners very, very difficult (I was trying to use the Pathfinder tool to merge circles with the corners of a triangle and then remove the negative spaces).

Eventually, I realised that Adobe had probably solved this problem. A quick Google search later and I used the incredibly simple “round corners” option. ಠ_ಠ 


In the end, I’m very happy with how the final version turned out. A particularly difficult challenge was ensuring that the icon represented well at all sizes – as small as 16 pixels square, for use in the Apple menu bar and as a favicon (the 16 pixel square version actually has a slightly different layout and font weight to render properly).

The final icon. From left to right at 1024 x 1024, 512 x 512, 256 x 256, 128 x 128, 64 x 64 and the tiny 16 x 16!

And here’s what Choosy looks like when it’s running in your Mac’s menu bar:

Choosy in the menu bar

Choosy, active state, in the menu bar

You can buy Choosy for $10 USD. It’s worth every penny.

Eva-Lotta’s Sketchnotes

Eva-Lotta Lamm is well known for her sketchnotes, beautifully drawn notes taken on conference talks.

Back in 2013, my friend Steve Marshall asked me to speak at the Expedia Summer Symposium. Steve knows Eva-Lotta from their time together at Yahoo!, so I didn’t think anything of seeing her at the evening. Also, I’d just started at Expedia that week and was singularly focussed on delivering a good talk.

I spoke about how wayfinding is an intrinsic part of the human brain’s spatial awareness (memory palaces!), how this should be applied to signage systems, and how it can benefit the web.

A few weeks later, Eva-Lotta messaged me to tell me that her sketchnotes from my talk were on Flickr. What I didn’t realise until April of this year is that, for the fourth time, she compiled all of her lovely notes into a book.

She sent me a digital copy and it’s a great piece, full of lettering, beautiful sketches and genuinely interesting tidbits.

Go and grab a copy!

SuperLocate

In 2013, my friend (and former colleague at Reevoo) Chris Zetter released an iPhone app, SuperLocate. Like all good apps, it solves a problem that he had: how to find the nearest grocery store. 

I volunteered to help with the interaction design and the flow of the user journeys. Additionally, I contributed to the visual styling and the refinement of the app icon.

Overview

The app opens with half the screen devoted to a map view, and the other half a list of the nearby grocery stores. If the user touches the map, the list collapses. This allows the user to pan and zoom the map to refine their search.

Selecting a grocery store from the list brings up the hours of operation, as well as giving the user options for walking and driving directions, and calling the store.

Early Sketches

Sketch for main screen (top) and the About/credits screen (below)

Sketch of supermarket screen (top) showing opening hours, walking and driving directions

Sketch of supermarket screen (top) showing opening hours, walking and driving directions


Main screen

Main screen with listings visible

Supermarket screen

Supermarket screen

Icon design (from left to right): original, revised, alternate revised

The app is simple, intuitive, and a brilliant little side project from a very talented developer. Check out Superlocate (App store link) on the UK App store.

Eames and Delaunay Triangles

Recently, I was experimenting with a new illustration style. Rather than render an object in its whole, I abstracted the representation slightly by using geometric planes. At first, I tried using polygons but the overall effect was jumbled and not quite what I wanted.

After doing some reading about polygons and geometric planes, I eventually came across Delaunay triangulation. The mathematics behind them are fascinating but I was instantly drawn to their application to my problem.

After drawing a couple of simple objects with Delaunay triangles, I decided to apply them to an idea I had for a series of prints. My friend Steve is passionate about mid-century modern furniture and we’d recently had a conversation about the work of Charles and Ray Eames.

With that conversation fresh in mind, I drew the Eames’ classic chairs with Delaunay triangles, wrote a short history of each chair, and had the finished posters printed on a beautiful mocha FSC paper.

The finished posters:

Eames DAW (Dining Height Armchair Wood Base)

Eames DSW (Dining Height Side Chair Wood Base)

Eames DSR (Dining Height Side Chair Rod Base)

Detail of the so-called Eiffel Tower base

Detail of the so-called Eiffel Tower base

Detail of the DAW seat

Detail of the DAW seat

It was only after I finished my prints (and drawing hundreds and hundreds of precise triangles) that I discovered DMesh – a beautiful little piece of software that will render a vector version of any raster images with Delaunay triangles. Oh well. ;)

IFTTT's Animated GIF

Animated GIFs in emails are by no means new but it's rare that one, like this one from IFTTT for its latest product Do, stops and makes me stare.

ifttt-animated-gif.gif

Just the right amount of animation, stretch, bounce and easing.

Mesmerising.


Update: in contrast, here's an example of what might be the dullest animated GIF ever to be crammed into a marketing email.

Yeast Bakery's Mince Pies

I'm tempted to say, right off the bat, that these are the best mince pies in London. If they're not, they're certainly a contender for that title, something I feel somewhat qualified to judge*.

Yeast Bakery's mince pies are beautiful. Every single part of them feels as though it was created with love, care and attention. The details are beautiful and carefully considered as well. When I picked up the box, I was immediately drawn to the paper tags, a lovely, off-white, natural paper with a lovely toot. When I complimented Angela (one of the owners) on the tags, she laughed and told me that she'd made the paper herself. Astonishing.

And then there are the pies themselves:

They're beautifully constructed and perfectly baked. The short crust pastry is surprisingly substantial and gives these pies a wonderful weight – they don't fall apart in your hand like the Duchy Originals. That weight only enhances the experience in that each pie feels more solid and more real than say, the thin crust mince pies from Konditor and Cook. As you'll see below, the pastry maintains its shape and rise even as it's being eaten. 

Form aside, they're delicious. The mince filling is rich, moist and perfect. It's a classic mixture of fruit and feels instantly familiar without being tired. It's a perfect example of how if something isn't broken, it shouldn't be fixed (Heston Blumenthal should take note). Frankly, I can't wait to go back this Saturday for more.

Yeast Bakery (map)
Arch 356
Westgate Street
London
E8 3RL
Open to the public Saturdays

* When I worked at Reevoo, a colleague brought in every single brand of mince pie available and we spent a morning tasting and reviewing them. He and I also once tracked the number of mince pies that we consumed in the month of December. It was well over 30 pies each when we called off the tally. 

Film Logotype: Guardians of the Galaxy

I've written before about Marvel's attention to design when it comes to film titles and end credits and the new trailer for Guardians of the Galaxy is no exception. I'm rarely a fan of movie logotypes, particularly within the science fiction and action genres – they're often clichéd treatments involving chrome/metal, 3D extrusions, gradients, rough or degraded typography, and the same fonts.

For me, the logotype for Guardians of the Galaxy is the exception to the rule, in no small part thanks to its details. The 3D extrusion is minimal and elegant. While there's still a metallic treatment, it's somewhat unique in its subtly (compare it to any of the typographic treatments for any of the Robocop films, remake included) and in that the metal is rusted, worn and old.

But really, it's the details in the lettering that delight me: the way the letterform of the U accommodates its neighbouring A; the overlap of the T and the H in the smaller text. It shows care and attention to detail.