LEO BAKER
How do they do it? Meet Leo Baker, a professional skateboarder for NikeSB, a member of the USA’s Olympic Skateboard Team, and a member of the LGBTQ+ community. This narrative landing page is about telling the story of Leo’s journey to the 2020 Olympics. It had to strike a careful balance in order to be representative of skate culture, Leo’s brand, and the Olympics. The page also features clothing and footwear Leo has released with Nike.
Project Duration - 4w +2w
Roles
— Web Design
— Visual Design
Tools
— VSCode
— Adobe After Effects
— Lottie/BodyMovin’
— Adobe Illustrator
Skills
— R&D
— HTML/CSS
— Layout
— Motion Graphics
Road to Tokyo
In preparation for the 2020 Tokyo Olympics many athletes are developing their own personally branded websites. Functionally, they give fans insight into the life and mind of an Olympic athlete, but also promote branded merchandise and content for affiliated sponsors. These games also include several new additions to the programming, including climbing, baseball, skateboarding, surfing, and karate. I knew appropriately representing a queer person was an important aspect of this site, and necessitated further research.
In deciding on an Olympian to produce a site for, I decided to focus on skateboarding. I felt the narrative challenge presented interesting opportunities to pair something typically associated with grunge/street culture with the professional tone of the Olympics. At the time there was no list of confirmed athletes, so I began researching female skateboarders in the US. I found Leo Baker, specifically a narrative video discussing how women are under-represented in the sport, and knew I had found a subject.
After further research I discovered that Leo developed the first non-gendered NIke SB skate shoe, and had a Pro Model with the same profile. Leo had lots of support from the skate community, many saw them as a queer person who was really pushing the sport and representing the next wave of female skater. Although Leo had achieved all of this, there wasn’t a ton of media coverage to go along with it.
Typography + Color
CSS Grid
This site seemed like an appropriate time to try out a new CSS layout framework, Grid. I found grid especially easy to grasp, as it mirrors much of the terminology and functionality of traditional layout tools. Defining grid spacing, using fractional units, and creating full span images were some of the key learning outcomes of this process.
Lay It Out
Grid made it easy to execute a layout with ample negative space. This helped the site to emulate the movement in skateboarding, how you transition from trick to trick — the negative space connects the movements
Color
This layout relies on a monochromatic palette with splashes of color, the imagery drives a lot of the color and guides viewers down the page. The ability to reposition elements quickly made Grid a great tool for perfecting this color story.
Rellax, wow, animate
Another important element of the site was creating motion within the design that mirrored the motion within skateboarding, like from transitioning to one trick to the next. Several methods were employed to create the moving elements of the site.
Scroll Motion
A combination of wow.js and animate.css create transition effects across the site. Wow triggers actions on scroll, and animate is a library of classes to control the type of transform applied. These elements can be used to transform position, but here they are used to fade content in as the site is scrolled.
Parallax
Rellax.js is a powerful little piece of code that applies a CSS transform based on a readers position on the page. It has several data inputs that allow for fine tuning of speed, direction, offset, and more. Rellax imparts a dynamic feeling to the site, rewarding tactile input with motion, and inviting readers in to discover more.
Lottie + Bodymovin
Another piece of motion created for the site was this blinking eye graphic. This graphic is based on the logo designed by Baker that appeared on the Baker Pro Model Bruin High. I attempted this with pure CSS, but was unsatisfied with the results. After Effects seemed to be the best solution to this roadblock, but presented the challenge of integration on the site. With more in-depth research I discovered a solution in the powerful combination of tools
Bodymovin
Bodymovin is a plugin for After Effects that renders a .json file, which encapsulates all of the path information in a small plain text file. Similarities to how SVG’s function inspired confidence that I would be able to implement this animation.
Lottie
Lottie is a library built by AirBnb that enables in-browser rendering of .json files exported with Bodymovin. After connecting the script, I tagged a <div> with a class of “lottie”, and the eye appeared. The animation was easy to size and position within the grid structure, and adds a more polished look and feel to the motion on the site.
Transition
When I started this site, Leo was going by Lacey, and had yet to announce their gender transition. The Olympic roster had not been released yet, and any claims of Leo going to the Olympic Games were purely speculative.
A lot has happened since then.
Leo now identifies as gender non-conforming, and is a member of the Olympic Team. I knew, out of respect, the site needed to be reworked in order to reflect these changes.
Pivot + Flip
Since the Olympic announcement, Leo has also been featured in several articles and online blogs. This offered new content for the site, and new insight into Leo’s transition and perspectives.
Merch
Leo has released several new pieces with Nike as part of an Orange Label collection. This collection includes a maroon hi-top shoe and a bright yellow jacket. To represent these next steps in Leo’s journey as a brand, a description of the new products was added to the site
Pronouns
Leo’s shift in gender identity necessitated a copywriting overhaul on the site to remove gendered language and replace them with appropriate gender neutral pronouns New image assets and written content helped to bring the website up to speed with Leo’s life today.
Next Steps…
While the website is responsive, I would like to explore guided content experiences for mobile and tablet devices. I feel that a more refined look for smaller devices would enhance storytelling and help readers engage with longer content. I’d also like to find more opportunities to apply motion with Lottie/Bodymovin!