Nike Podium Illustration Library

Defined guidelines and designed a library of 70+ vector illustrations for Nike’s Podium Design System to depict product benefits and features across Nike Web and App.

Role

Product Designer

Product Designer

Team

Commerce

Timeline

Oct 2024 - Mar 2026

Oct 2024 - Mar 2026

Skills

Research, Design Systems

Podium Illustrations

Illustrations are expressive, vector-based graphics that support branding, storytelling, and visual communication across the Nike digital experience. Decorative rather than interactive like icons, they enhance clarity alongside text and are typically used to visualize product benefits and features.

Design Guidelines

I defined guidelines for illustrations to accommodate greater visual complexity than icons while ensuring consistency with existing elements in the Nike Podium Design System

Grid

Illustrations are drawn on a 48px by 48px grid and scaled dynamically to additional sizes. 1px units forms a grid of 48 by 48. 4px padding ensures consistent icon sizing and white space when exported as an SVG.

Scaling

Illustrations follow a fixed mathematical scaling system. This ensures consistency in proportion and visual impact across all applications, reinforcing a cohesive and intentional visual language.


Medium is the standard size icons are built at and available for all illustrations.

Illustrations follow a fixed mathematical scaling system. This ensures consistency in proportion across all applications, reinforcing a cohesive and intentional visual language. Icons are built in the Medium standard size.

Exceptions

Padding can be exceeded in complex icons and when optical alignments with related icons are required.

Primary Shapes

Like icons in Nike’s design system, all illustrations are based on four primary shapes to ensure consistency between icons with similar proportions. The proportions of these shapes differ slightly based on variants in grid and stroke width of our icons.

Like icons in Nike’s design system, all illustrations are based on four primary shapes to ensure consistency between icons with similar proportions. The proportions of these shapes differ slightly based on variants in grid and stroke width of icons.

Line Units

Line units help to define line positioning and lengths. They also help to reduce irregularities on a micro level. Using stroke weight (2px) as a unit guide, gaps and complexity should utilize whole units to determine appropriate spacing and repetition.

Line units help to define line positioning and lengths. They also help to reduce irregularities on a micro level. Using stroke weight (2px) as a unit guide, gaps and complexity should utilize whole units to determine appropriate spacing.

Gaps

Gaps can add unique character and a sense of movement to icons.

Corner Radii

To create a range of corner radii, we’ve used a scale of circles based on the line units.

Angles

Our approach to angles is based on the movement and angularity of the Swoosh. Use 15-degree increments to reduce angle irregularities.

Illustration Design Process

Each illustration goes through a multi-week design and approval process before being added to the library and deployed in the digital experience.

Design Reviews

Illustrations go through multiple cross-functional reviews with Nike Brand and Marketing teams, ensuring concepts are communicated in a brand-aligned way that supports product positioning.

Consumer Research

Multiple directions for icons are brought into user research for validation, conducting 1:1 qualitative interviews to determine which direction most clearly communicates the concept and feels the most Nike.

Impact

I designed 70+ illustrations at 3 sizes, spanning 9 sports categories. This illustration set has become a core part of Nike digital experiences, view them live on Nike PDP's and Nike Shoe Finder.

Enter Password

Made with ❤︎ Updated Mar 2026

Made with ❤︎

Updated Mar 2026

Made with ❤︎ Updated Mar 2026