Chris Heller

Home Work About Contact

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.
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->
View Steven Universe website
Steven Universe Movie website on a laptop
GameStop website
Steven Universe Movie website on a iPhone
Steven Universe Movie website video section on a iPhone
Visual Exploration with Low Fidelity Prototypes
Steven Universe games headline pixelated sparkles before
Before
Animated gif with pixelated/jumpy sparkles

GAMES

After
Making sparkles SVG = smooth animation
Back to Work

Copyright ©2023 Chris Heller