Project: Paul Simon fansite

 Back to All Projects
  • Completed: 2015-07-01
  • Stack: HTML, CSS, SVG

Goal: Prototype a responsive website

I'll start by noting that this is not a 'full' site. It is design work. It is a prototype. Not that I didn't consider making a complete site out of it, I just couldn't imagine that anybody besides myself would ever use it if I did.

Nonetheless, I was so happy with the outcome that I couldn't let go of it anyway, so I ended up moving it from the school's server to my own so that I could keep tweaking it and experimenting.

The Story of the Assignment

It was a test we were given. We had eight subjects to choose between, and one of them was music. As I was going to a Paul Simon and Sting concert that week, and am a huge Paul Simon fan in general, I picked music in order to make a faux Paul Simon fansite.

My Design Choices

I wanted to achieve a few things with the design. To have it match the personality as well as the music of Paul Simon. And to have a retro feel to it as his most famous work still lies in the Simon and Garfunkel era.

Also, I wanted to make it the full width of the screen as well as responsive, and to create as app-like an experience as possible.

In order to link the design with Paul Simon's work, I chose a background of small brick tiles with the song 'A Poem on the Underground Wall' in mind. I kept the colours sombre earth tones to match his quiet, humble personality and the thoughtful quality of the lyrics. 

The retro look was achieved with black and white photos, slightly rounded corners on the content boxes enhanced with a slight box-shadow. And first and foremost: The header. I wanted sooo badly to tilt it that I spent a whole day finding a functional CSS solution. It creates a dynamic feel which the site wouldn't have had if it was all simply stacked in boxes.

If you want to see the prototype at work, here is a link to the 'Paul Simon Fansite' on my server. Play around with it if you like. And note the butterfly animation on the 'Join Fanclub' page - it was the first time I found a practical implementation for a CSS animation and I learned so much from doing it! Also, this animation (actually not this, but a new version I made that was more cross-browser compatible) later became the first demo of mine that got 'picked' on CodePen.

© Katrine-Marie Burmeister, December 2018