Design System

Apple Music design system card view port screen showing various card sizes and their usage

Apple Music

Project

Design System / Design Guidelines
for Apple Music 2023
Created from scratch in Figma

This project explored the way one of the greatest design teams in the world
lays out one of their digital products across a range of view ports such as desktop web browser, iPad and iPhone.

All icons, glyphs, logos, controls and other UI elements were created from scratch.

The design system should allow any designer or developer to use the correct UI elements such as icons and typeface choices that adhere to Apple’s strong global branding.

Typograhy

In addition to ensuring legible text, your typographic choices can help you clarify an information hierarchy, communicate important content, and express your brand.



Apple Human Interface Guideline 2022/23

Kerning / Tracking

Apple Music logo

Icons

Striking app icons are an important part of the user experience on all Apple platforms and every app and game must have one

Embrace simplicity.
Simple icons tend to be easier for people to understand and recognise

Unlike app icons, which can use rich visual details like shading, texturing, and highlighting to evoke the app’s personality, an interface icon typically uses streamlined shapes and touches of colour to communicate a straightforward idea

UI Elements - Controls

Mac Application

iPad Application

iPhone Application

iPhone app music player controls

UI Elements - Menu

application side bar

Mac Application

Ipad menu

iPad Application

iphone menu

iPhone Application

UI Elements - Colour

Previous
Previous

Design Research