Dropbox Homepage

Dropbox

New Homepage

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

The Process

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.

Building The Animations

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:
Javascript to cycle through a stack of images (similar to a flip book)
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
WebGL
Animated PNG
GIFs
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.

Each method was extensively documented and I geeked out on having a war chest of options to choose from. My biggest concerns were browser support since this had to support everything from a phone to a desktop and performance and ease of use. Using Javascript to cycle through images did work but wasn't as performant as CSS keyframes using a translateX function. As ubiquitous as GIFs are, performance is horrendous and they don't offer any sort of Javascript events. Animated PNGs were a pipe dream, Flash was simply out of the question, WebGL is completely overkill and painting JPEG blocks to canvas, despite super cool, just isn't scalable for swapping or build animations.

Advantages of CSS keyframes
Fluid performance
Great browser support
Can be controlled via Javascript
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.

New Homepage

Contact

tanner.godarzi@gmail.com