Today, we are glad to release the iPhone Starter Kit, a set that comes with several button elements as well as six different iPhone interface options. This pack may be useful for mobile developers and front-end designers who need a professional way to show mock-ups to clients or to work out ideas. This set was designed by Renee Rist especially for Smashing Magazine and its readers.

Download the icon set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sub-licensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

• preview
• Download the set (in PSD) (.zip, 2.8 MB)

Behind the design

As always, here are some insights from the designer herself:

“This iPhone Vector Pack was created entirely in Photoshop. The elements in this set are a combination of vector and real screenshots. Last month, I was asked to create a mobile website mock-up using the iPhone as a medium. I needed to show several parts of the interface, none of which I had graphics for. I set out to create an iPhone “starter kit” for myself.

This iPhone Vector Pack comes with several button elements, as well as six different iPhone interface options (which you can turn on and off in Photoshop). I hope this freebie pack will be useful for mobile developers and front-end designers who need a professional way to show mock-ups to clients or to work out ideas.”

Thank you very much, Renee! We appreciate your efforts.

Last But Not Least

We are constantly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a WordPress theme, Photoshop brushes, a Drupal theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad readership of Smashing Magazine). (al)

by Dmitry Fadeyev

Your website represents your brand. New visitors will form a first impression of your service or product within seconds of arriving at your website, and the visuals, layout and aesthetic will play a large role in shaping that impression. Sure, your website may be very usable and have great content, but it’s the aesthetic that will evoke feeling, and it’s the aesthetic that will be used to judge the quality of your website in those first few seconds before the visitor has had time to browse around.

Use this to your advantage and fashion a unique style that will set your website apart from the rest — a style that will impress and delight your users.

Throughout history, great artists always found new ways to express themselves and create new techniques to set their work apart from the rest. Think about the styles of Leonardo da Vinci, Vincent van Gogh, Pablo Picasso, Salvador Dali and Jackson Pollock. Think about the different movements of art, from Impressionism and Expressionism to Surrealism and Minimalism. These styles couldn’t be more different from each other — and that’s the point. The artists’ names live on because their art is unique.

Do you want to simply follow the latest design trends and create a website that works well but looks just like many other websites out there? Following trends won’t set you apart from the rest; it won’t help your work make a strong impression. To make something memorable, you’ll need an element of creativity and novelty.

Unlike certain other forms of art, such as painting and sculpture, Web design is very limited in its expression because more often than not your website has to serve a very specific function and achieve certain goals. Successful designs are influenced and driven by those goals. There is, however, still room to develop your own unique style and aesthetic. Doing so will help you stand out from the competition and allow you to develop a strong identity.

Web design isn’t art

Having said all that, Web design isn’t art. Art is self-expression that is meant to be enjoyed and appreciated on its own. Design is communication; and, more specifically, Web design is an interface for content. Sure, there are websites out there that are purely art, but the large majority of them perform a certain function or deliver information. The website acts as the interface between the user and that function or information. This means it not only has to look nice, it actually has to do its job well, too. Indeed, in most cases, function should come before form.

I believe I can say that websites today are much better than they were 10 years ago. What do I mean by “better”? I mean to say that Web designers have learned from their mistakes over the years and have picked all the low-hanging fruit of usability. Websites today are more usable and more user-friendly because we have greater experience in and increased knowledge of how to build websites that work and interfaces that are easy to figure out.

Yet, I cannot say that art today is “better” than it was ten or a hundred or a thousand years ago. Impressionism isn’t “better” than Realism. Expressionism isn’t “better” than Minimalism. They’re just different.

Web design as architecture

While Web design incorporates an aspect of art, it also incorporates function. In this way, I think it actually has a lot of similarities to architecture, for which you need a healthy dose of both style and function.

The world’s earliest treatise on architecture, “De architectura,” written by Vitruvius in around 25 BC, outlined three principles that all good construction should fulfill: firmitatis, utilittis and venustatis: durability, utility and beauty. I believe that today these three principles apply to Web design as well.

Your work should be durable in that it should scale well — or handle a lot of traffic — which is ensured by having code that is clean and optimized, as well as a means of making future modifications and updates with ease. It should fulfill the goals and function of the website, whether they be to advertise a product, sell goods, show off a portfolio or perhaps display articles from a blog. Finally, it should look good; it should have its own look and feel. We need to make the Web browsing experience enjoyable for our visitors by crafting a pleasing aesthetic.

Over centuries, architects and engineers have figured out better ways to construct buildings, to make them stronger and larger. These advances in function are similar to advances we’ve seen in Web design. We’ve figured out better ways to make registration forms, navigation menus that are easier to use, layouts that are simpler to figure out; generally speaking, we have greatly improved the usability of our websites. This is because we’ve had years to look at how people use the Web and to fix the usability problems that pop up most of the time. We see what works best and implement those things in new websites that we build.

Venustatis

But let’s not forget Vitruvius’ third principle of beauty. In architecture we see different waves of style. Different centuries bring different looks and feels to buildings. Houses are designed to be lived in, but life would be really dull if they all looked the same and focused only on function.

The design of the Opera House in Sydney is so distinct that it’s more than just a building — it’s an iconic city landmark.

In Web design we have very similar waves. Most notable is the Web 2.0 style, in which we had things like glossy buttons, mirrored floors, starbursts and so on; it even inspired various Web 2.0-style logo and website generators, because the style was so formulaic in nature.

New trends like this appear, and some get picked up and quickly adapted across the Web. Does your current website design follow a trend? Perhaps it is setting one? If you copy other trends, then your website will be just that, a copy, but if you can go the extra mile and create a unique look that differentiates your website, then your website will be memorable. Of course, being different isn’t the only thing you’ll need. The unique style and layout must also be attractive and must accomplish its goals.

Fresh inspiration

So how do you go about creating something different? Where do you find inspiration to create something unique? When Cordell Ratzlaff and his team were designing the new interface for the Mac OS X operating system, they found their ideas in the most unusual places.

Cordell saw a great opportunity to change to an appearance that was fresh and fun, in contrast to the existing state of the art. He decided to change from gloomy, square, and bevelled, to light, fun, and colorful, with a very fluid expression. He asked, What’s the opposite of a computer interface? He came up with things like candy, liquor, and liquids, to inspire a new visual design of the interface. The designers collected magazine ads for liquor, with delicious looking liquids in glasses with ice cubes, sparkling with reflections and highlights.

Bill Moggridge, Designing Interactions

When working on your new website or Web application interface, don’t simply look at what everybody else is doing. If you look inward to your own industry and similar websites, you will no doubt find a lot of likeness. This is because many of these websites borrow from each other, and when new websites launch, they borrow from them in turn. What we have is a monotonous experience in which you are only looking inward, blind to the world of possibilities outside.

Take a lesson from Cordell Ratzlaff and seek inspiration from new sources. Look at nature, look at real world objects, look at the things that symbolize and evoke the kinds of emotions and feelings you really want to elicit with your design and aesthetic. Cordell looked at things like ice cubes in liquor, which inspired him to create the liquid Aqua interface for Mac OS X. The glossy gel buttons and other user interface elements in Aqua have since inspired many Web designers in the rise of Web 2.0 and all of the glossy and shiny visuals it brought.

Let’s take a look at a few trendsetters, websites that break the mold and feature successful designs that get picked up and adapted by others.

Leaders and Followers

Twitter, the popular micro-blogging platform, has created a unique flat and colorful look that features illustrations of clouds and birds (and whales). The bright, cartoony feel is accompanied by an elegant and simple layout.

Yammer, a recently launched “Twitter for businesses” application, takes on a similar appearance and an almost identical layout. The cartoony feel is gone, but the shape and feel remain very similar, due to the iconic Twitter layout.

Facebook, the social networking heavyweight, has won its audience partly because of the uncluttered, minimalist design that puts the content right in the front seat. The clean layout is accompanied by a simple blue and gray color palette.

Social Median, a social news website, features the familiar minimalist look and feel of Facebook, together with a similar color palette and layout.

Highrise, a CRM application, features a very powerful landing page. On one page, visitors can see a description of the app, an overview of several features, a video tour as well as a bunch of links inviting them to explore. The typography and colors work to focus the visitor’s attention on the most important things.

Presently, another internal communication tool for businesses, features a landing page that is very close in its composition to that of Highrise, or indeed that of any other 37signals app. This powerful layout is now used by a lot of Web start-ups.

Apple’s website incorporates the same aesthetic as that of its product interfaces, and indeed its entire product line. Over the last few years, it has transitioned from the watery Aqua style to smooth aluminum gradients, light-gray shades and rounded corners.

Newspond, a news aggregator, features a different layout than that of Apple’s own website, but the aesthetic is strikingly similar. There are many other websites today that use very similar styles that are inspired by Apple’s industrial designs and interfaces.

Basecamp, one of the most popular Web project management applications, from 37signals, has pioneered this simple and effective layout that you can find in a lot of other Web apps today. Everything is clear and structured, with a minimal use of images to speed up downloading time.

Blinksale, an invoicing Web application, is one among many to borrow the popular design and structure of the 37signals website.

SimpleBits, Dan Cederholm’s design company, uses his signature minimalist layout and typography. Dan takes out everything that doesn’t absolutely need to be there, tweaks white space to pixel perfection and focuses on really polishing the little details. The result is beautiful minimalism.

The Twiek blog design looks like it’s heavily inspired by SimpleBits.

Conclusion

If you want to craft an iconic website that stands out from the competition, you need to come up with a unique and novel aesthetic. You need to design a look and feel that’s different — something that doesn’t look like all of the other websites in your industry. Getting inspired by great work and beautiful things is a good thing, but you have to make sure you don’t fall into the trap of mimicking other designs too closely, or else your website could end up looking like a cheap copy.

Seek inspiration from outside your industry. Focus on the emotions you want to evoke and the character you want to give your website, rather than on what everybody else is doing. Design a layout unique to your website or application by focusing on its goals and objectives rather than on what other people have done.

While Web design isn’t art, and while there are limits to how much you can express yourself and how many visuals you can use, there is still plenty of room for a unique style. Just as Vincent van Gogh’s post-Impressionism style and Pablo Picasso’s unique art set them apart from the rest, breaking the mold will give your website a powerful and memorable identity that others will want to mimic.

Don’t follow trends: set them.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

Today we are glad to release Girl Avatars Icon Set, a set with 21 original avatar icons. This set was designed by Navdeep Raj, the designer of On Stage Icon Set, especially for Smashing Magazine and its readers. The set was created using Photoshop [shape/style based] and contains 256×256px transparent PNG icons and vector and layered PSD sources.

Download the icon set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

• preview 1
• preview 2
• download the set (.zip, 2.6 Mb)

Thank you very much, Navdeep! We appreciate your efforts.

Last But Not Least

We are constantly looking for creative designers and artists. You may not know it yet, but we may feature you in one of our upcoming posts.

If you would like to release a free high-quality font, a WordPress theme, Photoshop brushes, a Drupal theme, some wallpapers or an icon set, please contact us. We would like to support you (both financially and with the broad readership of Smashing Magazine).

Similar icon sets

You may want to take a look at the following similar icon sets (also available for free download):

• DressUp! Avatars Icon Set

By Steven Snell

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?

About the Author:

Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.

In this selection we’re glad to present you Aller Sans, Mayberry Pro SemiBold, Quicksand, Agrafa Hairline, Sketch Rockwell, Megalopolis Extra and a couple of other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.

• Free Fonts Of March features Myndraine, Museo Sans as well as handwritten and grungy fonts.
• 40 Excellent Free Fonts For Professional Design
• You can find over 80 more free fonts in our section Fonts.

15 Beautiful High-Quality Free Fonts

Aller Sans [ Specimen | License | Download ]
Dalton Maag design team designed a beautiful sans-serif Aller Sans, sponsored by Danish publishing company Aller (hence the name). The typeface was designed as part of the Danish School of Media and Journalisms new CI and is now available for free use and download (via).

Mayberry Pro SemiBold (registration is required)
AscenderFonts released the font Mayberry Pro Semi Bold available for free download. This font belongs to the Mayberry Pro family. This family is a humanist sans serif designed by Steve Matteson to provide optimal legibility on screen in applications ranging from User Interfaces to web pages. The registration is required to download the font.

Rally Character Set [ Specimen | Previews | Download ]
Lukyan Turetsky released a character set of rally symbols. The font contains standard signs of control in rally, infographics rally icons, blanks for the design of logos and other graphics, symbols for signs legends (transcript) and other symbols and marks. OpenType, available for free download.

Quicksand
Quicksand is a brilliant sans-serif font designed by Andrew Paglinawan and available for free download.

Agrafa Hairline (registration is required)
“Agrafa is a technical but versatile display face that works well in both large and small sizes. Most of the glyphs are made from one continuous line and shows the constraints of bending a paperclip/wire.” Designed by Mugur Mihai. [ via ]

Conglomerfont
Conglomerfont is a free font created by Jay Hilgert (BittBox) and the design community from all over the world. Jay asked people to send individual letters to his inbox, and I coagulated the submissions into a single font, hence the name, Conglomerfont.

Sketch Rockwell
A sketchy hand-drawn script font, designed by Lukas Bischoff, available for free download for PC and Mac OS X. Free for personal use only.

Megalopolis Extra [ Specimen | EULA License ]
Revamped version of the 2004 one. Now in OT with extended language support and OpenType features with alternates, ligatures, different styles of figures, etc. You can use it freely for all your personal and commercial work. [ via ]

Sansation
A modern sans-serif, designed by Bernd Montag and available for free download and usage. PC / Mac OS X.

Exljbris fonts update
Jos Buivenga has recently updated his free fonts, partly available for free download. The improved Fertigo Pro, Anivers, Museo and Museo Sans have been recently re-released and are now available for free download.

Birra Stout (registration is required)
Birra arose from years of compulsive doodling in pen and ink, and conjures the whimsy and syncopated contrast of novelty handlettering in the early 20th century. Birra Stout is a free font, made available by Darden Studio.

Miso [ Preview ]
MISO is an architectural lettering font completed in 2006 by Mårten Nettelbladt. It’s available in three weights (light, regular, bold) in TrueType format for Windows.

Advent
Andreas K. improved his typeface and made a new version availabe for free personal, non-commercial usage only.

Last Click

High Heels Typeface
This was a fun project overall because I got the chance to explore a diverse and massive collection of High-heeled shoes, which was the main inspiration for the typeface that I have created. Not available for download.

Sources and Resources

• 20 Beautiful Free Serif Fonts
• 21 Awesome Free Fonts
  A beautiful selection of freely available fonts.
• 30 Most Curious And Interesting Dingbats