The design process - considerations and constraints (Part 2 of 3)

Creative Director Mark McAulay discusses the process of putting our design skills to work as an agency in part 2 of this series.

Considerations and constraints

  1. What we do must fulfil our objectives
  2. We must communicate the progressive nature of the business
  3. Where possible, we should deliver this as a team of human beings, without compromising the end solution
  4. The full suite must be sympathetic to the history of the agency
  5. As much as we’d love to use all the exotic materials and print finishes, we must show restraint so as not to cheapen our efforts
  6. There is always a financial constraint, even for our own work. What we deliver has to be financially viable

1:189 and the full identity system

From the offset, I insisted that we deliver this as a team. That meant I had to back off a bit and give the studio free reign to experiment, to play with ideas, to work together and to critique the work as it developed. All good things to see happening in a studio. Unfortunately for me, this produced a large body of work that I had to filter through. In the early stages, this wasn’t about arriving at a final piece of work. This process was about investigating type, colour and layout. I expected us to look at all aspects of a logo and establish how everything fits together in a wider system. We had many questions such as “do we need a logo device?”, “do we need more than one typeface?”. This process gave us answers. At least, enough answers to get us through the next stage of development.

​We knew where we were going with colour.

We’d all arrived at roughly the same colour palette in our early ideas. Mearns & Gill have used orange for many years and we like it, it suits us. We decided to turn up the volume and make it more orange. With a final shake of the Pantone book, we had Pantone 021C firmly in our sights. Our scheme was simple. We’d use the orange, black and white throughout.

The great typeface debate raged on throughout, we had several sans-serif and one serif on the table when we worked the logo itself down to the last two. Time to look at our objectives again and see what the solution is.

We needed to represent where we’ve come from, who we are, where we aspire to be, and we must show a bit of personality. We chose NB International and did a bit of custom work on the ampersand to make it our own. The roots of NB International are in traditional book publishing and letraset - which we have an affinity with from our own past. The face works well down at small sizes and, should we ever need to put our logo on the side of an oil tanker, it looks great at scale too. Setting the ampersand gave us just enough playfulness to communicate that, yes we are a serious agency, yes we have a long history, but we also have character. We like to explore, we like to play and we like to push things where we can.

It was at this stage that we had arrived at ‘Since 1936’

As our history is a core element of our rebrand, the idea of weaving it right into the identity was born. Designers use ratios, fibonacci, golden section etc. so we decided to create our own. We looked at the relationship between 19 and 36. That gave a ratio of 1:1.89. Simple. We set “Mearns & Gill” at 36 pt and “since 1936” at 19pt to check the balance and it worked. From here, the ratio was applied to elements within the structure of the logo - the distances between elements, the clear space around the logo and the construction of the ampersand. The ratio was then used to create a grid. Everything we produce conforms to the ratio in one way or another.

Stationery and documents

Logo done, underlying grid system done and tested. The time had come to complete the letterheads, invoices, documents, comp slips and the big one…the business card. Designers just LOVE to go nuts over a business card. 

We showed a lot of restraint to simplify and respect the grid throughout but when it came to the business card, we went big. Our idea was to duplex our cards with orange plike and frost white colorplan, both wonderful materials from G.F Smith. We printed black onto the white colorplan and we hit the orange plike with black foil to leave only our ampersand exposed. Hitting the plike with enough pressure leaves the ampersand raised up from the surface. Plike has a unique feel to it which we deliberately chose to bring the sense of touch into play. We wanted to make something which feels great in the hand. Selecting something like plike for its texture, then covering almost all of it with foil is not exactly sensible but it’s definitely unique. Let’s do it.

To the printers

We visited our friends at Windmill and spent a couple of hours with them discussing how silly our business card idea was. We chose Windmill for a reason. They’re just as excited about their craft as we are so they fired up the press, loaded in some black foil, padded the bed out a bit and started throwing Plike at it.

The design process - considerations and constraints (Part 2 of 3)

To be honest, none of us thought this would work out. The foil coverage we were talking about was extreme but we didn’t give up and we left the printers that day with a set of prototype business cards, a couple of which I carried around in my pocket for a couple of weeks to test how the finishing would hold up. The results of this were far better than expected, a little bit of degradation at the corners but that added to the character. We love it and once you feel it in your hands, you’ll understand too. Words are no substitute for touch here.

Let’s talk code for a minute

Creating a grid for the website using the 1:189 ratio that also adhered to a baseline presented several challenges. The web isn’t set on a baseline and 1:189 results is an awkward split for readability on all but medium sized screens.

We prototyped several layouts using various column patterns. After many hours of bad language, we found our grid. A full width grid comprised of 12 columns, and then further broken down into a 50/50 split down the middle. This gives us the flexibility to break where we need to.

All margins and element sizes are calculated using percentages based on the width and height of the logo in relation to the ratio itself. If we scale the logo by 10%, everything else scales in line.

Locking the content to a baseline on the web isn’t easy!

In the end, we solved this using some clever maths and a lot of trial and error.

Our Front End uses Foundation 6 – a lightweight and responsive framework (our CSS file is less than 10kb if anyone is keeping score). Our Back End is Craft CMS. Responsive Content Management and powerful content relationships being two main reasons for this choice. 

Working on our own website provided a great opportunity to expand skillsets by using new techniques and technologies. We experimented and tested new ideas, while also using some tried and tested methods. We observe and adapt the site as we do any other site we work on. In its short lifespan, it’s already had a major Front End upgrade and will receive further updates soon.

Conclusion

You see, this isn’t about plucking a logo out of the air or about doing just enough to get by. This is about careful thought, research, communication, teamwork, commercial focus and hard graft. Ensuring every touchpoint is in tune and that every element functions as part of the wider system. Or as we call it, design.

Subscribe to our updates

Topics covered