Spotify UI/X
General Info
Creating webpages using TailwindCSS for Spotify.
Problem
A new client heard about the work we did on the ULEMHub website and recommended us to Spotify, a music company. They want us to implement their new UI design in TailwindCSS for the 3 website screens below:
Process and Solution
We first start by looking at the 3 website screens provided to us to figure out the proper layout. We use Balsamiq to sketch out the wireframe designs for each page. It will be used as a guide before we start coding. On these pages, we also determine the color palette and styles they want us to include.
We use JIRA as our project management tool. It will help us with our flow, assign tasks, and keep us in line. We split up the work:
- Header and Play bar of Home Screen, and Playlist Details (David)
- Side Nav and Body of Home Screen, and Playlist (Gregory)
I collected the different icons from 2 websites, because I wasn't able to grab all of them in one place. I got most from Google Fonts-Material Icons. For the album covers, we both love hip hop music, so you'll see a lot of hip hop artists on our pages.
Issues that I ran into were sections overlapping each other. Trying to keep the play bar at the bottom. Took awhile to figure it out. Also, it was only my second time using tailwind css for a project. I had to play around with the codes/properties/elements placements. So many divs. Tailwind CSS website was very helpful.
We made sure the 2 pages are link correctly. After completion, it was uploaded to GitHub and deployed on Vercel.
Languages, Tools, Resources
- Balsamiq Wireframes
- JIRA Project Management
- HTML
- CSS
- PhpStorm
- GitHub
- Vercel
- Tailwind CSS Documentations
Icons, Logos, and Album Covers
Sources
Contributors
- David Khem GitHub: davidkhem
- Gregory Francis GitHub: Gregory395
