Distrakt
+44 (0) 121 212 9737 / team@substrakt.com
© 2018 Substrakt Registered in England. Company no. 5916054

Hepworth Wakefield: The colour and the shape

May 22, 2018

As it’s the Hepworth’s 7th birthday, we decided to take a look back at the work we delivered on the site we launched for them last year.

We wanted to tell you a bit more about the design and front-end engineering decisions that went into creating the site.

Colour

We took a reference from the colour of the building material – concrete. The imposing building is a beautiful colour that changes in from a dusty mid-grey to a dark blue-grey in the (typical) northern elements.

This proved a great background option to break up the page and create contrast between white backgrounds.

The Hepworth Wakefield’s primary brand colour was a teal colour. Whilst this was used in the previous website to good effect, we found it to be not versatile enough to withstand the flexibility of the new website design, sitting atop both light and dark elements. We therefore chose to pull this teal colour up into a brighter range – one that provided sufficient contrast, especially in darker environments.

Shape

David Chipperfield architects created a bold space that shards out into the sky with strong geometric shapes. We wanted to take a cue from these shapes and use these as part of the design. Some early brand refresh work took a similar line, making the logomark stand out more by applying a geometric block shape behind it.

We continued this theme throughout the design, by applying geometric angles to blocks on the page, across the header and logomark, and across the main page content.

But Jim, why would you put yourself through that? Surely you know the rule – the web is made up of boxes. Angles are hard.

We employed a few different techniques to create such shapes.

Single side slanted edge

For angles on just one plane of a shape, we included a pseudo element (:before / :after) with a css transform rotate and/or skew to create an element that is absolutely positioned either above or below the main block element. We can make use of background-color: inherit so the shape takes the same colour as the element background. We can then set the z-index of the pseudo element so it sites behind the main container, giving the effect of a slanted edge.

2+ side slanted edge

Where we wanted slanted edges on two or more sides, we had to look to a different technique: svg masks.
We can take an SVG shape – in this case a quadrilateral with angled edges, and apply it as a mask to an element.

The reason we opted for this, rather than just applying a shape as a background image, is that our page-building system within WordPress, called Construkt, allows our clients the ability to choose from a set of background colours for page elements. Rather than creating a coloured shape for each permutation, we wanted a way to render a geometric shape no matter what colour was chosen. If we wanted to add further colours to the system in the future, or edit colours, we would have to create new coloured shapes – a laborious task.

Once we applied the SVG mask and set it to cover the element using mask-size: cover, we could display geometric shapes across the page designs, across multiple colours, without having to create multiple graphics.

Whilst this technique will only work in more modern browsers, it has the added benefit of degrading gracefully back to a non-angled shape.

 

Snap SVG

Lastly, we wanted something special for the logomark. We wanted to animate an SVG shape, in a way that standard css animations and transforms would not cover. We used snap.svg to animate the path of the SVG shape behind the wordmark.

Take a look.

James Braithwaite