AudioHammock

An indie music commentary website and podcast created using Bootstrap, JavaScript, and LESS.

Cover image for AudioHammock
Client
AudioHammock
Tags
#HTML
#Bootstrap
#JavaScript
#CSS
#LESS

Homepage

The AudioHammock page uses a simple 3-column layout focusing on navigation, primary content, and social proofing and secondary value. On mobile the menu folds up into a hamburger menu in the top right. When creating this layout I was hoping to design something sleek and informative yet not overwhelming and so I tried to balance the white and neutral space to let the artwork of the content lead the user journey.

Album Reviews

AudioHammock review webpage


As an avid Pitchfork, Consequence of Sound, and Indieheads reader I wanted the focus of the content to again be on the music itself. I often find myself listening to music based on moods and preferred genres that fluctuate like the wind so instead of just listing albums out in linear fashion I wanted users to quickly be able to sort albums based on genre. For the albums themselves each one was stored in an array based on genre and toggled to display and animate into position based on the album type selected by the user.

In addition to genre sorting I wanted the artwork to invoke interest from the user as opposed to informative text so all the artist info is reserved for album hover.

album hover
Artist info on album hover
Project Process
Wireframing
Wireframing
Analog drawings and website ideas
Develop
Develop
Visual Studio Code FTW
Product Launch!
Product Launch!
Podcast Recording