Published on | Prototyping: From UX to Front End — Medium Todd Reynolds

18 of 100

My goal is to create 100 prototypes of interactions from some of my favorite apps. I know my way around Framer a little bit, but there is always room for improvement. Using Framer to recreate existing apps should be an effective way to practice and refine my craft.

It’s ironic that the UI for Apple Music is better on Android than iOS. 🤔

N° 18 — “Now Playing” in Apple Music for Android

https://framer.cloud/PiGqu

Design

Once I find an interesting or novel interaction, I make a basic plan about what my prototype will highlight. In Apple Music for Android I wanted to do the following:

Transition between mini-player and the Now Playing details view, with all of its associated motion design.
Include the actual music, which would allow me to also toggle between playing and paused.
Recreate the states for playing and paused.
Recreate the looping animation for the little equalizer that shows which song is playing in the list.
Drag down to transition back to the mini-player.
Drag up to reveal additional actions and details.

Next, I take screenshots from the device I will be prototyping for. In this case, I’ll be creating a prototype optimized for a Google Pixel 2. I use the screenshots to design the elements I need. I drop the screenshots directly onto the Framer design canvas, which creates Frames with each image as the respective image fill.

I create the Google Pixel 2 frame for my prototype and then I start recreating the interface. Trying to recreate a quasi-pixel-perfect replica of a UI for an app like Apple Music is time consuming. I’d probably be better off just eyeballing it and focusing on the interactions. I need to be better at resisting my impulses for perfectionism, especially when it doesn’t really matter.

When I do choose to trace UI, one aspect that really helps is that I can copy from within one frame to another and it will place it in the same position as it was in the original frame. So for example, I could trace out a placeholder rectangle for the cover art, add the three lines of text to the right of it, select those four elements, copy them, select my main frame, and paste them right where they need to be.

Framer’s included library of icons comes in handy, especially when designing for Android, thanks to the inclusion of many Material Design icons. But, since this app is an odd Apple-Android love child, there are a few icons I need to make from scratch, like the download icon.

For this prototype I created a few ‘dummy’ views so I could reference the size and position of the album art.

Code

As usual, I made fanatical use of the utils.modulate method. Modulate allows me to prototype the transition between the full player and the mini player when the user drags the player open and closed. Here’s the giant block of code for that transition:

nowPlaying.on Events.Move, ->
   miniTitle.opacity = Utils.modulate(nowPlaying.y, [575,525], [1,0], true)
   if playing == true 
      albumArt.height = Utils.modulate(nowPlaying.y, [575, 0], [48, 347], true)
      albumArt.width = Utils.modulate(nowPlaying.y, [575, 0], [48, 347], true)
      albumArt.x = Utils.modulate(nowPlaying.y, [575, 0], [16, 32], true)
      albumArt.y = Utils.modulate(nowPlaying.y, [575, 0], [8, 48], true)
   else 
      albumArt.height = Utils.modulate(nowPlaying.y, [575, 0], [48, 251], true)
      albumArt.width = Utils.modulate(nowPlaying.y, [575, 0], [48, 251], true)
      albumArt.x = Utils.modulate(nowPlaying.y, [575, 0], [16, 80], true) 
      albumArt.y = Utils.modulate(nowPlaying.y, [575, 0], [8, 103], true)
    mask.opacity = Utils.modulate(nowPlaying.y, [575, 0], [0, 1], true)
    btnFF.opacity = Utils.modulate(nowPlaying.y, [575,525], [1,0], true)
    play.height = Utils.modulate(nowPlaying.y, [575, 525], [32, 56], true)
    pause.height = Utils.modulate(nowPlaying.y, [575, 525], [32, 56], true)
    play.width = Utils.modulate(nowPlaying.y, [575, 525], [32, 56], true)
    pause.width = Utils.modulate(nowPlaying.y, [575, 525], [32, 56], true)
    playPause.x = Utils.modulate(nowPlaying.y, [575, 525], [323, 177], true)
    playPause.y = Utils.modulate(nowPlaying.y, [575, 525], [16, 535], true)

The code for simply tapping the (left side of the) mini player is easier because I can just animate between states. I put all those animations into custom functions:

openDetailView = ->
   nowPlaying.animate("detail")
   if playing == true
      albumArt.animate("detail")
   else
      albumArt.animate("notPlaying")
   miniTitle.animate("detail")
   playPause.stateSwitch("detail")
   play.stateSwitch("detail")
   pause.stateSwitch("detail")
   btnFF.animate
      opacity: 0
   mask.animate
      opacity: 1

closeDetailView = ->
   nowPlaying.animate("mini")
   albumArt.animate("mini")
   miniTitle.animate("mini")
   playPause.stateSwitch("default")
   play.stateSwitch("default")
   pause.stateSwitch("default")
   btnFF.animate
      opacity: 1
   mask.animate
      opacity: 0

Where this prototype really got fun was when I implemented the Framer Audio module by Benjamin den Boer. This simple module allowed me to quickly and easily include the audio track with play/pause functionality. It also includes the ability to slow the track’s progress with the slider. The first step was to add the module to the project’s “modules” folder. Then, reference the module like this:

{Audio, Slider} = require "audio"

Thanks to this module’s .wrap method, it only took me six lines of code to add all of that wonderful prototyping goodness:

player = Audio.wrap(play, pause)
player.audio = "Mutations.m4a"

slider = Slider.wrap(bg, fill, knob)
player.showProgress(slider)

player.showTime(time)
player.showTimeLeft(timeLeft)

And don’t let me forget the little equalizer icon. That was a fun piece of the puzzle too. First, I set up new animations for different height levels for each of the three bars. Here’s what that looks like for my first bar:

bar1A = new Animation bar1,
   height: 6
bar1B = new Animation bar1, 
   height: 10
bar1C = new Animation bar1,
   height: 14
bar1D = new Animation bar1, 
   height: 20

Next I created two more animations for each bar—one for returning to the default height and another for stopping (when the music is paused).

bar1Reverse = new Animation bar1, 
   height: 2
bar1Stop = new Animation bar1, 
   height: 2

Then I set up the reverse animation to start after each of the height animations finished:

bar1A.onAnimationEnd -> 
   bar1Reverse.start()
bar1B.onAnimationEnd ->
   bar1Reverse.start()
bar1C.onAnimationEnd ->
   bar1Reverse.start()
bar1D.onAnimationEnd -> 
   bar1Reverse.start()

Lastly, I used an array and Utils.randomChoice to pick which animation should kick off when the reverse animation is finished.

bar1Animations = [bar1A, bar1B, bar1C, bar1D]

bar1Reverse.onAnimationEnd ->
   nextBar1Animation = Utils.randomChoice(bar1Animations)
   nextBar1Animation.start()

I repeated that pattern for the other two sound bars and then hooked them up to tapping the play and pause buttons:

startSoundBars = ->
   bar1A.start()
   bar2B.start()
   bar3A.start()

stopSoundBars = ->
   bar1Stop.start()
   bar2Stop.start()
   bar3Stop.start()

play.onTap ->
   bars.visible = true
   startSoundBars()

pause.onTap ->
   stopSoundBars()

Lesson Learned

I had such a good experience including the Framer Audio module. I need to try incorporating more modules in my prototypes. I forget that leveraging other people’s work is an option. But thanks to a module, I was able to add some sweet functionality with just a few lines of code. Without it I doubt I would have gotten anything close to that.

See for Yourself

Feel free to download the prototype and poke around in the code a bit (the link is repeated below). Just remember, prototyping isn’t about writing clean, elegant code. It’s about doing just enough to communicate the intended experience.

Now Playing in Apple Music for Android
https://framer.cloud/PiGqu

Thanks for following me and my journey to 100 prototypes. I hope you enjoy my little experiments with Framer. If you have any ideas of something you’d like to see me prototype, you can reach out to me on Twitter @toddjreynolds.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Prototyping the Transition to the “Now Playing” View in Apple Music for Android was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prototyping the Transition to the “Now Playing” View in Apple Music for Android

Cool stuff, every week

More Articles