I made use of figma for my design and started to design the splash screen for mobile view, iPhone 14 pro max to be precise. The splash screen consist of a two triangle one on the top and the other on the bottom, while the feel music app logo is in between both triangles.
Login and Sign up Page.
Then I moved on to developing the login page and the sign up page, but before that I create two components which will be needed for the design of the pages which are the input feild components and the button components, (creating components that can be used across your design is a good design practice as it saves time and create consistency across your design). After making the two components I create a mobile grid style consisting of column grid and row grid, (using grid system helps create uniformity across your design) then I dive into the designing the login and the sign up Page.
Home Page
Designing a homepage for a music app was kinda challenging at first so I went to behance and check out other music app designs and I got an idea of how a music app home page should look like, and I started designing, but before designing the home page I created an attractive and interactive menu for the home page, library page and search page. And then i made it into a component set to be used across my designs, the home page is made up of four list of previously played song, three list of downloaded song, a user icon which leads to the profile page on the top right corner, and the menu bar.
Playlist.
After designing the home page I closed for the day and the next day I started by designing the playlist page which is made up of the nav bar which is a group of text ( Playlist, All songs, Albums, and downloads), then followed by a three list of song already on the playlist, a "Add to Playlist" button and the menu bar at the bottom of the page.
All songs, Albums, and downloads
After the design of the playlist I moved on to designing the all songs, albums and download page, which was kinda easy given the fact that most of this pages content was already part of the playlist page.
Search Page
The search page screen consist of a search box with the words " search for what to listen to " and a search icon pushed to the right along side it, and the menu bar at the button of the page.
Player Page
Designing the player page was most challenging and fulfilling, since I have to create the pause the forward and the stream button from scratch, but I got the shuffle icon and the other icons from iconify, then put them together, I felt like I was chosen for this 😊, then I made the album cover image of the supposed music playing on the player the background image of the player page with an opacity of 25%, and then placed the album cover image of full opacity on top of it just above the the main player components, with a back icon on the top left corner which leads to the home page.
Profile Page
The profile Page contain the image of the user and below it are leads to information on the user.
Design for a dashboard on a Tour Bus
After the design of mobile view, I made the design for a dashboard on a tour bus with the screen resolution of 1200 by 720 in mind, I just repeat the same process as I did with the mobile view design, except for an increase in font size and logo size. The design for the dashboard on a tour bus still fit perfectly for a web browser.
Would have loved to develop for a smart watch, but couldn't get through with it, because of time.
Colors and typography used across my design
Fonts style: Rubik
Colors: Hex code
Background 1: OFOBOD
Background 2: 453330
Display 1: B65544
Display 2: EO5640
Optional: F7E7D8
White: FFFFFF
~Blackdude
Email: tanrosep@gmail.com