Design Overview

Robert Bringhurst's seminal guide on working with typefaces – The Elements of Typographic Style – made a big impact on 23 year old me. I have no formal education in design and a serious looking book like that –  recommended by all my favourite designers – well, I was desperate to like it! But I think it's had a bigger impact than most other things I have read on design. 

One of the key points the author makes is the service of content, two words that are thrown about a lot in the tech world but not in the way we mean here. He speaks about how the content and its qualities should play a vital role in the choosing of the typeface, the proportions of the page and even the extra space you leave for the binding of the book. 

 Another point he spoke at length about was the even colour on a page – the idea that you create a clear and coherent hierarchy in your work – by using a minimal range of sizes and weights. The idea of small caps is to let you include an abbreviation like WHO in a paragraph of text, without the all-caps word screaming at you. The paragraph stays an even colour and the word gets the treatment it deserves. 


Selecting the typeface

I took up an anything-but-Helvetica stance on the choice of typeface. We ultimately settled on Open Sans after considering HFJ's Ideal Sans and Martin Majoor's Scala Sans. I felt it was important to choose a humanist sans – something with graceful proportions and open counters that give you a great mix of elegance in continuous reading and high legibility. Back then, straying even slightly from the platform's choice of typeface was considered heresy – it was ruggedly discussed but in the end we decided to take a 'risk' and work with a typeface designed for continuous reading that had been refined for screens vs working with a typeface designed with a completely different use in mind!

To Do: Notes on legibility and readability


THE FINALISTS
To do: notes on why Open Sans won



Conversation View

I love Instapaper. I absolutely loved it back in the day and it still remains one of my very favourite apps ever made. It's a wonderful example of the lessons modern apps can learn from book and print typography. In the initial days, Instapaper felt like witchcraft – it was that good. The idea with the conversation view was to try and create an instapaper-like reading experience. 

A lot of our competitors were hooked to organising and triaging mail – and that shone through in their designs – the conversation pages were geared for actioning, not for reading. I felt this was not right.

To do: A note about our approach



Colour, interaction and playfulness 

The design of the app at a 'resting' state was inspired heavily by Bringhurst and Spiekermann and Instapaper. The design of the app when the user started interacting with it is another story. Once the user started interacting with the app, there was a blast of colour and energy.

In practice, I loved how this turned out – in the resting state, you had something that was even and pleasant and had a grace and order to it. And then you had the interactions that made sure it didn't feel boring. The general pitfall a lot of apps (and our competitors like gmail) fall into is designing colours purely for the resting state – this probably has a lot to do with the history of how websites were made – predominantly in Photoshop through the design process – most stakeholders had to be satisfied and a greyscale looking app would not cut the mustard. It's strange – even our earlier versions of Photoshop designs were loaded with colour – it was only in the latter stages that the new language took hold.
 
To Do: explain each image