Sprint 5
This week, I worked on setting up my Music page. This page will be used by those who wish to actually listen to the band’s discography right on the website. I figured that the best way to embed the band’s albums was to use Bandcamp, because Bandcamp has the most complete collection of their work, and provides an embeddable player that shows the album artwork on a large scale, offers intuitive navigation between an album’s songs, and also provides a tracklist. Embedding the Bandcamp players seemed like it would be an easy enough task, but the main challenge was formatting the players, plus the background information about each album, in a manner that would look visually appealing and, most importantly, responsive.
I tried numerous techniques for displaying this content. One technique I tried was creating 3 large rows, one for each album, with the embedded player on one side of the row and the background information right next to it. This looked decent enough on desktop but wasn’t very responsive. I also tried out inserting a panel with tabs. A default tab would be open with a particular album and when users clicked on a different tab, another album would show up in the panel. I decided this wasn’t the best idea because I wanted all the albums to be visible at once on the page. I finally settled on displaying my content in 3 large columns: 1 column for each album. Each column contains an embedded player and the background information is placed underneath the player. When the screen size gets smaller, the page responds by stacking the embedded players plus background information paragraphs on top of each other, rather than next to each other in columns.
Something I continued learning this week about my project was how to work with responsive grids and responsiveness in general. I experimented with different layouts of the music players, trying out different grid formats, and resizing the window constantly to see how the page would adjust to different types of screens. This may not seem very difficult, but making sure that your content looks good enough on any screen, from a large desktop to a tiny iPhone, is actually a lot of work and trial & error.
Something I learned about my process was that it’s better to get the main work done for every page of my site, or for every part of a project in general, and then go back at the end if there’s time and make whatever necessary adjustments, rather than focusing on making each aspect of the project perfect along the way. I used to try and focus on making each aspect perfect but I realized this was a waste of time because it’s better to have an entire project done, but with imperfections, rather than to have only 30% of it done, but perfectly.
Something I learned about the design process in general was that it’s good to have a general skeletal idea of how you want a particular thing designed before you start working on it, because this will guide your overall process. However, it’s not necessary to plan out every minor detail beforehand because 1) This limits your creativity and 2) You will have to adapt to various factors that come up as you are designing, which will make sticking to ever minute detail nearly impossible, unless your project is super simple.
