Web Design Inspiration: 20 best website designs of the 2011 Year


As 2011 year is gone design community started to summarize and make predictions about web design trends. Today I`ve counted more than 10 different articles dedicated to web design trends of outgoing year. Different writers see different trends but there`s always something in common.

So let`s draw the line and clean things up. Almost all authors converge in these web design trends

  • HTML5&CSS3
  • Responsive Design
  • Parallax Scrolling (as a result single page websites)
  • Large Photographic and High-Quality Textured Backgrounds
  • Sophisticated Typography and Accurate Play with Typefaces
  • Touch Screen

And I can`t disagree since 2011 year brings us new era of using HTML5+CSS3+JavaScript and mobile web.

As far as differences of opinion is concerned

  • Ribbons and Tags
  • Circles
  • Modal Popup Boxes
  • Illustrations and Mascotes
  • Pixel perfect web elements
  • Big icons

I just want to add some more

  • Sketching
  • Great visualisation of process steps
  • Animated or Video Backgrounds
  • Sliders & Grids (of course it`s not new trend but in 2011 we saw a great deal of amazing, extraordinary sliders and portfolio sections )
  • Complicated web elements made by pure CSS3
  • HTML5 Games and Experiments

So, today I`ve collected 20 website designs that on my opinion are best of the best of the 2011 year.

1. Kinetic V5.Kinetic V5.

2. Roberd Wards. Amazing use of typography and parallax.Roberd Wards. Amazing use of typography and parallax.

3. Jorge Rigabert. Vertical Parallax, Riboons, Circles and HTML5&CSS3.Jorge Rigabert

4. Just Dot. Typography, Illustrations, Parallax, HTML5/CSS3.Just Dot

5. SF Dok – 360 Langstrasse Zurich. Animated Background.SF Dok - 360 Langstrasse Zurich

6. Studio 2Create. Parallax and HTML5/CSS3.Studio 2Create

7. Claptaps. Horisontal parallax, HTML5/CSS3.Claptaps

8. Balencic Creative Group. Vertical Parallax, Typography, HTML5/CSS3 and Textured Backgroud.Balencic Creative Group

9. Jan Ploch. One of the first parallax websites that amazed me by its idea and simple way of realisation. Just good combination of great designer`s and developer`s skills.Jan Ploch

10. High on Pixels. Circles, Sketching and CSS3/HTML5.High on Pixels. Circles, Sketching and CSS3/HTML5.

11. Forefathers Group. Vertical Parallax, Responsive Design, Typography, High-Quality Textured Background.Forefathers Group

12. Me & Oli. Awesome idea is implemented by HTML5/CSS3.Me & Oli

13. Head 2 Heart. Horisontal Parallax, Typography, Textured background.Head 2 Heart.

14. iDesign. Vertical Parallax, Magnificient Typography, Amazing Background, Pixel perfect web elements, Great visualisation of process steps, Sketching.iDesign.

15. Phase2 Design Studio. Clean, simple website design with sophisticated typography, vertical parallax and HTML5/CSS3 elements.Phase2 Design Studio.

16. Vlog. Awesome HTML5 experiment.Vlog. Awesome HTML5 experiment.

17. Vision of beauties. Grid and slider that are often used in fashion website designs.Vision of beauties.

18. Guide to the app Galaxy.Guide to the app Galaxy.

19. Paolo Cavanna.Paolo Cavanna.

20. The Wired Mind.The Wired Mind

Share your thoughts with me. May be I`ve forgotten about some other great website designs that you can definitely call best of the best. I`m looking forward to reading your comments.

1 comment
  1. This is a great list of sites you have put together and very inspiring to me as a designer. I am always looking on how to improve my designs and love articles like this one because it shows me what can be created and how people are pushing their designs. I think all the sites in this list have great aspects to them. I really like iDesign site. I love the use of colour, texture and type within the site. It has a nice vintage feel and especially like the scrolling graphics at the top, gives the site a feeling of depth.

Leave a Reply

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

You May Also Like

CSS ShortHand Property Cheat Sheet

Shorthand properties can be used to set several properties at once, in a single declaration, instead of wasting your precious time and space making declaration for each individual property. With…