Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 07 2014

05:19

Top Design Tips for Improving Ecommerce Conversions

For three years now I have successfully avoided the Black Friday madness by shopping online on Cyber Monday instead of in stores. It seems that I'm not the only one either. This year many stores, such as Toys R Us, offered Black Friday deals online as well as in store fronts. This allowed me to get the best possible deals since different discounts were available for different items for each of the two events. Because of shopping online, I could easily jump from one online store to the next to compare availability and prices. The result? I bought way too many gifts for my kids this year simply because of the amazing deals available from multiple stores, all from the convenience - and safety - of my own home.

July 06 2010

13:45

Inspiration: The Top 36 Musician Web Designs


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.


Textured

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

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.


Zac Brown Band


Paramore


Grizzly Bear

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.


Lily Allen


James Morrison


Rocket Club

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.


AC/DC


Third Eye Blind

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.


Plan B


Robbie Seay Band


Florence + the Machine


Simplistic/Minimalistic

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

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 Black Keys


Arctic Monkeys

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.


Jennifer Lopez


The Temper Trap


The Rolling Stones


U2

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.


Nine Inch Nails

Large Typography

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.


Limp Bizkit


Daniel Moir

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

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.


Pendulum


The Chemical Brothers

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.


Britney Spears


Imogen Heap


Pixie Lott

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.


Kasabian


Paloma Faith


Plants and Animals

“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.


Illustrated

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.


Katy Perry


Muse


Christina Aguilera

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).


The Decemberists


Jason Mraz


Jimi Hendrix

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.


You May Also Like…

Sponsored post
soup-sponsored
04:52

March 19 2010

17:49

Inspiration: Awesome Dark Portfolio Sites

These days, a portfolio is a must. What we have here is a list of dark portfolio websites that are split up into common groups that most portfolios fall in. The last group will be for those experimental dark layouts, where the designer tries something different.


Rotating Image/Static Featured Image

We’ll start out with perhaps the most popular forms of portfolio design. This is the jQuery rotating image. The great thing about this kind of portfolio is that you can show a lot of work, with minimal space, saving room for other information.

Also falling into this group is the static featured image. While similar to the rotating image, it may not be quite as effective as the rotating image because of the lack of animation and interaction. On the plus side, a static featured image could also be used as a teaser to get people to look at the rest of your work.

antonpeck.com

bressane.com

intuitivedesigns.net

jayhollywood.com.au

jilion.com

neutroncreations.com

oysterdesign.co.uk

projectkoreck.com

rocknsites.com


Tagline/Bio

With this kind of portfolio, the viewer goes to the website and sees exactly what the website is about or who the designer is. If what you are offering or your tagline peaks their interest, they will look around your website. It usually helps and makes it more effective if the tagline is paired with another one of these styles of portfolio website, unless the typography can stand on its own as a visual element.

alt-design.net

bythepond.co.uk

chanellehenry.com

wedesignwise.com

joshhemsley.com

justincline.com

liftux.com

markjmaloney.com

moxiesozo.comindex.php

phynk.net

radiiate.com

rareview.com

studio7designs.com

tonychester.com

visualgroove.net


Text/Feature Image

What makes this kind of portfolio website effective is that the viewer gets a little information about the website, as well as a sampling of what the portfolio has to offer.

ba21.us

harryjh.com

nosleepforsheep.com

sawyerhollenshead.com

slovaczech.com

thingsthatarebrown.com


Portfolio Grid

This type of website gets to the point like the tagline/bio and text/image, except the viewer gets bombarded (in a good way) with the designer’s work. This keeps the interest of the viewer, because they don’t have to look around the actual portfolio pieces.

design-dps.com

jannek.fi

jonahl.com

onvo.co.uk

phantomcandy.com

phunkn.com

thehousemedia.com

Non-Portfolio Image Large Header

This website basically shows the viewer what the designer can do without actually showing specific examples. A stand-out photo manipulation/illustration/photo catches the eye and gets the point across.

arsum.com

bogdanteodorescu.com

loscoloresolvidados.com

ronniewright.co.uk

subhaus.org

weightshift.com


Blog Style

This is a great way to provide viewers a more personal feel, which gives the website a lot more personality. It also gives the website a more current feel (if it is updated regularly), giving the viewer a reason to come back.

billytamplin.com

dougneiner.com

demainjarrete.stpo.fr

ismaelburciaga.com


Other

These websites don’t have the traditional layout that we saw above. Lets look at these one at a time to see why they are so different.

badabingdesign.nl

The portfolio part of this website has a slide show much like rotated image designs, but this one is flipped so they scroll vertically, with the project description to the left. This website gives a new look to a common layout.

constantinpotorac.com

Although the two-column layout isn’t uncommon, it’s not usually used like this in portfolio designs. A bio on the left and portfolio on the right takes a combination of the grid and tagline/bio portfolio, and gives it a new twist.

duplos.org

I almost put this website in the tagline/bio category, however, since the tagline looks like a part of the illustration, and doesn’t really say too much, I decided to put it here instead. There isn’t really much on the home part of the website, so you have to explore to learn more.

gomedia.us

This website, too, almost went into the tagline/bio section, but I felt that the portfolio image on the right had just as much importance. The idea of putting information in columns rather than rows gives equal importance to each section, rather than having a common website where there is a row-based hierarchy of the most important to the least.


March 02 2010

14:35

Inspiration: Wonderful Watercolor Websites

This article showcases 30+ stunning web designs that make use of the incredible watercolor effect. The showcase is followed up with a small selection of links sharing a few tutorials and watercolor textures and brushes that you can use in your own designs.

Viget Inspire

Viget Inspire is one of the most recognized pieces of watercolor-style web design to date; there aren’t many web designers who haven’t seen it! The style is absolutely stunning, and the combination of the watercolored background and digital foreground and typography mixes incredibly well together.

Deborah Cavenaugh

Web Designer Wall

Web Designer Wall is yet another fantastic web design that is well known for its use of watercolor effects. The stunning watercolored patterns and the whole hand-made feel of the site makes it visually appealing, especially for their target audience: the creative industry.

Toby Powell

Boompa Shop

Boompa Shop have merged modern web design, such as the minimalistic footer, with some great watercolored “doodles” to create a beautiful and very unique effect for the web-based shop design.

Agami Creative

Corvus Design Studio

Corvus Design Studio have used a similar layout style to those typically used in portfolio designs, however instead of keeping it simple and plain to draw attention to their work, they’ve made the portfolio itself a piece of art, which is probably more than enough to persuade any customer to choose them for their latest project.

The Black Keys

Erguvan Platin Evleri

Erguvan Platin Evleri is one of the first to combine two popular trends in the web design industry: abstract watercolor effects and three-dimensional models. In this case the styles work very well together and are pleasing to look at; let’s hope we see more like this!

Davide Savelli

Colour of Air

Colour of Air is the first website in this showcase that uses very subtle watercolor in their design. To bring the content area below the header to life, they have used a low-opacity watercolor texture beneath the header and under the different article areas. The use of rendered noise in the design combined with subtle watercolor works great.

Sergio Design Trends

Sunrise Design

You don’t see vivid watercolor effects very often, mainly because it is quite difficult to pull off. Sunrise Design, however, pull off the effect very well, using bright greens and yellows in the background of their site design to create a happy and joyful feel.

Big Cartel

Volkswagen Escape

There are some huge and very well known companies making the most of the watercolor trend, too, such as the ever-popular Volkswagen car brand. They use a subtle, washed-out watercolor landscape in the background of their web design.

The Croquis

Saint Charles Maryland

Saint Charles Maryland, like several others in this showcase, used a light watercolor wash in the background of their design. This time, however, it is being used in the main content section of the design instead of the main background image. It’s an interesting concept that is pulled off well and goes with their corporate image.

Deep Roots and Wide Wings

Toggle

Toggle is another company that is well known in the creative industry for its fantastic use of watercolor in their website design. Unlike others, the watercolor effect seems to be randomly placed in the center of the background, rather than being used to produce a full background pattern or image (such as a landscape) in most of the other designs. It adds a great “oomph” to the site and brings out the lovely blue color scheme that has been used in the design.

Small White Bear

Brad Candullo

Brad Candullo uses watercolor in his portfolio design to add a little extra something to the background of his header, mainly to help draw attention to his website’s logo. The use of watercolor being used with so many other textures such as subtle grunge and wood is pulled off well and looks great!

Five Points Interactive

4PSD

4PSD is one of the most minimalistic designs in this showcase, simply making use of a light watercolor wash to separate the header area from the rest of the design. The colors go well with the site’s overall color scheme, and the use of whitespace only makes the watercolor effect look better!

K4 Laboratory

Binocle

Binocle is another site that uses a vivid watercolor effect in their design, this time using a very hot pink/red that slowly merges off to a deep pink/purple and magically transforms into a million birds. The effect is great and it really helps bring out the true power of the pink color used in the rest of the design.

Happy Cog

Imaginary Moments

The use of watercolor in this website design is superb! It’s very unique compared to the rest of the designs in this showcase, and is one of my personal favorites. I love how it has been merged with various other images and textures, and just the overall feel of the site.

Lebloe

Weberica

Weberica is possibly the grungiest watercolor styled web design in the showcase. It’s dark, olive green colors bring out the lovely gradient effect used in the logo, and those pink flowers help to bring out the small amount of red typography that is used in the rest of the design.

Football Made In Africa

Tylor J. Reimer

Tylor J. Reimer’s portfolio design is so simple yet so beautiful. The bright splashed watercolor effect combined with the hand-sketched dog is wonderful, and the low opacity neutral content background help to separate the illustration from the website’s content.

Helpful Resources

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...