Overwatch League-UI Pt 1: Introduction & Analysis
Welcome to my first tutorial series: Translating Overwatch League (OWL) motion graphics into React-based UI components. It is not meant for reuse for broadcasts but merely as a case study for building a UI library from a mature 2D motion design. Motion is often an afterthought for designs instead of being integrated into the design language from the start. I’m hoping that this will also serve as an example of how motion can (and should) simplify the static elements of a design.
In each post I will include a video clip of the effect we will focus on, then go into a deep-dive of the design, as well as a step-by-step how-to. Until then, check out this sweet sizzle reel of the sort of effects we’ll be creating:
Kowalski!
The bulk of the elements in the reel are comprised of bold colors which fill the screen, and sweeping animated transitions on nearly all components. Sharp corners serve to simplify the complex layouts, while color-tinted photos/videos keep the color schemes consistent. It’s a completely flat design, but otherwise adopts many properties of Material Design (focus on motion, colors, information density, and visual grids).
Compare this to the original OWL announcement and you’ll see a bit of how Blizzard’s visual language evolved from angled wipes and italic fonts to all-caps titling with rectangular shaped elements.
What are we actually going to learn?
Throughout this series we’ll be building from scratch (with the help of a few packages) React components which mimic the look and feel of the Overwatch League production. Some of the packages we’ll be leveraging:
- react-spring: this will be essential in creating all of those sexy animations, and is my go-to package for all things motion.
- styled-components: this package is a staple in my repertoire, and is simply a way to get your CSS in your JS, increase DOM readability, and keep your CSS local. You also get lots of SASS-like features with high performance.
- material-design-icons: I’m including this without knowing for sure if we’ll need it, but it is very useful for getting basic iconography into a react app.
Is that legal?
Call it fan art if you like, but we’ll be focusing more on React/CSS than actually producing a production-ready UI library. I’m far more concerned about using “Is that legal?” which is probably worthy of a copyright strike from Disney/Lucasfilms.
So… where do we start?
We’ll start small and move to more complex screens with each post. Step 1 will be building a foundation of typography, dimensional metrics, and a color-scheme.
