The B-52’s Fan Site
The goal was to learn basic website coding with HTML5, CSS3, Bootstrap, and JavaScript, while building a new website for a band. I chose The B-52’s.
Visit the website I made about The B-52’s >>
Deliverables: Web Design, Code, Version Control, Deployment
Tools: Visual Studio Code, HTML, CSS, Javascript, jQuery, Git, Github, Adobe Photoshop, Adobe XD
About The B-52’s
The B-52’s blend pop, punk, new wave, soul, surf, even sci-fi soundtracks from Fred’s collection, into their one-of-a-kind sound. With skillful, innovative, and sometimes bizarre layering of vocals, instrumentation, and surprising sounds, it is clear that the group has fun, and so do listeners.
The band’s debut album inspired the colors and imagery for this project, and their music videos and interviews informed the tone and overall look. The B-52’s are already a very visual band, with built-in iconic imagery such as the lobster and wigs. I fully embraced their camp and joy to make a site that a fan would love.
Splash
Since a user would not be likely to visit the homepage after the initial splash entry, the navigation bar includes animated pngs rather than the standard nav format on interior pages. A Javascript show/hide toggle was used to swap between old and current images of the band upon click.
Having the logo, which returns to the splash page, in the footer encourages the user to use the first tab, Music, as the homepage instead.
Music
The body of the page showcases the band’s discography with Bootstrap cards that display the album image, description, year, and an icon to purchase (when available). The listen buttons open a Bootstrap modal with an iframe holding a Spotify playlist.
Users will find related layouts and similar elements across pages, such as buttons, cards, and text hierarchy of red page header with text then green section header with text.
About
Bootstrap cards show information about each of the band members.
A CSS timeline element provided the vertical bar that I added icons and years to. Javascript calculates when the top of the div is 100 pixels above the bottom of the viewport and then changed the CSS class from hidden to one that used CSS keyframes animation to slide in.
The page concludes with a row of columns to hold video embeds. The Bootstrap embed-responsive and embed-responsive-item tags were helpful here and elsewhere.
Tour
Like the band’s current website, the tour page is a simple calendar of shows with options to purchase tickets. Nested rows and columns allow the video section on the right to wrap underneath in mobile. Three music cards for the live albums round out the page.
Gallery
This photo album contained images in various aspect ratios so I used Fancybox to keep the gallery from jumping around as users flipped through the images. A cropped square version of each image were used as small thumbnails for the grid. A Youtube playlist of music videos is displayed in an embed-responsive iframe.
Shop
This page used similar Bootstrap cards to show each product. Clicking a category in the menu makes the navigation item active and displays only the cards that have that tag hides all the others. Buttons go to third-party merchandise vendors.
Design Process
You can see everything about this project on GitHub.
I began by visiting the band’s current website, using Wayback Machine to look at previous iterations, and researching the websites of other musicians. I sketched the outline of the six pages in Adobe XD.
My favorite part about building the site was the puzzle-like aspect of making things work as I envisioned them. Making something real with a completely new toolset was awesome. It was delightful when something complex would be easier than I expected. And conversely, it was frustrating to try to figure out how to make complex rules for what seemed like simple things.
I listened to The B-52’s almost every day for 3 months while I was building this site.
See it on Behance
Design by Amanda Hinton
Photography from The B-52’s current website and all over the internet
Mockup template from PlaceIt