Design Principles

Facemask’s design language is guided by key principles, design patterns and core brand elements to help deliver experiences that are uniquely NFL. We’ve assembled some broad concepts in this quick-start guide to help you get started.

designPrinciples.png

Product design principles

Clarity
Remove ambiguity and confusion from fan experiences. Help fans focus, understand and act with confidence when faced with decisions. Make intentions and outcomes crystal clear.

Consistency
Create a sense of familiarity and make fan experiences easy to learn to use. Reinforce intuition by applying patterns and design solutions consistently.

Fan-centered
When making product decisions, anticipate fan needs at every step of the way to build trust and affinity in our fan experiences.

Quality
Demonstrate respect for fan’s time and attention through well crafted fan experiences.

Accessible
Design solutions must always meet accessibility standards. No exceptions.

designPrinciples_motion.png

Motion design principles

Facemask motion is a system of static and moving elements that are choreographed to work together to enrich the core product experience. Animated user interface elements breath moments of life into an experience and create emotional connections that fans not only see, but feel. 

Communication
Use motion to communicate a change in the interface over time and show how UI elements are related to each other.

Hierarchy
Use motion to bring order to changing information and help keep fans oriented through screen transitions.

Evoke style
Once you understand the type of motion needed to support usability, manipulate its properties to bring personality and life to the experience.