Smashing Magazine - we smash you with the information that will make your life easier. really.

More Web Design Trends For 2009

Advertisement

Last week we presented 10 Web Design Trends For 2009, 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

    Trend-38 in More Web Design Trends For 2009

  2. One-page layouts

    Opl2 in More Web Design Trends For 2009

  3. Multi-column layouts

    Im in More Web Design Trends For 2009

  4. Huge illustrations and vibrant graphics

    Trend-29 in More Web Design Trends For 2009

  5. More white space than ever

    Trend-12 in More Web Design Trends For 2009

  6. Social design elements

    Trend-37 in More Web Design Trends For 2009

  7. “Speaking” navigation

    Trend-22 in More Web Design Trends For 2009

  8. Dynamic tabs

    Trend-23 in More Web Design Trends For 2009

  9. Still large search boxes

    Trend-36 in More Web Design Trends For 2009

  10. Category visuals

    Trend-34 in More Web Design Trends For 2009

  11. Author icons

    Trend-33 in More Web Design Trends For 2009

  12. Icons and visual clues

    Icons in More Web Design Trends For 2009

  13. Tag index (instead of tag clouds)

    Trend-32 in More Web Design Trends For 2009

  14. Illustrations in blog posts

    Trend-35 in More Web Design Trends For 2009

  15. Watercolor

    Trend-13 in More Web Design Trends For 2009

  16. Handwriting

    Or in More Web Design Trends For 2009

  17. Retro and vintage

    Trend-00 in More Web Design Trends For 2009

  18. Organic textures, tiles and photographic backgrounds

    Trend-01 in More Web Design Trends For 2009

  19. Badges

    Trend-05 in More Web Design Trends For 2009

  20. Price tags

    Trend-16 in More Web Design Trends For 2009

  21. Ribbons

    Trend-28 in More Web Design Trends For 2009

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 Box, 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.

Hipsterist in More Web Design Trends For 2009

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!

Layouts-45 in More Web Design Trends For 2009

Oob1 in More Web Design Trends For 2009

Oob3 in More Web Design Trends For 2009

Oob4 in More Web Design Trends For 2009

Sms in More Web Design Trends For 2009

Aut in More Web Design Trends For 2009

Oobd in More Web Design Trends For 2009

Ool2 in More Web Design Trends For 2009

Good in More Web Design Trends For 2009

 

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.

Kobe in More Web Design Trends For 2009

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.

Layouts-42 in More Web Design Trends For 2009

Fish in More Web Design Trends For 2009

Viget in More Web Design Trends For 2009

 

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

47 in More Web Design Trends For 2009

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

Labsmozilla in More Web Design Trends For 2009

31three in More Web Design Trends For 2009

Mc in More Web Design Trends For 2009

 

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.

Illus5 in More Web Design Trends For 2009

Versions in More Web Design Trends For 2009

Depot in More Web Design Trends For 2009

Wpc in More Web Design Trends For 2009

Ilc in More Web Design Trends For 2009

Aqua2 in More Web Design Trends For 2009

Aqua3 in More Web Design Trends For 2009

 

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.

Illus4 in More Web Design Trends For 2009

Noob in More Web Design Trends For 2009

Whitespace1 in More Web Design Trends For 2009

Wm in More Web Design Trends For 2009

Ws in More Web Design Trends For 2009

 

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.

Komodo in More Web Design Trends For 2009

Veerle in More Web Design Trends For 2009

Cra in More Web Design Trends For 2009

Twi in More Web Design Trends For 2009

Heart in More Web Design Trends For 2009

Peak in More Web Design Trends For 2009

 

7. “Speaking” Navigation

We wrote about “speaking” block navigation 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.

Speaking1 in More Web Design Trends For 2009

Speaking2 in More Web Design Trends For 2009

30 in More Web Design Trends For 2009

Evan in More Web Design Trends For 2009

Free in More Web Design Trends For 2009

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.

Speaking3 in More Web Design Trends For 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 tabs and ‘tabs’ visual control in jQuery to create dynamic tabs.

Ee2 in More Web Design Trends For 2009

Coll in More Web Design Trends For 2009

Apple in More Web Design Trends For 2009

Busy in More Web Design Trends For 2009

Ffoo in More Web Design Trends For 2009

05u Tabs in More Web Design Trends For 2009

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:

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    Maddie
    January 21st, 2009 8:03 pm

    nice! thanks for posting.

  2. 2
    Courtny Cotten
    January 21st, 2009 8:08 pm

    Awesome, thanks!

  3. 3
    Michael Castilla
    January 21st, 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!

  4. 4
    Jarryd
    January 21st, 2009 8:12 pm

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

  5. 5
    Daniel P. Long
    January 21st, 2009 8:16 pm

    Awesome!

  6. 6
    Ben Jacob
    January 21st, 2009 8:35 pm

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

  7. 7
    Zach Harmon
    January 21st, 2009 8:37 pm

    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.

  8. 8
    Andrei Gonzales
    January 21st, 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.

  9. 9
    furley
    January 21st, 2009 8:47 pm

    good collection

  10. 10
    Best Design Options
    January 21st, 2009 9:03 pm

    These are very inspiring designs.Thanks for sharing!

  11. 11
    www.greenbydiamond.com
    January 21st, 2009 9:41 pm

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

  12. 12
    gaurav
    January 21st, 2009 10:00 pm

    love this trendy post

  13. 13
    Darin R
    January 21st, 2009 10:01 pm

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

  14. 14
    Ben Rowe
    January 21st, 2009 10:23 pm

    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.

  15. 15
    Dottie
    January 21st, 2009 10:25 pm

    once again, very nice post. Keep it up!

  16. 16
    cameron
    January 21st, 2009 10:38 pm

    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.

  17. 17
    Pradeep CD
    January 21st, 2009 10:59 pm

    Good post…

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

  18. 18
    Pop
    January 21st, 2009 11:34 pm

    Love you!!!

  19. 19
    jerie
    January 21st, 2009 11:42 pm

    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.

  20. 20
    Patrick McLaren
    January 21st, 2009 11:51 pm

    Welcome to 2006.

  21. 21
    David Hellmann
    January 22nd, 2009 12:05 am

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

  22. 22
    Pasquale
    January 22nd, 2009 12:12 am

    Cheers for the feature :)

  23. 23
    Jeremy Stanley
    January 22nd, 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.

  24. 24
    chris
    January 22nd, 2009 12:32 am

    what about *huge interactive teasers* ?!?

  25. 25
    Darren Taylor
    January 22nd, 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??

  26. 26
    Vishal Gupta
    January 22nd, 2009 1:16 am

    I agree with Andrei Gonzales.

    Appropriate design is the key to winning the race.

  27. 27
    arnar
    January 22nd, 2009 1:30 am

    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”

  28. 28
    DKumar M.
    January 22nd, 2009 1:44 am

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

    Thanks for Sharing.

    DKumar M.

  29. 29
    Nag
    January 22nd, 2009 2:10 am

    Nice Post…Thanks a lot for featuring Colourpixel…

  30. 30
    fractalfrog
    January 22nd, 2009 2:17 am

    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!

  31. 31
    Ash
    January 22nd, 2009 2:43 am

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

  32. 32
    Tanya
    January 22nd, 2009 3:02 am

    Wow! great great great article!

    It’s very enlightening. I love it! also, the web design it’s my passion.
    The colors vibrant, the fractal draws, and the social elements very designed are beatiful.
    I used in my website the tabs, these are useful, especially when i have many content but little space.
    Thanks! i’ll be back regularly.
    Greetings from Argentina,

  33. 33
    Charles
    January 22nd, 2009 3:25 am

    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.

  34. 34
    Suresh
    January 22nd, 2009 3:33 am

    Nice Post.

    Thanks

  35. 35
    griefex
    January 22nd, 2009 3:33 am

    Thanks for sharing

  36. 36
    Andy Gongea
    January 22nd, 2009 3:46 am

    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!

  37. 37
    Vitaly Friedman & Sven Lennartz
    January 22nd, 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.

  38. 38
    Darren Taylor
    January 22nd, 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.

  39. 39
    Wladia Viviani
    January 22nd, 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!

  40. 40
    TheGreyMan
    January 22nd, 2009 4:53 am

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

  41. 41
    Schop
    January 22nd, 2009 5:32 am

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

  42. 42
    rob
    January 22nd, 2009 5:38 am

    opening links in new window isn’t “strict”ly allowed.

  43. 43
    AthenaEmily
    January 22nd, 2009 5:58 am

    Great list!
    I also realized i have been digging into these trends recently

  44. 44
    Anonymous
    January 22nd, 2009 6:01 am

    “9. Still large search boxes” hasn’t a link :(

  45. 45
    Cat
    January 22nd, 2009 6:12 am

    AWESOME LIST!! I <3 smashing magazine. Always puts out the greatest articles :)

  46. 46
    myows
    January 22nd, 2009 6:21 am

    brilliant article

    Another trend for 2009 that hasn’t been mentioned is to design a HUGE navigation, for usability on handheld devices without the need of an extra style-sheet.

  47. 47
    JF - DigitLife
    January 22nd, 2009 6:24 am

    Excellent resource as usual. Smashing Magazine has become my best design blog. Continue the good work :)

  48. 48
    recholes
    January 22nd, 2009 6:29 am

    i love this series. It gives a much needed measuring stick to web design

  49. 49
    Alan
    January 22nd, 2009 6:51 am

    Overall a very useful collection, whether these are trends or just old news. When I put on my developer hat, my enthusiasm wanes a bit. Good designs deserve effective coding, not table-based layouts and bloated templates…

  50. 50
    Rasmus
    January 22nd, 2009 7:12 am

    That was 2008’s design trends – let’s begin the new era!

  51. 51
    Chris Wallace
    January 22nd, 2009 8:10 am

    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.

  52. 52
    Sherman
    January 22nd, 2009 8:37 am

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

  53. 53
    Mike D
    January 22nd, 2009 9:50 am

    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.

  54. 54
    mikemike
    January 22nd, 2009 9:52 am

    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.

  55. 55
    mikemike
    January 22nd, 2009 9:54 am

    @Vitaly

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

  56. 56
    Tate Uecker
    January 22nd, 2009 9:56 am


    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.

  57. 57
    sfmerv
    January 22nd, 2009 10:17 am

    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.

  58. 58
    Daniel
    January 22nd, 2009 11:43 am

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

  59. 59
    Patrick Morrow
    January 22nd, 2009 12:16 pm

    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.

  60. 60
    Dambold
    January 22nd, 2009 12:58 pm

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

  61. 61
    dams
    January 22nd, 2009 1:02 pm

    oh my god when is the forum designs?

  62. 62
    Bjorn
    January 22nd, 2009 1:48 pm

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

  63. 63
    Venkat
    January 22nd, 2009 2:29 pm

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

  64. 64
    Saeed Jabbar
    January 22nd, 2009 2:29 pm

    Good to see that gloss is disappearing slowly.

  65. 65
    Westy | P H O T O N O M Y
    January 22nd, 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

  66. 66
    shape_tea
    January 22nd, 2009 7:55 pm

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

  67. 67
    not2comply
    January 22nd, 2009 9:25 pm

    it’s always nice to see inspiring things… thanks

  68. 68
    Tyler
    January 22nd, 2009 9:48 pm

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

  69. 69
    p-ter
    January 22nd, 2009 10:19 pm

    nice posting…

    cool…

  70. 70
    Anders, STUKA
    January 22nd, 2009 11:12 pm

    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 !

  71. 71
    Darren Taylor
    January 23rd, 2009 1:28 am

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

  72. 72
    tom
    January 23rd, 2009 2:39 am

    This was last year!!!!

  73. 73
    Fritsie
    January 23rd, 2009 2:55 am

    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.

  74. 74
    amal
    January 23rd, 2009 3:18 am

    great article.

  75. 75
    Loony
    January 23rd, 2009 5:20 am

    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…

  76. 76
    Web Design London
    January 23rd, 2009 5:28 am

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

  77. 77
    Angelo Panares
    January 23rd, 2009 8:23 am

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

  78. 78
    Free gadgets
    January 23rd, 2009 8:55 am

    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!

  79. 79
    DeepSpin (Dave Spathaky)
    January 23rd, 2009 9:19 am

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

    I stopped reading here

  80. 80
    Killian
    January 23rd, 2009 10:51 am

    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.

  81. 81
    blind486
    January 23rd, 2009 12:23 pm

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

  82. 82
    David H.
    January 23rd, 2009 7:57 pm

    Fascinating, inspirational and overwhelming, as usual.

  83. 83
    art
    January 23rd, 2009 8:00 pm

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

  84. 84
    Danny M
    January 24th, 2009 2:20 am

    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…

  85. 85
    Mathieu
    January 24th, 2009 6:52 am

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

  86. 86
    Elliot
    January 24th, 2009 9:08 am

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

  87. 87
    saurabh
    January 25th, 2009 2:22 am

    nice bunch of web design trends …

  88. 88
    David Simmer
    January 25th, 2009 6:44 am

    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.

  89. 89
    Geoserv
    January 25th, 2009 7:19 pm

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

  90. 90
    rajaraman
    January 26th, 2009 5:17 am

    wow, great job man

  91. 91
    Carl Hancock
    January 26th, 2009 7:21 am

    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.

  92. 92
    Michael Meininger
    January 26th, 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.

  93. 93
    a
    January 26th, 2009 8:52 am

    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! :):):):):):)

  94. 94
    fap_fap
    January 26th, 2009 11:21 am

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

  95. 95
    Donald Serrano
    January 26th, 2009 4:10 pm

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

  96. 96
    adam
    January 26th, 2009 8:12 pm

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

  97. 97
    Christopher Ross (thisismyurl.com)
    January 27th, 2009 7:04 am

    LOL, smashing linked to porn :)

  98. 98
    onurkuru
    January 27th, 2009 1:20 pm

    Really Thank you for fantastic informations

  99. 99
    Kendra
    January 28th, 2009 1:06 pm

    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

  100. 100
    John milton
    January 28th, 2009 9:16 pm

    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.

  101. 101
    John milton
    January 28th, 2009 9:19 pm

    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

  102. 102
    LOGO DESIGN GURU
    January 29th, 2009 8:34 am

    nice ideas. Design trends do change every year so hopefully 2009 will have some great emerging ideas. Thanks for the post.

  103. 103
    Zoran T
    January 29th, 2009 8:45 am

    Super cool

  104. 104
    not2comply
    January 29th, 2009 9:52 am

    Let’s not forget about rounded corner… ;)

    images, javascript, and get ready for CSS 3…

  105. 105
    JeD Chan
    January 29th, 2009 10:00 pm

    Thanks for this. Indeed very helpful. :)

  106. 106
    Birgit
    January 30th, 2009 2:23 pm

    while it is true that most of the things have been seen and done before, it’s is not to say that this a bad thing. things just get better by getting inspired by others, and pick what’s most useful for oneself. the wheel doesn’t always have to be reinvented to create something new and beautiful. and like in fashion, architecture, furniture and everything else, trends do exist also in web design.

    I would maybe add the trend of “watery”… kind of “underwater design”, if that hasn’t been mentioned elsewehere… seen quite a few designs like that lately and loved it!

  107. 107
    Allison
    January 30th, 2009 2:44 pm

    What’s with all the negative energy surrounding the trends posts? With the year merely days old, how can anybody expect SM to have assembled a relevant list of trends that have emerged strictly during 2009 or, what is more, essentially “prophesy” about 2009’s design trends as if enough time has even passed by this year for a new pattern of thinking to have been documented? SM stated themselves at the beginning of this post that these articles are their “review of the most promising developments and techniques in web design that may become big in 2009.”
    Naturally, this post includes flavours of previous years. All current and future trends generally have their foundation in past trends. What will really take off still remains to be seen.

    It disappoints me to see how some commenters seem to think they are too well Web-traveled and too highly developed a designer for all this.

    If you are determined to criticize, the least you can do is contribute something to the discussion by suggesting what you feel the actual trends of 2009 are… or what future direction the design community should be following, in your opinion, instead of just acting bored.

    Oh, and by the way, I have no ties to SM.

  108. 108
    John @ Six Figure Report
    January 31st, 2009 2:57 am

    Amazing, you guys are the best!!!!!!!!!!! sent it to my designer for review :)

  109. 109
    Gordon
    February 1st, 2009 1:45 pm

    To everyone noting how the designs in this post are “2006″ or “not new” — no kidding. These are trends, not innovative new designs. The point being that all of these things have been seen before, but we will be seeing a lot more of it this coming year.

  110. 110
    Isis
    February 2nd, 2009 3:56 am

    OMG! That’s exactly what I was searching for! Thanks!

  111. 111
    Jo
    February 2nd, 2009 5:06 pm

    This article made me want to get up and cheer… yay for being a web designer in 09′!! So inspired!!

  112. 112
    remaster
    February 4th, 2009 4:32 pm

    Muy buena WEB !!!

  113. 113
    Andy
    February 5th, 2009 3:01 am

    That us a really good article – Ill be checking back for more from now on!

  114. 114
    cam
    February 6th, 2009 10:12 am

    Continually on point! I like these posts because you can see what trends you DON’T want to follow as well. Since some trends are played out.

  115. 115
    dbonneville
    February 7th, 2009 11:32 am

    There are 2 great articles on this that I found a few months back. As a result of reading them, I redesigned my site and simply love it. The new behavior seems to delight users, from other designers to grandma. On my site, there is NOTHING to click when you first land there. No navigation. Just a simple scroll. I think the psychology of not searching for things to click allows the user to focus on what you are saying, and not on where to find what you are saying. This solution doesn’t fit every kind of website, but for the vast majority of brochure style websites, this would make design and production much easier…and certainly more profitable if you are smart about it!

    Here are the articles:

    http://typesites.com/black-estate/

    This first article is about a wine site…beautiful typography. I’m sure many Smashing readers have been to typesites.com before. If not, it’s one you’ll want to bookmark if you are into typography.

    …and…

    http://www.underconsideration.com/speakup/archives/005396.html

    The second article is amazing. Some SUPER long pages there for sure. I think it’s also the longest blog post in blog history :)

    My redesign, if you care to visit and see how it came out, is at www dot bonfx dot com. I’ll leave it to you type that in :) so as not to make this an advert.

    But do visit the other articles!

  116. 116
    MAJ3STIC
    February 13th, 2009 5:10 pm

    How about 10 or etc. Web Design Trends In Social Networks For 2009? Or Recognizing Great Social Network Designs?

  117. 117
    Sandro
    February 13th, 2009 10:23 pm

    Great stuff! Am inspired…

  118. 118
    Shade
    February 22nd, 2009 9:48 pm

    Is it just me or did this only go into detail about 1-8?

  119. 119
    Brant Schroeder
    February 25th, 2009 1:34 pm

    Have to keep up on those design trends.

  120. 120
    Arekibo Web Design
    February 26th, 2009 2:29 pm

    Wonderful post, one to recommend to peers and team I work with. Thank you

  121. 121
    Jeremy
    March 13th, 2009 7:49 pm

    Very nice post here! Love it!
    Jeremy
    http://www.bathrobewarrior.com

  122. 122
    Nathan
    March 19th, 2009 12:25 pm

    Nice. Didn’t realize we were part of a trend; we also went the one-page route:

    sprockethouse.com

  123. 123
    Jared
    March 25th, 2009 6:53 am

    How about mega drop-down navigation? Studies show that it’s been getting some great reviews…

  124. 124
    Jesse Skeens
    April 2nd, 2009 4:14 pm

    Seems this site has done a bit of a rip off of your top trends: http://www.bluhalo.com/blog/view/208/web-design-trends-for-2009

  125. 125
    Pablo
    April 17th, 2009 11:46 am

    Very enlightening and also lets you know if you’re on the right track Thanks a million!

  126. 126
    Gwóźdź web designer
    April 23rd, 2009 11:21 am

    Thanks for sharing this trends. Very useful knowledge, superb inspiration. Some of trends come from 2008, only the strongest one :-) Cheers.

  127. 127
    Dynamite Soul
    May 23rd, 2009 9:54 am

    This was a great post.

  128. 128
    2stGeorge
    July 8th, 2009 4:10 am

    Well I noticed a growing trend of ultra-clean, typography based layouts with limited use of colours – which is exactly my cup of tea.

  129. 129
    clipping path
    August 3rd, 2009 9:26 pm

    Quite informative and interesting!!

  130. 130
    vincent
    August 18th, 2009 2:36 am

    it’s interesting

  131. 131
    Maxx59
    October 22nd, 2009 3:53 am

    It soon dawns on Nick that he can hear women’s thoughts. ,

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job