In December, I had the idea to record a few Christmas Songs for my family and send to them as an EP called the “Petersen Family Christmas Songbook.” I wanted the songs to feel like a special little package with their own website and design. The problem was that with project deadlines and holiday festivities fast approaching, there was no time—I had to work fast.
Since I knew I needed a fairly simple design for the Songbook page, I jumped into the code and ended up building the entire page right in Codepen. I used google fonts to test a few different styles for the header, created a christmas-y background using some #iconaday work from a couple christmases ago, and used a handy js library to customize Soundcloud’s audio player api.
Designing right in the browser makes it easy to test devices, fonts, layout and iterate quickly when things aren’t lining up right. In the end, I completed the page design from conception to launch in about 4 hours on a Monday morning! By noon I was able to test a working audio player on my phone over lunch.
If you want to get into the browser faster on your designs, checkout codepen and if you’re in need of a simple audio player that doesn’t look like the stock Soundcloud player, fork my pen and let me know how it goes!