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:

Web Design Trends For 2009

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 200913

  7. “Speaking” navigation14

    Web Design Trends 200915

  8. Dynamic tabs

    Web Design Trends 200916

  9. Still large search boxes

    Web Design Trends 2009

  10. Category visuals

    Web Design Trends 200917

  11. Author icons

    Web Design Trends 200918

  12. Icons and visual clues

    Web Design Trends 2009

  13. Tag index19 (instead of tag clouds)

    Web Design Trends 200920

  14. Illustrations in blog posts

    Web Design Trends 200921

  15. Watercolor

    Web Design Trends 200922

  16. Handwriting23

    Web Design Trends 200924

  17. Retro and vintage25

    Web Design Trends 200926

  18. Organic textures, tiles and photographic backgrounds27

    Web Design Trends 200928

  19. Badges

    Web Design Trends 200929

  20. Price tags

    Web Design Trends 200930

  21. Ribbons

    Web Design Trends 200931

1. Out-Of-The-Box Layouts

As we pointed out a couple of months ago in the showcase 40 Creative Design Layouts: Getting Out Of The Box32, 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 200933

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 Reading34

Design Trends 200935

Design Trends 200936

Design Trends 200937

Design Trends 200938

Design Trends 200939

Design Trends 200940

Showcase of Unusual Layouts - Good41

 

2. One-Page Layouts

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 200942

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 ~ Groceries43

Design Trends 200944

Design Trends 200945

 

3. Multi-Column Layouts

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 ReadWriteWeb46 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 200947

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 Labs48 is a great example of just that).

Design Trends 200949

Design Trends 200950

Design Trends 200951

 

4. Huge Illustrations And Vibrant Graphics

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 200952

Design Trends 200953

Design Trends 200954

Design Trends 200955

Design Trends 200956

Design Trends 200957

Design Trends 200958

 

5. More White Space Than Ever

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 200959

Design Trends 200960

Design Trends 200961

Design Trends 200962

Design Trends 200963

 

6. “Social” Design Elements

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 200964

Design Trends 200965

Design Trends 200966

Design Trends 200967

Design Trends 200968

Design Trends 200969

 

7. “Speaking” Navigation

We wrote about “speaking” block navigation70 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 200971

Design Trends 200972

Screenshot73

Screenshot74

Screenshot75

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

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 tabs76 and ‘tabs’ visual control in jQuery77 to create dynamic tabs.

Design Trends 200978

Design Trends 200979

Design Trends 200980

Design Trends 200981

Design Trends 200982

Design Trends 200983

Did we miss something?

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

Related posts

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

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  2. 2 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  3. 3 http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  4. 4 http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  5. 5 http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  6. 6 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  7. 7 http://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 http://www.psdtuts.com/
  14. 14 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  15. 15 http://www.davidhellmann.com/
  16. 16 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  17. 17 http://matthewbuchanan.name/day/2008/08/22/
  18. 18 http://www.viget.com/advance/5-lessons-from-a-cartoonist-applied-to-the-website-creation-process/
  19. 19 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  20. 20 http://maniacalrage.net/past/tags
  21. 21 http://abduzeedo.com/
  22. 22 http://boompa.ca/
  23. 23 http://www.smashingmagazine.com/2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/
  24. 24 http://www.onskelista.nu/
  25. 25 http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  26. 26 http://csstinderbox.raykonline.com/
  27. 27 http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  28. 28 http://www.brainwashfactory.org/
  29. 29 http://www.wearableprint.co.uk/catalogues/#free-quote
  30. 30 http://capturethevalley.com/
  31. 31 http://www.spd.org/
  32. 32 http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  33. 33 http://hipsterist.com/
  34. 34 http://www.getlondonreading.co.uk/Home
  35. 35 http://duoh.com/
  36. 36 http://www.colourpixel.com/
  37. 37 http://nikolamircic.com/archive/sms/
  38. 38 http://theautumnfilm.com/red-white-sale/us.html
  39. 39 http://www.annyas.com/
  40. 40 http://www.bluehatonline.com/
  41. 41 http://www.good.is/
  42. 42 http://www.arcinspirations.com/kobe/
  43. 43 http://www.taptaptap.com/#groceries
  44. 44 http://fishmarketing.net/
  45. 45 http://www.teamviget.com/
  46. 46 http://www.readwriteweb.com/archives/attention_economy_overview.php
  47. 47 http://fortysevenmedia.com/
  48. 48 http://labs.mozilla.com/
  49. 49 http://labs.mozilla.com/
  50. 50 http://www.31three.com/
  51. 51 http://www.thedarlingtree.com/
  52. 52 http://www.mailchimp.com/power_features/
  53. 53 http://www.versionsapp.com/
  54. 54 http://www.webdesignerdepot.com/
  55. 55 http://wpcoder.com/
  56. 56 http://www.ilovecolors.com.ar/
  57. 57 http://www.mattdempsey.com/
  58. 58 http://boompa.ca/
  59. 59 http://www.checkoutapp.com/features/#sales
  60. 60 http://thebignoob.com/about/
  61. 61 http://signup.createsend.com/signup.aspx
  62. 62 http://www.wilsonminer.com/posts/
  63. 63 http://astheria.com/
  64. 64 http://www.komodomedia.com/
  65. 65 http://veerle.duoh.com/
  66. 66 http://www.escapecrate.co.uk/
  67. 67 http://darkmotion.com/
  68. 68 http://www.psdtuts.com/
  69. 69 http://www.peakflowdesign.com/wordpress/essential-wordpress-toolkit-for-creating-new-themes/
  70. 70 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  71. 71 http://www.davidhellmann.com/
  72. 72 http://www.albumcreative.com/index.html
  73. 73 http://www.30elm.com/
  74. 74 http://www.evaneckard.com/
  75. 75 http://freelanceswitch.com/
  76. 76 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  77. 77 http://docs.jquery.com/UI/Tabs
  78. 78 http://expressionengine.com/
  79. 79 http://www.komodomedia.com/
  80. 80 http://www.apple.com/trailers/paramount/eagleeye/
  81. 81 http://tumblon.com/
  82. 82 http://www.forgetfoo.com/
  83. 83 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  84. 84 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  85. 85 http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  86. 86 http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  87. 87 http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  88. 88 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  89. 89 http://www.smashingmagazine.com/2008/06/18/hand-drawing-style-in-modern-web-design-volume-2/

↑ 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 performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Design trends are funny. Once you try to follow the trend, you are left behind. Instead, make something new. Reinvent a standard that didn’t make previously make sense. That’s what will set you apart.

    0
  2. 52

    Haha 2009 ~ maybe you mean 2008. Let’s move on with things.

    0
  3. 103

    I just became aware of this “No links in new windows” trend / XHTML standard. I see the point on some level but it just kind of strikes me as yet another new minor issue for people to get up in arms about.

    I try to avoid them in general, but sometimes clients don’t want users led away from their site. Also, there are millions of users who aren’t aware of tabs or option-clicking.

    I wish there was an easy way to educate the user without overly complicating the user experience.

    0
  4. 154

    How are these 2009 design trends?

    A lot of these designs have been the same since 2007. Smashing Magazine sucks anymore. Just filled with useless bullshit.

    0
  5. 205

    @Vitaly

    Yeah Vitaly, that’s why you maybe don’t pretend you can by calling 2009 trends mid-way through January you tool.

    0
  6. 256


    Darren Taylor:
    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.

    ….most internet users are your average joe blow that dont know shortcuts and need as much help as possible….of course we know the shortcuts, cause we create the internet, hence why you are reading this article and comment.

    0
  7. 307

    wow retro is cool again, isn’t that like every other year or something. You should actually use retro graphics on the off years and then you always look ahead of the curve.

    0
  8. 358

    Wow! so complet and interesting post!! I’ve seen lately some of these trends in most of the blogs and design sites on Internet.

    0
  9. 409

    Aaahhh.. white space. Love it. You just can’t have too much room to stretch out and in relax in. Definitely the direction we’ll be taking soon.

    0
  10. 460

    Great stuff! Thank God the internet is finally not sucking visually… mostly…

    0
  11. 511

    oh my god when is the forum designs?

    0
  12. 562

    re: 8. Dynamic Tabs. Definitely one of my next undertakings.

    0
  13. 613

    You Guys Rock! tons of excellent stuff. Thanks!!

    0
  14. 664

    Good to see that gloss is disappearing slowly.

    0
  15. 715

    Westy | P H O T O N O M Y

    January 22, 2009 3:48 pm

    amazing… its this kind of stuff that makes me feel like im about 3 saying this… “dady one day i want to be a great designer like those peeps that are featured by smashing mag”

    great stuff. reall spot on

    0
  16. 766

    Smash!! as always..thx alot (“,)

    0
  17. 817

    it’s always nice to see inspiring things… thanks

    0
  18. 868

    There seem to be a disproportionate number of ExpressionEngine sites used as examples here…

    0
  19. 919

    nice posting…

    cool…

    0
  20. 970

    How about Transquotation came into ‘style’, quotation of outside content like Ffffound, saying goodbye to the IE browser, -webkit functionality, content harvesting (from Flickr, Twitter, Youtube etc.)

    + 1 for more black !

    0
  21. 1021

    @Tate – if you want to be WCAG1.0 AA compliant, you don’t open links in new windows unless you provide a warning to the user. Almost every user on the web knows how to use the back button in their browser, hence why it’s advised you don’t change the target of a link.

    0
  22. 1072

    This was last year!!!!

    0
  23. 1123

    Call it trendy or not, it’s certainly a nice list of inspirational stuff. Not anything I’ve never seen before but it’s nice to see it packed together like this.
    To a certain point I have to agree with comment #8 that a design has to be appropriate, be it trendy or not. But I always like to mix in a modern twist so these lists are certainly worthwhile.

    Good post altogether.

    0
  24. 1174

    great article.

    0
  25. 1225

    Nice list.
    Trends exist!! It’s a fashion thing. It’s inevitable. A website is like the window of a shop. It changes from time to time, depending on the season and the trends. You change a store window for a new season, a new collection, depending on trends. Trends is what make people buy, so everyone who sells something wants to follow trends. Same for websites. And same for TV. The graphics and transitions on TV that you see in between programmes follow trends as well. I’d like to see the websites of those who don’t believe in trends…

    0
  26. 1276

    Web Design London

    January 23, 2009 5:28 am

    I’ve now got some fantastic inspiration with these samples you’ve gathered. thanks very much!

    0
  27. 1327

    This is good, I thinking of ideas on how to mash these things together and come up with good designs for this year.

    0
  28. 1378

    Wow! Thanks for this, i’m really liking the first one. These layout all look so modern, bring on more new and exciting things for 2009!

    0
  29. 1429

    DeepSpin (Dave Spathaky)

    January 23, 2009 9:19 am

    ‘, and new content is displayed in the area that was previously occupied by the previous content.’

    I stopped reading here

    0
  30. 1480

    There are some inspirational designs here in the visual sense but one trend I’m hoping doesn’t catch on is developers creating sites that simply don’t work for some users.
    Your headline example for one-page designs is a prime example. Zero javascript degradation is bad enough, but not only is the layout catastrophically busted in IE6, it actually crashed the browser! I’m by no means defending IE6, but it sadly remains an alarmingly large demographic (and those poor souls need all the help they can get).
    Nice visuals and funky navigation concepts are one thing but it’s no good without sound implementation.

    0
  31. 1531

    Nothing new to me. Seen these featured around in 2007-2008.

    0
  32. 1582

    Fascinating, inspirational and overwhelming, as usual.

    0
  33. 1633

    yes, nothing new, but I’m very interested with one-page layouts

    0
  34. 1684

    2009 and looks to be a great year for web design. Personally my preference is with the use of extra white space within layouts. And as, above, I might take a look at one-page layouts, seems a logical idea to me…

    0
  35. 1735

    Hey guys at Smashing, Salesmanage (a client of fortyseven media, first example listed in the multi-column layouts) totally stole your logo!

    0
  36. 1786

    Wow, thanks SM for including my site here, I’m really honoured!!

    0
  37. 1837

    nice bunch of web design trends …

    0
  38. 1888

    In regards to #7, I recently came up with something of a hybrid between “speaking” and two-level horizontal navigation for the Graduate Student Association of CUA.

    0
  39. 1939

    Fantastic collection, these will come in handy when doing my next template.

    0
  40. 1990

    wow, great job man

    0
  41. 2041

    Am I missing something? Between this and the previous Top 10 design trends posting all you did was list all the major design techniques that are used today. Good sites to look at, but nothing new here.

    0
  42. 2092

    Michael Meininger

    January 26, 2009 8:11 am

    I think the title was meant to be 08.

    While these look great- the designs have been used for months.
    Like someone noted before, it’s only good if utilized correctly.

    I’d like to see more CMS write ups and designs, being how a lot of companies are shifting over to WordPress and DNN.

    0
  43. 2143

    Agreed with #92 & 93.

    These are just existing trends we’ve seen throughout ’08, nothing that’s up-and-coming or seeing a rise in recent months.

    Also, it’s one thing to be a trendwhore and just slap on various elements from these collections, like an “out of box” nav with a “watercolor” background and some “vibrant” huge icons — except it doesn’t really do much for your site as far as functionality goes. It just makes your site pretty, and a close carbon copy of so many other sites already out there.

    Let form fit function, not the other way around… that’s just my opinion. Unless your site exists solely to look pretty without any real content. Then all this is A-OK! :):):):):):)

    0
  44. 2194

    i can just agree with Andrei Gonzales. nothing new, nothing special

    0
  45. 2245

    This looks awesome! i have to bookmark this post as a design reference for future projects. :)

    0
  46. 2296

    I am not sure why you are trying to set a trend from sites built last year.
    These are not trends that are 2009 these are old things that have been done.
    Not impressed with this site as much as I used to be. Just seems to be lists of other sites.
    QUALITY not QUANTITY..

    0
  47. 2347

    Really Thank you for fantastic informations

    0
  48. 2398

    These are very good designs but they aren’t new. These are the kind of people that have my respect tho as opposed to all those cookie cutter sites. Good post, but…eh. Most of these are 07/08

    0
  49. 2449

    Hi..

    The site has a good collection of web site designs, but i agree with Kendra as these designs are outdated and most of them are of last year.

    So if one want to have updates on web design trends you must visit websites, blogs, read books, magazines and articles like this one and also explore new design agencies. Basically its like an research through which one would be updating his knowledge and also knowing about the various trends in web designing.

    0
  50. 2500

    Hi..

    The site has a good collection of web site designs, but i agree with Kendra as these designs are outdated and most of them are of last year.

    So if one want to have updates on web design trends you must visit websites, blogs, read books, magazines and articles like this one and also explore new design agencies sites.Basically its like an research through which one would be updating his knowledge and also knowing about the various trends in web designing.

    Thanks
    John

    0

↑ Back to top