10 principles of great musician website design

6294

Creating a website for your music is essential if you want to appear professional, engage your fans, and play more shows.

First, you’ll want to gather up your content: music, bio text, photos, and video. Next, you can get creative in making your music website reflect your brand. To do this, you’ll add images, choose colors and fonts carefully, and make sure you’ve got content for everyone.

From there you can create a website that’s both simple and appealing; one that works on mobile devices, and also has your own unique stamp.

So how do you go about creating a musician website? Let’s take a look at some of the principles of great music web design that you can apply to your own website.

1. Get professional photos

It’s well worth the investment to get some professional photos of yourself or your band. Get a variety of shots to use in different ways. Some should be farther away with lots of space around the edges, and some can be portrait style, like headshots.  

You’ll need these to start creating your music website. You will use these photos countless times: for your background, your sections, and your header image. You will also want good photos within your content area: in your musician bio, and on your EPK page for online media to grab.

Once you have professional, consistent photos, you can use them across your website and social media platforms as well. This will give all of your branding a sense of continuity.

A grainy photo, or one that’s badly cropped will leave a negative impression of you very quickly, and may even prevent someone from continuing on to listen to your music. 

Music website template professional photos

2. Choose a modern website template

The best music website templates often feature simple backgrounds, with the content customized to fit your personality and the mood of your music.

As a creative person, you’ll want to choose a template that is clean and simple, allowing space for plenty of content. Plus, a simple template will allow you to put your own stamp on the look and feel of your website’s design. 

By using a template, you won’t have to worry about things lining up or it not being mobile-friendly. Think of it as providing the overall structure. Within that, you’ll have the freedom to create the look that you want. 

Next, focus the organization of your website on a per-page basis by adding sections. Within the section, add your content. You can lay out your images, text, music, and videos side-by-side or in full-width down the page.

Music website principles sections example

Once your content is in place on your template, you can get into the fun part of designing how each page will look in more detail. 

3. Add a clear call-to-action

When someone gets to your artist website, you want to be sure to grab their attention right away. Decide what you are promoting, and add a call-to-action to reflect that. 

It could be a recently released single, a new video, or perhaps you’re building your email list. First place your text, then a button that you want people to click on. This will direct your visitors’ attention.

To style your call-to-action, make the button itself pop off the page, either with a sleek outline or in full color. This will draw the eye and get people to click.

Music website design call-to-action

4. Use cohesive colors

Just as you would when designing an album cover, make sure your website’s colors work well with your band, and your brand. 

If you’re not sure where to begin, look at your main image and pick a few colors out of that. As a general rule, stick to 3 colors. The primary one will be the one that conveys your music – a warm earth tone for a folk band, a bright red for a pop band, or maybe a medium blue for an indie rock musician.

Next, choose a contrasting secondary color, which will stand out against that first color. Blues and browns might go well together for your overall vibe, or a nice clean white will make things crisp. 

Finally, choose a third color as the accent color. This one will pull the other two together, and you can use it for your text, and your social media icons, for example.

You can also use these three colors as your section background colors, and grab simple black or white for your text.

Music website example cohesive colors

Create a modern, mobile-ready website that’s easy to update! Try Bandzoogle today.

5. Select good typography

There will be a lot of text on your website – from your Press Kit page to your album descriptions, and more. Make sure to use a font that’s easy to read.

That means your main content font should be simple and clear. To make sure your text is legible and also looks good, choose a color that really stands out from your background color. 

Black on white is the perfect example, but any dark color on a lighter background will increase the chances of your text being read all the way through.

Another good rule to follow when it comes to typography is to keep things consistent. Choose one content font and use that throughout your website. Align your text left, which people are used to when reading, avoid using all caps, and use bold and italics sparingly. 

If your heart is set on using a funky font, don’t worry! Choose a creative font for your site title and section titles to add a little flair.

6. Create clear navigation

Making your website easy to navigate is important. It’s the difference between someone locating what they want (to buy your music or book you for a show) and being confused and leaving your website.

Limit your main menu to just the most important items. You can have tons of pages, but organize them in a way that will allow your main menu to contain eight pages at the most.  You could create a Store page that includes sub-pages for each of your albums, or group things by online sales, physical merch, and more.

Each section should have a clear purpose. That way, your visitors will be able to look quickly, find what they want, and leave with the impression that your website is beautifully organized (or stay and look some more).

Music website example clear navigation

7. Make it mobile-responsive

Many people will view your website on a mobile device. To make this easy, use a template that adapts automatically to different screen sizes. Then, think about the kind of content that you’ve added.

If you have a ton of media that may be slow to load over a non-wifi connection, consider moving it to a different page or split it into several pages. 

You’ll want to choose one a main header image that has some space around the edges, so that it works well as a horizontal image (on a computer screen) as well as a portrait image (on a mobile phone). 

You can also set the focal point of your main image, meaning that the screen will crop closely to that area when your website zooms in on a small screen.

Music website example mobile responsive

8. Have content for fans, potential fans, and industry

To create a music website that’s truly professional, add information that is suitable for different audiences. 

For your fans, include a blog for news. You can update it with text and images regularly (keeping in mind your color scheme). 

Set the blog into a modern, tiled layout, or add summaries to keep things from getting too long on the page. This type of content will hook new fans, and keep previous ones coming back to see what is new. 

You’ll also want to be sure you have enough professionally curated content  for industry folks checking you out. 

This means using your short bio, plus your best tracks, video, and quotes on a dedicated press kit page. Need some inspiration on how to lay out that page and make it look great? Check out these electronic press kit examples.

Music website press kit example

9. Tell your story

Music is a pretty personal thing. To go along with this, try to keep your own personal voice in the content throughout your website. Within seconds of looking at your website, your visitor should get a sense of who you are.

If you are light-hearted and funny, or if you are more serious and your music reflects this – use that same tone in writing your artist bio, in showcasing your photos, and in describing your music.

Make sure all of the text on your website is written with the aim of communicating, rather than solely promoting yourself. Keep things genuine, and it will have a better chance of creating a lasting effect.

 10. Direct to fan sales

Finally, give your fans a way to support you on your music website. You don’t need to be too sales-y, but be sure to include a few ways to not only listen to your music, but to buy it as well

This could be direct sales through your albums and merch, you could build a crowdfunding campaign for a new project, or you could sell fan subscriptions on your website.

Music website example direct to fan sales

Now you’ve got a good idea of the content you should be using, and where to place it. A clean layout, beautiful imagery, plus colors that work well together will wrap up your text and photos into a neat but professional website package.

If you need a bit more guidance, check out our free online guide How to make a website for your music. Then you’ll be all set to design a website that truly reflects who you are as a musician.