I was a big fan of Leo Boyd’s work even before I met him. Then I met him, they say never meet your heroes and they are right wrong! We collaborated to create a website where Leo could sell his work and have more control over the design and functionality of the site.

Built on WordPress

It’s no secret, I’m a big fan of WordPress. It’s open source which means it’s free to use, build on and improve yourself if it’s not cutting it. We have control over every little bit of the site unlike other services that look after the design and functionality and may charge you for that service. Here we are a little more punk rock and we built our own. With a little help from the WooCommerce plugin.

The Design

Leo has very distinctive style. So we had a few options in terms of direction, we could let the work do the talking and create a “clean, white & minimal” design. Alternatively we could make the site feel like a Leo Boyd piece of work. We chose the latter.

Technical challenges

Leo’s work has a lot of texture. To replicate the paper and printed paint within the website is the perfect recipe for a sluggish website. Loading all those images and background textures can cause the site to be so slow, very few would stick around to see them. Considering each coloured texture would need it’s own image we could only afford one or two anyway which wouldn’t replicate the depth of Leo’s work anyway.

Creative solutions

There’s a principle in software development called ‘DRY code’ which means ‘Don’t repeat yourself’. In a nutshell—don’t write the same code over and over, write code that can be reused.

I applied the principle to creating a system that could give us access to a infinite number of coloured textures. The system used three elements:

1. A single image of a seamless paper texture that can be repeated to cover an area of any size.
2. A torn paper vector graphic that can also be repeated and scaled infiatily to create edges and borders.
3. A background colour. This can be any colour value, giving us and unlimited variations.

All it took to make the following design assets is a single image of a texture and a minimal amount of code. There’s enough detail in both the texture and torn paper vector graphic to hide the fact they are being repeated.

Why did we bother going to all this effort? We could have just made 18 textures and be done with it. The performance of the site, how fast it loads, how quickly the user and browse and experience the site is determined by internet speeds and how large the website it do download. We have control over the how large the site is so it’s our responsibility it ensure it’s only as big as it needs to be. This website happens to perform well thanks to our texture design system.