Spotify Apps
INTRO TO DEVELOPMENT AND DESIGN
LUKASZ DYNOWSKI
What can you do with Spotify ?
Applicability
https://www.spotify.com/us/aboutus/advertisers/ad-specs/billboard-ads/
Resour...
The Architecture
UX Principles


Don’t duplicate functionality from the native Spotify UI. “User have to
stick to Spotify native controls,...
App Icons


Use the correct format for the app icon

Link: https://developer.spotify.com/technologies/apps/design_resourc...
Responsive
The app should work on both small and
large screens.


Min width :640 px (based on a screen resolution of 800 ...
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 bu...
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.spoti...
Upcoming SlideShare
Loading in …5
×

Spotify Apps

566
-1

Published on

Design principles, and introduction to app development

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
566
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Spotify Apps

  1. 1. Spotify Apps INTRO TO DEVELOPMENT AND DESIGN LUKASZ DYNOWSKI
  2. 2. What can you do with Spotify ? Applicability https://www.spotify.com/us/aboutus/advertisers/ad-specs/billboard-ads/ Resources: https://www.spotify.com/us/aboutus/advertisers/adspecs/appendices/downloads/
  3. 3. The Architecture
  4. 4. 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
  5. 5. 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
  6. 6. 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).
  7. 7. Columns Don’t use columns! “Adding another column navigation inside your app might lead to column creep.”
  8. 8. 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
  9. 9. Sharing
  10. 10. Loading Use Spotify’s throbber when loading
  11. 11. Scrollbars Don’t use scrollbars within components
  12. 12. Pagination Using previous/next page navigation.
  13. 13. Album Link
  14. 14. Artist Link
  15. 15. Track Link
  16. 16. Overlay play button
  17. 17. 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-adformats/ Templates: https://www.spotify.com/us/about-us/advertisers/adspecs/appendices/downloads/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×