Creative review: Defining Camden's new digital presence

Overview

Camden Art Centre has a fantastic reputation within the industry for its diverse range of exhibitions, residencies, and workshops. Being sensitive to Camden’s unique history, Pentagram was appointed to create a visual identity to raise its profile within the art world and the local communities. We were commissioned to ensure the same sensitivity was applied to their new digital presence.

Introduction

Working with Pentagram we knew our designs had to match the expectations of the agency, the client, and our industry. We had to live & breathe Camden Art Centre and its new brand identity. 

We began this exciting project by catching up with the brand designers, they walked us through the guidelines and gave us the opportunity to ask any questions. As we expected, the level of detail and execution was phenomenal. The brand rules were clearly articulated in the document. Still, it was becoming clear we had a few challenges to overcome and the expertise of each department was paramount to its success. 

Challenges

1. Proportional margins

“For each format created, the margin should be established first. As a rule, 4% of the overall width of the format should be used.”

Challenge: How can we apply this rule to multiple devices and screens?

Solution: Through Google Analytics, we were able to pinpoint and prioritise the most popular desktop, tablet & mobile sizes that view their existing site. We would then ask the developers to bridge the gaps for all the devices in between. 

2. Proportional logo scale

“There are 4 main logotype scales that we suggest working with, 100, 80, 60, or 40% of the format width”

Challenge: Does one percentage scale fit all, or do we need to be specific?

Solution: We decided on the consistent use of 40% for larger screens, except 60% for mobile to improve logo legibility.

3. Combining typography with the logo

“Typography used in combination with the logotype – equal cap height and leading”

Challenge: How do we apply this rule to our own modular scale and which type combination do we use?

Solution: Type size to match the logo, this will act as the base for our scale and for consistency we stuck with a type combination found in their brand guidelines.

4. Picking colour from the image

“Creating mood” + “Picking out a colour from the image”

Challenge: How do we expand on this design principle set out by Pentagram without compromising the look & feel of the website?

Solution: This colour rule will only apply to signposts and pages with a featured image at the top of the page, everywhere else will be white to resemble Camden’s physical space.

Their core colours are now black with accompanying tones of grey and their accent colours are determined by the featured image.

Introducing the Divisional Fade System; a super simple colour detector and picker crafted and developed in-house by our development team. In layman’s terms this piece of kit allows the site to scan any featured image and produce 2 high contrasting colours for the typography and background it sits on. We also gave Camden the option to override the colours and guided the picking of accessible colours. So that every eventuality was covered we also decided to fall back to their core colours for pages with no imagery.

5. Proportional logotype scale

“Logotype size = Format width | Display type size = x2.7 of logotype size | Secondary type size = Logotype size”

Challenge 1.0: The final & most challenging was the font size limitation, essentially we were limited to 2 font sizes. These fonts were dictated by the logotype size and this size was determined by the device width it sat on, plus the percentage rule applied to it. Confused yet? We were to begin with!

This font scale flipped our own principles on its head, it was their logo that dedicated the run of play. The design wasn’t clicking into place the way we would have liked. 

We knew at the back of our minds this wasn’t right, best practices always point to the smallest font size first for your typography to scale correctly and work harmoniously in any design.  

Our new challenge was “simple” – How do we merge two, very different design principles together without damaging the brand, pissing off the client, harming the usability of the site so no one visits, and confusing the developers so much their heads explode. 

We had to work in reverse, looking at the sizes we had in front of us we decided to tweak a scale ratio until we found the right fit. For this scale to work in a digital format we needed to bend the guideline rules slightly by adding in two new header sizes and a paragraph size to complete the set.     

To conclude

The project was a success thanks to the talent we have at Effect Digital. It was highly collaborative, with involvement from every department within the agency and the people at Camden Art Centre. We leveraged individual strengths and expertise to create an innovative solution that met their unique needs.

It also required clear goals and objectives, as well as a shared understanding of each department’s roles and responsibilities. Encouraging experimentation, risk-taking, and brainstorming sessions lead us to breakthrough ideas and new perspectives. 

We are all super proud of how creative Camdens’ new online presence looks, the client couldn’t be happier and Pentagram was more than satisfied with what we delivered and how we delivered it. 

At Effect, we believe in the power of creativity & process. When these two collide we can produce anything. We’re a small team of big thinkers and creativity is the inspiration to do something better, smarter, and more meaningful. It can be harnessed to generate ideas that are truly valuable to your business and our process is the key to unlocking these gems and realising their full potential, it’s as simple as that.