back

SM Miles Skill Tree HD

home

view
FitbitJavascriptWatch face
code

Description

The Skill Tree design from Insomniac’s Spider-Man Miles Morales game for PS4/5 is so good that I couldn’t resist making a more…portable version.


The stats (starting from the bottom left and going clockwise):

  • Battery (🔋)
    • The battery icon will turn red when at or below 25% and green while charging
  • Calories (🔥)
  • Steps (👟)
  • Active Zone Minutes (⬆️)
  • Heart Rate (💛🧡❤️)
    • The heart will change color to correspond with the current Active Zone to match Fitbit’s colors.

All the credit goes to the amazing work done by Gil (@GilFromUI on Twitter) and the Insomniac team on the design work that I was inspired by.


Screenshots

Watch face screenshot 1Watch face screenshot 2Watch face screenshot 3Watch face screenshot 4Watch face screenshot 5

Wireframes

SM Miles Skill Tree Wireframe 1SM Miles Skill Tree Wireframe 2