October 16, 2017 10 Principles Of Great Music Web Design
Guest Post by Melanie Kealey from the Bandzoogle Blog
It’s no secret that in order to appear professional, your own website with your own .com address is essential. So what ingredients make for a great musician website exactly? You’ve got the music of course, some images, videos, and show dates.
Pulling together content is an easy first step. The part where many musicians get stalled is with the website’s design.
This makes sense. After all, as a creative bunch, it’s tempting to want something off the wall and different! The good news is, it’s easy to create a website that’s both simple and appealing; one that works on mobile devices (which is huge nowadays) and also has your own unique stamp.
So where to begin when you’re designing your music 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. Professional Photos
It’s well worth the investment to get some professional photos of yourself or your band. Get a variety of shots - some farther away with lots of space around the edges, some closer in like headshots.
You’ll need these to start your design off right. You will use these photos countless times: for your background, your header image, your content area (think EPK page for online media to grab), and for social media.
As the first thing that a potential fan or booking agent will see, 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 to listen to your music.
2. Clean Layout
Think about your visitors. Yes, it’s about your music, but they’re the ones getting an impression of you based on your website’s design and content. So make it easy for them to explore!
To do that, choose a template that will give you plenty of clear space for your content. Then, focus on one thing per page, and do it well.
Your Homepage can be a portal to the rest of your website (with a nice call-to-action as the focus), and then each page that follows should be about one subject, and one subject only.
Your bio page is just about that - your bio. Your Photos page should feature a variety of photos. Then your Music page is full of great tunes and info about them. Keep it simple and this will help your design feel structured.
Remember, people will land on your page and scan it for just a few seconds. That’s all the time you have to make an impression. Avoid too much content cluttering up your pages - a few well placed items will go much farther.
One last thing to keep in mind about a clean layout is the space that you don’t use - called whitespace. Making sure that your content is surrounded by plenty of space makes it look clean and crisp, appealing to the eye, and easy to take in.
3. Cohesive colors
Just as you would when picking 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 speaks to your brand - 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.
Then 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 to make things crisp.
Finally, choose a third color as the accent color. This one will pull the other two together, and and you can use it for your link color, and your social media icons, for example.
4. Good typography
There will be a lot of text on your website - from your Bio page to your album description, and more. Make sure to use a font that’s easy to read.
That means your main content font should be something that’s simple and clear (tempting though it may be to pick something funky or wacky!).
To make sure your text is legible and also looks good, choose a color that 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 only sparingly. Save the fun stuff for your imagery and music!
Still feeling like your font is too dull? Choose an interesting custom font for your site title or feature titles to add a playful touch without interfering with users being able to follow your text.
5. 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 put off 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).
A tip for your menu: make sure your names are concise and sensible. Getting cutesy with pages names will lead to confusion, and is more likely to instill a sense of frustration than admiration at your funny names. If your page is for your electronic press kit, call it EPK. Done!
6. Mobile friendly
An integral part of your website design will be how it to adapts to different screen sizes - namely, mobile devices. Many people will view your website this way, so it’s important to keep things fairly simple, and use a design that’s adaptable.
If you have a ton of content that may be slow to load over a non-wifi connection, consider moving it to a different page or split it into several pages. And be sure to avoid any flash-based animation, which won’t display at all on mobile devices!
7. Clear call-to-action
To tie your design together, choose one focus for your Homepage, and add that as your call to action. 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. Use one of your font choices, and one of your colors mentioned above, to make this text and button flow with your design.
8. Have content for fans, potential fans, and industry
One downfall that exists on a lot of websites is minimal text, text intended only for friends, or someone you already know. To create a website that’s truly professional, add information that is suitable for different audiences.
One good way to handle this is to include a blog for news right on your Homepage. You can update it with text and images regularly (keeping in mind your color scheme). Set it 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 substance for industry folks checking you out.
This mean using your short bio, plus your very best live tracks, video, and quotes on a press kit page. Need some inspiration on how to lay that out and make it look great? Check out these electronic press kit examples.
9. Tell your story
Throughout your website, you should keep your own personal voice. This goes for both the look and feel as well of the design, as well as the conversation itself. Your story should show to your website visitors within seconds of looking at your website.
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 bio, in showcasing your photos, and in describing your music.
[How To Write An Effective Musician Bio (with Examples!)]
Make sure all of your text on your website is written with the aim of communicating, rather than solely promoting yourself. Keep things genuine, and it will have better chance of creating a lasting effect.
10. Direct to fan sales
With all of these design tips, don’t forget one of the most important things about creating a great music website design: adding a prominent music player!
Make sure you’ve got a music player on every page, or at least on your Homepage and Music pages. Chances are if someone is visiting your website, they will want to hear a sample of your music. Make it easy for them - and make the music player stylish by choosing a button that’s square or round, outlined or solid, and match your other website colors.
You can also sell tickets or band merch online, commission-free, making sure both of these things stand out on their respective pages. Use a font that’s simple to read, especially on pages like a Store page where you want to encourage sales for potentially lots of items.
[The Complete Guide to Selling Your Music Online]
Now that you have an idea of the content you should be using, and how to create it, make sure your design choices also reflect who you are as a musician. 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.
Melanie Kealey is an artist manager, blogger, and support manager at musician website and marketing platform Bandzoogle.
Advice, Websites tagged Content, Marketing, music website, online content, website
Reader Comments (1)
I think that the described 10 principles are not only effective for music web design but for all kinds of websites. Your guidelines are very helpful for me because they give me more effective ideas to provide web design services at affordable price services to complete my task with more perfection. Thanks for sharing the informational thoughts.