Designing a Website for a Freelance Musician
I updated my personal site this summer with a new redesign. I’d previously had a very small (curt is probably a better word) pamphlet site that included my photo, a short bio, a link to a PDF of my resume, and about a dozen demo recordings of varying styles.
The old site had everything I needed, and it served me well for a number of years. But these days I’ve started branching into new areas, and I needed a site that would reflect that.
My Needs
For starters, I’ve begun writing much more. Cam and I started MusicianWages.com this year and several articles have ended up published in national trade papers. I’ve had luck with a few other writing projects recently, and generally, I needed a site design that would highlight my writing as well as my playing.
Secondly, I’ve begun recording more in the past 2 years. I bought a nice Mac and Logic Pro and it’s so much easier than it used to be to put together quality recordings. I’ve started collaborating with friends and strangers through sites like Indaba and Twitter and coming up with some really great work. More importantly, I had a production company in LA secure the rights to one of my recordings for use in a feature film. Whether it’ll end up in the film or on the cutting room floor remains to be seen, but that kind of stock music and film music work is something I’d like to continue.
Thirdly, I’ve started to see the benefits of social networking in my theatre career. Staying connected to colleagues on Facebook, and to a lesser extent Twitter, has helped create more work for me. But one of the things that I find frustrating about these social networks is that they are all isolated from one another, and from my personal website. I wanted to create a hub of all of my internet activity that showed my activity on other sites. When people see my updates on those sites they can connect with me on their terms.
And lastly, I needed a site that would still work as a pamphlet site for artistic directors, directors, other MDs, actors and anyone else in musical theatre that wanted to find out more about me before they hired me for a project. What do these people want to know? Usually what they want is a photo of me, a demo of my playing, and a resume (and a link to my Facebook account so they can see if they know any of my friends). This work is my primarily source of income, so this part had to be prominent.
So let’s review – what did I need? I want to feature:
- Recordings
- Writings
- Resume
- The social networks I use
- Photos
What didn’t I need? Everything else. I didn’t need to feature interaction (or lack of interaction) with my website visitors through comments, etc. I also didn’t need calendar of past months blog posts, or forums or anything else.
I also didn’t need advertising. I don’t like seeing Adsense on pamphlet sites. I think it’s a huge mistake. On sites like this we are selling ourselves, and that shouldn’t be diluted with ads for other people/products.
Not adding more than is required is very important for any site. I don’t want to distract my visitors with unnecessary information. Who I am and what I do should be obvious within the first few seconds of visiting my site.
Meeting My Needs with Design
My primary interest in my new design was how to leverage social networks and RSS feeds into the design of my site. If I wrote an article here on MusicianWages.com, I wanted it to show up on my website. If I changed my Facebook status, uploaded new photos to Flickr, dug a new tune on Last.fm, watched a show on Hulu or posted a new recording – I wanted it to show up on the site. Automatically.
There are lots of widgets and plugins that will do this for you, but I didn’t like that the design of the site would need to be made on their terms, rather than my own terms. So I decided early on not to use any widgets and to build it myself.
It turns out that this is actually pretty easy to do using a plugin called SimplePie. SimplePie was actually included in recent updates of WordPress, so if you have a wordpress installation, it’s likely you have this already.
SimplePie allows you to add dynamic content to your site through RSS feeds, and these days there are RSS feeds for just about everything.
The Sidebar
Increase in referrals from davidjhahn.org to musicianwages.com
For instance, I wanted a sidebar box of all my writings both on my personal site and from MusicianWages.com. To achieve this I used SimplePie to combine the RSS feeds for my writings from this site with the feed for all writing on my personal site. Now anytime I write anything on either site, they show up in that box as a link. Using this method, referral traffic from my site to MW increased 537%.
Probably the most impressive change, though, was the amount of traffic that landed on my recordings. As part of the redesign, I included a sidebar box of my recordings high on the page. the box simply listed the recent recordings that I had made and posted to the site.
3,600% increase in pageviews of recordings
In the first month of the re-design, pageviews of my recordings increased 3,600%. In other words, nobody used to visit my recordings, and now they overwhelmingly do. It’s the most popular part of the site next to the home page, which is exactly what I was hoping for.
Next, I knew I needed some photos, but I didn’t want to create and maintain a photo gallery on my own site. It takes up space, bandwidth and my own time to do it. And while I realize that, with the proper tagging, some new traffic might be brought in through image searches – driving traffic to my site through search traffic isn’t my concern. Most people that visit my site likely heard about me through word-of-mouth, and now that they are on the site, they want to see some photos that will help them understand me better.
Auto-populated social network activity
I decided to add photos to the site through a custom designed Flickr badge. I did this for 2 reasons. First, I think Flickr does a fine job of organizing photos in an interface that many people are familiar with. Second, Flickr includes social networking capabilities. So if visitors like my photos, or like me, they can friend me through Flickr and we can keep in touch in the future.
The last major box on my sidebar is my social networks hubs. Plugins like LifeStream will create something like this for you, but I wanted to have more control over the design output of this feature. I used SimplePie and loaded this box with RSS feeds from every site I’m active on. That includes Facebook, Twitter, Last.fm, Hulu, YouTube, Delicious, Reddit, Indaba, Digg, Flickr (again) and even my activity on the MusicianWages.com forums. Anytime I’m active on any of these sites, it automatically posts to this box.
The Main Column
I chose a 2-column design for the site. At first I toyed with having a 1-column design that showed just one element at a time (no sidebar at all), but in the end I decided that it was a better use of screen real estate to have a two column design.
The main column is a 680 width <div> with dark-grey text on a white background. The links are underlined and have a background highlight with hover. Headings are all uppercase and bold, and a thin, dotted grey line divides sections. The column extends all the way to the bottom of the page without any footer.
This is as simple a design as is possible. The focus here is entirely on the content, not on anything else. I used a dark pattern for the background outside of the main column so that the user’s eye would be immediately drawn into the white space.
For the sake of search engine optimization, I didn’t use any images in the rendering of the header or navigation bar. The heading, DAVID J. HAHN is all text, on every page. Furthermore, this heading is the only <h1> that you will find on the entire site. This tells search engines that this text is important – and it is. If anyone in the world looks up “David J. Hahn”, I want to be the first result without exception.
The second most popular page on the site is my resume. It makes sense. Most people visiting my site are looking for more information about me, my experience, and what I can bring to their project. Previously, my old design offered only a PDF version of my resume, but for this design I wanted to include an enhanced resume with working links to the organizations I’d work for previously (when possible).
The site also include the obligatory “Albums” page, although very little of my income is derived from albums sales, and very little of my energy is spent promoting them. They are available on the site for a free listen, and the stats show an occasional click to their pages on iTunes and Amazon.
Bells and Whistles
Throughout my career, I’ve periodically found it necessary to share recordings, pdfs, and other info with clients and co-workers. A lot of this material is both very large (in terms of megabytes) and copyrighted. Emailing these large files has always been problematic, and posting them publicly on my website runs the risk of upsetting the copyright owners.
I looked into included an intranet for this kind of material, but in the end it was clear that would be overkill for a relatively easy problem. My new site includes the ability to post this kind of material safely without any kind of members-only intranet.
There are password protected posts hidden in the site, and I give the address and passwords to the clients that I need to. Nowhere on the site is there an archived list of all the posts in the database, which effectively hides the private posts. The invited users can post comments if they like, and they can download the files that we need to pass between us. The content is largely used for educational purposes, and according to copyright law, the educational purpose and password protection is all that is legally necessary.
Meeting Everyone’s Needs
With any website, there seems to be 3 parties whose needs need to be met for the site to be a success. They are:
- The website’s owner (in our case the performer or group)
- The visitor
- The search engine
All three groups need something different. The owner wants it to be representative of their brand and product, visually impressive and, ultimately, a lead generator. The visitor wants it to be organized, clear, quick, and informative. The search engine doesn’t care what it looks like, as long as the important stuff is textual and coded with some kind of sanity.
In re-designing my site I simply tried to meet the needs of all 3 parties. I used proper SEO copy, <title> tags, hierarchy of <h> tags and internal linking and the search engines seem perfectly happy. If you search David J. Hahn on any search engine, you will find me.
Increase of 146% for time on site
A visitor on my site will quickly find anything they were looking for, and, if they stick around, a few interesting things they didn’t expect. The visitor stats show that average time on the site has increased by 146% since the implementation of the new design, and the bounce rate has fallen 17% – even with all the links to outside websites.
In general, the site has been successful in increasing those stats that I was looking to change, and seems to be working as an improved tool for my career as a musician.
Tell me about the design of your site. What do you like or dislike about it?
About the author
The site looks great. One question: what fond do you use for the title and bio content?
8/2/2009
typo – I meant font, not fond.
8/2/2009
Thanks Chris. That font is Garamond. I’ve used it for years for everything from my email signature to my resume to my business cards. I think it’s a classy font.
If the visitors computer doesn’t have Garamond installed, it defaults to Times New Roman.
8/2/2009
I recently had to go through a total redesign/reimplementation of my website as well. I actually had two things I wanted to accomplish: set up a site that advertised me as a bassist-for-hire, and redo my jazz band’s current website. I have a slightly different set of requirements because I’m not really a blogger/educator like you guys are, so my overall aim was a bit different. I tried several different web designs myself and got super frustrated, and finally I just hired a web-designer friend of mine to do it. The prices were very reasonable, and he got the pages set up and pretty-ified MUCH faster than I could’ve done it alone. Check ‘em outL
http://www.leewhalen.net
http://www.sleeplessknight.org (the redesign isn’t up on this one yet, but expect it up in the next week or so!)
http://www.twothinkdesign.com (my friend’s business website, in case anyone wants to know)
–Lee
8/3/2009
This looks great! I am currently in the process of putting together my own website and all of your info is very helpful! I am trying to do it myself, and do also have a mac. You’ve got all the info David! Good on ya! :) Hope you’re doing well.
8/3/2009
Looks great Lee. Well done.
And thanks Melanie – good to see you here!
8/3/2009
Quick question: what are you using for stats generation that gives you all those pretty charts n’ graphs? Is that a WordPress thing?
8/4/2009
Yes, the three parties. Definitely agree with you. Especially with how competitive the market is, designers have to design with search engines in mind… And most customers want to be able to edit themselves, so the client should be considered.
8/4/2009
@Lee – those are charts from Google Analytics. It’s great – you should check it out.
Wordpress Stats is a great plugin for stats too.
8/4/2009
Nice article, I’ve got to know, what plug-in do you use for the music samples? I’m a huge fan of that style of player.
8/10/2009
Hi Sam – It’s just called “Audio Player”. It’s a wordpress plugin. I like how simple it is.
Glad you dig, thanks.
8/10/2009
It might sound like a stupid question but I’m pretty retarded when it comes to html stuff :
How do you create a website? Is there any software or website that can help you and simplify the progress? How do you sign-up for a domain? Now that we know what to put on our website, thanks to your great article, it’d be nice to know how to actually create one :p
Help for dummies, please!
8/12/2009
Great Job, David.
I’ve been struggling with redoing my mixing and mastering site, but haven’t figured out exactly what it needs to be for my visitors. Currently it’s a portal for RSS feeds from other music related sites, which is good as I want to help musicians by spreading information, but this doesn’t do much for generating more mixing or mastering business. I think I am going to take some of your points above and apply them to what I need to do. Your stats say wonders about the effectiveness of the new design.
Thanks for the info!
-dave lopez
Mixing and Mastering Specialist
Cr@zyEye Music Services
8/20/2009
I am looking to make my own website. I just dont know how to get started. Do i need to pay someone to create it for me or is there a way to do it for free? please email me back thanks
10/6/2009
I’m going to be making my own website in the next year or so, and your comprehensive guide to making a website will certainly be a good resource for me. I’m looking to my my site stand out and be different, yet still be easy to navigate. I hadn’t previously considered that there are three parties whose needs need to be met with a site– I had only thought about the visitor. Great post, and thanks for the advice on making a website.
10/19/2009
If you want to design your own website for free try doing what I am doing: Use the softwares DreamWeaver and Photoshop and do plenty of research on how to design the best website you can. This article takes care of some of the research. It is very helpful!
10/20/2009
Dave,
Your site looks terrific, and this article is very helpful.
I’m trying to combine my blog (http://blog.davidhthomas.net) and website (http://davidhthomas.net).
I have been given mixed answers as to whether it’s possible. I’d like a bit a Flash, like this website http://www.hanskarlmusic.com/ but I’m happy to omit that, since it doesn’t mix with the blog WordPress platform.
Do you have a blog? Is the writing featured in your links published on static sites? Does it auto update when you write something new? I’d like my blog posts to show like your articles in your site.
Thanks for any advice you can offer,
David
10/23/2009
@David Thomas –
Sure, it’s possible combine the two. And while it’s probably not possible to have as flash-heavy of a site as you referenced, it is possible to add some flash to any WordPress install.
I do have a blog on my site, although it’s no labeled as such. For my written blog, you can go here: http://www.davidjhahn.org/category/posts/ and for my music blog you can go here: http://www.davidjhahn.org/category/recordings/ . The two are both written in one WordPress installation, each under a different “category”.
My site auto-updates whenever I wrote something new either on that site itself, or on this site (musicianwages.com) though the RSS feeds that I mentioned in the article. It’s a system that works really well for me.
10/26/2009
As always another great and helpful article
11/16/2009
Very useful and insightful article! Thank you for sharing this. I am curious to know which web host you are using and why you chose them?
Thanks again!
-AJ
11/19/2009
@AJ – I use GoDaddy. They are reliable and easy to work with – and very reasonably priced. I like the security of knowing I’m with a big company that has a ton of back-ups and costumer support.
1/19/2010
Thank you so much David! Your post was the first one I have come across that provides clear, detailed and specific information about website design that is relevant to what we are doing! I’m a total “web-tard” and have been driving myself insane trying to get our site to communicate what we need for it to, which runs across almost all areas you covered, in addition to the “fan engagement” functions for flogging an original performing ensemble.
Best wishes,
Brenda
8/5/2010
@Sam,
The audio player is a SoundCloud player which is the platform WordPress uses for music samples. I have found SoundCloud to be a wonderful (free) hosting service for our tracks.
-Brenda
8/5/2010
Great article! I’ve read many of your previous articles as well and found them really helpful.
I was wondering how you set up the password protected site for downloads?
I’ve been wanting to have something like that on my site for students taking private lessons, but have never figured out a good way to set it up.
Thanks again!
8/8/2010
Leave a comment
Do you have a general question or a discussion topic? If so, please consider posting it in the forums.