Spotify Apps

Spotify AppsINTRO TO DEVELOPMENT AND DESIGN

LUKASZ DYNOWSKI

What can you do with Spotify ?

Applicabilityhttps://www.spotify.com/us/about-us/advertisers/ad-specs/billboard-ads/

Resources:

https://www.spotify.com/us/about-us/advertisers/ad-specs/appendices/downloads/

The Architecture

UX Principles

Don’t duplicate functionality from the native Spotify UI. “User have to stick to Spotify native controls, which they are used to”

A Spotify app is not a website : “The best apps have a clear purpose, no tabs, minimal amount of text, flat hierarchy and limited number of features, buttons and other controls.”

The start page should be easy to understand and use

All about music.

Make it instantly personal.

Be here now “Don’t add features that force users to go out to your website.”

Integrate

App Icons

Use the correct format for the app icon

Link: https://developer.spotify.com/technologies/apps/design_resources.zip

”If you are planning to include deviations from the requirements in your app. You have to provide information of which deviations have been made and why”

Design application icon in colours that pop from both a light and dark background

Use our own set of icons to convey different features and actions

Make your own icons align with ours

Make sure your icons are sharp and crisp

Responsive

The app should work on both small and large screens.

 Min width :640 px (based on a screen resolution of 800 px with an 160 px ad banner)

Max width: 2500 px or more (large screens).

Columns

Don’t use columns!“Adding another column navigation inside your app might lead to column creep.”

Buttons

Use native Spotify buttons as much as possible. “Use native Spotify buttons as much as possible.”

However, New buttons should resemble Spotify look and feel

Sharing

Loading

Use Spotify’s throbber when loading

Scrollbars

Don’t use scrollbars within components

Pagination

Using previous/next page navigation.

Album Link

Artist Link

Track Link

 Overlay play button

RESOURCES

Design: https://developer.spotify.com/technologies/apps/guidelines/design/

Resources:https://developer.spotify.com/technologies/apps/design_resources.zip

Advertisers:https://www.spotify.com/us/about-us/advertisers/ad-specs/spotify-ad-formats/

Templates:https://www.spotify.com/us/about-us/advertisers/ad-specs/appendices/downloads/