.

Hello. My name is Pedro Ivo Hudson, a 25 years old Designer from Brazil. I'm the man behind of "The Good Man", an animation coded in CSS3. This article is about the process and methodology involved in its creation.

The idea came up while listening to Husky Rescue, a Finnish band. Their debut album, Country Falls, has cinematographic songs with narrative sceneries, and one in specific, named The Good Man, has a two minutes narration at the beggining. Since I was already studying CSS3 for freelance projects, I thought a browser-based animation would be an interesting challenge, so I've decided to use it as my graduation project.


# Solutions

I knew that there were many obstacles regarding technical performance, that would influence the graphical aspects of the animation. It was separated in two parts: audio and animation itself; that should be synchronized at all times.

A loading at the beginning would fit perfectly. Everything would start at the same time as soon as the user pressed play. Even so, it was still a loading. It's discouraging to have to wait. I had to keep it simple. As John Maeda said:

"The process of reaching an ideal state of simplicity can be truly complex, so allow me to simplify it for you. The simplest way to achieve simplicity is through thoughtful reduction." (MAEDA, 2006)

Keeping it simple would allow me to take the advantage of faster loadings. To keep things minimal, I wasn't going to be able to use images. Whether using vector shapes and bitmap images, I chose the first one, so this way I could manipulate its attributes – such as size, color and 2D/3D transformations – without losing render quality and ending up with smaller files.

The only advantage of bitmap would be the possibility to use more complex figures, since vector is limited to geometric shapes. That's when it struke me: I should use fonts. I started searching for characters in Unicode, but eventually found out that the operational system support would vary. In other words, my first prototype only worked in Mac, because I was using character U+29CC of Apple Symbols font.

I couldn't rely on system fonts from user's computer, so I had to create my own. And I could also just use Apple Symbols in my server and have it downloaded in every computer, but it would make no sense. This font has 4055 other characters and 3.7MB. Loading would take years. So I used IcoMoon. It provided me a simple way to create my font. I was able to import my own characters, select new ones – which opened new graphic approaches –, ending up with 4 files, all browsers support and 41.2KB. Loading would take seconds. Great.


# Approaches

The narration has several small stories regarding some of the narrator's memories, so it became easy to divide the scenarios and create the right atmosphere around what was said. Also, knowing what time each scene had, helped me to define which graphical approach I should have. It was important to maintain a flow and keep things moving in the screen, and get to know my boundaries while researching the visual aspect, helped me create guidelines through the development.

Basically, what I did was draw in some post-its what I thought was a good idea and tried to imagine how long the animation would take, so that another could start. After figuring out what to do, I started coding. There was no mystery, except that I researched a well fare amount. I also got feedback from colleagues (from Bebop Studio, a Graphic Design Studio from my home town), who introduced me some animation examples and taught me how to think while animating, helping me polish my project.

As the animation grew, it began to take longer and longer to synchronize new scenes. I had to watch all the animation from the beggining until the scene I was coding, every time something changed. This was hard. During the coding, alignment was the worst. Since I was coding this project by hand (so this way I could study the language), it took me forever. A software would fit perfect for this ocasion. Creating timelines would be a breeze.

It was also getting heavier to add new elements to the screen. When I had completed one minute of animation, I started noticing performance issues. I added multiple items and performed fast animations, so it was getting tough to maintain the smoothness. Using jQuery, I was able to remove HTML elements in determined times and keep the animation flow.

Also, I've used a sixteen color palette named Solarized, created by Ethan Schoonover, designed to be used with terminal and gui applications. Since coding was a significant part of my graduation project, these colors fit together conceptually. Not to mention the fact they were developed to be used in a screen, so it didn't become tiring to watch.


# Perceptions

This experiment helped me visualize the current aspects of animations in browsers and the feasibility of a commercial use, as well as the process and methodology involved.

Concerning the process, a software is essential. Would be a lot easier and time saving if I could simply group elements and set options for each group, instead of just elements. Or to be able to control timing, subjected to its parent. This and much more. I know there are some different software out there and I'm excited about testing them.

Regarding browsers support, it's still far from perfect. Not all browsers support CSS3 features nor understand the code the same way. As for mobiles, their operational system has automatic buffering turned off, so when started, audio takes some seconds to start, desynchronizing the animation, regardless of processing capabilities, such as iPad 4th and iPhone 5th gen.

I guess these features are evolving very fast. There are plenty of good developers involved in their development. So I think they will get it done in no time and it will become standard for all browsers very shortly.

If you'd like to talk, get in touch: podrivo.com


Links

hr
The Good Man / Landing page
The Good Man / Landing page

Storyboard / 01
Storyboard / 01

Storyboard / 02
Storyboard / 02

The Good Man / Screen 01
The Good Man / Screen 01

The Good Man / Screen 02
The Good Man / Screen 02

The Good Man / Screen 03
The Good Man / Screen 03

The Good Man screen recording.

All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Advertise -  About FWA -  Contact