Smashing Magazine - we smash you with the information that will make your life easier. really.

When searching for web design inspiration it’s easy to get caught up looking at the same portfolios, blogs and the typical sites that appeal to fellow designers. However, as a designer there is a strong need to be able to create a website that truly works for the client and their visitors, not simply a site that fits into our ideals.

From time-to-time it’s helpful to step out from the familiar sources of design inspiration to see what is being used in a particular industry. The music industry is obviously big business, and as artists and record labels struggle to make the transition from declining CD sales to more profitable uses of technology, examining band and artist websites can be a practical learning experience.

What is the Purpose of a Band’s Website?

While each artist or band may have a different approach with their website, there are certainly some common goals. Typically a band’s website serves as a home for fans to come and get any information they want, such as a bio, discography, and perhaps some lyrics. Most importantly, the site also helps the growth of the band by promoting upcoming tour dates and selling CDs, downloads, and merchandise.

In addition to providing information and selling products, the website is also an increasingly important factor in branding the artist or band. You can usually get an idea of the style of music based on the style of the website’s design. When new visitors arrive at the site they should get an idea of what the band is like very quickly.

What will the Audience Expect to Find?

You can tell a lot about the band or artist’s target market based on the style of design. You’ll see in the screenshots below that even for those bands with whom you are not familiar, you could probably identify the audience fairly accurately based on the style of the site. Whether the style appeals to us as designers or not is of course not nearly as important as if it appeals to its target audience.

The choice of style on Katy Perry’s site meets the expectations of its visitors who are mostly teenagers.

The features and content on band websites are usually very standard. Band photos, tour dates, album info, audio and video are all common. Visitors come to the site to find this information, so that’s what is available. Audio and video clips have obviously become more common in recent years to the point that a band’s website seems incomplete without these items.

The design of the site also comes back to the situation of the site meeting the expectations of the audience. If a band’s audience primarily fits into a specific demographic, it only makes sense that the site’s design will appeal to them and it will be created to make this audience feel comfortable on the site.

The Billboard Top 40

Since we’re looking at band websites, it makes sense to evaluate the official sites of successful artists and bands. For this article we’ll be looking at 40 artists with top selling albums on the current Billboard charts (there were three albums in the top 40 that were compilations or soundtracks from various artists. These albums do not have official band websites, so they were skipped and the next three bands/artists were selected). These sites are shown in the order in which they appear on the charts, not ranked in order of design.

It may be assumed that all bands that sell a lot of albums would have strong websites, but as you’ll see from the list, this is not the case. Some of the sites are good and others leave a lot to be desired in terms of design and usability.

1. AC/DC – Black Ice

AC/DC has a top selling new album and a website that delivers about what you would expect from a popular rock band. The design is dark and grungy with some audio and video, including a welcome message from Brian Johnson. The homepage has relatively little content, but it does include some news headlines with links to full posts.

2. Pink – Funhouse

Pink’s website also uses a grungy style, but in a different way than AC/DC. Designers may be interested to note that her site is more of a traditional blog layout with post excerpts on the front page and an interactive sidebar that includes photos, videos, a poll and more.

3. John Legend – Evolver

John Legend’s website takes a different approach. The site uses only black, white, gray and red and a rather clean layout. The homepage uses a few large images of John that randomly rotate, tour dates, news headlines, and a section that promotes the album mixed in with some video. The footer of the site is large and distinct.

4. Toby Keith – That Don’t Make Me a Bad Guy

Toby Keith’s official website is located on MusicCityNetworks.com rather thank at its own domain. The site uses a blue background and most of the space on the homepage is used for promoting products, as well as some upcoming tour dates. Audio and video are available on specific pages.

5. Rascal Flatts – Great Hits Vol 1

Like John Legend, Rascal Flatts also uses a few rotating images on the homepage. The splattered effects give the design an obvious grungy feel, and some of those splatters are also incorporated with the primary navigation menu of the site. Navigation throughout the site can be a bit awkward.

6. T.I – Paper Trail

T.I.’s website uses a background image of a bulletin board and a sheet of paper. Video is front and center on this site, and a blog is located right below the video with post excerpts being shown on the front page. Audio options are at the top of the left sidebar. The site is set up similar to a typical three-column blog with a lot of video in the posts and some in the sidebars. The site actively promotes the album and the music on iTunes.

7. Celine Dion – My Love: Essential Collection

Celine Dion’s site uses a dark background and a landing page with options for English or French (which makes sense for a Canadian artist). There is a large amount of video available on the site, as well as photos and audio. The site does include a link at the bottom of each page for a non-flash version (or for a flash version if you’re already on the non-flash version).

8. Snow Patrol – A Hundred Million Suns

Visitors of Snow Patrol’s website are greeted with a splash page that gives three options: buy tickets, buy the album, or enter the website. While this page seems unnecessary it may increase sales, and it does give very clear options, which minimizes its inconvenience. Once inside the site you’ll see a dark design with colorful decorative stars in the header. The site is laid out like a three-column blog with news items in the middle and video in the right sidebar. The left sidebar includes a member’s login area and an ad for their album on iTunes.

9. Kenny Chesney – Lucky Old Sun

Kenny Chesney’s site makes use of a splash page that seems to serve little purpose. The page includes a big picture of Kenny, a link to enter the site, and a big banner ad. Once inside the site, the homepage still has essentially no content which means at least three pages must be viewed to see just about anything. The page includes links to all the typical band website items, with a large background picture and some grungy text.

10. Ryan Adams and the Cardinals – Cardinology

The website of Ryan Adams and the Cardinals uses a dark background, a large image with little content on the homepage. Although it doesn’t have much content visible right away, the site does have clear navigation that makes it easy to find what you want. The homepage also includes links to band profiles at social networks such as MySpace, Facebook, Twitter, Tumblr and Digg. The Digg profiles seems a bit out of place with little activity.

11. Metallica – Death Magnetic

Metallica’s website is dark, as expected, and grungy. The main content area of the site is dedicated to news headlines and excerpts, while the sidebar is used to promote things like the band’s tour, t-shirts, an interview with James, downloads and ringtones. The design of the site may not be up to what you would expect from one of the most popular rock bands of the past 25 years.

12. Kid Rock – Rock and Roll Jesus

Kid Rock’s website is also dark and grungy. A nice texture is used on a large background image with a cutout picture of Kid Rock in the center of the header. The site’s navigation is logical and the layout features video, news headlines and tour dates.

13. Jennifer Hudson – Jennifer Hudson

Jennifer Hudson’s website is similar to John Legend’s in that it uses black, white and gray, plus one other color. In this case purple is the color of choice. Below the large picture of Jennifer, the home page essentially becomes a typical blog layout. The site of course includes audio and video with some promotion of the album to be purchased via Amazon or iTunes.

14. Ne-Yo – Year of the Gentleman

Ne-Yo’s site is another that is laid out much like a typical blog. There is video included in the sidebar as well as within some of the blog posts. Ne-Yo’s site actually calls the blog a blog rather than “news” like many of the sites examined here. One of the oddities of the site is the presence of banner ads for Burger King, which seem to be common on sites of Def Jam artists. Most bands and artists use the space to promote their own music, merchandise or tour.

15. The Cure – 4:13 Dream

Visitors to the Cure’s website will first come across a splash page where they can buy the album via Amazon or iTunes, or they can enter the site. Once inside the site you’ll see a rather typical two-column blog layout with an unusual abstract background image. The blog posts appear under the news section in the main content area with video in the right sidebar.

16. Lady GaGa – The Fame

LadyGaga’s website uses a dark background with a heavy dose of Flash. The scrolling and navigation of the main content area can be a bit frustrating, but fortunately there is simplified navigation menu at the bottom of the page. This site also contains Burger King banners on secondary pages.

17. Bloc Party – Intimacy

Bloc Party’s website is rather unusual for a band. The homepage includes news, tour dates and links to iTunes, but little excess. Aside from the background image there are only three small pictures on the homepage. Other than the pictures page, the secondary pages are also very plain.

18. Michael W. Smith – A New Hallelujah

Michael W. Smith’s site includes rotating content in the main area, including video, merchandise promotion and tour info. Upcoming tour dates and news items are displayed in the sidebar. Despite the dark background, the site has a more uplifting feel as opposed to a grunge-styled site, which fits with the Christian/religious music of Michael W. Smith.

19. Lil Wayne – Tha Carter III

Lil Wayne’s site includes a splash page that gives visitors the option to watch a video or enter the site. While splash pages always feel unnecessary, at least the ones that are promoting products may be resulting in more sales, but this one seems less useful. Once inside, the site has a large header image, a textured background and a blog-style layout with news in the main content area. The site includes banners for Burger King and for the fan club, video, mailing list and more.

20. Coldplay – Viva La Vida or Death And All His Friends

Coldplay’s site uses a white background, which is not very common for a rock band. There’s not a whole lot going on at the homepage. Tour dates are posted on the left, news is on the right, and navigation is in the center. Hand written fonts are used throughout the site.

21. Adele – 19

Adele’s website is a dark gray with a video section in the header that is not typical. The video plays behind the title of the site, and there is a video selector that allows the user to choose between six different options. Below the header the site uses a two-column blog layout. The blog post headlines use white capital letters that stand out, and blog posts actually link back to Adele’s blog on MySpace.

22. Rihanna – Good Girl Gone Bad

Rihanna’s homepage has a section right in the center that displays three rotating images of Rihanna. At the top left of the page there is a picture of her CD, but if you click on it you’re not led to a page where you can directly purchase the CD. Instead it takes you to another page where you can continue to iTunes or Amazon to buy the album if you like. At the right hand side of the homepage are news headlines and excerpts.

23. Jason Mraz – We Sing. We Dance. We Steal Things.

The website of Jason Mraz features an artistic, hand drawn style of design. It’s a flash-based site with an audio welcome message. Refresh the page and you’ll get a different message. Aside from the illustration, the homepage also includes a link to purchase the CD, upcoming tour dates and an invitation for fans to submit photos to be a part of the fall tour. In addition to getting a welcome message from Jason, users can click to have music play or to have silence.

24. Mary Mary – The Sound

Mary Mary’s homepage features a large photo of the duo on a red background with a floral design. This is another flash-based site and like many others on this list, news items are about the only content available on the homepage. However, the Mary Mary news is shown in a text area that can be scrolled, as opposed to a blog format that’s popular on many other artists’ sites.

25. Jonas Brothers – A Little Bit Longer

The Jonas Brothers’ website features an attractive dark design with a big background picture of the group under umbrellas in the rain. Aside from having one of the nicer designs on this list, the element that stands out about this site is the extensive usage of social networking sites. The main content area consists of a Flickr photo stream, blog headlines from the band’s MySpace page, and three recent YouTube videos. The band has put social networking to good use and obviously rely on these sites for connecting with fans.

26. James Taylor – Covers

James Taylor’s website starts with a splash page that asks visitors to subscribe to his email newsletter and includes a welcome video from James. When you arrive at the site after leaving the splash page you see a rather simple site, but one that includes all the usual information for an artist’s site. One thing that is less than ideal, if you click on the “tour dates” link you’ll be led to another page that doesn’t actually give you the tour dates, but rather prompts you to click on another link to ultimately see the details.

27. Young Jeezy – The Recession

Young Jeezy’s official site is actually hosted on defjam.com rather than on its own domain. The site features a dark design and a header image with Young Jeezy in front of an American flag. Like a few other sites on the list, particularly those of rappers and hip-hop artists, the site include banners for Burger King. Below the header the news updates are located to the left, with comment counts like you would see on many blogs. A link to buy the album through Def Jam is on the right, located just above video content.

28. Katy Perry – One of the Boys

Visitors to Katy Perry’s site are greeted by a splash page with phone numbers to call for updates. There are also links to buy the CD through Amazon or iTunes, or to enter the site. Once inside the site, there is a large picture of Katy on top of a light and soft color scheme of pinks and blues. The homepage includes Flickr photos and YouTube videos as well as a link to her MySpace page.

29. Sugarland – Love on the Inside

Sugarland’s website uses a large, colorful and illustrated header image. Below the header is a news section that is basically a blog with a link to buy the CD and upcoming tour dates in the sidebar. The news section includes a recent post announcing that fans can follow the band on Twitter, which is another possibility for bands to connect online with fans.

30. Leona Lewis – Spirit

The website of Leona Lewis displays video very prominently in the center of the layout. News and blog headlines are shown in the right sidebar and upcoming events are towards the bottom in the center of the page. This site also has its own forums for fans, with recent posts being shown on the homepage.

31. Jazmine Sullivan – Fearless

Jazmine Sullivan’s site includes also includes video prominently. From a design perspective, like Jennifer Hudson’s site, a black, white, gray and purple color scheme is used. The site also uses a two-column blog layout. At the top of the sidebar to the right of the main content is a form to subscribe to a newsletter, with upcoming tour dates right below it.

32. Taylor Swift – Taylor Swift

Taylor Swift’s site uses an artistic design with buttons on top of scrapbook for navigation. Tabs sticking out of the notebook are also used as a navigation menu. Click on a link and the book opens to take you to the page. Throughout the site there is a lot going on, which may appeal to the site’s primary audience, but it can also become distracting.

33. The Game – LAX

The Game’s website is dark and grungy with a red and black background. Again, Burger King banners are shown in the header and the sidebar, as well as the footer. News headlines and post excerpts are shown in the center of the page with video in the right sidebar. The sidebar also includes icons for links to social media profiles on sites like Facebook and Last.fm.

34. Faith Hill – Joy to the World

Faith Hill’s homepage features three rotating pictures of Faith with snowy trees in the background. The homepage contains little content but links to all of the usual content such as media, tour, merchandise, news and more. The homepage also includes a link to buy the album through iTunes.

35. Robin Thicke – Something Else

The website of Robin Thicke features a large, bright red header with a picture of Robin and a red and black halftone effect in the background. There’s not much content on the homepage, a banner to promote the album is the most prominent element in the layout. Avatars of members online are shown in the sidebar. This is helpful for getting visitors involved, but it seems that other items like upcoming tour dates or news headlines should also be included on the homepage.

36. Duffy – Rockferry

Duffy’s website has what is probably the most pointless splash page of any site on this list. It simply contains a logo and a link to enter the site. It’s puzzling to think about why this page even exists. Once inside, there is a black and white image of Duffy on a black background with a video to the right and audio options above the video. The navigation menu includes a link to her MySpace page.

37. Slipknot – All Hope is Gone

As fans of the band would expect, Slipknot’s website is dark. The main content shown on the homepage is news in a blog-type format. The main navigation is to the left of the site and is incorporated with the background image. Throughout the site a link to launch Slipknot radio and a link to join the mailing list appear at the top of pages.

38. Kottonmouth Kings – The Green Album

As you might guess, the website promoting The Green Album is green. Independent artists Kottonmouth Kings use a two-column blog layout with some video mixed in on several posts. At the top of the content area is a slideshow of fan pictures from MySpace. The sidebar includes common blog items such as a tag cloud, recent post links, recent comments, and category links.

39. Kings of Leon – Only by the Night

The website of Kings of Leon uses a three-column blog layout with main content in the middle. The site has a dark background and a picture of the band as a header images. News items are in the center with tour dates in the left sidebar and photos to the right. Logged in visitors can submit photos, which are hosted on the site rather than through another site such as Flickr.

40. Darius Rucker – Learn to Live

Former Hootie and the Blowfish front man Darius Rucker has a website that is a bit different than many others on this list. There are no dark colors or grunge effects, and the news posts appear in a horizontal list rather than vertically. The site includes user prompted audio and video and generally gives a a better user experience and ease of use than most band/artist sites. The footer also includes links to profiles at social media sites like Facebook, MySpace and YouTube.

Downfalls of Band Websites

Music industry websites often contain aspects of design styles that do not appeal to many designers, such as excessive use of flash, splash pages, audio that starts without user prompting, and sometime obnoxious graphics and design. However, if these items truly fit with the needs and wants of the site’s visitors, they can hardly be considered downfalls.

Lessons to be Learned from Band Websites

From the perspective of a web designer, you will most likely love the creativity of some band websites and hate the functionality and practicality of others. Regardless, it’s a good opportunity to see how a site can and should be designed with a very specific audience and purpose in mind. You can learn from both the good and the bad and you can evaluate the site based on how well it meets the needs of its users.

One trend that designers may find to be interesting is the common use of blogs in modern band sites. Some artists include blog posts on the front page of their site, and many show headlines labeled “news.” The news items are really just blog posts with a different name, one that may be more relevant or useful for the audience. This is a great example of how a blog can be used in a somewhat non-traditional blogging method that helps to improve a site, keep it fresh, and to provide information that visitors want.

Final Observations

After browsing through the sites there are a few additional trends that are worth noting. A high percentage of these bands are using blog-style layouts, with most of them displaying news or blog excerpts on the homepage. Additionally, many are using social networking sites and promoting their profiles actively from their official sites. Not only are Flickr photos and YouTube videos very common, but so are links to MySpace and Facebook pages. Lastly, many of the bands promote the sale of their music through iTunes and/or Amazon rather than attempting to handle the sale themselves.

What are your thoughts on the state of web design in the music industry? Which sites on this list do you like or dislike, and why?

(al)