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
   115   116   117   118   119   120   121   122   123   124   125