Today, we will go through the basic semantics of header image design and how the very default looking header images are still sitting on most websites. We will try to figure out what web designers can do to create jaw dropping header images and use examples to understand how designers are actually implementing original ideas.

Old is no more the gold

Gone are the days when a regular rectangular header image design will be good enough for your upcoming website design. Notice that if your website is very old and has its own fan following then you might not have to experiment with header images, but if you are new in business then you have to do something different so as to attract visitors. I am sorry to say, but the wrapper of the chocolate is an important reason behind you buying that chocolate. Get it?

There are plenty of default designs and plugins available that make it super easy for website designers to come up with a basic header image but that just isn’t helping you out. If you want to be part of this business then get real. Think. Out. Of. The. Box!

It will sound a bit weird if we tag something as default design in today’s website design industry, but unfortunately it is true. The structure that you see above has become, more or less, the default website design for those who want to go live real quick. Register a domain, pick up a template and you will be live within minutes. But, is that of any use? The ready-to-go designs help you go online but don’t help you get the attention of internet surfers. True?

So, how can we actually take our first step toward out-of-box looks? What can one really do with the default header shapes, sizes and designs? Aren’t they supposed to be what they are? Well, they are supposed to be the way they are, but with a little tweaking we can actually make them look super attractive. Here are my suggestions when it comes to tweaking your header images:

Submerge!

Don’t compare this tip with something that pops out of the screen due to its amazing design. Rather, what I am trying to suggest here could well be a simple but unique way to make your headers look different from the rest. This is actually the easiest too, once you are into it.

Look at the header image of Gary Nock. It is more or less merged with the rest of the website design. You will never find such kind of rectangular in shape header images. Rather, such header images submerge with the rest of the design which as a result gives the website design the clean and riveting look. So, when I say “submerge” then I mean merge your header image design with the rest of the website design in a fashion that the old rectangular look of the website is not around to turn off your readers.

Break The “Text Book” Definition of Dynamic Headers

Enough of  the jQuery codes to make your headers look dynamic. Can’t we make them look a bit different considering the fact that almost everybody is either using a jQuery based header or a (good old) flash header.

Check out the above header design from Raskulls. The website has done well to balance the looks of a dynamic header with a clean header image. The end result is a sleek looking header image that does justice to the niche of Raskulls. See, I am not asking you to give up on jQuery or Flash either. What I want you to understand is that it is high time that we start looking for header image designs that are sleeker and different from the rest. You’ve got to stand out to attract visitors.

Ditch the Rectangle

I won’t give you an example in this case as my first tip of submerging the header image with rest of the website design was almost similar to this. See, we are used to the usual rectangular looking header images. As I said before, they have become part of the default website design which is of no use. What if you ditch the rectangle shape of header images and look for something which is different. This is when you will attract attention and that is the sole purpose of your website. True?

Ditch the Header Itself!

OUCH! What was that?

Well, that was getting rid of something that confuses you the most. If you are not happy with your rectangular looking header image design and you are not sure of anything different then why not just ditch the header itself? Why can’t we start with the content directly and use a small square in the sidebar for the name of the website? What is the real problem? There isn’t any hard and fast rule suggesting that headers are a must for a website design, and if it isn’t a rule why do we actually have to stick with them?

Have a look at Sony’s portal displaying its tablets. Sony has smartly left only a little  amount of space on top for the name and menu while the rest acts as the place where content is displayed. Really, if you are not sure about the kind of header that you should use then you will be better off ditching the header. Try it!

Keep Thinking Different. Don’t Give Up!

This is supposed to be the usual tip of any inspiration pointers and it applies here too, but with a slight difference. The point that I want you to understand here is that if you keep trying the different looks for your header image then you are bound to come up with something which is a lot better than the rectangular looking header images. And, trust me on this one, any header shape will look better than a rectangular header image design.

Your hard work and your honesty should be reflected in your out-of-box header image design. This is when visitors understand the seriousness of your purpose and end up giving more time to your website. Also, keep changing your header images. Experiment with different looks and see what leads to a jump in your traffic. Try. Fall. Getup. Try. Succeed. Continue Trying.

Inspiration

Juan Diego Velasco – Web Designer Portfolio

Giancarlo Fajardo – Creative Graphic Design Portfolio

Duirwaigh Studios

N.Design Studio

Octwelve – Blog of designer MeryLuc Melgar

Pixel Cool

Shaun Groves

Conclusion

Header images have come a long way. I know plenty of websites that have successfully experimented with header image designs, but I know so many who still go live without proper design plans. Please remember that you might be better off with a simple looking header image design if your website is old with huge visitor numbers. In that case, the visitors are aware of the quality of content that your website produces and this is when an attractive header image is not that important. But, if you are new in business then better take care of the looks of your website design otherwise be prepared to end up nowhere.

Presenting sumptuous and refreshing foods and beverages gives eCommerce owners much to work with when it comes to website design. Tantalizing images and a showcase of the associated benefits work well to draw customers in to the purpose behind the website and lead their clicking fingers all the way to checkout.

As you will see from these examples, a great image can go a long way. Warning: Some of these food images are so tantalizing you may find yourself reaching for a snack before the article is through.

1. 4^th Street Cookie Company

The 4th Street Cookie Company sells cookies as a supplementary income source to their physical store. The success of their web design is evident in the eye-catching images of their cookies (makes you want to reach right in to the screen and grab one!) and their easy navigation. Their clever call to action is strategically placed next to the cookie with an arrow. If you click to see the actual site, you will notice a slider that showcases five different varieties of cookies, all with images just as tantalizing as this one.

2. Black Estate Vineyard

Simplicity is the name of the game for this website and simplicity is often very effective if done right. This website nails it with its beautiful, elegant typography against the rich, black background. The design just beckons wine lovers to take a closer look.

3. Sanctuary T Shop

Though this site has a few “faux pas”, overall it organizes information well and draws the visitor in. The color blocks on the navigation offer a creative style to what could be a boring menu. The navigation also shows that square-edge elements can be effective if done creatively. The products are showcased in the slider and right below the main graphic to grab visitors’ attention at every turn.

I also like the “Bestselling teas” which is a great way to keep potential customers on the website. People love to read reviews or look at highly-rated products.

Two things I would adjust in this website are the logo (it’s somewhat lacking) and the main graphic image that mentions the season “autumn”. Using the seasons is a great marketing ploy which I will show you in another example, but it ceases to work if you do not update the graphic. This can actually work against you.

Do you see any other possible improvements?

4. Marie Catrib’s

Again, I love the mouth-watering images that make you want to research the site more. Also, the typography is a nice addition to the overall light and fun attitude behind this website. It’s simple design is effective and the products are showcased well overall.

The product pages are also designed well with ingredients displayed prominently, an important addition for the healthy-conscious customer who visits this store. Also notice the context-sensitive navigation options “More info” and “+ Cart” that appear when users hover over an item on the home page.

The only element I would change is to make the image on the home page “clickable” to direct customers to the order page for that particular item

5. CellarThief

This website is very creative and for that reason it is often showcased on many blogs as an example of the best eCommerce website design. The designer’s use of textures and color is superb and the associated content (tell your friends, choose a wine, feel good) is displayed with right-aligned text to remain secondary but also pop on the page.

The creative background brings the brand to life and the “wine of the day” is an effective call to action expressing urgency for customers to take action before the day is over. If you click to the product pages you will see a well-organized layout that focuses a lot of copy in well-defined areas.

6. Gevalia Coffee

The font on this website may appear a little larger than most, but some newer sites are using these fonts along with grand logos and images to nail their message right from the start. The size of every element works well together. If the logo were smaller or the font any larger, it may have thrown off the whole appeal of the site.

7. Ghirardelli

I am showing this website because I liked the images on the slider and the concepts behind them. They not only showcase Ghirardelli chocolates as ultimately decadent, but they also display images of the benefits of the product and how it can be used. The slider shows images of Valentine’s Day recipes and also urges the customer to buy the chocolate so the recipe turns out exactly as shown.

8. Teasta

The choice of bright color works well for this brand and it captivates the customer. The “Buy Now” button is prominently displayed in the center graphic and the secondary content works well with this clean design.

Social interaction is also important for this brand and the use of the Twitter bird with clever content entices customers to follow the brand to land extra coupons and discounts.

The navigation is well thought out, although I would change it up a little so it stands out more.

9. Nuts in Bulk

Apart from some extra clutter, I chose this site for many reasons:

• Creative, eye-catching logo
• Nice, easy to locate navigation menu
• Content segmented into separate blocks to streamline the design and make it appear clean.
• Green call to action buttons in each block which stand out from the page
• Slider showcasing products with enticing copy and images
• Phone number displayed in orange color to pop out from the background but not overtake the design.

10. Snapple

I am showing this website for creative inspiration. It is not a design I would recommend for all eCommerce stores but it works for the popular brand Snapple. Since Snapple is already a worldwide brand, it was a good idea to take the web design out of the box and create something unique.

The design offers visitors a chance to connect with Snapple on Facebook, Twitter, or via email. The website contains interesting, interactive elements that will keep visitors on the site. The site made me wonder around a little even though I don’t drink Snapple.

11. Purdy’s

I like the simplicity of this site and how all the elements pop against the purple background. I am a strong believer of the “less is more” approach for eCommerce stores and I think this strategy is displayed here nicely. The subtle leaf design in the background is also a nice touch. Also, pay attention to how the website uses the season to stay relevant and interesting. The New Year is showcased to entice visitors to stay and shop.

12. Mom & Pop Corn

This site is a little grunge for eCommerce but I wanted to show off its creativity. This design style would most likely appeal to a younger population with an artistic bent.

I can appreciate the creative logo design and placement as well as the fun font and eye-catching navigation. If you look closely, the design still follows a typical layout with the main image followed by three sub-sections; however, it has been injected with a lot of personality that will appeal to a particular demographic.

13. Chocomize

Though there are some design elements I would change, I liked the color scheme of this site. It is also great for conversions to display any noteworthy clients as this site did below the main slider. I would have showcased them a little differently, but the strategy is a good one nonetheless.

It should also be noted that this site does a good job at passing the 6-second test. Show your website to people for six seconds or less (anywhere from 4-6 is good) and then ask them if they know what the site is selling. This site was successful at making a complex and new concept like customized chocolate easy to understand and grasp within the first few seconds.

Now that you are probably running to the cupboards to fill your mouth with some chocolate, hold on for just a few more minutes…

I chose this website to show how you can change the area around the slider to showcase more products. The orange call to action buttons are also popping out from the design. Additionally, the BBB logo is displayed but not obstructive to the overall design.

15. Cheryl’s

A few reasons why this website design is successful:

• Free shipping prominently displayed
• Side navigation well-defined and catches the eye
• Large banner displays advertising and draws the eye there while separating content nicely.
• Font is easy to read and scan and separated from design elements well

A few negatives:

• Cart symbol small and lost on background
• Contact information not visible
• Search bar is very small

When it comes to website design, sometimes two or three or even four eyes are better than one. Do you like these eCommerce website designs? What improvements or design changes would you make to these sites, if any? We would love to hear your opinions!

Why the Rant?

Well, Interaction Design has been around for quite some time but it was Microsoft’s Vision of Tomorrow that gave the term its necessary fame. I am not sure if we can call it a vision or stupidity but it surely was interesting. Since then Interaction Design has faced many critics, some of those actually ripped apart the actual vision itself. I won’t count Bret Victor in the category of critics who rip apart the concept of Interaction Design, but he was quite close. Before we move on, I want you to get the feel of Interaction Design. See the video below:

To summarize Victor’s article, if Interaction Design was to be our future then the nerves on our finger tips will become jobless. Yeah, he did a great job of explaining how we forget that it is a work of art when we can use our hands turn a page of the book and remind our brain that we actually turned two pages instead of one. Its art when you drink water, pick a bag, use a phone and all those other daily tasks. True. But does that mean we give up on technology that makes our life overly easy just because we want to feel the number of pages we flipped? I mean, come on, isn’t that old school? If that was the case, why did the world go mad for the iPad? Just because it was Steve’s vision? No. Really. It is because they love the ease of use. Get it?

Let me quote a comment from Reddit to support my thought:

Hands are so yesteryear. The future in interaction is through voice and mind. Hands are just an intermediary between your mind and the outside world. As the author of the article said, without feeling you’re paralyzed in a wheelchair solving quantum mechanics problems but YOU’RE STILL WORKING AND INTERACTING BECAUSE OF YOUR BRAIN!!

The future of human interaction is for technology to try and figure out what you actually want to do as opposed to what you can just figure out how to do by sliding your finger around on a device. This is where stuff like Siri comes in. Google has been working on this for years as well.

The author himself has a woefully outdated vision of future interfaces, since future interfaces will be no interface at all. You’ll just speak to a machine or plug in and it will give you what you’re looking for without figuring out where some UI menu is.

Why it isn’t about touch only

You know, I still prefer a BlackBerry Bold over an iPhone just because the Bold has a physical keypad and my work involves a lot of writing. My typing speed somehow decreases if it is a touch phone though the difference has started to blur. I know that someday I will move on towards the iPhone because of its rich features. The Bold does lag behind and we all are aware of this fact. But, the point is I don’t use the BlackBerry keypad due to the touchy feel of it. It is just that, for now, I feel that it is comfortable to type using a real keypad instead of a touchscreen keypad. Moreover, I know that tomorrow I will not think like this. The transition has to occur because it is for good only.

What Victor forgot was the added features that come with Interaction Design. See how the lady has been introduced with the place of her next day’s meeting? I’ll love it when Interaction Design Technology introduces me to the hotel building where I will be enjoying my honeymoon in a matter of few minutes. Will it be different? The vision of my destination itself? I agree that my hands won’t be able to tell me about the fact that I flipped three pages instead of one, but the technology will, so why care so much? Interaction Design Technology isn’t kicking away the prospects of human-to-human touch anyways. It is just feeding on our thirst for comfort and pushing it to the next level.

Here is another situation. The guy in the picture never had to open the refrigerator to find out what was in there. He saved a few seconds and didn’t even transfer the few thousand germs that his finger tips were carrying. Isn’t that interesting? Why taste milk to see if it is still good? I would rather let the technology tell me the same. If our technology can be as good as that then what is the problem with merging the same with Interaction Design?

Those are just two examples of what Interaction Design can do for us in future. I agree that we will lose the real-touch feeling when such tools take control of our lives, but that will be for the best (most of the times.)

Another comment on Reddit hails my thoughts:

While the author is right that these interfaces may not be truly revolutionary objects, he kind of misses the point. The real revolution of many of these future videos is that computing will become ubiquitous and interconnected. It’s not just that I have a fancy phone, but that my phone talks to the arrival gate kiosk so it knows I am at the airport and can automatically hail me a cab. The cab itself has a computer and display mounted into the windows that talks to my phone and can point out my local destinations as I drive by. While we are making small strides towards realizing these goals, the vision is that all of this will be seamless and effortless. The idea is not to create a novel vision of the computer, but instead create a vision of how we will do computing.

Far-Fetched Alternatives

Remember Iron Man? District 9? What do these two movies have in common? My God, did you just say “the iron suits”? Please! I was pointing towards the 3D style of computing which was used in both these Hollywood flicks. Of course they are far from real but isn’t almost everything that we discussed above also far-from-real? Still, the buzz is with these ideas. Then, why not the ideas that were pictured in Iron Man? Touch. Feel. Play…live inside the system. It is about how close these machines come to reality and now far we go with our imagination. Also, an Iron Man-like display will surely help Victor reconsider his rants against the loss-of-touch-styled-interactive-designs!

Lastly, this write-up wouldn’t be complete without the mention of Apple’s overrated Siri. I agree that Siri could well be the first step towards Artificial Intelligence but that will be it. There is a lot to come in terms of Artificial Intelligence and I would love to live till the times when an Iron Man-like Artificial Intelligence becomes part of my daily life. God, are you listening?

Conclusion

Well, the topic of this debate is neverending still I think the end result is more or less clear already. We will be moving towards Interaction Design Technology at some point of the time. Time will tell if humans are able to gel with it or continue to criticize the losings of human touch. See, I am not against the idea of human touch. I will still want to feel my mom’s hand instead of touching it over a glass screen but that doesn’t mean that I don’t want an iPad like technology in my kitchen via which my mom helps me cook my dinner. It is fun and it is almost real. Agree with me? I hope my grandpa agrees with my thoughts!

The modern designs are attractive and can be tremendously innovative. In addition to the regular fields that everyone anticipates, forms can be elevated by adding additional features such as maps, social networking data and interesting illustrations. A solid and aesthetically pleasing contact form assures the viewer’s trust in the person or company at the back of the site and improves the entire experience.

Here is the full collection after this jump. Enjoy!

1. Aterlier Detour

Here the contact us form is placed at the bottom of the page when you click Contact button. The design looks different and unique when you compare it with others.

2. Try Triangle

Here you will find that the contact us form is more like a paper form that is placed on the table.

3. Asvalia

A post card like contact us form that gives the whole page a very unique and visually calming look.

4. Foto Marcol

Slightly vague but truly creative contact us form that sets itself apart from the identical contact us forms.

5. Square 1 Media

Yet another example of beautiful and visually attractive contact us form that encourages your visitors to contact you.

6. Stan Gursky

Extremely creative contact us form.

7. Ctrln

Here, the form has been given a nice look by placing a post box at the end that connotes the communication through written messages.

8. Denise Chandler

This form holds a different color and that is red which grabs the attention on the first look and signals that this is something you should pay attention to.

9. Carsonified

Simple, uncomplicated and easy to complete form that does not ask too many details.

10. David Hellmann

An envelope is placed as the background image with the form in this website giving it a very personal touch.

11. Step2reality

A cute image is used at the side of contact fields that implies the delivery of written messages.

12. Xruiz

The creative web designer made use of his creativity and designed this visually compelling contact us form.

13. Silly Poems

No big images, no huge typography; just a simple contact form with a nice and simple background surely is enough to grab the attention.

14. Fseid

This contact us form looks like a notice board where you can post different notices with the help of paper clips and thumb pins.

15. La Masa Mimatta

Somewhat mysterious yet appealing form that does not ask for much information to send your query to the webmaster.

16. Fundo Los Paltos

Contact details are also provided in case if you want to contact them over phone or though fax along with the email.

17. Five Cent Stand

A very dynamic contact us page with loads of interactive elements to create user interest in the website.

18. Red Bull Soapbox Racer

A casual and unfussy contact us form that is different from all the other forms in this collection. See the simplicity of this contact us form.

19. Camping ilfrutteto

This contact us form is simplicity at its best.

20. Svn2ftp

A very cool and fresh approach to design a contact us form is apparent in this website. You can see how interactively the designer has used certain elements to bring this web design to life.

21. Just Dot

A very unusual contact us form that is present at the end of the web page. You simply have to navigate to the bottom of the web page to find this lovely contact form.

22. In my Bubble

You may feel like as you are writing on a paper but actually you are not. The design really is very marvelous and imaginative.

23. Harmony Republic

Harmony Republic also designed a very simple and clean contact us form.

24. Corvusart

A nature inspired contact us form with a beautiful color combination.

25. Rescueseo

This contact us form is presented in company with SEO packages choices that you can pick for your project. A very unique approach.

26. Reverend Danger

Simple and uncomplicated contact us form that lets you quickly fill the required fill in order to send your query to the webmaster.

27. Webfoo London

New and innovative approach of placing contact us form at the top of the web page emphasizing its importance.

28. Melonfree

Melonfree makes use of the concept of minimalism for its contact us form and keeps the design simple but appealing.

29. Hit Digital

Quick and efficient contact us form without much complexity and confusion. This is truly helpful for such websites that expect their users to contact them more frequently.

30. Zeropixel

Zeropixel contact us form is somewhat different from the others with respect to its design and color usage.

31. 1minus1

1minus1 does not have a separate contact us page but rather the contact us form appears like a pop up window on your screen when you click the contact button present at the top and bottom of the page.

32. Syropia

Syropia also uses the concept of mailing envelope to design their contact us form, looks simply ground-breaking.

33. Agencyp

Agencyp contact us form appears to be identical to that of others but in actuality it is not. The website will take you to the contact us form in a sliding style once you clicked the Switch Board button.

34. Freestyle Night

Extremely innovative approach to design a contact us form and taking it to the next level by just mixing up some innovation and creativity.

35. Ultranoir

Ultranoir has designed its contact us form by keeping the concept of creativity and simplicity intact, and has successfully created this awesome contact us form.

36. Cplx

Send messages in the clouds; this is what this design speaks about. You will like the originality of the designer with which this form has been created.

37. Bio-Bak

The most unusual and innovative contact us form in this collection that was designed with an out of the box approach.

38. Lunalunerafestival

Write your message on the piece of paper, fill you name and email address in the envelope and send it to the webmaster. Isn’t it interesting?

39. ElectricPulp

In addition to the contact us form, other details such as phone number and email address are also provided for the users to contact them directly.

40. Fabric Adecaricaturas

A somewhat ugly caricature is there with the contact us form, I don’t know for what but somehow it completes the overall look.

41. Z-Index Media

Again the concept of a letter is being applied to create this contact us form. The design is simple yet speaks volume about itself.

42. Social Snack

Social Snack also utilizes another interesting and creative approach to get their contact us page appear different and unique from the rest of the contact us forms.

43. World-Arcade

The contact us form appears when you click on the Contact button asking you name, email address and your message that you want to send.

44. Hybridworks

In this contact us form, you will see that the letter box is the only graphic element. Despite that the web page looks visually interesting and appealing.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

• Rims
• PSD File

Step 1: Setting up the Document

Start by creating a 1400px x 1850px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

• Rulers: Ctrl + R
• Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. When you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create a second guide with a value to 1180px, this will make a total of 960px to the center of our canvas.

Step 2: Creating the Header

Now that we have set up our workspace time to create the layout. Start by creating a 100% by 200px using Rectangle Tool.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

• Stroke

Result

Add another shape at the very top of the canvas using Rectangle Tool size 100% by 40px, color #000000.

Add this Blending Option

• Drop Shadow

Result

Using Text Tool add Signup and Login link at the top-right corner.

Step 3: Creating the Site Logo

This will be the site logo. Now to start, create a 80px by 80px shape using Ellipse Tool.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Result

Now, Contract the shape by 5px. To do this Ctrl + Click the thumbnail of the layer in the layers panel, next go to Select – Modify- Contract and the value to 5px. Create another layer at the top of the shape layer and fill it with any color.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Result

Using Text Tool add GD text. I used Myriad Pro 36pt bold.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

You should have this result

Now let’s add some highlights to our logo. Create a new layer above the text and name it highlights while the layer is selected make a selection of the inner shape. Select Elliptical Marquee Tool and make a selection while pressing Alt Key as shown in the screenshot provided below. Note that while holding Alt key this will hide the selection that you have selected.

Select Linear Gradient Foreground(#ffffff) – Transparent.

Refer to the screenshot below for the final result.

Step 4: Creating the Navigation

Using Line Tool create a #000000 1px line and below it create another #444343 1px line. All our navigation will be placed here.

Using Text Tool let’s add our navigation links. “HOME, ABOUT US, SERVICES, COMMUNITY, APPOINTMENT”. Each link should have 40px distance from the right. Then, between our links create two 1px line using Line Tool.

Let’s style our home as an active link. Using Rectangular Marquee Tool make a selection as shown in the screenshot below. Use Linear Gradient Foreground(#ffffff) – Transparent to fill the selection then, set the layer mode to Screen Opacity to 30%.

The Result

Step 5: Creating the Search

As you can see in the preview above there is a input field and a search button. First thing we need to do is to create two shapes using Rectangle Tool and make sure it is centered.

To make the left part of the first shape slanted we must select the input field shape layer and use Free Transform (Ctrl + T), right click on the stage and select Distort. Now you will have the option to drag the top right point from the right. For the search button drag the left point to the right.

Add this Blending Option – Input field

• Inner Shadow

• Gradient Overlay

Add this Blending Option – Search Button

• Inner Shadow

• Gradient Overlay

Using Text Tool add text label for the input field and button.

Step 5: Creating the Slider Gallery

Select Rectangle Tool and set the radius to 10px. Create a 600px by 340px and label the layer base, create another shape above it 600px by 50px label it control base.

Right click to control base and choose Rasterize. Using Rectangular Marquee Tool make a selection as shown in the screenshot below and delete it.

Add this Blending Option

• Gradient Overlay

• Stroke

Result

Now we will add next and previous controls. Select Shape Tool and find an arrow that looks the same as in the screenshot below.

Add this Blending Option

• Drop Shadow

• Gradient Overlay – For Hover purpose

Result

Create three circles using Ellipse Tool align it as shown in the screenshot below.

Add this Blending Option – First Circle

• Drop Shadow

• Gradient Overlay – For Hover purpose

Add this Blending Option – second and third Circle

• Drop Shadow

• Inner Shadow

• Gradient Overlay

Result

Using Rectangle Tool create three shapes as shown in the screenshot below label them first, second ,third and set the opacity to 90%.

Add this Blending Option – first, second, third

• Gradient Overlay

Result

Fill each layer with dummy text using Text Tool. Create also a read more button, just refer to the screenshot below.

Let’s add some separation between each tab. Using Line Tool create a line as shown in the screenshot below.

Result

Step 6: Creating the Login Panel

Select Rounded Rectangle Tool and set the radius to 10px. Create a 340px by 170px shape.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Notice that the login and search look the same. But for the login input field remove the Inner Shadow and for the login button add a #a5150 Stroke.

Using Rounded Rectangle Tool with the same radius. Create a shape as shown in the screenshot below.

Add this Blending Option

• Gradient Overlay

• Stroke

Create another shape using Pen Tool.

Add “User Login” text using Text Tool

Step 7: Creating the Appointment Box

Using Rounded Rectangle Tool with a 10px radius create a 340px by 140px. 20px distance from the left and top.

Add this Blending Option

• Gradient Overlay

• Stroke

Result

Notice that For Free button in the preview above. To do that create a shape as shown in the screenshot below and copy the layer styles of the login button and place the same arrow shape as we used for our slider controls.

Add a For Free text using Text Tool size 14pt Myriad Pro.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Result

Add dummy text using Text Tool size 24pt Myriad Pro Bold Italic, place it as shown in the screenshot below.

Add this Blending Option

• Drop Shadow

• Gradient Overlay

Result

Finally open the rims image that you have downloaded and place it as shown in the screenshot below.

Step 8: Creating the Services

Create a 960px by 205px base shape using Rounded Rectangle Tool.

Add this Blending Option

• Inner Shadow

• Gradient Overlay

• Stroke

Result

Let’s add previous and next controls. Using Rectangle Tool and Pen Tool create a shape as shown in the screenshot below.

Add the same Blending option as we did in our base shape.

Now that we have the control and base layer we will add our services. Create a #141414 280px by 160px using Rounded Rectangle Tool. Place it as shown in the screenshot below, when you’re done contract the shape by 5px.

Add this Blending Option – Base layer

• Drop Shadow

Result

Create a shape as shown in the screenshot below color must be black. When you’re done set the layer opacity to 80%. Add text using Text Tool and grab a copy of read more shape as we did in our slider gallery place it as shown in the screenshot below.

Group all the layers we have made and duplicate it twice for our other services. Place it as shown in the screenshot below.

Result

Step 9: Creating the Latest News / Blog

The base and the header of our blog section is the same as our login. Duplicate a copy of it and change the header text to Latest News.

Grab a sample 125px by 125px image for our thumbnail post. I will not go into detail about how to do this, just refer to the screenshot below.

Step 10: Creating the Testimonials

Still the same header but different base style. For the base style copy the blending option we applied on the base of our services. Refer to the screenshot below for the thumbnails, text format, and line colors.

Step 11: Creating the Footer

Using Rounded Rectangle Tool create a shape as

Step 12: Creating the Background

Select the background layer and fill it with #bbbbbb. Using Rectangle Tool create a shape as shown in the screenshot below.

Go to Filter – Blur – Gaussian Blur

Finally we’re done. Wooo! I hope you didn’t get bored following this tutorial and I hope that you’ve learned something in doing this. If you have questions or comments just post it below and don’t forget to tweet and share this tutorial with others. Cheers all! :)

This article takes a peek at thepast half-year and presents 50 splendid and trendy web designs from Deviantart spring and summer 2011. Can you spot the new potential trends? Are big headlines and patterned backgrounds still popular? Share your thoughts in the comments below.

1. Simple Bits by Paresh Khatri

Awesome theme combining business, blog and portfolio functions. The color scheme is soft, yet captivating. You can find examples of the current leather bordering trend in this design which is incorporated in cool bright ribbons. In a nutshell it’s a trendy, beautiful and functional design fitting all modern web standards.

2. Caffee Effetto V1 by xXxadO

A complete website with logo for coffee retailer. The layout is very accessible and all the elements are in good balance. The nonstandard font together with the header gives website a complete and appealing look.

3. luba fashion grey by zee7

Stylish and trendy fashion website. Again we can see colorful ribbons with sewn borders. Although the design looks a bit incomplete it can turn out a beautiful fashion shop if enhanced a little.

4. yemekators by zee7

Incredible recipe design with blog type layout. The subtle textures complement beige colors and give the design the right mood.

5. Bobo by ECP-Pro

Clean and minimal design with a few color accents. The large slider in the middle interacts nicely with the white space. Only negative could be the lack of some buttons/functions if it’s a commerce website.

6. Theme Designer by Sunil Joshi

Beautiful portfolio design with crisp color scheme and modern structure. Also the coded version works fast and without snags.

7. Kar-ma by pcholewa

This is the type of design you’ll come across in Deviantart the most. Colorful, rich-detailed, filled with images. In my opinion, most of these designs don’t really meet the expectations when turned into functional websites. However it’s not the case with this one. You can actually see it live at www.kar-ma.pl. It’s a great design both in Photoshop and in browser.

8. Paperwork by gbindis

Paperwork is a fictitious website, where you can submit, sell and buy prints. The design is clean  and classy with a few color accents. The subtle background texture suits the classic font perfectly. Only thing I’d like to add is that the choice of checkboxes isn’t really appropriate.

9. twist studio portfolio by Kroczaca Dusza

Beautiful bold and illustrative graphic studio portfolio design. The content doesn’t play a massive role in this design, yet the illustrations are outstanding. This would make a great flash or pseudo-flash website.

10. NITRO XPRESS v2 by RadziuPL

Colorful and clear delivery company website. The colorful boxes and bold fonts gives the design a strong reliable look which is essential for delivery business. Overall it’s a trendy and dynamic design.

11. Soho South by Tropfich

A fashionable salon website. The site’s purpose doesn’t require a lot of details so the design puts the emphasis on the images. Unfortunately you can’t see the design in action at their official website www.sohosouthsalon.com though I think you’d agree that it would suit the brand much more.

12. Responsive design by thehappybit

The Happy Bit web design agency portfolio. The design is focused on simplicity and readability, with particular attention to its responsiveness and adaptability towards different devices.

13. Garnish WP Portfolio Theme by Orman Clark

Garnish is a clean-cut, straight to the point, simple to use portfolio theme. I already encountered this theme before while making a compilation of premium portfolio themes. It’s one of the top selling themes in ThemeForest so what’s left to add? If you’re looking for a minimal yet efficient portfolio theme Garnish is the right choice.

14. Lithium by Daniel Sandvik

Lithium is a minimal and clean portfolio design that can target one person, or a business says the author’s description. I find Lithium the ultimate choice for small businesses that need to leave a solid and credible impression.

15. FlameBox by Eduardo Santos

FlameBox is a WordPress themes club design. Minimal with subtle details it’s a responsive and trendy design. The color scheme and call to action buttons are well chosen.

16. Ghost by tiquet

17. PremiumPixels.com Redesign by Orman Clark

18. Tonic Magento Landing Page by Daryl Ginn 

19. RandomApp by  Stoyan Shishev

20. 90eleven by h1xndesign 

21. Marni Revals by RadziuPL

22. e-c-s danmark by Thomas Michaelsen 

23. Fundacja Ave WEB by elilay

24. Social Alert Apps by nyukdesign

25. Kolibri by Jascha Brinkmann

26. dotykktoryboli.pl by PapciuZiom 

27. mini folio by zee7

28. Spa by pixelzeesh

29. ThreeBrainsOut by Stiven Cartagena 

30. Simplicity by Daniel Sandvik

31. IZIT by David Samuel

32. Minimal PhotoFolio WP Theme by Prince Pal

33. WP Theme by Sunil Joshi 

34. Pet Store Finland 2011 by naseemhaider

35. LinenPress by Csaba Nagy

36. X-Tech by Mateusz Przegietka

37. Light Design by Ivo Mynttinen 

38. Microsoftmag v.2 by Nicolas Soret

39. 4ne1 product by zee7

40. Bavarian Restaurant a. Brewery by Carl06

41. Qubik Studio by Arif Samad

42. Plant World Online Shop by h1xndesign 

43. Ducatto Fashion Website by Robot-H3ro

44. Timo Knopf Portfolio by manwithoutlight

45. Fashion Store by Sunil Joshi

46. Media portal by thehidd

47. ekosik presentation by lefiath

48. Sysphone Telefonia by Thales Duarte

49. CrazyApps by vladis123

50. electronics shop by mughikrish1986 

Succinctness

When creating an infographic your main goal is to answer a specific question or problem. Broach a question you want to cover in your graphic and start by answering it concisely. After you’ve done that you can add additional facts or information to make your graphic broader. Being concise about your topic will also help to create a more effective visualization of the graphic.

The World’s Most Disastrous Oil Spills is the title for an infographic created by Travel Insurance. Their infographic answers the question precisely. After the map with biggest oil spills they’ve added more significant and interesting facts. This is a prime example of being concise and relevant.

Creativity

Ingenuity and design is what separates an infographic from the simple charts you see elsewhere. Think of an infographic as a poster in which you can express yourself while keeping in mind the information you have to include. Don’t be afraid to use typography, illustrations, icons or other design elements. Creativity and a bit of an audacious design will make your infographics stand out.

This graphic, supplied by Minicrane-Hire provides some information about the original UNIC mini-spidercrane, which is celebrating its 8th anniversary this year. The design is definitely unique and creative,and is more about catchy and light facts than a serious analysis, so the emphasis is on creativity. The design is sort of grungy and resembles a poster. It’s really pleasing and engaging.

Visualization

You don’t want your infographic to be just plain text. Plain data is boring and can sometimes be hard to comprehend. Use geometric shapes, charts, diagrams, anything that can help people visualize your data. If possible, replace words with icons or symbols. Of course, you have to keep the information front and center since that’s the ‘info’ in infographic. Nevertheless, remember that nowadays people are a lot more visual thanks to technology, and aren’t as interested in plainly presented information.

This infographic by Rackscape is an outstanding example of visualization in infographics. They’ve created a graphic about bytes, which may seem quite boring, though they’ve managed to make it extremely enjoyable and interesting. Each piece of information is accompanied by a large colorful illustration so the infographic is easy to comprehend.

Organization

Precise and well-organized information is the basis of any great infographic. Compare various information sources, make sure your acquired data is objective and relevant enough. Even the most elegant design won’t attract readers if the information is incorrect. Sometimes Google won’t be enough, you’ll have to visit a library or even turn to an expert. Infographics will be easier to create if you have some prior knowledge about the topic, or have a really good idea where to research the information. Information organization is one of the most essential things when designing an infographic. You have to try to organize your information contextually and visually.

This infographic about earthquakes is a collaboration between GOOD and Column Five Media. Design is not playing the main role in this graphic though the information and facts are very applicable and neatly organized. They’ve includes some important facts together with some demonstrative graphs.

Transparency

Infographics can be subjective and lead readers to biased conclusions. Always cite your information sources and give readers the chance to explore the information deeper if they want to. Give them the opportunity to find additional information straight from your infographic. Don’t hide your information (no matter how ‘top secret’ you think the source is) because you’re publishing the graphic one way or another.

This is another collaboration between GOOD and Column Five Media. They’ve created an infographic about electricity and energy supplies in Africa. It’s a complex subject so some people might want to look deeper into it. Though they’ve not included direct links, there is the list of sources used in the bottom of infographic.

Accuracy

Be accurate and precise when designing infographics. It’s easy to make mistakes when you’re trying to scale your data in charts and graphics. Use different sizes and shapes that visualize data, but don’t be excessive. You should never draw the shapes by hand and without a base scale. Use mathematical equations, compare the numbers and then use the same proportions in graphics.

In this infographic by Column Five Media we can see perfect proportions being used. They’re using proportional semicircles to compare goods purchased in store with goods purchased online. The radius ratio of circles ideally matches the ratio of numbers.

Relevance

Find the style and look that fits your infographic. If you’re creating an infographic about an important and sensitive topic don’t make it bright and dashing. Choose a design that’s appropriate and reflects the topic best.

This infographic by Visions Service Adventures is a perfect example of appropriate infographic design. They’ve made an infographic about struggling countries in the world so they’ve included a world map as well as some illustrative icons and illustrations that reflect on the topic.

Simplicity

Don’t exaggerate with visual elements and the amount of information in infographics. Having a neatly-designed and informative infographic is good, but too much detail can make it too scattered and difficult to comprehend. Knowing your target audience will also help you to adjust the visual complexity and design of the infographic. If you’re designing an infographic, let’s say, for a poster that’s going to be seen on a streetlight a simple infographic is more likely to attract attention. People are not willing to spend time on complex graphics and data if they’re in rush. However if you’re creating an infographic for a magazine you can afford to include more complicated charts and in-depth information because it’s more likely that people will spend more time looking at your infographic.

What’s The Deal With Bloggers by Flowtown is a great example of simplicity in infographics. They’ve used a plain background, solid colors and simple charts to present the data. The result is a splendid, demonstrative and easy to understand infographic.

Blogs & Related Sites

Just like with web design, there are many blogs out there dedicated to infographics and data visualization. Even if you’re not so interested in infographics you can find really useful and interesting information on some of them. Below you’ll find 10 of the best blogs and websites dedicated to infographics, data visualization and the art of information.

1. Flowing Data

FlowingData explores how designers, statisticians, and computer scientists are using data to understand ourselves better – mainly through data visualization. Money spent, reps at the gym, time you waste, and personal information you enter online are all forms of data. How can we understand these data flows? Data visualization lets non-experts make sense of it all.

2. Information Aesthetics

Information Aesthetics is a weblog that explores the symbiotic relationship between creative design and the field of information visualization. More specifically, it collects projects that represent data or information in original or intriguing ways.

3. The Infographics Showcase

Infographics Showcase is collecting the best of the web infographics with a nod to some exciting graphic design. If you love information communicated in a visually appealing and simple manner then you are in the right place.

4. Information Is Beautiful

David McCandless, is a London-based author, writer and designer. He’s written for The Guardian, Wired and others. He’s into anything strange and interesting. Information Is Beautiful is his blog where you’ll find visualized ideas, issues, knowledge and data.

5. Cool Infographics

Cool Infographics is a blog that highlights some of the best examples of data visualizations and infographics found in magazines, newspapers and on the Internet.

6. Strange Maps

Frank Jacobs loves maps, but finds most atlases too predictable. He collects and comments on all kinds of intriguing maps—real, fictional, and what-if ones—and has been writing the Strange Maps blog since 2006.

7. Chart Porn

Chart Porn is compiled by Washington DC based economist/artist Dustin Smith.  This site grew out of an admiration for all the amazing data analysis work being done in the world, and the desire to pull it all together in one place.  The blog’s original focus on economics and graphic design has expanded over time to cover a wide range of topics.

8. Visual Complexity

VisualComplexity intends to be a unified resource space for anyone interested in the visualization of complex networks. The project’s main goal is to leverage a critical understanding of different visualization methods, across a series of disciplines, as diverse as Biology, Social Networks or the World Wide Web.

9. Data Visualization

Data Visualization is a transversal discipline which harnesses the immense power of visual communication in order to explain, in an understandable manner, the relationships of meaning, cause and dependency which can be found among the great abstract masses of information generated by scientific and social processes.

10. Infographics News

Infographics News is a blog dedicated primarily to news, curiosities and information about infographics. They also cover news related to data visualization and unusual infographics.

Information Sources & Resources

Information quality is crucial in infographics. If you have to work with infographics quite often, having a resource and data library is very important. I’ve gathered some of the best free websites and services that offer high-quality current data in many categories.

1. U.S. Census Bureau

U.S. Census Bureau is the leading source of quality data about the nation’s people and economy. They provide the best mix of timeliness, relevancy, quality, and cost for the data they collect and provide. This website contains the Census Bureau’s Statistical Quality Standards, information quality guidelines, and procedures to seek correction of information that does not comply with the information quality guidelines.

2. Gallup

Gallup Daily News provides unique, unrivaled insight into the political, economic, and social issues of the moment. Gallup Daily and global tracking make Gallup Daily News a must-read for audiences that need the most accurate and up-to-date information on the thoughts of people around the world.

3. Reuters

Thomson Reuters is the world’s largest international multimedia news agency, providing investing news, world news, business news, technology news, headline news, small business news, news alerts, personal finance, stock market, and mutual funds information available on Reuters.com, video, mobile, and interactive television platforms.

4. Mbendi

MBendi Information Services (Pty) Ltd is a privately owned Internet business publishing company founded in 1995 and based in Cape Town, South Africa. The company uses the Internet to support business and political decision makers worldwide.

5. NumberOf

Here at NumberOf they try to answer the question that begins with “How Many..?”. All the facts are divided into five different categories. In order to keep the facts correct, they verify each fact after 6 months of its last modification.

6. Nation Master

Nation Master is a massive central data source and a handy way to graphically compare nations. NationMaster has a vast compilation of data from such sources as the CIA World Factbook, UN, and OECD. Using the form above, you can generate maps and graphs on all kinds of statistics with ease.

7. Economic Research Service

The Economic Research Service is a primary source of economic information and research in the U.S. Department of Agriculture. With over 350 employees, ERS conducts a research program to inform public and private decision making on economic and policy issues involving food, farming, natural resources, and rural development.

8. Every Block

EveryBlock filters an assortment of local news by location so you can keep track of what’s happening on your block, in your neighborhood and all over your city. They aim to collect all of the news and civic goings-on that have happened recently in your city, and make it simple for you to keep track of news in particular areas. They’re a geographic filter — a “news feed” for your neighborhood, or, yes, even your block.

9. Guardian Data Blog

Guardian News & Media (GNM) is the national division of Guardian Media Group. It publishes the Group’s flagship national newspapers – the Guardian and the Observer – as well as Guardian Weekly, one of the world’s best-selling international weekly newspapers, and the guardian.co.uk website. Their Data Blog is an awesome place to find infographics and data visualization daily.

10. World Bank Data

This site is meant to provide all users with improved access to World Bank data and to make that data easy to find and use. The World Bank recognizes that transparency and accountability are essential to the development process and central to achieving the Bank’s mission to alleviate poverty.

11. Freebase

Freebase is an open, Creative Commons licensed repository of structured data of almost 20 million entities. An entity is a single person, place, or thing. Freebase connects entities together as a graph. Most of the topics are associated with one or more types (such as people, places, books, films, etc) and may have additional properties like “date of birth” for a person or latitude and longitude for a location. These types and properties and related concepts are called Schema.

12. Geo Commons

GeoCommons enables everyone to find, use and share geographic data and maps. Easily create rich interactive visualizations to solve problems without any experience using traditional mapping tools.

13. Transparency Data

Transparency Data is a central source for federal lobbying disclosure, federal grants and contracts, earmarks and federal and state campaign contributions. Here you can begin your search, find the information you need, and then download records of what a candidate has received, what an individual has given, how much an organization has spent on lobbying, and many other queries.

14. OECD Statistics

The mission of the Organisation for Economic Co-operation and Development (OECD) is to promote policies that will improve the economic and social well-being of people around the world. OECD.Stat includes data and metadata for OECD countries and selected non-member economies.

15. Kaiser Family Foundation

A leader in health policy and communications, the Kaiser Family Foundation is a non-profit, private operating foundation focusing on the major health care issues facing the U.S., as well as the U.S. role in global health policy.  Unlike grant-making foundations, Kaiser develops and runs its own research and communications programs, sometimes in partnership with other non-profit research organizations or major media companies.

Premium Resources

Finding high-quality data newspapers and other free services and sorting it in the way you need it can often be quite frustrating and time-consuming. We’d all love to get the exact data we need neatly delivered and as cheap as possible. I’ve gathered a couple of premium data marketplaces and sources for you to find dozens of high-quality data sheets. You can also make a requests for specific data you’re looking for. Unfortunately, I was able to find only three services, so if you know some more you could share them in the comments section.

1. Data Market

Launched in May 2010, DataMarket is a data portal that provides access to statistics and structured data from various public and private sector organizations. This enables users to find, compare, visualize and download statistics from organizations such as the UN, World Bank, Eurostat, Gapminder and others in a single place. Time series can be linked to news events and any selected data can be downloaded in a format suitable for use elsewhere, e.g. in Excel.

2. Data Marketplace

Data Marketplace makes it easy for people to find, buy and sell data online. Most data must be aggregated, cleaned, and analyzed to extract useful information. It doesn’t make sense that the same person should do all of these things. Data Marketplace connects people who need data with people who are good at collecting, cleaning, and analyzing it.

3. Infochimps

Infochimps is a place to find, sell and share data with others. It comes in two forms on our site: Data Sets: Instantly available for download. Some are free and some are for sale. Data APIs: Available with a simple subscription and an API key. Access very large or frequently updated data sets in minutes without having to host or scrape anything.

Inspiration

1. The Dangers of Driving

2. How Would You Like Your Graphic Design?

3. United States of Unhappy Campers

4. Digital Nostalgia

5. Happy Birthday Formula 

6. The Potato Lifecycle

7. Visualizing Daily Activities With Media Wheel 

8. Treni ad alta velocità

9. How Developmental Aid Flows Around The Globe

10. My Head Hurts

11. The Ride of Your Life

12. iPod plus iTunes Timeline

13. How Coffee Affects the Global Economy

14. Bus Ride 37 Mintutes

15. Periodic Table of Typefaces

More and more visually appealing and image heavy websites are being created, and of course we’ve got a reason – days with slow Internet speed are going to past and technologies are evolving every day! Let’s get started – shall we?

1. Art-Label.net Board Skin by DouglasEltz

2. Environment information pages by SneakyOne1990

3. Angel by miko434

4. Green Palacy Theme by DouglasEltz

5. InfoShop.com by DouglasEltz

6. Idyll Ads by miko434

7. Mecra by SencerBugrahan

8. 99studios by dot-next

9. Fenixround by DouglasEltz

10. IT Services Company by inspiredMark

11. Bonsai Collectors 2 by INSEKTart

12. Another Portfolio Layout by simiographics

13. EdgeSpan Revolution by deadlinesdesign

14. Mocha furniture by gdnz

15. 4 Sale Gaming by AndasoloARTS

16. gs.com by akenord

17. Caffeteria by Tokumoto

18. OneSize v2 by acidflow

19. KO by trunglq

20. Restaurant Asian Bistro by preet618

21. Pro web 2.0 portfolio template by jackinnes

22. Portfolio by Mac002

23. Szpital – FOR SALE by PanthereNoire92

24. Quality Furnitures by Aqib14

25. Lion Design Premium by FluidStudios

26. My first attempt at web-design by vrs85

27. Luscious by timsilva

28. Web2.0 Company Portfolio by princepal

29. Santa’s Town by Pilej

30. Photographer by arEa50oNe

31. The Web Meeting by miko434

32. Joomla Template Tutor by princepal

33. Vid by crazyclouds

34. Amazium by sergitosuanez

35. Counter Strike Evo 2.0 Design by renderworks

36. Kreativo by cheafy14

37. Oxid Eshop by Honya

38. Alexion Home Page by raven9327

39. Gaming Website by zblowfish

40. Great Business Template by mabucs

41. Balai besar 5 website by champchoel

42. Glob-Data-website by desdoc

43. Travel Inside by lewkaART

44. RJDesignz by rjoshicool

45. Layout-I Real Estate by whatnameisit

46. Gold by aadi-f

47. Cache networks by manujg

48. Expoze Media Webdesign by EXPOZE-MEDIA

49. Light Design by deadlinesdesign

50. Template 19 by nodethirtythree

51. Swiat Kwiatow by Pilej

52. Officina Digitale v3 by Svengraph

53. Pure Home by touchdesign

54. iClipeo.com by mateuszmadura

55. Folio Layout by inspiredMark

Now let’s get inspired, because I showcased here really good examples of footers, that really stand out from crowd – not only from design point of view, but about great usability as well! Happy new year! Happy new 2010!!!

1.Ten Thousand Things Webdesign Footer

2. I primi dieci Webdesign Footer

3. Edgepoint Church Webdesign Footer

4.Amuki Webdesign Footer

5. Branded007 Webdesign Footer

6. WebDesignerWall Webdesign Footer

7. YoDiv Webdesign Footer

8. Sis.Slowli Webdesign Footer

9. SamRayner Webdesign Footer

10. DavidHellman Webdesign Footer

11. Volll Webdesign Footer

12. VisitMix Webdesign Footer

13. Northern-Classics Webdesign Footer

14. CatyDesign-Studio Webdesign Footer

15. ProductiveDreams Webdesign Footer

16. Ligne13 Webdesign Footer

17. BlogHelpr Webdesign Footer

18. Ma.tt Webdesign Footer

19. Seraph-Design Webdesign Footer

20. BlogMetender Webdesign Footer

21. ILoveMacApps Webdesign Footer

22. WireRoses Webdesign Footer

23. Blup! Webdesign Footer

24. Iemai Webdesign Footer

25. Espace Webdesign Footer

26. AlbertLo Webdesign Footer

27. NewConcept Webdesign Footer

28. SeedHunter Webdesign Footer

29. MackeyDesigns Webdesign Footer

30. LogiqDesign Webdesign Footer

31. Biola Webdesign Footer

32. Vimeo Webdesign Footer

33. Kulturbanause Webdesign Footer

34. The Rissington Podcast Webdesign Footer

35. Hebatec Webdesign Footer

36. Freelenz Webdesign Footer

37. CrazyNFunny Webdesign Footer

38. PsdTuts Webdesign Footer

39. GoMediaZine Webdesign Footer

40. CatalystStudios Webdsign Footer

41. Viget Webdesign Footer

42. SohTanaka Webdesign Footer

43. BcanDullo Webdesign Footer

44. DC2009 Drupalcon Webdesign Footer

45. Fully Carsonified Webdesign Footer

46. GriffinaBox Webdesign Footer

47. USTrendy Webdesign Footer

48. The Greg Brady Project Webdesign Footer

49. Paul Wallas Webdesign Footer

50. Incubus Webdesign Footer

51. CSLingPhotography Webdesign Footer

52. BoagWorld Webdesign Footer

53. Pointless Ramblings Webdesign Footer

54. Pointofe Webdesign Footer

55. Dezignus Webdesign Footer

56. Carbonica Webdesign Footer

57. Du Bout Des Yeux Webdesign Footer

58. EmrahMayan Webdesign Footer

59. RazvanStavila Webdesign Footer

60. KomodoMedia Webdesign Footer

61. MissWeBlash Webdesign Footer

62. SpoonGraphics Webdesign Footer

63. LoveTweet Webdesign Footer

64. SimpleBits Webdesign Footer

65. Colorburned Webdesign Footer

You can visit previous September and August Deviantart web design features as well.

1. WPmonk WordPress theme by sinthux

Check also homepage of this site – design is really excellent and one of the best I have seen.

2. Portfolio redesign by dioxyzone

3 main colors used in design, usually it’s hard to unite so many, but this design definitely show very good example, how to do it.

3. ShirtShift by AlxDesign

It’s amazing how grunge type design can be created in very stylish way.

4. Tivicik by SencerBugrahan

5. GrungePress by AlxDesign

6. Piratebloggers by SneakyOne1990

I saw all development process to this design – I really admire and love this beautiful outcome.

7. Edge v.1.1 by AlxDesign

Really excellent blog design with subtle colors.

8. Simplicity by AlxDesign

9. Warex by SencerBugrahan

10. Teacher Board III by SencerBugrahan

11. AVG-HHBlog by AntoniaVG

12. Web Hosting by BboyWicked

13. Osae by osec

14. AudioTech by DouglasEltz

15. Portfolio J4F 4 Sale by xXxadO

16. Royal Mag by AlxDesign

17. Touch of Purple Portfolio by deadlinesdesign

18. XS studios by versesdesign

19. Guifx – Services Page by SmarTramS

20. PH Designs concept 2 by SneakyOne1990

21. Europhia by alighandour

22. Pieza by badboythemer

23. Salleedesign v1 by LeMex

24. Fire Clandesign by elemeNt-XY

25. Design-Solution.pl – online by PanthereNoire92

26. CoffeeCup by Pilej

27. Coffee blog by Pilej

28. Eastern Drilling Services by Nas-wd

29. My new blog by miko434

30. Old Folio by inspiredMark

31. Cartoon Max by gdnz

32. Studio Portfolio by luxxxoR

33. Upcoming-Pixelzeesh by pixelzeesh

34. My Diabitic Clinic by Nas-wd

35. Interactiv by yehsper

36. Water Design Portfolio by waterdesign

37. Ready Made Designs v2.2 by bassmansgz

38. Alex Raschi rally driver web by luqa

39. Webee by zee7

40. New Folio Site by inspiredMark

41. BVD WP Theme by bestofthemeforest

42. Financial webdesign by SneakyOne1990

43. Vox blog design by C4br4x1z

44. Panoetic – Web Layout by detrans

45. Myportfolio.com by koenigpersoenlich

46. Tango Folio V2 by asherzgfx

47. iLyrics.com by proviewz

48. My folio 02 by aadi-f

49. Receptenboek by CyXo

50. Harbi haber by gdnz

51. SvenGraph.net v2 by Svengraph

52. VUE Technologies by LOUDAMedia

53. SOLVERE s.r.o. by ArtMark

54. Cloudblack WP by gdnz

55. Charitwy by velcgartist (remove by request of artist)

56. Cooling Systems by Frozz

57. AutoWebber by Laurie-J

58. Portfolio design by mynameisfredrik

59. Atomia by shizm

60. Browsergametipps.com by fERs