Steven Universe
Movie Website
Steven Universe has a TV-Movie!
The goal here was to create a website for new and current fans to get the full scoop on all Steven Universe movie content: video, character descriptions, music, merch and games.
The goal here was to create a website for new and current fans to get the full scoop on all Steven Universe movie content: video, character descriptions, music, merch and games.
Chris' Role - Strategy, Design, Front End Development
Design Process note - I wanted to add sparkles to the headers of each section to give the site a bit of movement. Traditional thinking was if you need to animate a image you make a animated gif. I did that and quickly realized that wouldn't produce a smooth animation for the small sparkles. After researching different options I landed on SVG (Scalable Vector Graphics). With SVG the sparkles could remain vector and sharp instead of a pixelated sparkle image. See the before and after->
Steven Universe Movie website on a laptop

Steven Universe Movie website on a iPhone

Steven Universe Movie website video section on a iPhone

Visual Exploration with High Fidelity Prototypes


Before
Animated gif with pixelated/jumpy sparkles
Animated gif with pixelated/jumpy sparkles
After
Making sparkles SVG = smooth animation
Making sparkles SVG = smooth animation