Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Designing A Responsive Music Player In Sketch (Part 2)

Welcome to the second part of this tutorial, in which we will finish designing the music player that we started in part one1. This includes creating the icons at the bottom, as well as making the music player responsive, so that all elements adapt to the width of the artboard and, thus, can be used for different device widths.

Our premise in creating all of the icons is to use basic shapes as often as possible, instead of custom vector elements. Shapes are much easier to set up and modify, and we will still be able to combine them into more complex forms using Boolean operations.

Further Reading on SmashingMag: Link

The grid would hinder more than help in the creation of the icons, so you can hide it with Ctrl + G.

Let’s begin with the repeat icon in the bottom-left corner.

6
This is the music player we started in part one of this tutorial. This second part is all about creating the icons at the bottom and making the player responsive. (Large preview7)

Repeat After Me Link

The repeat icon is based on a simple rectangle, with dimensions of 22 × 12 pixels and fully rounded corners. Change from the fill to a border again, so that you can set the position to “center” and the thickness to “2.” For the color, choose white; the “Ends” need to be set to the middle icon in the border options. There’s also a chance we’ll want to use the same properties for the other icons, so set up a shared style: Click on the dropdown menu in the Inspector that says “No Shared Style,” select “Create New Shared Style,” and name it “Icons.”

8
Create a shared style that combines all of the styles we will need for the icons. (Large preview9)

After you have zoomed into the rectangle with Cmd + 2, enter vector point mode with Enter. Add a first point to the straight segment in the bottom left, where it meets with the curve. Copy its X position in the Inspector; add another point to the right, and paste this value but add “+5”. Do the same for the straight top segment, but on the right side: Add a point where it meets with the curve, copy the X position, add a point to the left, paste this value, and subtract “-5px”. Now, use the Scissors tool again to cut the segments between the points: first at the bottom left, then at the top right.

10
Add a point at the bottom-left (1), where the straight segment meets with the curve. Copy its X position in the Inspector, add another point to the right, paste this value there, and add “5px.” Do the same for the top segment, but in the inverse order (points 3 and 4). Finally, cut the segments in between with the Scissors tool. (Large preview11)

For the arrows, we can use the “Arrow” symbol again: Insert it, detach it, remove the group, set the border thickness to “2,” and resize it to a height of 3 pixels on the canvas while holding Shift (so that the ratio is maintained). Finally, align it to the bottom segment of the base shape.

Note: This might require you to change the Y position in 0.1 pixel increments. The easiest way is to focus this input field, hold the Alt key, and increase or decrease the value with the up or down arrow key.

Finally, duplicate the arrow, flip it horizontally, and align it to the top segment. Move all elements into a “Repeat” group to finish this first icon.

12
This is what the repeat icon looks like when it’s ready. (Large preview13)

At Random Link

Whereas we started with a rectangle for the repeat icon, the shuffle icon is based on a freeform vector shape.

Pan the canvas a bit to the right, away from the first icon, and press V for the Vector tool. But before you start drawing, set the “Round” dropdown menu (below the corners slider in the Inspector panel) to “Round to full pixel edges,” which will prevent points from being created with decimal numbers.

Now, click to add a point, then hold Shift (to constrain the movement to the horizontal axis), go slightly to the right, and make another click. Pressing Escape will stop the drawing process and let you focus the first point again with a click. As with the repeat icon, copy its X position in the Inspector, press Escape again, select the second point, focus its X field, and insert the value there, but add “+5”. Pressing Enter will move the point 5 pixels to the right of the other point.

Continue making the vector shape: Insert a third point at the top right with a click. Press Escape, focus the second point again, copy its “X” position, insert it at the third point, but add “+10.” Also copy the Y position — but in contrast, subtract 10 pixels here, to move the point up. For the last point, you need to constrain the movement to the horizontal axis again with Shift and a click to the right. Offset this one by 7 pixels on the X axis from the third point. Press Escape twice when you are finished.

You could also insert all of the points by instinct first and match their coordinates to each other later.

14
Create the points for the vector shape in this order. Copy the X (and Y) positions from one point to the other again for the correct placement. (Large preview15)

Give this line the same appearance as the repeat icon; the shared style we set up earlier makes this possible. Open the “No Shared Style” dropdown menu in the Inspector, and select “Icons.”

In addition to the round ends, the two points in the middle also need to be slightly rounded. Select all points with Cmd + A while still in vector point mode, and change the corners to “1.” Copy the right-pointing arrowhead from the repeat icon, and align it to the vector in the top right. Put them in a group, and duplicate and flip it vertically to create the second arrow. Be sure that the straight segments are at the same height.

We need to modify the second arrow slightly, so that it breaks where it meets the other one. For this, enter vector point mode for the line again, add a point before and after the intersection, and cut it with the Scissors. Trust your sense of proportion here. Finally, put these two groups into an overarching “Shuffle” group, and rejoice that you’ve finished the second icon.

16
Add a point before and after the intersection of the arrows, and cut it with the Scissors tool to create the final icon. (Large preview17)

My Absolute Favorite Link

The third icon, which lets you favorite a song, is rather simple. You might not realize it, but it’s a heart made from a simple circle. We just need to adapt its points a bit and change the point types. Create it next to the shuffle icon with a diameter of 20 pixels, and give it the same shared style “Icons” as the previous icons.

Now, to the points: Go into vector point mode, and change the point type of the bottommost point (it should already be selected) to “Straight” with 1 on the keyboard or by selecting the relevant option in the Inspector. That’s it! Cycle to the top point by pressing Tab twice, move it about 7 pixels down with the arrow key, and change the point type to “Disconnected” with 3, which lets you adapt the vector control points (the handles that stick out of the point) separately. Select the left one, move it up by 6 pixels, as well as 1 pixel to the right. Do the same for the right control point, but move it 1 pixel to the left instead.

The circle already resembles a heart; we just need to adjust the remaining points on the left and right slightly. Cycle to the left one with another press of Tab. This requires an “Asymmetric” point; press 4 to change to this type. With this adjustment, we are able to move the upper control point just a notch up, independent of its counterpart. This makes the heart a bit more curved at the top. Repeat the same for the vector point on the right (press Tab two more times to select it), and we are almost finished. All we need to do is to rename the shape to “Favorite.” That was a breeze!

18
The adjustments to go from a circle to a heart shape. (Large preview19)

Turn Up The Volume Link

Good that we were able to relax a bit with the favorite icon, because the volume icon needs more attention. It consists of two rectangles for the speaker shape — one modified to a triangle — and some circles for the sound waves, which will be removed for the most part.

Create the first rectangle with dimensions of 12 × 10 pixels. Duplicate it, hold Alt (to resize it from the center), grab the middle handle of the bottom side on the canvas, and drag it down until it has a height of 16 pixels. Modify it to a left-pointing triangle, like we did for the back icon: Enter vector point mode, and insert a point in the middle of the left side while holding Cmd. Then, pick the points above and below, and delete them.

After you have left vector point mode of the triangle, select it together with the rectangle and apply a Union Boolean operation (with Alt + Cmd + U). This will create the speaker shape, which you can set to the well-known layer style “Icons.” Flattening it with “Layer” → “Paths” → “Flatten” from the menu bar will convert it to a single shape and allow you to change the corners of all points in vector point mode to “1.” However, this will remove the Boolean operation and, with it, the ability to modify the individual shapes, so create a backup first and hide it. While this is generally a good idea before flattening any shape, we will also need this backup later on for another purpose.

20
Combine the rectangle and the triangle (which you created from a rectangle) to the speaker shape. To complete it, create a Union Boolean operation, set the “Icons” layer style, flatten it, and apply rounded corners of “1” for all points. (Large preview21)

Next, the sound waves: Add a first circle with a diameter of 18 pixels, and use the same layer style as for the speaker shape. Select it together with the speaker shape and center them on both axes, but move the circle 3 pixels to the right in succession. Duplicate it for the second sound wave, hold Shift and Alt, grab a corner handle, and drag it out from the center until the shape has a diameter of 28 pixels.

Now we need a stencil to add some points to the circles. It can be based on the triangle from the speaker shape, a copy of which we backed up earlier: Copy, paste and move it out of the hidden group to show it; also, place it at the top of the layers list with Ctrl + Alt + Cmd + up arrow. Before we move on, hide the flattened speaker shape with Shift + Cmd + H, because we need an undistracted view of the circles for the next steps. Now, change the width of the new triangle to 25px in the Inspector panel; the height can be left as is. Setting the opacity to 50% will make the circles shine through.

22
The steps required to create the circles for the sound waves. Please note that I’ve reduced the opacity of the speaker shape to highlight the circles. (Large preview23)

This allows us to enter vector point mode for both circles at the same time and to add points where they overlap with the triangle. Just make sure that it is left-aligned to the inner circle. The rest can be cut with the Scissors tool once you have left vector point mode. Unfortunately, you need to do that for each circle separately. You can remove the triangle after that, but show the speaker shape again. Finish the icon by putting all of its parts into a new “Volume” group.

24
Overlay the triangle on the circles, and add points where they overlap. Cut the rest (the red lines) with the Scissors tool. Please note that I’ve temporarily hidden the speaker shape. See the finished icon at the bottom right. (Large preview25)

Show Me More Link

After so much work, we deserve a break again. Luckily for us, the remaining “more” icon is made up of not more than three dots.

One way would be to create three circles with an offset, but we will take a slightly different approach and employ the border options instead. This has just a minor downside: The dots will not be 100% circular, but you will hardly notice that at the actual (zoomed-out) size of the icon.

Start with a horizontal line (press L) that is 23 pixels long and has a 6-pixel border applied to it. For the color, use white again. Open the border options, and bring your attention to the “Dash” and “Gap” fields. They allow you to create dashed or dotted lines, which we will take advantage of. For the dash, insert “1,” for the gap “8”. Voilà, this will give you three dots after you have set the ends to rounded! Just change the name to “More” and we have finished all five icons.

26
Create the “more” icon from a simple line by using the “Dash” and “Gap” fields in the border options. (Large preview27)

Unfortunately, when you go back to full view with Cmd + 1, you’ll see that the icons are scattered around the bottom of the music player. Let’s bring some order to this mess.

Show the grid again (with Ctrl + G), and use it to align the “repeat” icon 3 grid units away from both the left and bottom edges. Lock it with Shift + Cmd + L. Proceed to the “more” icon and also give it a spacing of 3 units from the right artboard edge. The vertical alignment doesn’t matter at the moment. Now, select all icons (or their groups) in the layers list, including the locked one; select “Align Middle” from a right-click to align them all to the locked element, and click on “Distribute Horizontally” from the same menu to space them equally from each other. Be sure to keep the icons selected for the next step.

Things are looking much better with the distribution of the icons; however, they are still pretty prominent. To remedy this, put all of them into an “Icons” group (and move it to the bottom of the layers list), and set the opacity to 30% with 3. Nice! We have one last thing to do for the icons: The favorite icon should represent the selected state and, thus, have the same bright color as the progress indicator. Duplicate and move it out of the group, rename it to “Favorite highlight” and assign the corresponding color from the “Document Colors.”

28
The finished icons, including the full layer hierarchy and the proper alignment to the grid. (Large preview29)

With this last action finished, the music player is complete. You have done a great job so far, but what if we want to use the player for different device sizes or widths?

Let me show you how to make the design responsive with the help of the “Group resizing” feature of Sketch.

From Fixed To Fluid Link

The requirement for this feature is to have a parent group that contains all of the elements created so far. Select them with Cmd + A, make an overarching group with Cmd + G, and rename it to “Container.”

If you try to resize this group now, the result will be far from pleasing, because all layers will simply stretch. With the default setting for the “Resizing” dropdown menu in the Inspector panel, both the size and spacing of an element will be relative to the parent group.

If we change this setting for some objects, we will start to see some initial results. Select the “Back button” group, for example, and set it to “Pin to corner”; this will stop the elements from being resized but will maintain the same distance from the closest edge of the parent group. Do the same for the “List button” group, and try to resize the “Container” group now. These two elements will show improved behavior.

30
Default behavior, left: not good. Improved behavior, right: much better! (Large preview31)

Let’s continue with the cover. Because Sketch can’t resize a layer and keep its aspect ratio at the same time, we will simply center the element. There are two ways to achieve this:

  • The first is to “Float in place.” This maintains the size of the object, but sets the spacing relative to the parent group. This makes it also suitable to center an element.
  • The second way is the “Pin to corner” property, which we already know.

Note: There’s one caveat for both options of image layers. The element can’t be smaller than the container; otherwise, it will be squished. Luckily for us, there’s a way to fix this: Change to a pattern fill. To do so, copy the image layer with Cmd + C, add a fill to the layer, enter its options, go to the second-to-last fill type (“Pattern Fill”), click on the preview area at the left of the dialog, and paste the image with Cmd + V. Now, the image will clip when the container shrinks.

32
Add a pattern fill to the image layer to improve its resizing behavior: Copy the image in the layers list and paste it into the preview area of the fill dialog. (Large preview33)

The next big task is the progress indicator. It needs some more consideration; however, with a few cleverly placed subgroups, it won’t be a problem at all. In its current state, we can’t achieve what we have in mind — the bars should resize with the parent group but keep their original spacing from it. Also, the circular indicator and the current playtime need to follow the position of the colored bar. The total time, however, should be pinned to the right edge.

Before we start adding the required subgroups, we can set the “Progress indicator” group itself to “Resize object”; this will retain the spacing of the element but change the width relative to the parent group. Now, select the two bars (“Bar” and “Bar progress”), create a new “Bars” group from them, and set it to “Resize object.” It should also include the “Indicator” group (containing the circular indicator and the comet tail); change it to “Float in place” in turn. This setting makes sure that the indicator follows the colored bar. The same goes for the “Progress time” group. To conclude, pin the total time to the right edge with “Pin to corner.” Give it another try: Resize the container and see the magic unfold before your eyes.

34
The new layer hierarchy of the progress indicator. The colored bars below the layers and groups show the respective resizing properties. (Large preview35)

Over The Hill Link

In comparison, the adaptation of the following text layers is rather simple. The group of the song title, as well as the text layer contained within, can be set to the “Resize object” property. This will ensure that the spacing is retained and that more and more of the text will be revealed as you enlarge the parent, but the gradient will keep covering the right part. The second text layer can be centered with “Float in place” again.

This setting also plays a big role for the remaining elements, because both the controls and the icons at the bottom should keep their relative spacing from the edges of the container (respective to each other), but their size should be left untouched. Apply “Float in place” to all of the mentioned elements (or their symbols or groups). For the icons, we need to make some additional changes: We want to pin the outer two icons to the outer edges of the container. The easiest way is to set the “Icons” group to “Resize object.” This will keep the distance to the edges of the artboard but will resize the group relative to the artboard’s width.

The highlighted “Favorite” icon requires some special treatment. Currently, it isn’t tied to the “Icons” group; and moving it into this group would give it a 30% opacity. The solution is to create a new “Icon outer” group that contains both this highlighted icon and the “Icons” group. Set it to “Resize object.”

Now, we have a fully responsive music player!

36
The required settings for the remaining elements. (Large preview37)

In case you want to switch to a completely different device type — say, the iPhone SE — select the artboard, and select “Scale…” from “Edit” in the menu bar (or press Cmd + K): Entering “320px” for the “Width” will scale all elements proportionally. From there, the width of an iPhone 6 is just a simple step away: Set the artboard’s width to 375 pixels, select the “Container” group, and enter 100% for the width in the Inspector panel. You’ll see all of the elements respond correctly.


>

Conclusion Link

I hope you’ve enjoyed the second part of the tutorial and learned more about using Sketch effectively for mobile app design. In the comments below, feel free to post your questions or mention alternative approaches to making a certain part of the music player. You can also contact me on Twitter (@SketchTips38) or visit my little side project, SketchTips39, where I provide more great tips on using Sketch.

Editor’s note: Christian Krammer is a web designer and Sketch app pro who has written The Sketch Handbook40, our brand new Smashing book. If you want to master all the tricky, advanced facets of Sketch, we recommend you get the book. It’s filled with practical examples and tutorials over 12 chapters and is available both in print and as an e-book.

(mb, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-1/
  2. 2 https://www.smashingmagazine.com/2015/04/using-sketch-for-responsive-web-design-case-study/
  3. 3 https://www.smashingmagazine.com/2017/03/sketch-figma-showdown/
  4. 4 https://www.smashingmagazine.com/2017/02/design-with-real-data-sketch-using-craft-plugin/
  5. 5 https://www.smashingmagazine.com/2015/05/sketch-with-material-design/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot1-large-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot1-large-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot15-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot15-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot16-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot16-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot17-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot17-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot18-large-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot18-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot19-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot19-large-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot20-large-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot20-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot21-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot21-large-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot21a-large-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot21a-large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot22-large-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot22-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot23-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot23-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot24-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot24-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot25-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot25-large-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot26-large-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot26-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot27-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot27-large-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot28-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/12/screenshot28-large-opt.png
  38. 38 https://twitter.com/sketchtips
  39. 39 http://sketchtips.info
  40. 40 https://www.smashingmagazine.com/sketch-handbook/

↑ Back to top Tweet itShare on Facebook

Christian Krammer is a web-designer from Austria, who lives there with his wife and 10-years old son. He was an avid Photoshop user once, but as soon as he got a Mac he switched over to Sketch and never went back again. Since then he literally lives in the design app and knows it inside out. Christian has designed everything you can imagine in Sketch, from websites to apps and icons, even print material.

He shares his knowledge about the application on sketchtips.info now for almost three years and has helped countless designers to become more versatile in the design app. His Sketch courses on Skillshare also supported many to brush up their skills. Christian is the author of “The Sketch Handbook”, that was released recently from Smashing Magazine. It features everything you ever wanted to know about designing with Sketch on 376 pages.

When he’s not tinkering around with Sketch he enjoys to do some sports or watch a good movie. By the way, his all-time favorite is Fight Club. Family and nature are very important for Christian and he loves to spend time outdoors.

  1. 1

    so, when CSS? ;-)

    0
  2. 2

    windowspleb here, so no sketch for me ¯\_(ツ)_/¯
    nice tutorial though, the way you add sublte details to the ui elements is inspiring. the smaller and more minimalistic a shape (like a ▶ button), the more i sometimes struggle to come up with a way of making it fit in, rather than looking kind of cheap.

    0
  3. 4

    hey! what program do you use?

    0
  4. 6

    Hello Christian – Amazing article. I am also a web designer, currently working on Adobe CS 6 and most probably be shifting on sketch in after some weeks.

    0

↑ Back to top