Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

More Web Design Trends For 2009

Advertisement

Last week we presented 10 Web Design Trends For 20091, our review of the most promising developments and techniques in web design that may become big in 2009. In the first part we covered embossing letters (“letterpress”), rich user interfaces, PNG transparency, big typography, carousels and media blocks.

This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren’t covered in this post (they are all linked in the overview, so feel free to explore these single posts as well). Did you miss any recent development in this overview? Let us know in the comments!

You may want to take a look at the following related posts:

Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

  1. Out-of-the-box layouts

    Web Design Trends 20098

  2. One-page layouts

    Web Design Trends 20099

  3. Multi-column layouts

    Web Design Trends 200910

  4. Huge illustrations and vibrant graphics

    Web Design Trends 200911

  5. More white space than ever

    Web Design Trends 200912

  6. Social design elements

    Web Design Trends 2009

  7. “Speaking” navigation13

    Web Design Trends 200914

  8. Dynamic tabs

    Web Design Trends 200915

  9. Still large search boxes

    Web Design Trends 2009

  10. Category visuals

    Web Design Trends 200916

  11. Author icons

    Web Design Trends 200917

  12. Icons and visual clues

    Web Design Trends 2009

  13. Tag index18 (instead of tag clouds)

    Web Design Trends 2009

  14. Illustrations in blog posts

    Web Design Trends 200919

  15. Watercolor

    Web Design Trends 200920

  16. Handwriting21

    Web Design Trends 2009

  17. Retro and vintage22

    Web Design Trends 2009

  18. Organic textures, tiles and photographic backgrounds23

    Web Design Trends 2009

  19. Badges

    Web Design Trends 200924

  20. Price tags

    Web Design Trends 2009

  21. Ribbons

    Web Design Trends 200925

1. Out-Of-The-Box Layouts Link

As we pointed out a couple of months ago in the showcase 40 Creative Design Layouts: Getting Out Of The Box26, we are observing a strong trend towards more individual and creative layouts. Instead of applying conventional boxy layouts, designers are experimenting with the way information is structured, presented and communicated.

In these out-of-the-box-designs, the overall creative approach is often more important and more memorable than the attention to details. Still, usability, typography and visual design are rarely overlooked and are often carefully executed. Creative layouts are particularly popular for portfolios, websites of design agencies and promotional websites (e.g. commercial campaigns of large companies), but they are also very popular on blogs.

Design Trends 200927

When it comes to creativity, the line between a usable and unusable design is very thin; thus, usability testing is particularly important, because a new creative approach can literally break a website. Often, it’s a good idea to find a compromise between a creative approach and a classic, traditional design, and try to achieve a balance between a “bulletproof” (yet ultimately boring) usable designs and an innovative unusable designs. Keep in mind that innovative ideas need some time to mature: to be rethought, modified, adapted, optimized and finally integrated in the design.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

Showcase of Unusual Layouts - Get London Reading

Design Trends 200928

Design Trends 200929

Design Trends 2009

Design Trends 2009

Design Trends 200930

Design Trends 200931

Showcase of Unusual Layouts - Good32

 

2. One-Page Layouts Link

An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”). On the contrary, such designs are often quite complex, include rich imagery and vivid animation effects and therefore take some time to load.

Design Trends 200933

When the user clicks on a navigation option, the page changes (partly), and new content is displayed in the area that was previously occupied by the previous content. The navigation of such layouts is supported by sliding and scrolling effects from common JavaScript libraries.

The main advantage for the user is the simple fact that she needs less mouse movement and less clicks to get the information she is looking for. Because this approach is quite new, there is a good chance that some readers will get confused by the unconventional navigation techniques. An alternative “static” version may be helpful or even necessary in this case; you’ll have to offer an alternative version anyway for search engines and for people who have deactivated JavaScript support in their browsers.

Showcase of Unusual Layouts - tap tap tap ~ Groceries34

Design Trends 200935

Design Trends 200936

 

3. Multi-Column Layouts Link

A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for.

Over last few years, we’ve seen an explosion of content on the Web, which has led to the problem of a decrease user attention span, the time that visitors are willing to spend on a given website (see an article on ReadWriteWeb37 for details). Consequently, it’s no wonder that designers have tried to find ways of presenting information compactly, both to keep visitors on a website as long as possible and to make it as easy as possible to find content.

Design Trends 200938

One way of achieving this is simply to use layouts with more columns placed next to each other. The idea is quite reasonable. Screen resolutions have been constantly increasing in recent years (though a wide adoption of netbooks, like Asus’ Eee PC, may change that), providing users with more horizontal space and designers with additional space to fill with content.

The result: now more and more designers are using more and more columns. We have observed a strong trend towards these so-called multi-column layouts, which are often fixed layouts of 850 by 1000 pixels in width. Multiple columns are used in magazine layouts and portfolios. In these layouts, grids are often used to guarantee a structural balance, hierarchy and order.

With multi-column layouts, the importance of active white space between and within columns cannot be overstated. (Active white space is the space that is deliberately left blank to better structure the page and emphasize different areas of content.)

For this purpose designers often make use of Shneiderman’s Mantra (“convey big picture first, reveal details later”), providing users with a brief overview of available options first and offering details on demand — later, when a link was clicked (Mozilla Labs39 is a great example of just that).

Design Trends 200940

Design Trends 200941

Design Trends 200942

 

4. Huge Illustrations And Vibrant Graphics Link

Just as huge typography keeps dominating modern Web design, huge illustrations seem to be gaining popularity across both professional and personal Web projects. And designers are trying to communicate the message of a website using interactive elements (embedded video blocks) and visual elements (introduction blocks and illustrations). Recently in designs, illustrations have taken up much more space than before and usually supplement huge typography, and they are more attractive, more vivid and therefore more memorable to visitors.

Alternatively, designers are also using vibrant graphics, particularly for backgrounds but also for other design elements. Various styles and graphic approaches are used: grunge, collage and scrapbook, ornaments, retro and vintage, watercolor, organic textures and photographic backgrounds.

Design Trends 200943

Design Trends 200944

Design Trends 200945

Design Trends 200946

Design Trends 200947

Design Trends 200948

Design Trends 200949

 

5. More White Space Than Ever Link

Probably one of the most predictable, yet extremely beneficial, developments in Web design over the last few years has been the increasing prominence of white space. White space dominates many designs and is used generously to improve the flow of articles and structure of websites.

In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

Design Trends 2009

Design Trends 200950

Design Trends 200951

Design Trends 2009

Design Trends 200952

 

6. “Social” Design Elements Link

If you take a close look at the blogosphere, you’ll hardly be able to find a blog that doesn’t use some kind of “social” icons or social blocks to encourage readers to promote its stories on popular social media websites. Every author loves traffic and recognition, which is why the social element in modern design is becoming bigger and aesthetically more attractive.

Social icons are usually put all over the place, often in the top right of articles or at the bottom of the post. Social blocks often fill the area beneath a post and sometimes appear beside a list of related articles. Twitter, Flickr and Last.FM integration is still common for blogs and portfolios.

Design Trends 200953

Design Trends 200954

Design Trends 200955

Design Trends 200956

Design Trends 2009

Design Trends 200957

 

7. “Speaking” Navigation Link

We wrote about “speaking” block navigation58 in one of our showcases last year, and this design element seems to remain popular across various websites. The most significant task a navigation menu has to accomplish is to unambiguously guide visitors through different sections of a website. However, it’s quite hard sometimes to communicate the content of a website’s section with just one or two keywords, particularly if horizontal navigation is used.

That’s why navigation options aren’t often listed simply one after another using appropriate keywords (i.e. using “silent” navigation). Instead, designers are attempting to concretely explain what options are available and what visitors should expect from a website section upon clicking the corresponding link.

Because designers are trying to initiate more effective dialogue with visitors, we like to call this navigation scheme “speaking” navigation, as opposed to “silent” navigation, which is based on listings of keywords.

Design Trends 200959

Design Trends 2009

Screenshot60

Screenshot61

Screenshot62

So that visitors perceive content as being easy to navigate, the navigation is often structured with blocks of the same height and width. Large icons are quite often used; but in most cases the decision as to whether or not they are appropriate depends on the content of the website and the overall layout. “Soft” hover effects often support the navigation design by making browsing more pleasant.

Design Trends 2009

 

8. Dynamic Tabs Link

One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time (the attribute display is used to achieve this effect). You can follow a tutorial on dynamic tabs63 and ‘tabs’ visual control in jQuery64 to create dynamic tabs.

Design Trends 200965

Design Trends 200966

Design Trends 200967

Design Trends 200968

Design Trends 2009

Design Trends 200969

Did we miss something? Link

Did we miss any recent development in this overview? Do you have any further ideas or suggestions? Let us know in the comments!

You may want to take a look at the following related posts:

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  2. 2 https://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  3. 3 https://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  4. 4 https://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  5. 5 https://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  6. 6 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  7. 7 https://www.smashingmagazine.com/2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/
  8. 8 http://hipsterist.com/
  9. 9 http://www.taptaptap.com/#groceries
  10. 10 http://fortysevenmedia.com/
  11. 11 http://www.versionsapp.com/
  12. 12 http://signup.createsend.com/signup.aspx
  13. 13 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  14. 14 http://www.davidhellmann.com/
  15. 15 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  16. 16 http://matthewbuchanan.name/day/2008/08/22/
  17. 17 http://www.viget.com/advance/5-lessons-from-a-cartoonist-applied-to-the-website-creation-process/
  18. 18 https://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  19. 19 http://abduzeedo.com/
  20. 20 http://boompa.ca/
  21. 21 https://www.smashingmagazine.com/2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/
  22. 22 https://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  23. 23 https://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  24. 24 http://www.wearableprint.co.uk/catalogues/#free-quote
  25. 25 http://www.spd.org/
  26. 26 https://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  27. 27 http://hipsterist.com/
  28. 28 http://duoh.com/
  29. 29 http://www.colourpixel.com/
  30. 30 http://www.annyas.com/
  31. 31 http://www.bluehatonline.com/
  32. 32 http://www.good.is/
  33. 33 http://www.arcinspirations.com/kobe/
  34. 34 http://www.taptaptap.com/#groceries
  35. 35 http://fishmarketing.net/
  36. 36 http://www.teamviget.com/
  37. 37 http://www.readwriteweb.com/archives/attention_economy_overview.php
  38. 38 http://fortysevenmedia.com/
  39. 39 http://labs.mozilla.com/
  40. 40 http://labs.mozilla.com/
  41. 41 http://www.31three.com/
  42. 42 http://www.thedarlingtree.com/
  43. 43 http://www.mailchimp.com/power_features/
  44. 44 http://www.versionsapp.com/
  45. 45 http://www.webdesignerdepot.com/
  46. 46 http://wpcoder.com/
  47. 47 http://www.ilovecolors.com.ar/
  48. 48 http://www.mattdempsey.com/
  49. 49 http://boompa.ca/
  50. 50 http://thebignoob.com/about/
  51. 51 http://signup.createsend.com/signup.aspx
  52. 52 http://astheria.com/
  53. 53 http://www.komodomedia.com/
  54. 54 http://veerle.duoh.com/
  55. 55 http://www.escapecrate.co.uk/
  56. 56 http://darkmotion.com/
  57. 57 http://www.peakflowdesign.com/wordpress/essential-wordpress-toolkit-for-creating-new-themes/
  58. 58 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  59. 59 http://www.davidhellmann.com/
  60. 60 http://www.30elm.com/
  61. 61 http://www.evaneckard.com/
  62. 62 http://freelanceswitch.com/
  63. 63 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  64. 64 http://docs.jquery.com/UI/Tabs
  65. 65 http://expressionengine.com/
  66. 66 http://www.komodomedia.com/
  67. 67 http://www.apple.com/trailers/paramount/eagleeye/
  68. 68 http://tumblon.com/
  69. 69 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  70. 70 https://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  71. 71 https://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  72. 72 https://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  73. 73 https://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  74. 74 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  75. 75 https://www.smashingmagazine.com/2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    nice! thanks for posting.

    0
  2. 2

    Courtny Cotten

    January 21, 2009 8:08 pm

    Awesome, thanks!

    0
  3. 3

    Michael Castilla

    January 21, 2009 8:08 pm

    I’m loving 2009 already! Hopefully we’ll see more and more sites with these type of elements.

    Thanks for adding WPCoder to the list!

    0
  4. 4

    Seems pretty thorough :) Nice to see the web getting hit hard with fantastic designs!

    0
  5. 5

    Daniel P. Long

    January 21, 2009 8:16 pm

    Awesome!

    0
  6. 6

    Can somebody say which are the last 3 sites listed under “7. “Speaking” Navigation”

    0
  7. 7

    I gotta admit, I really dislike multi-column design, and I’m sad to see it becoming more common. I’ve always seen it as cluttered and ugly.

    0
  8. 8

    Andrei Gonzales

    January 21, 2009 8:41 pm

    Let’s not kid ourselves…

    There is NOTHING here that hasn’t been done before.

    I’ve said it time and again – there aren’t any “web design trends”, only good and appropriate design.

    0
  9. 9

    good collection

    0
  10. 10

    Best Design Options

    January 21, 2009 9:03 pm

    These are very inspiring designs.Thanks for sharing!

    0
  11. 11

    www.greenbydiamond.com

    January 21, 2009 9:41 pm

    wow… can I get that’s themes for free:-D

    0
  12. 12

    love this trendy post

    0
  13. 13

    Thanks for another great post. I’m still learning CSS, but I can’t wait to experiment with these great ideas.

    0
  14. 14

    Another great post – I’ve been looking forward to it all week!

    Doesn’t really matter is some argue that these aren’t ‘trends’ – it’s a great wrap up of some awesome designs that are out there.

    0
  15. 15

    once again, very nice post. Keep it up!

    0
  16. 16

    I agree with Andrei Gonzales.

    All these lists do is make it easy for followers and copy cats to create this kind of web 2.0 with gradient and drop shadows style. Get your own style people. Do something that everyone else isn’t doing and create something unique. Just because someone else did it, doesn’t make it right.

    0
  17. 17

    Good post…

    But, I agree with Andrei Gonzales, there are no “trends” in web designing. What we create new is the “trend”.

    0
  18. 18

    Love you!!!

    0
  19. 19

    I saw a few interesting things in your first post on Webdesigntrends 2009 but in this second part, there is nothing that we haven’t seen in the last 3 years. Writing about trends 2009 you should pick out 3 to 5 outstanding NEW trends. We have a list of 20 and 10 (part I)! Sometimes less is more.

    0
  20. 20

    Patrick McLaren

    January 21, 2009 11:51 pm

    Welcome to 2006.

    0
  21. 21

    David Hellmann

    January 22, 2009 12:05 am

    Wow nice overview and good samples to each category. By the way, thanks for including my page.

    0
  22. 22

    Cheers for the feature :)

    0
  23. 23

    Jeremy Stanley

    January 22, 2009 12:16 am

    Wonderful web design trends! Its really inspirational and useful for my future projects. I would say the beautiful website can be formed if the trends are used with proper common sense. I found some other trends but these are really outstanding.

    0
  24. 24

    what about *huge interactive teasers* ?!?

    0
  25. 25

    Darren Taylor

    January 22, 2009 1:03 am

    Why list 22 trends, only cover 8 and even then in a different order? This is very confusing, is there going to be a part 2??

    0
  26. 26

    I agree with Andrei Gonzales.

    Appropriate design is the key to winning the race.

    0
  27. 27

    One thing that has been gettin on my nerves… why don’t you link external websites in a new window? it’s irritating to have to use the back button so many times to reach Smashing Mag again (or right clicking links and choosing “open link in new tab”

    0
  28. 28

    Nice list…. there are some trends which needs to put in more details. Still, Good Stuff.

    Thanks for Sharing.

    DKumar M.

    0
  29. 29

    Nice Post…Thanks a lot for featuring Colourpixel…

    0
  30. 30

    I agree with some of the people above that there wasn’t much new in this article. However there is still some good info in there that doesn’t hurt to be repeated.

    I’m not so sure about #7. “Speaking” Navigation. If your navigation is so vague and mysterious that you need to describe each link then maybe you should rethink your navigation instead. Fix the cause of the problem instead of trying to patch it.
    Usability expert Vincent Flanders coined the phrase “Mystery Meat Navigation” to describe interfaces where it’s difficult for the user to determine the destinations of links.
    Sure, there might be cases where “Speaking” Navigation is useful but in general navigation should be clear enough without it. Also some of the examples shown are redundant and pure “eye candy” (if clutter indeed can be regarded as eye candy…) Just look at the first example: START (GO TO START), PORTFOLIO (LOOK AT MY PORTFOLIO) etc. Well… DUH!

    0
  31. 31

    These series of articles are really awesome. Thanx.
    Don’t change anything.

    0
  32. 32

    I would be happy to have other comments on these speaking navigation bars because I agree on both the facts 1) that it can be a good opportunity to clarify links whilst it can be repetitive, 2) it look’s nice to the eyes. … So i guess the solution would be to use images/small logos instead, which really helps the user to navigate easily.

    0
  33. 33

    Nice Post.

    Thanks

    0
  34. 34

    Thanks for sharing

    0
  35. 35

    This type of article is somehow weak. Many of the sites are old and you can’t predict clients’ perspective over design.

    Dynamic tabs are here from 2007. Speaking navigation as well. Social elements are a relative young section and could be set as a trend. The rest are common things for several years.

    Cheers!

    0
  36. 36

    Vitaly Friedman & Sven Lennartz

    January 22, 2009 3:52 am

    @pop (#18): we love you too :)

    @jerie (#19): well, we can’t just do some magic and present some ideas that don’t exist yet. We don’t want to predict future developments, we are just analyzing what is happening now. But no woriies – we are observing what’s happing on the Web and we’ll try to do our best to keep you posted.

    @chris (#24): please read the first part of our review – we covered introduction blocks there.

    @arnar (#27): we believe that external links shouldn’t be opened in new windows automatically (see this article). You can hold ctrl and click on the link with the mouse and it will be opened in a new tab.

    0
  37. 37

    Darren Taylor

    January 22, 2009 4:03 am

    Agreed with Vitaly re: arnar’s comments. Opening external links in a new window is only ok if you warn the user but I personally don’t ever see the need. It’s hijacking the users browser, if I want to open in a new window I’ll do just that by holding down control or shift depending on what browser I’m using.

    0
  38. 38

    Wladia Viviani

    January 22, 2009 4:06 am

    Great article, as everything I read here.
    Missing links in some sites of “Speaking Navigation” section, namely the blue Italian one I’d like to visit, and some others.
    Thank you!

    0
  39. 39

    Isn’t it stretching this listorama approach a bit to call things like author pics, images in blogs posts, single page layouts, multi-column layouts… and so on… ‘trends’? I mean, come on. I think identifying an emerging new approach or style which is increasingly picked up and adopted by others is what we would understand as a trend… Actually, the biggest trend I’ve spotted in the last 12 months is magazine-style blog posts/articles which begin with the headline “50 new trends in blog post headlines!” ;-)

    0
  40. 40

    Really? A multi-column layout? Seriously, a lot of these are not new trends…

    0

↑ Back to top