A Short Overview

Building a super-clean website that works is not an easy operation. The web designer should create an impressive, harmonious, design using only basic elements.

Showcase of Super-Clean and Minimal Websites

Free Resources – High Quality Free (X)HTML/CSS Minimal Design Templates

Free Resources – High Quality Free WordPress Minimal Design Themes

Find Something Missing?

While compiling this list, it’s always a possibility that we missed some other great minimal and simple designs. Feel free to share it with us.

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!”

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.

• B.B. King – The Thrill is Gone
• Sonny Boy Williamson II – Your Funeral and My Trial
• The Dave Brubeck Quartet – Take Five
• Ella Fitzgerald and Louis Armstrong – Summertime

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.

• Blur – Song 2
• R.E.M. – Losing my Religion
• Dire Straits – Sultans of Swing

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.

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.

• Pink Floyd – The Great Gig in The Sky
• Eric Clapton – Layla (Unplugged)
• John Miles – Music (was my first love)
• Muse – Showbiz

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.

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.

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

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

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.

• Dick Dale & The Del Tones – Misirlou
• Pearl Jam – Alive
• Jethro Tull – Living In The Past
• Frank Zappa – The Central Scrutinizer and Joe’s Garage

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.

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.

Adding the menu I have the following result for header.

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!

• Pink Floyd – Money
• The Police – Message in a Bottle
• The Stranglers – Golden Brown
• B.B. King & Buddy Guy – I Can’t Quit You Baby

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.

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.

Main Content and Footer

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

• Beach Boys – Come Go With Me
• Beach Boys – Kokomo
• Queen – Crazy Little Thing Called Love
• Franz Ferdinand – Walk Away

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.

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.

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.

Website Designs Showcase for Music, Musicians and Bands

A Short Overview (Means Boring Stuff!!)

It’s not easy to come up with something very creative. So how can you make sure your design is better than the designs of your competitors? How can you point employer’s attention to your product or services? Here we might be able to help you by presenting this smart showcase. Below there are the collection of illustrated websites designs, but before we take a look around to the main, evident, features to create an illustrative web site. What elements do designers use to create illustrated websites? What kind of colors? What techniques?

Nice Characters

The use of a laughing characters creates a sweet welcome for visitors and it also expresses, or simply introduces, the main mission of the website. Below you can see some examples.

It’s interested also the use of characters from animal world to create a friendly web site brand.

“Microcosm” in a Web Site

Many designers love to show a piece of original (cartoon) mini-world that they create to emphasize the website message. These illustrations are good to finalize the footer or to create an impressive header. But there is also some pretty surprise…

The Right Background

An opportune background in this kind of web site is essential, at least for two main reasons: to give the right context at the illustration and to make a good back-image for the layout elements and so to structure a readable contents. In some cases the illustrative power of the design is in background image.
We can see some solutions in the following image.

Typography

The use of big typography is a frequent trend in modern web design. In many websites of this list (especially when the design is for portfolio, agency and company sites) we’ll notice big font size of design elements to communicate the principal message of the website.

In some other examples of this list there is a “normal” use of typography, but always to make a clear and direct message in a clean web design.

Animations

When some elements of design are “alive”, such as the birds in Tori’s Eye or the airplane in Marjeting Informatico, can be made a direct interaction with the visitor. The animation is often in flash, but a nice use of javascript is a concrete solution to animate your design (in the bottom of the article you can find a list of resources in which there is also some plugins for the animations in web design).

Humor

A spontaneous smile always works.

Examples Of Illustrative Web Designs (Interesting Stuff!!)

Tutorials and Resources on the Web

• 40+ Free Vector Graphics and Photoshop Brushes For Commercial Use
• 10 Impressive JavaScript Animation Frameworks
• Create a Cute Furry Vector Monster in Illustrator
• Monster Character Series Part 4
• How to Create an Abstract Vector Design in Illustrator
• Design with Swirls and Flourishes
• How to Create an Illustrative Web Design in Photoshop
• Coding a Clean & Illustrative Web Design from Scratch
• How to Create a Stinking Zombie Flesh-Eater in Illustrator
• How to Create a Smokin’ Western Type Treatment in Illustrator
• Draw a Classy 3D Poker Chip in Photoshop
• Design a travel PSD layout with Adobe Photoshop
• How to Create a Large Header with a Simple Western Scene

Other Great Collection of beautiful Illustration in Web Design

• Design Trends: 40 Awesome Illustrative Web Designs
• 40 Excellent Illustrations In Web Designs
• 72 Vector Characters
• 50 Inspiring Abstract Illustrations in Web Design

Find Something Missing?

While compiling this list, it’s always a possibility that we missed some other great resources. Feel free to share it with us.