Last week I was pleasantly surprised by a direct message via Twitter from our former colleague Nils Hendriks, now working as an independent web developer in Tokyo, Japan. He wrote to me: “Hey! Are you ok with me using your animated gif logo in this proof of concept?” – with a link to a web address. Well, that got me triggered of course! The web page turned out to be a proof of concept for animated versions of the three-dimensional logo and typeface we developed for the Kröller-Müller Museum. Using only html and css, no images – click to take a look!
I asked him a few questions to get a bit of background on this flattering initiative.
Why did you pick this visual identity for your project?
Nils: “I’m always looking for visuals created for different kinds of media to see how they would translate to the web with as little code as possible. I came across the Kröller-Müller visual identity before but lately I have been studying css transitions, transforms and keyframes animation and the two seemed a good match for a proof of concept.”
How did you approach this coding challenge?
Where do you go from here?
Nils: “I think trying to do this gave me a better insight in css features like transforms, keyframes animation and perspective. But you also realize right-away you’re only scratching the surface of what’s to come in the (near) future. Already there are people pushing the limits in these areas with things like css filters, shaders, Photoshop-like blend modes, Web GL and even web apps that create 3d shapes.”
Our work for Kröller-Müller Museum: the custom made typeface opens up dynamically or in steps. Every version adds its own feel to the text.