JW.S All Rights REserved
33.89159˚N, -118.3951˚W
By proceeding, you accept the terms and conditions of using this website.
1. Commitment to Accessibility

We are committed to ensuring digital accessibility for people with disabilities and strive to continually improve the user experience for everyone.


2. Accessibility Standards

Our website follows recognized standards for accessibility, such as the Web Content Accessibility Guidelines (WCAG) 2.1, to support an inclusive and accessible digital experience.


3. Requesting Accommodations

If you experience any accessibility issues, please [contact us] (insert link or contact information) to request additional assistance. We are committed to addressing any barriers you may encounter and will make reasonable efforts to ensure access to our services.


4. Modifications to Accessibility Features

We reserve the right to update our accessibility standards or features at any time to improve the user experience and enhance digital accessibility for all users.


5. Feedback and Complaints

Your feedback is important to us. If you have suggestions on how we can improve accessibility, please submit feedback. We are continually seeking ways to enhance access and will consider all feedback as part of our ongoing improvements.


6. Limitation on Legal Claims

By using this website, you acknowledge and agree that, you waive your right to bring any lawsuit or file complaints specifically regarding ADA compliance, accessibility, or usability of this website. We encourage users to address any accessibility issues directly with us through the feedback and support channels provided in these terms.
Decline
M
07
D
18
Y25
T
12:16:57 PM
Currently
Independent Creative director, Founder/Ecd @  ▊▊▊▊▊
NExt Availability:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*HTM STS
VER/12433.56
Ship
Weylan
YutaniNost romo 180246
Runtime Live
RElative Run
24d 24M 33S
24d 24M 33S
*HTM STS
*HTM STS
*HTM STS
*HTM STS
*HTM STS
01001010 01010111 00101110 01010011
74 87 46 83
4A 57 2E 53
.--- .-- .-.-.- ...
112 127 056 123
WJ.F
33.8492° N, 118.3884° W
PST - 8 GMT
03.2019
60 - 250 Hz
310
90232
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
33  8622    118    3995
(!) 05.24: Project Pages a bit broken. WIP (!)
Works
Items
Projects
Tags
Netflix Sports
[ Close ]
Works
Goods
Delta
Info
.
[
0
]
Netflix Sports
®
Featured
× Study Hall
Sports Branding
[ Desc. ]
Developing the brand foundation for Netflix Sports.
PUBLISHED
2024.07
Branding
Tech
Design Direction, Branding, Design Lead
Explore

033.8622°118.3995°

The art (and design) of sports is heavily trafficked with great design through out the years– the Olympics, old playing cards, Nike's brand campaigns, etc. Carving out an ownable space within it has become harder and harder, but given the dynamic nature of sports, nearly anything is on the table. Restrained and progressive, bold and submissive, editorial and overt simplicity, technical and emotive, etc. etc.

The brand language for Netflix's presence in sports needed to be bold, flexible and unique. Netflix, to it's core, has been a disruptor and risk-taker in their ambitions, and we wanted this design language to reflect that perspective. Doing this meant looking at solutions that were a bit more simple, yet bold in application through color, typography and other visual elements.... without straying too far from anything that could 'feel' Netflix.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

gfdsgdsf

Video Credit 
× Study Hall
033.8622°118.3995°

What in the Wide Wide World of Sports...

Sport is something of a universal language, yet everyone has their own dialect. While there are through-lines that re-appear quite regularly through the years,  there's many entry points that dictate how design is packaged, and what that said design is tapping into within the world of sport. The spectacle, the movement, the commerce, the drama, etc. While Netflix was clearly prioritizing the drama/story-telling, it's important to dive deeper and see what cues we can leverage from the broader sports language in developing our own dialect. Sports is a crowded space with it's own set of tropes that we had to both accept and avoid in different moments to develop something familiar, yet uniquely Netflix.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • sdfsafdsafdsaf
  • dsaff

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

[ inspiration not currently available ]
033.8622°118.3995°

Framing the Narrative and Spectacle of Sport

Within the world of sport, Netflix has historically been about the subplots, drama, and spectacle of sport. Using a masked 'N' logo as a driving visual motif, it literally became the lens through which sports are viewed through. While it was primarily about the framing, masked imagery was leveraged as a mean to 'weave' Netflix through the fabric– further implying how Netflix, and the drama they portray, is omnipresent within every sports moment they depict. Visually, the design system was meant to feel dynamic in nature with angular lines and points of tensions which implied movement throughout, and were brought to life with tight easing curves. As one additional layer, a system of patterns were developed as versatile brand elements– at it's core also emblematic of the repetition that goes into mastering sport. These elements were meant to be the foundation for a system that could grow and evolve with time.

NFX-SPRT_Systm-Breakdown
.mp4
2024-04-01
motion
/
After Effects
Final
7
/10
Tech
5600K
 + 
127
34.0211° N, 118.3965° W
A breakdown of the primarily layers that drive the core of the design.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Systm-Breakdown
.MP4
 ]
[ Desc. ]
A breakdown of the primarily layers that drive the core of the design.
NFX-SPRT_Patterns-001
.JPG
2024-04-01
design
/
Figma
Final
6
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
A sample of some of the patterns that were made repeating various combinations of rotation and crop of the Netflix logo.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Patterns-001
 ]
[ Desc. ]
A sample of some of the patterns that were made repeating various combinations of rotation and crop of the Netflix logo.
NFX-SPRT_Type
.mp4
2024-04-01
motion
/
After Effects
Final
8.5
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
Passive animation loops showing easing curves, and sample type hierachies. (Vid Credit: Study Hall)
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Type
 ]
[ Desc. ]
Passive animation loops showing easing curves, and sample type hierachies. (Vid Credit: Study Hall)
NFX-SPRT_Type-In
.mp4
2024-04-01
motion
/
After Effects
Final
8.5
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
Expanding the mark application to type load-in. (Motion credit: Study Hall)
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Type-In
 ]
[ Desc. ]
Expanding the mark application to type load-in. (Motion credit: Study Hall)
NFX-SPRT_Pattern-Applications
.GIF
2024-04-01
GIF
/
Figma
Final
8
/10
Media / Ent.
 + 
Tech
5600K
 + 
127
34.0211° N, 118.3965° W
Different applications of the pattern with various media.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Pattern-Applications
 ]
[ Desc. ]
Different applications of the pattern with various media.
NFX-SPRT_Poster-Promo
.JPG
2024-04-01
design
/
Figma
Final
8
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
Sample poster promo leveraging the masking as more of a framing background element.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Poster-Promo
 ]
[ Desc. ]
Sample poster promo leveraging the masking as more of a framing background element.
NFX-SPRT_MJ
.JPG
2024-04-01
design
/
Figma
Final
8
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
A hero application, and how to use the framing as a narrative element.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_MJ
 ]
[ Desc. ]
A hero application, and how to use the framing as a narrative element.
NFX-SPRT_Color+Maskings
.JPG
2024-04-01
design
/
Figma
Final
7
/10
Media / Ent.
 + 
Tech
5600K
 + 
127
34.0211° N, 118.3965° W
Colors, masking and layout explorations for feels at a high-level.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Color+Maskings
 ]
[ Desc. ]
Colors, masking and layout explorations for feels at a high-level.
NFX-SPRT_Messaging-Balance
.JPG
2024-04-01
design
/
Figma
Final
7
/10
Media / Ent.
 + 
Tech
5600K
 + 
127
34.0211° N, 118.3965° W
Exploring ways to bake-in flexibility to shift balance of focus between messaging and media.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Messaging-Balance
 ]
[ Desc. ]
Exploring ways to bake-in flexibility to shift balance of focus between messaging and media.
NFX-SPRT_Subtle-pattern
.JPG
2024-04-01
design
/
Figma
Final
7
/10
Media / Ent.
 + 
Tech
7750K
 + 
127
34.0211° N, 118.3965° W
Looking at ways to apply the pattern in a more subtle way, potentially for things like teasers.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Subtle-pattern
 ]
[ Desc. ]
Looking at ways to apply the pattern in a more subtle way, potentially for things like teasers.
033.8622°118.3995°

Quickly focused our eyes on the prize

When working on branding projects, I've learned to trust my gut. There's usually something of a clear idea that quickly comes to mind, and while the final incarnation of that idea can be far from the original, it more often than not becomes the genesis of what is pushed forward. In this instance, the use of the masked N as came about almost immediately as something dynamic, ownable, and on brand for Netflix. While the idea came quickly, there was a lot of work in figuring out the details of it's application because, as I quickly found out, without more definition, it became a tricky visual motif to work with at times that created risk for scaling production. The team was able to help develop standards and guidance around it's usage that Netflix was ultimately comfortable with.

NFX-SPRT_Early-motion-study
 ]
[ Desc. ]
An early motion exploration of the visual motif. (Vid Credit: Study Hall)
NFX-SPRT_Early-motion-study
.mp4
2024-04-01
motion
/
After Effects
Scraps
8.5
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
An early motion exploration of the visual motif. (Vid Credit: Study Hall)
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Jordan-Sliver
 ]
Featured
[ Desc. ]
Other ways the mask could be used graphically to be more of a teaser, or subdue media focus in a layout.
NFX-SPRT_Jordan-Sliver
.JPG
Featured
2024-04-01
design
/
Figma
Scraps
8.5
/10
Media / Ent.
 + 
Tech
5600K
 + 
192
34.0211° N, 118.3965° W
Other ways the mask could be used graphically to be more of a teaser, or subdue media focus in a layout.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_FlagMark
 ]
[ Desc. ]
Explored leveraging a flag-based mark to use the Netflix primarily mark, but alter it in a way that's true to sports.
NFX-SPRT_FlagMark
.JPG
2024-04-01
design
/
Figma
Scraps
8
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
Explored leveraging a flag-based mark to use the Netflix primarily mark, but alter it in a way that's true to sports.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Glory-Poster
 ]
[ Desc. ]
Quick poster exploration to test the edges of what colors would potentially makes sense before establishing a system.
NFX-SPRT_Glory-Poster
.JPG
2024-04-01
design
/
Figma
Scraps
8
/10
Media / Ent.
 + 
Tech
1000K
 + 
127
34.0211° N, 118.3965° W
Quick poster exploration to test the edges of what colors would potentially makes sense before establishing a system.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Mask-layout
 ]
[ Desc. ]
Layout exercise on ways to bring the masking element in in a balanced way given it's dynamic layout.
NFX-SPRT_Mask-layout
.JPG
2024-04-01
design
/
Figma
Scraps
8
/10
Media / Ent.
 + 
Tech
1000K
 + 
127
34.0211° N, 118.3965° W
Layout exercise on ways to bring the masking element in in a balanced way given it's dynamic layout.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_MessiMask
 ]
[ Desc. ]
One of the first extensions of the brand to look at player profiles– pulling from cues of old trading cards with the framing.
NFX-SPRT_MessiMask
.JPG
2024-04-01
design
/
Figma
Scraps
8
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
One of the first extensions of the brand to look at player profiles– pulling from cues of old trading cards with the framing.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Bullseye
 ]
[ Desc. ]
Looking at ways to combine the masking with rotational duplication, with fills and strokes.
NFX-SPRT_Bullseye
.JPG
2024-04-01
design
/
Figma
Scraps
7.5
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
Looking at ways to combine the masking with rotational duplication, with fills and strokes.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_V1-Bento-Box
 ]
[ Desc. ]
A 'bento box' style overview of the initial direction at a high-level, showing the logo and sample mask applications.
NFX-SPRT_V1-Bento-Box
.JPG
2024-04-01
design
/
Figma
Scraps
7.5
/10
Media / Ent.
 + 
Tech
5600K
 + 
64
34.0211° N, 118.3965° W
A 'bento box' style overview of the initial direction at a high-level, showing the logo and sample mask applications.
[ Pan + Zoom ]
View in Catalog
NFX-SPRT_Masking+Overlay
 ]
[ Desc. ]
Looking at ways to possibly frankenstein some previous concept work involving various boundaries of sports.
NFX-SPRT_Masking+Overlay
.JPG
2024-04-01
design
/
Figma
Scraps
7
/10
Media / Ent.
 + 
Tech
3250K
 + 
127
34.0211° N, 118.3965° W
Looking at ways to possibly frankenstein some previous concept work involving various boundaries of sports.
[ Pan + Zoom ]
View in Catalog
033.8622°118.3995°

Additional excerpts, shown in no apparent order.

As it usually happens, there's a lot of interesting things that happen along the way to landing on the end result. Most of my process work is fairly rough as I take a loose/iterative approach to avoid needlessly over-indexing on polish when it's not yet necessary. Below are excerpts from moments along the way to the end results above. Sometimes my favorite work is in here, some time's its garbage as a means to show what we shouldn't do.

¯\_(ツ)_/¯
[ Nothing here...yet ]
033.8622°118.3995°
Attribution +
Add'l Info
Creative Director(s)
Jeremy Volk, Alex Sheyn, Matt Yerman
Design Director
Jon Way
Senior Producer
Kristen Dudek
Producer
Jess Petrullo, Dani Arama
Senior Designer
Mortaza Amiri, Nicholas Fearnley
Designer
Tim Rhyne
Motion Design
Votgaus, Dylan Casano
Associate Designers
Dani Grimm

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Subscript

Title
Netflix Sports
Project
Sports Branding
Context
× Study Hall
Responsibilities
Design Direction, Branding, Design Lead
Project Type
Branding
Tags