Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Billboard Top 40 Design Showcase

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? Link

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? Link

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.

Katy Perry411
The choice of style on Katy Perry’s402 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 Link

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 Link

AC/DC3 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 Link

Pink’s5 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 Link

John Legend’s7 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.

John Legend8

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

Toby Keith’s official website is located on MusicCityNetworks.com9 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.

Toby Keith

5. Rascal Flatts – Great Hits Vol 1 Link

Like John Legend, Rascal Flatts10 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.

Rascal Flatts11

6. T.I – Paper Trail Link

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 Link

Celine Dion’s12 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).

Celin Dion13

8. Snow Patrol – A Hundred Million Suns Link

Visitors of Snow Patrol’s14 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.

Snow Patrol15

9. Kenny Chesney – Lucky Old Sun Link

Kenny Chesney’s16 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.

Kenny Chesney17

10. Ryan Adams and the Cardinals – Cardinology Link

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.

Ryan Adams

11. Metallica – Death Magnetic Link

Metallica’s website18 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 Link

Kid Rock’s20 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.

Kid Rock21

13. Jennifer Hudson – Jennifer Hudson Link

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.

Jennifer Hudson

14. Ne-Yo – Year of the Gentleman Link

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 Link

Visitors to the Cure’s22 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 Link

LadyGaga’s24 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.

Lady GaGa25

17. Bloc Party – Intimacy Link

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.

Bloc Party

18. Michael W. Smith – A New Hallelujah Link

Michael W. Smith’s26 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.

Michael W. Smith27

19. Lil Wayne – Tha Carter III Link

Lil Wayne’s28 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.

Lil' Wayne29

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

Coldplay’s30 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 Link

Adele’s32 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 Link

Rihanna’s34 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. Link

The website of Jason Mraz36 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.

Jason Mraz37

24. Mary Mary – The Sound Link

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.

Mary Mary

25. Jonas Brothers – A Little Bit Longer Link

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.

Jonas Brothers

26. James Taylor – Covers Link

James Taylor’s38 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.

James Taylor39

27. Young Jeezy – The Recession Link

Young Jeezy’s official site is actually hosted on 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.

Young Jeezy

28. Katy Perry – One of the Boys Link

Visitors to Katy Perry’s402 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.

Katy Perry411

29. Sugarland – Love on the Inside Link

Sugarland’s42 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 Link

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.

Leona Lewis

31. Jazmine Sullivan – Fearless Link

Jazmine Sullivan’s44 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.

Jazmine Sullivan45

32. Taylor Swift – Taylor Swift Link

Taylor Swift’s46 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.

Taylor Swift47

33. The Game – LAX Link

The Game’s48 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

The Game49

34. Faith Hill – Joy to the World Link

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.

Faith Hill

35. Robin Thicke – Something Else Link

50The website of Robin Thicke51 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.

Robin Thicke52

36. Duffy – Rockferry Link

Duffy’s53 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 Link

As fans of the band would expect, Slipknot’s55 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 Link

As you might guess, the website promoting The Green Album is green. Independent artists Kottonmouth Kings57 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.

Kottonmouth Kings58

39. Kings of Leon – Only by the Night Link

The website of Kings of Leon59 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.

Kings of Leon60

40. Darius Rucker – Learn to Live Link

Former Hootie and the Blowfish front man Darius Rucker61 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.

Darius Rucker62

Downfalls of Band Websites Link

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 Link

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 Link

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?


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

  1. 1

    edouard duplessis

    November 24, 2008 5:21 pm

    kate perry …

  2. 2

    katy perry & pink are my favs!

  3. 3

    What about this one from SOULWAX

  4. 4

    I am suprised by the lack of quality from artists that make millions. I think it is hillarious that many of these sites have ads for whoppers :D.

  5. 5

    Another great post, if not for tracking down 40 relevant and recent music industry sites then for looking at these sites as they apply to the modern web standards designer, not just your modern flash only guru, as many music sites are “flash only”.

  6. 6

    With the exception of Katy Perry, Mary Mary, and a few others, most of these site designs are strikingly unoriginal and executed rather poorly. You’d think that with the amount of money these guys are raking in, artists like lil wayne, James Taylor, and ACDC would have less hack-y websites. Regardless, it is an interesting look into web design in the music world with insightful commentary. thanks Smashing!

  7. 7

    All I can say is.. Wow. The fans must have as little taste in visual stimulus as they do in music. I’d hate to see how they dress..


    Seriously, though, I can’t even begin to fathom why the business end of music would be so averse to a well presented front-end on the web. Only a select few of the sites listed are actually attractive, let alone well laid out.

    It reminds me of the (less) recent redesign of the clothing designer Lip Service (which targets the hardcore/club and rock/metal/industrial music scene). The previous site, while not standards friendly, necessarily, was at least well laid out and attractive. The new site is incredibly unattractive, and has a number of poor examples of interactivity and use of space.

  8. 8

    Yeah, wow, ho-freakin’ hum.
    Then again, I’m not the target audience for any of these, so mission accomplished?

  9. 9

    Wow! To echo everyone else I’m amazed how many of these sites are poorly designed. I also don’t understand why bands think its a good idea to make their website look like their myspace page, great no you have two ugly sites!

  10. 10

    My personal favorite band website would be Moonspell’s:

  11. 11

    there wasn’t one that wowed me. i’m really disappointed. sheesh

  12. 12

    I was surprised too. I had the idea for writing this post before looking at the sites. I was pretty surprised that there weren’t more sites that I liked, although I knew many would be lacking in usability. I also thought the Burger King ads were funny :)

  13. 13

    Katy Perry’s website is well designed, I love it. Very cute and original. Can’t vouch for the others, I’m not into top 40 music mostly. I only went to her site to research a design thing I had to do based on one of her songs.

    Some of those are awful in terms of design. Can’t say anything about coding or function, I’m not visitng them ;-P I would bet my last dollar that they rely too heavily on Flash.

  14. 14

    I love Kid Rock and Katy Perry website.

  15. 15

    November 24, 2008 9:20 pm

    This is a great article. I think that one main reason they use blogs, is because blogs are so easy to setup / customize / use / maintain. Someone sent me to QueenLatifah’s page which is good ol’ HTML…. with a tiny bit of flash embedded. Even someone who can afford an army to maintain their site (Such as Queen Latifah) may eventually get burnt out on the maintainance. QL’s site hasn’t been updated since October of 2007.

  16. 16

    Nice article

  17. 17

    Although they aren’t Top 40, the Linkin Park family of websites are awesome.

  18. 18

    Most big name artists sites are created and run by the record companies, not by the artists themselves. They are updated by interns and low level staff with little to no programming or design experience. Most record companies use the same template for many of their artists, they just change the appearance. “Myspace” or blog like designs present something that both the people reading, and the people updating the site are familiar with. The Burger King ads? Lil’ Wayne isn’t making that money, its the record companies squeezing every last dime out of their product.

    In the end, its people who don’t care or know about design, creating sites for people who don’t care or know about design.

  19. 19

    I think that most of the sites aren’t that good i didn’t look through the code but the most of the design’s don’t make me happy at all…

  20. 20

    Great designing by TenMinuteMedia (katy). But the source code doesn’t make me happy indeed like Soap said.


↑ Back to top