Artist Profile: Ryan Collins’ CSS3 3D experiments

Artist Profile: Ryan Collins’ CSS3 3D experiments


You must have realised by now, we’re big fans of experiments with CSS and HTML5 (when matched with tasteful UI design). They’re great not only because of beauty, but they’re also great way to learn new things.

And so we came across Theatme, a submission via Twitter by Ryan Collins. I wasn’t expecting much, which probably contributed to the resultant explosion in the mind. Theatme is an online video catalog, with gorgeous tiles of film covers, and beautiful animations to unfold it for video details. It’s better seen than talked about.

One interesting aspect I noticed looking at the source code, was that it runs on WordPress. So I asked Collins about it:

Theatme was built just because I wanted to build a great website that people would find useful. Most of the ideas I would come up with would require back-end development, being only a front-end web developer, this wouldn’t work out. I’ve worked with WordPress a ton in the past and knew what it was capable of and decided I would build some sort of web-app type site on that. So I just decided to make a free and legal movies watching database. In a little over a week I designed and developed what you see today.

This lead me to digging up more dirt on the guy. I soon stumbled upon his site ‘user & me‘, which sports a bunch of CSS and Javascript experiments. Really impressive stuff, not just technically, but aesthetically, too. Collins pointed me to another site of his ‘Koshic‘, housing things like redesigned Chrome and Safari UIs, Bowtie and Coversutra themes, etc.

If you go through these sites, you’ll notice one common pattern: They’re beautiful, and they use a lot of 3D animations. Some of the animations are slow and jittery on desktops, and practically unusable on iOS. Says Ryan:

I am very forward thinking so I used CSS3. Some may call the animations on Theatme just an over glorified waste of CPUs, but as an interaction designer I truly believe this helps the usability. I’ve always hated when a UI makes things just magically pop in and out. A user can easily get confused, they get lost when what they where looking at just disappears and brings you to a new page. At least this is how I feel about UI design. With Theatme, when you click on a title, content doesn’t just magically appear at you, your mind can easily see where everything is going.

I’m fine with excessive use of technology as long as it’s used in the right place — if you’re going to complain about Theatme being a little resource hungry, you’re not getting the point. I get the feeling Collins is going to be a household name in the near future. In fact it surprises me that he doesn’t already have a Dribbble account (could someone with the means get him drafted?). Of course, you may follow @Ryan_Collins on twitter.