We’re used to taking rich digital designs inherited from print-based brand guidelines and turning them into dynamic websites, adapting to both content and screen size.

However, the design brief from Eat Natural posed the challenge of creating unique hand-drawn visual effects, pushing the boundaries of what is possible in today’s web browsers.

Honing hand-crafted details.

Eat Natural’s brand aesthetic starts with the handmade bars it produces in its factory – known as the ‘Makery’. Attention to detail in the mix of ingredients is combined with the quirky finish of something created by hand.

Despite the trend for using the term ‘hand-crafted’ to denote bespoke coding in web development, many websites give the distinct impression of being created by machines. Regular, even lines and repetitive blocks of content, functional in delivering information but devoid of charm. Many restrictions are imposed by the front-end languages of HTML and CSS – and they often make sense – providing a much-needed standardisation and familiarity to how we experience content on the web. Yet what if we wanted to take Eat Natural’s hand-drawn sensibility and translate that to a digital medium which prefers straight edges?

Our design studio challenged us to implement a design that stayed true to brand with nearly every edge and border sporting a unique and slightly uneven line!

Spirit of experimentation.

Ironically, this would have been easier to do 10 years ago when websites were often coded with fixed layouts and proportions – we could have used static images with no room for flexibility in the content. In today’s realm of responsive web design, where containers expand and contract to fit content and screen widths, simply using a static image would not work. We discovered a JavaScript library that applies ready-made sketch effects to straight lines, but the sketch effect was quite different to what we were aiming for. When you use pre-built solutions your creativity is restricted to someone else’s way of doing things.

The Web Development team went off to CodePen – a popular front-end developer playground – to test out some ideas. For some parts of the Eat Natural site, standard SVG (scalable vector graphics) shapes could be used as backgrounds, but for all the boxes and buttons, which had variable content, another approach had to be figured out. Static SVGs weren’t up to the task because any uneven edges would be stretched and distorted with the changing proportions.

We started by working out how to create a standard square SVG, which we could then ‘crumple’ into a suitably uneven form. The SVG specification offers a range of filters (similar to the filters you get in Photoshop). When these filters are combined in various ways they can create unusual effects. We found that combining displacement and turbulence filters in a chain would distort a rectangular SVG so the edges became uneven and we could use the values fed to the filters to create unique instances of ‘squiggle’. This also worked when applying the filters to a more conventional CSS shape, but unfortunately this didn’t work for all browsers. The minefield of browser compatibility is getting less treacherous, but when you attempt new things you have to be careful!

Flexing the effects.

Proceeding with the SVG shapes, we found that the sharpness of the borders would only be preserved if we could correctly calculate the proportions of the SVG in relation to the text it surrounded. SVGs don’t have pixels like pngs and jpegs do, but their dimensions are still measured in pixels and any details would be stretched and squashed accordingly. We’ve all seen horribly stretched images in banners on poorly-coded websites and that simply wouldn’t do!

To overcome this limitation we created a JavaScript function to take the width and height of the content area and dynamically create an SVG shape with the distorted edges filter to match those dimensions precisely. At the same time, we could generate random numbers to plug into the SVG filter values meaning that each shape’s edges were unique. Every button on the site is slightly different from the others – each unique just like every Eat Natural bar!

Honey brings it all together.

Our Senior Developer, Matt, found a nice additional touch – we could trigger the random numbers used for the filters to change on mouse over, meaning the buttons could animate in a ‘stop-motion’ way when a user hovers over them.

The resulting effect is quite unique to the Eat Natural website, evoking the hand-made shapes of their bars and complementing the truly hand-drawn artwork supplied by our Studio. In addition, we employed SVG effects to crop images with uneven borders so they could float over background textures. Adam, one of our Senior Designers, provided elegant SVG animations exported from After Effects, which you can read about in the near future.

Visit the Eat Natural website to enjoy a hand-crafted digital experience from Creative Sponge’s very own makery.