The first major project I took on when I started at Dropbox was our new homepage. The design process was already in full swing when I came on board. I couldn't have been more stoked to be part of such a huge undertaking that would be the new front door to Dropbox and introduce a new design language.Launch Site
One of the interactive elements on the new homepage, the Learn More button went through extensive prototyping not just to make sure this thing actually works but would this kind of interaction be useful on our new homepage? After rigorous testing and iteration it's now a content interaction that will be making its way through new Dropbox pages.
We're continually iterating on our new homepage and it's incredibly exciting working with such an amazing team. This is more than just a new layer of paint but a new design direction while conveying the exciting nature of Dropbox.
Before even building the animations we knew these had to play on desktop machines and mobile devices. HTML5 video and gifs were a cop out due to iOS forcing video to play full screen and the performance issues with gifs. I started dissecting the animations (which were originally short videos from After Effects) and prototyped against that. In its simplest form, animation is just a sequence of images moving to create the illusion of motion.
Prototyping these animations was fun as I tried everything from CSS keyframes to painting differences in frames onto a canvas element. WebGL and even APNG were roughly prototyped just so our team could fully understand what the technical limitations were of each animation technique and fully own the final implementation. CSS keyframes were the best choice and even though the canvas animations on the Apple Watch page which plots blocks from a massive JPEG sprite are technologically very cool, just would not be as flexible as keyframe approach.
There are some compromises such as having to create a sprite for each animation sequence and the penalty of loading large JPEGs. PNGs were an absolute no go due to hard images dimension limits in iOS and Firefox. To make sure animations aren't running without every frame being present, event handlers on the animations sprites fire only when an image is loading through a download or from it being cached. Each animation has a poster similar to a poster attribute set on an HTML5 video element to give the user something while an animation loads.
During the prototyping process I didn't hesitate to go crazy and immediately started mapping out possible approaches to replicating video like animation. Codepen was essential in creating quick and dirty demos to share internally that weren't constrained within our project.
- Initial choices included:
- CSS keyframes stepping through a sprite
- Painting video to a canvas element
- Painting differences in each frames from a JPEG block to a canvas element
- Animated PNG
- SVG Animation
The main goal here was to see a close to real world example of animation, how well it could work and what problems our team would run in to. A great problem solved during prototyping was testing on artificially throttled network speeds would show sprites might not fully load before animations would execute (doh!) so being able to detect all content was fully loaded and then starting an animation sequence became crucial.
- Advantages of CSS keyframes
- Fluid performance
- Great browser support
- Easy for other developers to update
Right now these animations are being A/B tested against different audiences and the response has been amazing so far. At times it felt like I was reinventing the wheel because this replicates HTML5's native video which has amazing support and video streaming is no longer the nightmare it used to be. While using a video would have satisfied some of the requirements, we'd still be leaving a huge and upcoming user base of mobile users in the dark.
My absolute favorite part of this process was watching these animations during extensive "debugging" sessions. I'd have Codepen open or a browser window with the new Dropbox homepage playing the animations back during stress test sessions and some important looking FPS meter open to have an excuse for watching them.
I'd like to think I'm a fairly tough dude, I listen to Slayer most mornings during my commute to work and I don't like wearing bright colors but I'd be lying if I said watching a small excited man surfboard to get his picture taken didn't bring me joy.