In Pieces: A splendid showcase of low poly illustration & CSS animation

The last time I thoroughly enjoyed a full digital experience consisting of storytelling, illustration and animation about educational subjects was with “WWF Together” app. It’s hard to get that same holistic experience again – something that good – but I actually did get one a few days ago with the project “In Pieces”, and it just blew my mind. Not only because it’s just as enjoyable, but also it’s a brilliant celebration of one’s creativity and ingenuity.

While “WWF Together” was conceived and designed by AKQA, one of the most renowned agencies, and funded by the international organisation WWF, “In Pieces” was made from scratch by a one-man band, Bryan James. Using only CSS, Bryan successfully depicts 30 endangered animals (with only 30 pieces for each of them) in beautiful shapes, colours and seamless animation. The story’s almost like a modern geek live-action: the Amsterdam-based designer discovered an underused code line of CSS and decided to dive in and take it to the next level with a grandeur interactive project, and he did manage to pull off the whole thing in the late hours next to his full-time job. So we reached out to Bryan and had him share his inspiration and perspiration behind this stunning project.

Hi Bryan! For those who don’t know you, would you be so kind to introduce yourself?

Of course! I’m a designer from England, who originally came from a print background but always had a twinkle in the eye for the developmental part of things. I’m very passionate about the quite vague, blurry area between design and development – It’s a very difficult area to be in, because it’s quite hard to manage in a traditional sense. But I do think it’s where work of real quality comes from in a manageable way. For me personally, getting both sides is extremely exciting and I think these kind of projects tend to look a lot more together than when design and development are seen as separate processes.

“In Pieces” wows everybody in our team. How long did you have the idea in mind? And how long did it take from scratch to finish?

From start to finish, around 5 months on and off in my own time – The idea was very, very early on after some initial tinkering with one animal, but it just grew. There were many dark moments where you are wondering to yourself at 2am in the morning what you are really doing with your life, so to see it enjoyed as much as like you say, is really special.

It’s amazing to learn that the whole project was made with just good old CSS. Could you elaborate on some of the main challenges and what you’ve learned while executing the technique?

Well, I learned a lot because there’s nothing really out there using it – that means any problems, I had to pretty much find the way myself, which was very tough. The intricacies aren’t particularly interesting to hear, but I guess an encompassing way of communicating what this CSS is like, is I’d say ‘delicate’. Real care has to be taken when using opacitied elements around them and there are other strange bugs that I encountered along the way. But ultimately, it’s a great, underused piece of code with so much potential so hopefully we will see more of it.

Yes, especially when the resulted low poly animals are super beautiful. What made you decide to portray those instead of something else?

Thank you! Well, low poly animals in an art directional sense are nothing new – there are many projects out there from the past which have low poly animals, but the key is in the use of the technology and indeed in the ‘in pieces’ element – that part is new, and that is the clincher really when it comes to my reasoning for portraying them in this way, that there’s an idea behind the style rather than simply peripheral style.

And last but not least, what advice would you give to aspiring interactive designers in the industry nowadays?

Honestly, talk to developers as much as you possibly can and create amazing relationships with them. I’ve been lucky enough to have worked with developers in the past who were open to really sharing a project rather than it being a design > development process. As a designer with code knowledge, it changes how you design and being aware of what hasn’t been done in a development sense is a powerful tool I think. You have to realise that amazing designers have been on the planet for centuries – to fight to have a unique piece in that environment is nigh on impossible. Interactive work is still contextually brand new, and that’s where a sweet spot can be found.

Aside from that, just enjoy it and try to take risks : )

Thanks a lot Bryan!

Scroll down to see our favourite animals from Bryan’s beautifully illustrated collection. Make sure to visit the website to see them in their full motion glory, and you can also support Bryan by purchasing the gorgeous “In Pieces” poster here!

1366x768_vaquita 1366x768_turtle 1366x768_tapir 1366x768_seahorse 1366x768_rhino 1366x768_oryx 1366x768_okapi 1366x768_iguana 1366x768_hirola 1366x768_frog 1366x768_echidna 1366x768_drill 1366x768_damselfly 1366x768_camel 1366x768_butterfly 1366x768_armadillo 1366x768_sloth 1366x768_sifaka 1366x768_parrotfish 1366x768_peccary 1366x768_panda 1366x768_tamarin 1366x768_owl 1366x768_ostrich 1366x768_lynx 1366x768_loris 1366x768_kakapo 1366x768_crow 1366x768_bear 1366x768_penguin

(Yes all 30 are here because they’re all our favourites!)

Leave a Reply