The previous design did us proud. It was a typographical showcase for Gill Sans – literally the face of our company. However, a few issues developed over time. The most glaringly obvious being the lack of responsiveness – this never looked great for a modern web team. The typography was always small, and modern high definition screens seem to shrink it further on an annual basis. There were also a few other issues, but to sum up, the site was no longer reflective of us as a team or company.
One of the main reasons it’s taken us so long to launch a new site is that we are extremely busy and get busier with each passing year. It’s testament to the design, and the timeless Gill Sans, that the site continued to serve us so well despite the rest of the world moving on.
I think I’ve started a redesign project every year since I’ve been employed here, usually during the slight Christmas lull. Some ideas developed more than others, most only made it to the prototype stage. Eventually, towards the end of 2016, various different projects and plans started to align, which opened up a clear path for us to have a proper run at a new site – you’ll learn more about those in the coming months.
Visual design
For that reason, I’m going to stray away from some of the core design decisions and layout principles and focus on the visual look and feel of the redesign.
In with the Nova
Gill Sans has been the face of our company for years. It’s a classic, instantly recognisable font, with bags of history and solid British personality. It works great at larger sizes, excelling at being a display font. It would have been a bold choice to move away from it.
It does have issues though. It’s not a great font for legible body copy. Its x-height is a bit large, and it just doesn’t feel that great to read. It’s also a font from a different, pre-digital generation, so it was never designed with screens in mind.
Fortunately, Monotype are more than aware of these issues. At the start of 2016, they released a new version of Gill Sans for the modern world – Gill Sans Nova. They retooled the classic font for the next generation of digital work, with refined shapes, weights and alternative characters, to keep the face fresh and ready for the next hundred years.
With this happy coincidence, it was decided that as a forward thinking web shop, we should adopt the new Gill Sans Nova as the face of our company. It retains the same character but improves the usability and readability. It also remains close enough for it not to completely date all our old branding too much.
Ready, Set, Logo
Our logo is the most visible use of Gill Sans, so was reset for Nova. We wanted to keep it simple and easily reproducible, so we made sure the logo can be easily built in the browser without too much customisation.
Out go the varying weights, in comes a thicker, more solid looking medium weight throughout. We’ve also moved to using just a single colour throughout, which all helps in making the logo simpler and bolder.
The trickiest part was then deciding how to make the slash work. The main reason for the different colours and weights was to differentiate the slash and the ‘it’. It took a few experiments before we settled on one that had a good weight balance and didn’t confuse too much with being a stylised lowercase ‘l’.
Supporting cast
The previous site design was pure Gill Sans, which lent a certain purity. Unfortunately, as mentioned earlier, Gill Sans still isn’t a very good font for body copy and Gill Sans Nova doesn’t really try to address that issue.
So we needed a new body font for the site. After testing a few different combinations we settled on Freight Sans which is a friendly, readable font, that actually shares a lot of the same characteristics as Gill Sans. They play off each other quite pleasingly, with Freight’s more open nature and proportions making it much more comfortable to read at smaller sizes.
Slash it
Over time the shortened ‘/it’ logo had slowly become part of our branding. It takes the job of becoming our logo when the, frankly unwieldy, full title doesn’t fit. While we were looking at the branding it was sensible to work on a more fleshed out icon solution.
The shape was a happy accident. The irregular polygon shape was the result of experimenting with clipping paths in the browser for other parts of the overall site design – mainly the author headshots. This was a popular part of the initial site re-design, so we experimented with broadening the use and incorporated it into the small logo. It has now become affectionately know as The Quad – mostly because of the quadrilateral, partly as a nod to a legendary Liverpool club.
Mid Century Routes
As with the font, we didn’t feel it was necessary to move too far away from the branding we have had for several years. So when it came to the colour palette there wasn’t too much experimentation.
The interconnect/it red stays as #de1301. We have then subtly mixed the red in the rest of the palette. All of the greys and blacks take on a slight warmness.
This almost monochrome colour palette, coupled with the bold use of Gill Sans Nova, echoes classic mid-century advertising and graphic design. We decided to work on the treatment of images, to try and extend this classic feel.
We wanted a technique that required the lowest barrier of entry for authors to deliver consistent looking images. The best way for doing this is to hand manipulations over to the browser.
With this in mind, for the hero images I decided to use CSS blending modes to apply a multiply filter, over a red background. There is also a slight greyscale filter to tone the image’s original colour back a touch. Coupled with the large stretched object-fit image, it results in an eye-catching, stylised result that is easy for anyone in the team to reproduce by simply uploading an image.
We reserved this treatment just for the hero images. We experimented with using it more extensively but found that it started to reduce the impact of the effect and it all became a bit too much to digest visually.
Tone of voice
All of these changes feed into the overall tone of voice. It’s a tricky job capturing the essence of a company and projecting it via a site design. We like to think of ourselves as dependable, professional, approachable, friendly, authoritative, understated and lots of other adjectives that describe our company culture.
The design is deliberately simple; we’ve intentionally stayed away from trends and there are no unnecessarily extravagant flourishes or over the top animations.
It’s set out to be subtle, classy, usable and easy to read and, hopefully, does that ever-so-subtle job of subliminally projecting what we are like to work with.
As a bonus, it should also help us squeeze another seven years out of the site before we need to think about it again.
