Tutorial on designing a Music app UI using sketch for Mac

In this tutorial, I will be designing a music player app UI using Sketch for mac. The tutorial will cover essential shortcuts and tips for designing a better app interface.

Before, jumping onto Sketch, I would strongly recommend everyone to start by sketching the wireframe of the app on a piece of paper. This will help you to organize the contents and the navigation and thereby reducing the decision making while working on Sketch. But one may decide to make minor tweaks while desingning on Sketch.

Firstly open sketch and enter "A" to open the artboard options. From the inspector(right-hand sidebar) click iPhone 7.

Now press "R" and make 3 rectangles side-by-side as shown in the below screenshot.
Pick colors of your choice ( I have selected 3 colors, but you may choose to select more than 3 colors)

Now, select rectangle from Insert from the top-left, and simply drag to make a rectangle or enter value 375 x 667 as width and height respectively.Remove the border by unticking the border option from the inspector. 

Now select the rectangle and then go to fill, select gradient tool (refer screenshot below)

Now click on the top gradient line, you can see two points each at the top and the end of the line. Click on the top point and select the red color from the color pallet, for the bottom point click black as shown in the screenshot below.

You can press control C to directly select a color from the color palette. Move the points up and down to get the desired gradient. 

Now the gradient is in place, download image of your favorite musician and drag and drop it to the artboard. I used guys behind Daft Punk. Adjust the image by reducing the size and centering it to the artboard. 

You may reduce the opacity of the image or change the blending mode to multiply (I kept the blending mode to normal and reducing the opacity of the image). You may also play around with adjusting the color. (refer screenshot). Once done right click the image and lock the layer or by going to the layer panel and click the lock symbol by clicking the option(lock icon only appears when you long press Option).

Now Download the Material Design app icons from here. Select the icons from the downloaded file and copy it to the current file we are working on.

Icons that you need to copy

1.Hamburger menu

2.Pause button

3.Skip back and Skip next icon

Arrange the icons as shown in the screenshot. 

Click the 3 icons( pause button, skip next and previous) and click distribute horizontally. 

Now select the 3 icons again and go to the align panel at the top of the inspector and click "Align vertically"

Now click "T"(shortcut for text) select font "Avenir" and type the name of the song above the 3 icons. 

Refer Screenshot

Now for the progress bar, click "L" for line and make a line below the text. Change the color of the line to white and thickness to 4px and make the ends rounded.  

From here on it is about adding playlist and other elements, you may refer to screenshot below. 

If you are getting stuck somewhere, please drop a comment and I will help you out.

I hope this tutorial helps you out in designing better interfaces. Please comment below and share the tutorial. I would love to hear from you and please mention what would like me to post next in the comments.