Music Inspiration Behind a Web Design Work

When I start a new web design project I try to find inspiration taking a look on the best galleries saved in the bookmarks of my browser. Generally this operation have a good impact in my design process, often I find excellent websites, made by great web designer, that inspire me. It isn’t a trite thing, in fact scrolling many galleries we can find useful informations about the last trends in web design, good design solutions and particular layouts, discovering new CSS and JavaScript techniques too.

Music Inspiration Behind a Web Design Work

During my research I select and bookmark some good websites which impress me. After I sketch a general wireframe, focalized on the resolution of my particular problem (such us the strange requests of crazy clients), and then it can begin the work with Photoshop. This is, generally, the inceptive routine.

You may be interested in the following related articles as well.

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Music Inspiration Behind a Web Design Work

A my dear friend, in one of our discussions about web design, suggests me “try to use off-line inspiration, listening music for example. You could build pretty original web design.”
I initially am wary. Then a client asks me a website for a Blues Band. So I say to myself “We can try!”

Final Result

I have build a website layout (Called Vince Vega) using the inspiration simply induces from music. Below you can see the final result.

InstantShift - Vince Vega Template

In this article I want to explain how music has inspired this layout. I will describe the design process step-by-step making clear which songs I listened for each phase. This kind of work usually requires 60 – 120 min. and the timing of the following tracklist covers 70 – 90 minutes, but during the development of the design I have heard twice some tracks.

Working on concept

It’s important to listen some songs of the band for understanding the genre. Well, they are a blues band with some nuances of jazz, great music in my opinion. So, get in the zone.

Hearing the first tracklist I decide the color, “deep” dark blue, I want a dreamy atmosphere in a nocturne sky, using some “grunge” elements, but holding a clean and readable layout.

The power of music… four songs that inspire good ideas. Fantastic!

Sketch and wireframe

Now I need energy to start the work. I want rock songs. Sure, it’s strange to pass from trumpet and voice of Louis Armstrong to the sound of “modern” rock, but I risk of dreaming too long, I should work.

In my mind the goal is clear, for this reason it isn’t difficult to draft a simple wireframe on my block-note. I want a simple layout that emphasizes the communicative power of the blues and of the jazz.

Below it’s possible to see the first sketch.

InstantShift - Music Inspiration Behind a Web Design Work

Now I can start the work from scratch in Photoshop, holding in my mind the main guidelines.

The Background, a dreamy atmosphere

In this step I want to create the basis to recreate the nocturne sky, remembering that the main topic of the website is the music of a band.
The following tracklist help during this stage.

I use a dark layer of background (#000) and draw a large, round, gradient (with The Gradient Tool in Photoshop) from #113567 color to #000 on a new layer.

InstantShift - Music Inspiration Behind a Web Design Work

Over these layers I create a texture layer, using this picture, and now I can add a photo with a guitar. Both the layers need an opportune blending mode and some adjustment layers.

InstantShift - Music Inspiration Behind a Web Design Work

Now it’s time to arrange the idea of sky using the Stars_brush by anaRasha and Clouds II Photoshop Brushes by redheadstock.

InstantShift - Music Inspiration Behind a Web Design Work

A little tip. I add a new clipping mask layer above the clouds layers that contains a photo (I set the blending mode luminosity and an opportune opacity).

InstantShift - Music Inspiration Behind a Web Design Work

Making the header, logo and some grunge elements

Blues is famous for the “blue note” (the “worried” note), a note played at a slightly lower pitch than that of the major scale for expressive purposes. It is almost “discordant”, but it makes a great emotive impact.

I try to reproduce this concept using some grunge elements in the header.

First of all I make a simple logo using a sans serif font and a “grunge” font for the subtitle. I also apply a particular style to the text layers using Drop Shadow, Gradient Overlay and Stroke.

InstantShift - Music Inspiration Behind a Web Design Work

The right side of the header is perfect to add the “grunge elements”. I make use of the cut and paste technique to put in Polaroid picture, plectrums and the tag. I generally find the images at Stock.Xchng.Hu. The decorations on the background are created using Musik Brush by Rozairo.

InstantShift - Music Inspiration Behind a Web Design Work

Adding the menu I have the following result for header.

InstantShift - Music Inspiration Behind a Web Design Work

InstantShift - Music Inspiration Behind a Web Design Work

Down Header, large typography and a nice photo-effect

The client has done the explicit request for a direct promotional message including a large photo of the front man and some other images in the home page. Perfect, music!

I create a large box for the direct promotional message in which I can use a large typography and recall some elements of the header, such as Polaroid pictures and plectrum.

InstantShift - Music Inspiration Behind a Web Design Work

Now I must add the photo of the singer and saxophonist of the band (in our fictitious example, Vince Vega). I want an image that is perfectly immersed in overall design. I isolate the man shape from a photo of the subject using the Pen Tool of Photoshop (for the article I use a sample image from Stock.Xchng.Hu). For my aim I create a first layer, applying an opportune style to create a glow effect around the musician with a fill of 60-70%, under this I insert a second layer, in this case I apply the Gaussian Blur Filter. At the end add a blue Photo Filter for both the layers.
Below you can see the result.

InstantShift - Music Inspiration Behind a Web Design Work

Main Content and Footer

The hard work is ended, and to conclude the design I need a cheerful tracklist.

In this last step of my design process I add the content in the right side. The choice of placing the content on right is aimed to highlight the promotional message because the updates of contents will not be frequent.

InstantShift - Music Inspiration Behind a Web Design Work

I end with a simple footer that futures social media links and online activities of the band, to separate the sections I use a bevel effect.

InstantShift - Music Inspiration Behind a Web Design Work

Personal Considerations

This was a simple experiment for improving my experience using a different kind of inspiration. Finally I am satisfied for the result (personal opinion). Sure, it is only a first part of a work and during the other steps, such us the hand-coding or the testing; probably we need maximum concentration and silence. However I’m really surprised of making a website layout in Photoshop without on-line inspiration, exclusively using the sensations induced from the music. It’s a very nice thing.

You can listen to the complete playlist on my Blip Account.

You can also download the complete layered PSD Template, but you can use the file only to learn more about the Photoshop tips used to build this layout. It is a work that I made for a local web agency, so I can allow a personal use of this file, exclusively for learning.

InstantShift - Music Inspiration Behind a Web Design Work

Website Designs Showcase for Music, Musicians and Bands

01. Banda Gozz

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

02. Kim Richardson Music

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

03. Ryan Edgar Music

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

04. Jared Campbell

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

05. The Blizzards

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

06. Dirty Pretty Things Band

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

07. Suie Paparude

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

08. Kid Rock

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

09. Francesca Battistelli

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

10. Darry Lworley

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

11. Selina Herrero

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

12. Rocket Club

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

13. Carl Cartee

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

14. Michale Graves

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

15. Gary Nock

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

16. The Trian Woodburns

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

17. Remedy Drive

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

18. Robert Henry

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

19. Faust Again

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

20. Dalek Deadverse

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

21. Diego Diaz

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

22. Trevor Exter

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

23. Gesine Nowakowski

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

24. The Cello Studio of Ryan Sweeney

InstantShift - 24 Inspirational Website Designs for Music, Musicians and Bands

Official Link

Like it? Share it.

72 Comments

  1. Very nice article.

  2. Nice tutorial…

    Gud work guys hats off…….

  3. Fantastic article. Great music, beautiful design, interesting considerations and awesome showcase. Thanks!

  4. Beautiful List.
    I like Rocket Club, Remedy Drive and Robert Henry from them..
    -I love Music Site with outstanding big artists photographs and Gothic looks ! ;)

  5. wow.. no doubt you are a great web designer and toooo bad I’m not knew you before because I’m doing my new official website with another web designer. He’s very good but not a jazz fan like you. Was not easy to find someone who is a great web designer and a jazzfan and .. you are. Shit !!! bad luck ! ;-)

  6. wow…so cool, so great,….very inspiring….. keep up the good work dudes… more design :) love you all

  7. Compliments Piervincenzo! It’s a great article. It’s very interesting to produce works like this taking inspiration from music only. You’ve have made a great work!

    Ciao!!!

  8. Excellent article Piervincenzo I love the final result and the inspiration you had for that website was just perfect.
    I can see you have a great talent when designing layouts.

  9. great list some beautiful web sites here ! one day I’m gonna sort out all my book marked insprations there must be hundreds…..

  10. great inspration here thanks !

  11. Francesca Battistelli’s page looks beautiful. I have seen a lot of music inspired designs and these ones are really good.

  12. wow…so cool, so great,….very inspiring…..

  13. Wow, this is just in time for my university assignment. Thank you very much ^^

  14. This article has been shared on favSHARE.net. Go and vote it!

  15. Great

  16. One of the best articles I’ve read in the last month. Thanks!

  17. Nice..themes..!!!!!!!!
    thanks

  18. Great list, thanks for the sharing.

  19. Very interesting, easy and useful for everyone. Thanks for sharing.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>