Static Spotify Widgets

4 min read • 17 December, 2020

I love music. I listen to an assortment of genres, ranging from as large as pop and rock to as niche as the smallest indie bands from foreign countries. I would never have gained this addiction for such an amazing form of entertainment had it not been for platforms like Spotfiy and Bandcamp. I decided that, with the update to my site to a Next.js instead of the old Jekyll version, I should give myself less restricitions to let myself have more fun with this.

One prime way is the new area of what I'm listening to billions of times a day. This took a lot of time and, although the source code isn't ready to be published quite yet (I still have to create it and the about page, as of writing), a nice dive into how this will look seems like fun.

Screenshot from Figma of this project

With the help of Charlie and Daniel. We got to that final iteration. Here's the logic behind all of it:

  • A light and dark version is a must. Because of such, we needed to design at least 2 versions, one that would look great when the visitor was broadcasting that they were on light mode and one when they were on dark mode.
  • A fun option is a nice to have. Why not go all the way with "Spotify Green?" A fun option is nice to have, but definetly not needed. It'll be an option you can have as opposed to the automatic light and dark theme banners.
  • It needs to be clear where you are going and who the data is from. Attribution is essential. The Spotify logo has to be there. The official colours (green, white, and black).
  • It needs to be responsive. Short titles like "NiNa" and "Ready to" can appear big and proud, but longer titles like "NIGHT RUNNING" and "The Devil's Bleeding Crown" need to go down in size to fit into the constraints of the widget.
  • It needs to be touch-friendly. You're wasting a lot by having both a desktop and mobile version of everything. Because of such, one version that works great for both desktop and mobile is essential.

With these criteria out of the way, I made the first prototypes in Figma and invited Charlie to help out on expanding them.

The first prototypes for this project

We checked a lot of the boxes with this first version: a fun option, clarity, touch friendly, and there were versions for dark and light. However, we never experimented with different artist and song/album names. It would need work. Like any good design should be, we slept on it and figured it still needed work.

I sent a message over to Daniel and he taught me about a tool I wish I knew about sooner: Auto Layout. In short, auto layout lets you prototype things that will act reactively based on another (growing to fill, shrinking to fit, etc). With this new found knowledge, I put it straight to work as he taught me, along with some of the advice for padding on the widgets themselves, and got what is now the final product.

Although this is starting as just a concept, I can't wait to create it into a real tool and share it on GitHub for others to enjoy a neat way to embed Spotify albums and songs. While working on the final widgets, it also hit me that I should make one library for Spotify widgets and more, that you can use with React. But that's a story for another day, at another time.