Tips and Techniques for Designing Powerful Band Websites

by Jake Rocheleau

on February 10, 2014

in design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

With the popularity of music-based social networks there isn’t as much demand for bands to create their own websites. But hosting your own website offers more creative control over content, photos, and merchandise. Any serious band or solo artist should consider launching their own website to provide an official online resource for fans of the music.

In this article I want to cover just a few techniques I’ve noticed on many band or musician websites. Designs often vary drastically based on the homepage and other important details. However, page content is generally mirrored in a way that visitors become familiar with the interface browsing through different band websites. The goal is to promote your music in a clear, fashionable manner.

Live Streaming Samples

Once you have some tracks recorded try putting them up online to gather feedback. Popular networks like Bandcamp or SoundCloud offer free audio hosting and streaming services. Plus you can even setup prices for individual track downloads, or let viewers download the files completely free of charge.

Both of these services can work as a free audio streaming host without allowing downloads at all. You as the musician have a choice to decide how you wish to distribute music over the Internet. Offering a few streaming tracks can go a long way towards winning over some new fans. People might gladly purchase your new EP if they recognize a couple songs.

streaming audio band player website ui

If you have the technical ability I would recommend setting up audio streaming directly on the band website. Lots of people browse through Bandcamp and other networks, but your personal site is the place to show off what you can do. You might try embedding music videos from YouTube as a similar alternative. This streaming audio player could be on the homepage or an inner page, but regardless please avoid auto-play. Music playing out of nowhere is very annoying to those who aren’t expecting it!

However you approach this concept, just know it is an easy way to draw some attention. Let people hear what you can do and they can be the judge of talent. Word of mouth is a powerful marketing tool that can drive up sales quicker than you might imagine.

Unique Personalization

The band’s music should be given a large focus on the website. But fans who check out your site also want to know about the band itself – maybe some brief history, info about the members, your musical themes, etc. Try to give “behind the scenes” access whenever possible. Unique member bios coupled with a short history of the band will yield a very personal touch.

mastodon metal band homepage fullscreen website layout

You should also take into account the website’s homepage and how this comes across at first glance. Could visitors make an educated guess about the band or your music? Can they see your band logo or possibly a photo of the members? Try to be as personal as you can without revealing too much(this limit is different for everyone).

True fans will love to study a bit of history surrounding their favorite music. You might be surprised how curious people can be – and the effects of this curiosity on the band. Personalization is tough because it will be a different process for everyone. Brainstorm how your website can provide a deeper connection to your visitors and don’t be afraid to push new unchartered boundaries.

Gallery-Style Pages

Long paragraphs and blocks of text are nice to some degree. But easily-digestible content usually appears in the form of quick lists or thumbnails. Grid-style gallery pages are perfect for various forms of content on a band’s website.

daughtry band website photos gallery layout

Think about a photo gallery with pictures taken on tour. Different venues might be cataloged into photo albums for a more organized browsing experience. You might also create a discography page including a brief description next to each album cover.

This same gallery theme can be extrapolated to the band’s online blog, using a featured image to represent each blog post. If you build on a CMS like WordPress or Drupal then blogging is quite a simple process. This official online blog provides a release point for updates about your band, new EP/LP release dates, along with anything else you might deem interesting.

Online Purchases

Although this can tie into the concept of digital streaming, merchandise would be a whole separate topic. Fans should be able to purchase digital copies of your music from marketplaces like iTunes, Last.fm, Amazon, or even Bandcamp. But what about fans who would prefer to buy a physical CD of your album(s)?

bandcamp homepage bands music website network

This can earn more money and it’s a way to provide tangible merchandise. Naturally this could extend to similar items like t-shirts, beanies, wristbands, anything relatable. Unfortunately local retail stores won’t be carrying merchandise for non-mainstream bands. A solid alternative would be selling products directly from your own personal website.

WordPress has plugins like WooCommerce that can tie right into the backend. You could build simple pages, blog posts, and online products within the same CMS. The online ThemeForest marketplace has a large collection of impressive music & band website templates. The best themes come with built-in support for selling merchandise in your own personal online shop.

Once the band goes on tour you might also try selling tickets for each venue. If you can’t make time for managing ticket sales it might be easier linking to other specific vendors. Even if you can’t handle the payments yourself, external sites like Ticketmaster still get you sales and publicity. Try to provide some method to visitors who would purchase your goodies in support of the band’s music.

Design Showcase

To understand creative layout design try looking over some prime examples. In wrapping up this article I’ve collected a large handful of band websites featuring many of the ideas listed above. These examples can offer a better sense of design, branding, content structure, backgrounds, and even newer ideas you might try on your own website.

Goo Goo Dolls

goo goo dolls band website layout

Stone Sour

stone sour band website layout

In Flames

in flames death metal band website

Givers

givers band website homepage layout

3 Doors Down

3 doors doors band website

Samiam

samiam band website homepage layout

Third Eye Blind

third eye blind band website layout

Three Days Grace

three days grace website homepage

Stone Temple Pilots

stone temple pilots band website design

Red Hot Chili Peppers

red hot chili peppers band layout

Matchbox Twenty

matchbox twenty band homepage design

Puddle of Mudd

puddle of mudd website design

Ween

ween rock band website layout

Maroon 5

maroon 5 website design homepage layout

Disturbed

dusturbed metal band website homepage

Slayer

slayer metal band website homepage

Cryogen

cryogen death metal band homepage layout 2014

Kreator

germany metal band kreator homepage website

Gin Blossoms

gin blossoms band website

Counting Crows

counting crows website band layout design

The Cranberries

the cranberries band website layout

Rage Against the Machine

ratm rage against machine design homepage

The Strypes

the strypes band website design

Green Day

green day band website homepage design

Bowling for Soup

bowling for soup band website design

Smash Mouth

smash mouth band website layout homepage

Staind

staind alternative rock band website

Bad Religion

bad religion homepage band music website

Simple Plan

unique band homepage website simple plan

Iron Chic

nyc iron chic rock band dark website design

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+