Page 120 - KEC Khaitan C8.3 Flipbook
P. 120
4. Ensuring Navigation & Usability
Navigation is the way users move between different parts of the app, while usability refers
to how easy the app is to use. Buttons and menus should be clearly visible and easy to
tap. A well-structured app layout ensures users can quickly find what they need without
confusion.
DESIGNING THE MUSIC APP IN ADOBE XD
Follow these steps for designing a music app using Adobe XD:
Step 1 Open Adobe XD.
Step 2 Click on File → New to create a new project.
Step 3 Choose an iPhone 14 Pro Max artboard (or any mobile size).
Step 4 Click on Create to start designing the music app.
Step 5 Use the Rectangle Tool (R) to create the background and apply a gradient fill.
Step 6 Use the Text Tool (T) to add a title like “MUSIC” at the top of the screen.
Step 7 Import an icon for music (use the Icons 4 Design plugin or SVG import).
Step 8 Use the Rectangle Tool (R) to create album cards for the "For You" section.
Step 9 Add album cover images inside the cards using Mask with Shape.
Step 10 Use the Text Tool (T) to add labels like “For You” and “Popular Albums” above the
sections.
Step 11 Create rounded square cards for the "Popular Albums" section and add images.
Step 12 Design the music categories section using rectangles with gradient borders.
Step 13 Label each category (e.g., HIP-HOP, ELECTRONIC, CLASSIC, OLD) using the Text Tool (T).
Step 14 Use the Rectangle Tool (R) to create a music player at the bottom of the screen.
Step 15 Insert an album cover inside the player and add song title and artist name.
Step 16 Use the Rectangle Tool (R) to create a progress bar, with a filled rectangle showing
progress.
Step 17 Add timestamps (e.g., 1:56 / 2:45) using the Text Tool (T).
Step 18 Use the Ellipse Tool (O) to create play, pause, forward and backward buttons.
Step 19 Insert icons inside the buttons (use Icons 4 Design plugin or import SVG).
Step 20 Use the Ellipse Tool (O) to create a search button and add a search icon inside it.
Step 21 Position the search button in the top-right corner of the screen.
118 Premium Edition-VIII

