Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
Musician websites have a bad name for themselves. They are often behind the times, either poorly designed or poorly coded - or both. It's not all blue and gloomy though; there are a bunch of fantastic band and musician web designs out there - thirty-six of which can be found below. From textured designs, including Paolo Nutini and Rocket Club, to simplistic and minimalistic design, including Jamie Cullum and Jennifer Lopez, these designs cover the spectrum.
If you ever find yourself working on an artist or band's website in the future, be sure to keep these examples in mind. This showcase includes various styles of design, from those that act as just a simple online home for the band/musician, to those which contain full-blown online stores, discographies and forums. If your favorite band has a great website, or you've even designed a great band website yourself, feel free to link us and the other readers to them in the comments section below.
The use of texture in modern web design is something that web designers are no longer afraid to use on a regular basis. It helps to add a certain "style" and "feel" to a design, whether it's a subtle grunge texture you're using, or a lovely clean plank of wood.
The use of texture in band and musician web designs can really help to complement the style of music by that particular artist; for example, the subtle and noisy background texture in James Morrison's design suggest his music is easy to listen to and soft, and the dark, grungy and dirty textures in AC/DC's design suggests their music is quite loud and hard.
Paolo Nutini's unique music is matched with a rather unique, elegant and slightly "vintage" style look. It's made much more appealing by the use of illustrated typography and hanging frames which are brought to life by being different sizes and unaligned.
A hand-drawn colorful and retro texture has been used on Grizzly Bears web design, suggesting that they produce feel-good music that is easy to listen to and fun.
Rocket Club have combined photography and grungy texture with vintage layer styles to produce a unique and compelling design. Hand-drawn patterns and bold, fancy text has been used to top the designs vintage feel off.
Third Eye Bling (3EB) have cleverly incorporated their band names meaning into their design, by making the title "Third Eye Blind" almost blind for the human eyes to see. It's clever, unique, and adds a bit of interest to their design, helping users to remember it.
Simplicity and minimal styles are a popular, and still upcoming trend in modern web design. It is typically used on sites whose owners want the viewers to focus on the websites content rather than the design itself. It is popular among design, illustration and photography portfolios, as well as some online stores and news sites.
Jamie Cullum's site design is actually quite well known across the design community for its simplicity and great use of white space. The design is elegant, easy to view and navigate, and incorporates some lovely typography and sleek silver buttons in the top right hand corner.
The Arctic Monkeys use a black and white color scheme, with very little other colors being used in the design whatsoever. The high-threshold portrait images are used to fit in with the curvy illustrated-style design.
The navigation in U2's design makes use of strong, bold white typography to draw attention to what's important: the ways in which to find yourself around the site. The design is separated into three columns, making it easy to present and view lots of information on a single page, similar to columns in a newspaper or magazine.
Large typography tends to be bold, strong and "powerful." It's quite often the first and last thing we look at when entering and leaving a website. It usually has the power to tell you the nature of a website. For example, Limp Bizkit's website uses a messy and grungy typeface for the word "Bizkit" in a bright yellow against a dark background. This immediately suggests loud and intrusive.
Daniel Moir's design uses a bucket-full of modern-day effects and "trends", such as huge typography, desaturated and low opacity images and almost (but not quite) monochrome color schemes.
Photographic-based web designs usually consist of photographs being used as main backgrounds. It is a great way to set a mood for your design, which is especially important with band and musician websites, as it suggests the style of music before even listening to it. For example, a shot of an illuminated street will suggest modern and pop, whereas a long-exposure shot of a torch will suggest "rave" music and dance.
The Chemical Brothers have used a long-exposure "light photography" shot in their background, suggesting they produce electronic and dance music. The vivid streaks of light help to bring the simple foreground content to life.
A great motion-blurred nightlife shot of an illuminated street has been used in the background of Pixie Lott's website design. The motorcycle with her sitting on it is Flash animated, helping to bring the background photograph to life.
"Plants and Animals" is another design in this showcase that is following the latest web design trends; in this case, a three-dimensional anaglyphic effect is used to bring the photographic background and bold typographic links to a completely new level of visual interest.
Like photographic-based web design, illustration is generally used in the background or header of a design, although it is sometimes used in the foreground, as well. Again, like photography, it can help to set the mood of a design, and helps to suggest what kind of music the artist produces.
The background used in Christina Aguilera's web design is highly-illustrated, using light gradients, strong strokes and sudden bursts of slightly desaturated colors to make matching colors in the main content pop (referring to the lips in the background and red typography).
Jimi Hendrix's site is stylish, modern and is virtually one big illustration. It uses vivid watercolor style color schemes to make the illustrations compelling, and makes use of the lighter areas to present important information such as navigation links and upcoming events.