How to Create a Music Player App UI Design in Adobe XD

How to Create a Music Player App UI Design in Adobe XD

What You'll Be Creating

In this Adobe XD tutorial you will learn how to create a music player UI design.

What You Will Learn in this Adobe XD UI Tutorial

• How to create a music app mockup in Adobe XD
• How to create icons in Adobe XD
• How to set up grid in Adobe XD
• How to save components in Adobe XD
• How to create a repeat grid in Adobe XD

For more inspiration on how to adjust or improve your final Adobe XD app UI kit you can find plenty of resources at GraphicRiver.

What You Will Need

You will need the following resource in order to complete this Adobe XD music player UI kit:

• San Francisco Compact Display font
• Music Player Icons

Music Player Icons

1. How to Add the UI Patterns to the Music App Mockup

It’s always a good idea to start your music app interface with a basic sketch on paper. You can easily establish the main components of your music player UI design and the rough locations and proportions. 

A paper sketch is the perfect start for the digital wireframe. Having in mind the overall look of your music interface makes things a lot easier once you move to the design process in Adobe XD.

• 
  Wireframing
  A Beginner’s Guide to Wireframing
  Winnie Lim

Step 2

Let’s open Adobe XD and select the iPhone XR/XS Max/11 (414 x 896) template to create a 414 x 896 artboard.

Step 3

Now, let’s create the digital music app mockup. Looking at the paper sketch you’ll notice that there will be three main sections (or patterns) of the music player UI design. Let’s start with these.

Pick the Rectangle tool (R) and create a 414 x 70 px shape. Use the smart guides to easily place your shape as shown in the following image and then go to the Property inspector. Disable the existing Border using that check box and then click the Fill color well and change the color to #646E83.

While you’re working on the wireframe make sure that you do not waste time styling objects or adding too much text content. Your only worry should be the structure of the design.

Step 4

Make sure that the Rectangle tool (R) still active and create a 414 x 204 px shape. Place it as shown in the following image.

Step 5

Using the same tool, create a 374 x 50 px shape and place it as shown in the following image.

Step 6

Select the rectangle made in the previous step. Hold down the Option and the Shift key and simply drag a copy of your selection below the original shape, as shown in the first image. Make sure that you’re leaving a 10 px gap between the original shape and the copy. 

Repeat this technique until you have a column of nine rectangles, as shown in the third image.

Step 7

These will be the main components of your music player UI kit.

At the top, you have the classic navigation bar where you will add the control buttons for your app. At the bottom is the player bar where you will integrate all the basic controls for a music player. Between the two bars you have the songs list where you will add the song information and the control buttons for each song.

2. How to Add the Controls to the Music App Mockup

Step 1

Based on that paper sketch, let’s add the controls to the this music app mockup. Let’s start with the navigation bar. Pick the Rectangle tool (R) and hold down the Shift key to easily create a 40 px square. Place it as shown in the following image, disable the Border and set the Fill color to white (#FFFFFF).

Make sure that this square stays selected. Hold down the Option and the Shift key and simply drag a copy of your selection to the right, as shown in the second image. Use the smart guides to perfectly align this new shape.

Step 2

Pick the Text tool (T), click inside your artboard and add the Title piece of text. Place it as shown in the following image, but don’t bother to edit the font and its attributes for now.

Step 3

Move down to the top rectangle from your songs list. Pick the Rectangle tool (R) and hold down the Shift key to easily create a 30 px square. Place it as shown in the first image. Add a copy of this shape and place it as shown in the second image.

Step 4

Pick the Rectangle tool (R) , create a 38 x 24 px shape and place it as shown in the first image.

Switch to the Text tool (T) and add the Artist Name and Song Name pieces of text, as shown in the second image.

Step 5

Focus on the player bar. Pick the Rectangle tool (R) and create a 374 x 20 px shape. Fill it with white and place it as shown in the first image.

Using the same tool, create an 80 px square and place it as shown in the second image.

Step 6

Pick the Rectangle tool (R) and create a 50 px square. Fill it with white and place it as shown in the first image. Duplicate this new shape and drag the copy to the left, as shown in the second image.

Using the same tool, create two 20 x 16 px shapes. Fill both rectangles with white and place them as shown in the third image.

Step 7

The music app mockpup is complete. Some of these shapes will be stylized and used in the final music player UI kit, some will only serve as guides for buttons and icons that you’re about to add and a few will be removed.

3. How to Style the Navigation Bar of This Music Player UI Design

Step 1

We’ll go for a dark and clean style for the overall Adobe XD music player UI kit. The main components will have different shades of black to visually separate each section without being too strident. We won’t use a different color for the navigation bar, but we’ll make sure that we highlight the two main buttons that lay on it. We’ll only use white for all the icons and text to create a nice contrast and make every elements as legible as possible. Finally, we’ll use a brighter color to call attention to the most important elements of the Adobe XD app UI kit.

First, let’s change the color of the artboard. Simply click the name above your artboard and go to the Property inspector. Click that Fill color well and change the color to #191A1F.

Step 2

Select the rectangle that makes up your navigation bar and delete it. It was important to have it when we were aligning and establishing the spacing between components and buttons, but at this moment it is no longer useful. This will bring more focus on the buttons and the text from the navigation bar.

Select the left square from your navigation bar and go to the Property inspector. Change the Blending Mode to Overlay, set the corner radius to 15, and then click the Fill color well and lower the Opacity to 50%.

Make sure that this shape is still selected and hit the Command-C. Select the other square from your navigation bar and hit Option-Command-V to add the easily copy and paste the appearance attributes from one shape to another.

Step 3

Let’s create a simple magnifying glass icon. First, you need to set-up the grid to create and align the needed shapes much easier and faster. Click the name of your artboard and go to the Property inspector.

Focus on the Grid section and click that check-box to enable the grid. Select Square from the drop-down menu, enter 1 in the input box, and then click the color well. Change the color to #C7C7C7 and don’t forget to lower the Opacity to 50%.

Pick the Ellipse tool (E) and create a 10 px circle. Disable the Fill, change the Border color to white, increase the Size to 2 and check the Inner Stroke button.

Step 4

Pick the Line tool (L), create a small oblique path and place it as shown in the first image. Disable the Fill, change the Border color to white and make sure that the Size is set to 2.

Select this new path along with the circle and Group them (Command-G) to easily select and move both shapes at once.

Step 5

Now that the magnifying glass icon is complete, let’s create a classic menu icon. Pick the Rectangle tool (R), create a 12 x 2 px shape and fill it with white. Add two copies of this rectangle and drag them below the original, as shown in the second image.

Select all three rectangles made in this step, go to the Property inspector and click the Add button.

Step 6

Select the two icons made in the previous steps and place them as shown in the following image. These will be your navigation bar buttons.

Step 7

For the text style we’ll use San Francisco Compact Display font from Apple. It offers an extensive range of styles and languages which gives you the possibility to achieve optimal legibility at every point size or to easily adjust text content when needed.

Select that Title piece of text and replace it with 90’s Hip Hop. Go to the Property inspector, select the San Francisco Compact Display font, change the Style to Semibold and set the Size to 20. 

4. How to Stylize the Song Controls of Your Music Player UI Design

Step 1

Focus on the pieces of text. Select the top one and go to the Property inspector. Select the San Francisco Compact Display font, change the Style to Semibold and lower the Size to 16.

Select the other piece of text, use the same font, but change the Style to Light and lower the Size to 12.

Step 2

Select the left square from the song bar, go to the Property inspector and set the corner radius to 10.

Step 3

Select the white rectangle from the song bar and go to the Property inspector. Change the Blending Mode to Overlay, set the corner radius to 8, and then click the Fill color well and lower the Opacity to 35%.

Step 4

Pick the Text tool (T), add the 4:08 piece of text, set the color to white and place it as shown in the following image. Use the San Francisco Compact Display font, change the Style to Light and lower the Size to 12.

Step 5

Focus on the right square from the song bar. Pick the Rectangle tool (R) , create a 4 px square, fill it with black and place it as shown in the first image. Add two copies of this tiny shape and place them as shown in the following images.

Once you’re done, select all three squares and click the Add button from the Property inspector. Change the Fill color of this shape from black to white and then select the white square that lies in the back and delete it.

Step 6

Select the rectangle that makes up the top song bar and go to the Property inspector. Set the corner radius to 10 and change the Fill color to #232429.

Step 7

Select the shapes and the text that make up the top song bar and Group them (Command-G).

Make sure that your group stays selected, switch to the Assets panel (Shift-Command-Y) and click the plus button from the Components section. Alternatively, you can use the Command-K keyboard shortcut.

Step 8

Make sure that your component is still selected and click the Repeat Grid button from the Property inspector or hit the Control-R keyboard shortcut. Click that bottom handle and drag it down to add eight copies of your component, as shown in the second image.

Move the cursor anywhere between your components and click and drag to reduce the overall spacing between components to 10 px, as shown in the third image.

Step 9

Double-click the fourth component to select it and then double-click it again to select the rounded rectangle inside it. Go to the Property inspector and replace the Fill color with #785BFC. We’ll use this purple to highlight the most important elements from the design. The ones that should first catch the eye of the user when using the app.

Step 10

Focus on the components one by one. Double-click each component to select it from the grid and then double-click it again to select the pieces of text. Replace the existing information with the one show in the following image.

5. How to Style the Player Controls of the Music App Interface

Step 1

Focus on the top side of the player bar. Pick the Rectangle tool (R), create a 280 x 4 px shape and place it as shown in the following image. Set the corner radius to 2 and change the Fill color to #232429.

Step 2

Make sure that the Rectangle tool (R) is still active, create a 98 x 4 px shape and place it as shown in the following image. Set the corner radius to 2 and change the Fill color to that purple (#785BFC).

Step 3

Using the Rectangle tool (R), create a 20 px square and place it as shown in the following image. Set the corner radius to 7 and change the Fill color to white.

Step 4

Select the main shape that makes up the player bar and change its color to #0F0F0F.

Pick the Text tool (T) and add the white pieces of text shown in the second image. Use that same San Francisco Compact Display font, change the Style to Light and set the Size to 12.

Step 5

Select the largest white square from the player bar and focus on the Property inspector. Change the Fill color to purple (#785BFC) and set the corner radius to 25.

Step 6

Make sure that your purple button is still selected, keep focusing on the Property inspector and enable the Shadow effect. Enter the attributes shown in the following image and then click the Shadow color well. Change the color to #785BFE and lower the Opacity to 50%.

Step 7

Select the white squares to the left and right of the purple button. Set the corner radius to 15 and change the Fill color to #232429. Considering that this play/pause button is the most important element from this bar it should have the most visual weight.

Step 8

Download these Music Player Icons and drag them inside your music player UI design document. Scale these shapes and place them as shown in the following image.

Congratulations! Your Music App Interface is Finished!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future Adobe XD app UI kit projects. Don’t hesitate to share your final music app interface in the comments section.

Feel free to adjust the final design and make it your own–adding motion and transitions will be a great next step. You can find some great inspiration at GraphicRiver, with interesting solutions to create your amazing Adobe XD music player UI kit.

Learn More About UI Design in Adobe XD

We have loads of tutorials on Tuts+, beginner to intermediate level, take a look!

• 
  Adobe XD
  How to Create a Hotel Booking UI Design in Adobe XD
  Andrei Marius
• 
  Adobe XD
  Your First Wireframe With Adobe XD
  Babar Suleman
• 
  Adobe XD
  New Course: 15 Time-Saving Shortcuts for Adobe XD
  Andrew Blackman
• 
  Adobe XD
  How to Create a UI Prototype Using Adobe XD
  Rafiq Elmansy
• 
  Sketch
  How to Create One-Sided Borders in Sketch and Adobe XD
  Adi Purdila
• 
  Adobe XD
  Quick Tip: Design an SVG Arrow Graphic in Adobe XD
  Kezz Bracey
• 
  Adobe XD
  How to Use Responsive Resize and Constraints in Adobe XD
  Adi Purdila
• 
  Adobe XD
  Master Adobe XD With These 4 Courses
  Andrew Blackman