Team Members: Kaylin Le, Lillian Ji
When we set out to redesign AZ Lyrics, we wanted to improve the aesthetic appeal of the website’s layouts, give certain elements (such as the navigation bar) more emphasis, and in general make the website more appealing to users. We opted to keep the trademark A-Z navigation option, but realized that most users would go straight to the search bar. Inspired by the way Google gave its search bar prominence, we placed the search bar in the middle of the home page. To make navigation of the rest of the website easier, we fixed the navigation bar to the top of each page and included another search link for other webpages that didn’t feature the search bar prominently like the home page.
In regards to featuring popular albums, we realized that not all users would necessarily be interested in the hottest albums and didn’t want to detract from the emphasis on the search bar, but we didn’t want to eliminate the feature altogether, so we opted to to keep the “What’s Hot” section lower on the page. Moreover, we incorporated the “What’s Hot” section as a gallery navigable with right and left arrows so that users aren’t flooded with too many images and content all at once.
We also wanted to promote AZ Lyrics’ social media presence with effectiveness but subtlety, so we fixed it to the side of each page without letting it become either too distracting or overlooked.
Open Sans #8F8DC4
For the artist page, we used a minimalist format with ample negative space, similar to the “What’s Hot” section of the homepage. As for the lyrics page, the original design required scrolling far down the page, so we replaced it more easily navigable, scrollable container, which was also used for the search results page. For search, we wanted to give users the option to sort results by album, artist, etc., and thus incorporated tabs.
I designed the home page, artist page, lyric page, and search page. In addition, I also created the basic html template for my other team members to use. i worked on css for all those pages.
Through this project, I learned a lot about the basis of css and html. In addition, I learned how to organize content on the web and focus on the important element. For example, the original AZlyric website consists of lots of materials on the home page and it is hard to navigate. I simplified the gallery into basic cover flows so it is more appealing to users. In addition, I aligned the elements in the middle so it is cleaner to look at. Overall, this project was a really good experiences and helped me a lot on creating appealing website.