IF is a newly formed studio working to change how people think about data, privacy and security. They work closely with clients to imagine, test and build products and services that empower people.

In early 2016, they approached me to create an identity and content managed website for the studio.

Identity

The brief for the identity was quite loose to begin with, which was good because it meant initial ideas and sketches could help to refine and uncover what was needed. I began working to five guiding principles we established as important characteristics of IF's work and approach – reinventing, breaking and building, transforming, surprise and change.

Despite there being some nice ideas for how the logotype could change and morph to communicate change, there was a worry that most of the ideas felt a bit too technical and masculine.

Through this process, we realised that IF really wanted to move away from technical, regimented shapes, in favour of more human, soft lines. This would help differentiate them and do away with the baggage and preconceptions that companies working with security and privacy often have.

It was agreed there was something about the lone sketch to the right of the photograph above. Something, more human, yet still structured.

I took the sketch into the computer and started drawing things out in illustrator, but it still just felt too uniform.

Then it struck me. It wasn't feeling natural or human, because it wasn't. I'd left pen and paper behind and gone into the computer too soon, a classic mistake.

What could be more human than handwriting and the flow of written movements? So that's what I explored, settling on the option below at the bottom right.

Having consensus that this route was strong, it was then relatively easy to make multiple sketches to find the right forms.

I could do the rest in the computer to bring back a little precision and slightly stronger lines. The final brainwave came when I realised we could maybe find a way to draw the logotype out on screen — this would be the final piece of the puzzle in communicating the idea of surprise and transformation.

I ended up doing this drawing by animating SVG graphics with CSS on the website. It animates as below.

Website

The website design and build work I then carried out over the successive few months. The site needed to be simple and communicative. We boiled it down to three main areas in the first instance – Projects, Ideas and Studio with a view to that iterating as and when the studio grows in the future. It is a modular, content managed site built using Craft CMS.

In terms of graphic design, I worked with a pre-existing palette that had been defined by the studio, adapting it slightly to make the colours more punchy on screen. After some experimenting, we settled on Circular Bold and Calibre Regular for headings and body copy respectively.

While developing the site, I also made sure to put together a living style guide, shown below. The idea here being to expose the modules and styles used across the site to make iterating them easier. This is also something that can evolve and become increasingly useful as the company grows.

To see the site, go to projectsbyif.com