ESPN Web Feature
/ Final application viewable on the ESPN website here.
ESPN has commissioned me to create a series illustrations and animations for a web feature editorial on Drew Bree's NFL passing record. The visuals were integrated into a web layout that tracked his path to 71,941 yards in an interactive user experience through scrolling.
WIREFRAMES
In the first round of the design process we created wireframes to plan out the assets needed to for the full story, their size, and the user experience as they scroll through the feature.
LANDING PAGE
We decided to begin the story with an animated landing page which will catch the reader's attention from the first scroll.
It will feature Drew Brees throwing the winning pass as the ball disappears outside the browser window.
Once the reader reaches the end, another animation activates in continuity: the ball re-renters the browser as the receiver catches the pass.
ANIMATIONS
I sourced base footage for the rotoscoping animations, choosing a player that catches the pass but also ends his action in a winning pose.
Animatic for pre-production check off, testing the timing and confetti effect. The motion had to be adjusted for the ball to appear from the left corner to suggest a continuity of catching Drew Brees' pass from the landing page. See below.
Final landing page animation of Brees, hand drawn frame-by-frame at 12 frames per second (fps) via a Wacom tablet using Photoshop timeline.
Final end page, with confetti that continue to loop in celebration as the figure reaches freeze frame.
WEB INTEGRATION
The animations were exported a 90 individual jpegs which I forwarded to the ESPN programmers to be coded in as a GIF-based reel at 12 fps, and interact/launch with the user's screen scrolling.
ART DIRECTION
The illustrations and animations were all drawn in a black and white realistic style with grey toned shading and pops of two colors essential to the story:
ESPN primary red, and The Saints gold.
