You’re reading all articles tagged 'identity'
Identity Design discussion on Elastic Brand podcast
I was recently a guest on The Elastic Brand podcast, a new series by Elizabeth Elcoate talking about brand design with the emphasis on digital. You can listen to our discussion on episode two.
We had a great time chatting over subjects like process, my recent work for iHasco, and the fact that no one cares about your logo. I found it particulary interesting comparing with the first episode where Mike Kus explained his process, which has some key differences to mine.
A few hours after we recorded this episode, Slack unveiled their new logo. Shame about the timing, it would’ve been good to discuss that, particularly in the context of the inevitable “I would’ve done it like this” comments!
New Identity for iHasco
Started in 2007, ‘The Interactive Health and Safety Company’ are providers of high-quality Health & Safety and HR Compliance eLearning courses. Nowadays, their name is shortened to just iHasco.
Back in June, Nathan Pitman at iHasco approached me to redesign their logo and create the first identity for the company. There has never been one beyond the logo itself – whenever the in-house creatives began a new project, there was no visual starting point to work from.
Their logo, with it’s ‘pinwheel’ mark has been through a few minor iterations over the years:
Working with Nathan and the in-house creative team, we identified areas to address in the logo:
- The pinhweel device wasn’t quite unique or ownable enough, but the use of triangles to represent Health and Safety is a sound one
- The italicised I at the start meant it wasn’t easily read as word
- The letter ‘C’ ends abruptly, and doesn’t lead the eye smoothly into the next letter
- Incorpoating the strapline made the logo unwieldy
- The logo doesn’t work on multple backgrounds
With logo redesigns, my preference is almost always to evolve the existing logo and keep the equity. While other directions where considered, the final chosen version was indeed an evolution of the existing pinwheel logo:
The main changes I made were to place all the sections together (no more keylines), but move one triangle out of the group to make it more dynamic. This gives the suggestion that the triangle could be either moving out or in, but also highlights the yellow ‘health and safety’ triangle. The colours were also updated, with a new custom logotype that echoes the triangle in the A.
The C also connects better to the O, which is one of those subtle things that helps the logo on a sub-conscious level:
This also meant the logomark was now asymmetrical, moving the logo away from a straight hexagon to give it a more unique silhouette. The 30º angle of the pinwheel became the basic visual element for the identity.
From an early stage, there was typeface that I felt suited this project particulary well, Buenos Airies by Luzi Type. It has all the attributes that I was looking for:
- I specifically wanted a clean, unfussy sans-serif to set a contemporary and approachable tone
- Primary lowercase ‘a’ to suggest simplicity
- Tall x-height and wide character shape for legibility and clarity
- Tails on the lowercase-a and lowercase-l, subtly suggest cursive handwriting
- The terminals of lowercase letters such as e and c point towards the next letter, rather than back at itself, leading the eye into the next letter.
This was then paired with Handsome Pro Bold to create an emphasis style – a way of highlighting key words or short phrases.
Ingredients and Recipes
Not every company needs highly prescriptive identity guidelines, or endless ‘do and don’t’ examples. In iHasco’s case, the creatives in each department needed a large degree of flexibility with colour and typography use. Each of their online courses have their own flavour, and during discussions we kept coming back to Netflix as a metaphor to explain this. A wide range of content to watch, each with its own individual identity, but wrapped up in a design that is unmistakably Netflix.
Essentially, there are four key ingredients that identify a design as iHasco: Logo, Colour, Type and Shape. Instead of being prescriptive, I created a series of thumbnail layouts for different contexts, showing the variety of ways that the ingredients of the identity could be combined. There is never just one solution for a particular context. These ‘recipes’ are a little more involved than a black and white wireframe, but don’t show any specific content.
HTML not PDF
When it comes to providing identity guidelines, I feel strongly that they shouldn’t be in paper or PDF form. A ‘fixed’ document like that means that it’s harder to evolve and update, with some staff keeping outdated versions, not aware that a new version has been published. The web is the perfect medium for this ‘single source of truth’, with Jekyll pages providing the framework, and versioning handled by Git. HTML pages also make it easy to get assets – not just in terms of download links, but specific logo versions can simply be drag and dropped out of the guide.
There’s a lot more to the guidelines than I’ve mentioned here, but the iHasco identity guidelines are publicly available on Github, and in just the few weeks since my part in the project finished, they’re already growing and evolving!
Firefox Identity Project
I was only a few days into my summer holiday when my twitter replies suddenly went mental. Unexpectedly, a project I’d been working on with Mozilla had been publicly released for feedback. Now that I’m back the moment has kind of passed, but I still wanted to blog something about the project and the thinking behind it.
Firefox 57 launched in Autumn 2017 with a redesigned UI and the latest version of the Firefox icon, designed in-house by Sean Martell. This version fixes a problem I’ve had with it from the beginning: the odd spiky tail. The Firefox now has a curvaceous tail made of flame, rather than spikes:
This version also removes various details and takes it away from being a Red Fox to more of an elemental being. I often think of it as looking more like a nebula than anything solid – I love it. This version also introduced the bright Photon colour palette which informed lot of the work to come.
It was around this time that Mozilla approached me to work on an identity for Firefox. Firefox has always been the main product, but the family is growing with apps like Send, Lockbox and Focus. The goal was twofold: Design a system to make all these products visually cohesive, as well as a ‘masterbrand’ logo and identity to encompass all the products. The goal wasn’t to redesign the Firefox icon as such, but there may be some changes in order to create a system.
To do this, Mozilla used three designers to explore three different paths: Sean Martell (Communication Design Lead at Mozilla), Ramotion, and myself. While we worked sort-of-seperately, each path inspired other paths, and together we created enough ideas to fill a large coffee table book. Hopefully we’ll able to publish some of these in the future, and explain the thought processes that led us to where we are now.
Over time, the work was honed down to just two paths – Ramotion stayed on theirs, while the work that Sean and I were doing merged organically into one.
System 1 represents the path that Sean and I took:
System 2 represents the path that Ramotion took:
The unease that comes with such projects is the inevitable snark-fest that follows. I deliberately avoided the comments sections on various sites, but one response that I heard loud and clear was that the System 1 masterbrand logo was a rip-off of Gitlab. Yes, there are certain similiarities in a face-on geometric fox head, but it’s lazy to suggest it’s the same logo. I’d never even heard of Gitlab until that point, and neither would the general audience of Firefox.
I also read the Design Week article which reported Hicksdesign as being a ‘London-based branding studio’ (wrong on both counts, but hey, it’s a mention!).
The project is still not complete by any means, but we’re getting nearer to a solution. I’m sure the public release has given Mozilla plenty to chew over ;)