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

Web Design Trends For 2009

Advertisement

We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As a result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge.

Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Update: the second part of our review is now published as well.

Web Design Trends For 2009

Let’s first take a closer look at the main 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. Embossing Letterpress

    Trend-04 in Web Design Trends For 2009

  2. Rich user interfaces

    Trend-11 in Web Design Trends For 2009

  3. PNG transparency

    Trend-27 in Web Design Trends For 2009

  4. Big typography

    Trend-15 in Web Design Trends For 2009

  5. Font replacement (sIFR, etc.)

    Trend-30 in Web Design Trends For 2009

  6. Modal boxes

    Trend-17 in Web Design Trends For 2009

  7. Media blocks

    Trend-24 in Web Design Trends For 2009

  8. The magazine look

    Trend-19 in Web Design Trends For 2009

  9. Carousels (slideshows)

    Trend-25 in Web Design Trends For 2009

  10. Introduction blocks

    Trend-14 in Web Design Trends For 2009

Now let’s go into detail and take a closer look at each of the trends presented above.

1. Letterpress

One of the most unexpected trends we’ve observed over the last months was the emergence of letterpress (actually pressed letters) in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Letterpress is used in various styles and on various websites and for various topics; in particular, it is often used in product designs and on websites for online services.

Letterpress6 in Web Design Trends For 2009

Letterpress3 in Web Design Trends For 2009

Letterpress7 in Web Design Trends For 2009

Letterpress8 in Web Design Trends For 2009

Letterp in Web Design Trends For 2009

Letterpress1 in Web Design Trends For 2009

Letterpress2 in Web Design Trends For 2009

Letterpress4 in Web Design Trends For 2009

Letterpress5 in Web Design Trends For 2009

 

2. Rich User Interfaces

Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. Over the last year, the user experience for these applications has dramatically improved, resulting in rich and responsive user interface that have tremendous similarities with classic desktop applications. AJAX and Flash are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

In particular, we’ve seen much more white space over the last year, much more padding and much more space for various design elements. We also observed that many modern user interfaces display intuitive visual clues to communicate the status of a user’s interaction with the system. For instance, upon being clicked, event buttons often change their appearance from a “normal” to a “pressed” look (as on Newspond.com and Quicksnapper.com), confirming and providing immediate feedback on the user’s interaction with the system. Aside from this, more and more services are now able to be personalized by the user: for us, it’s a clear sign that adaptive user interfaces are coming in 2009.

Quick in Web Design Trends For 2009

Sli in Web Design Trends For 2009

Both examples are evidence that designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.

Action in Web Design Trends For 2009

Spond in Web Design Trends For 2009

Howcast in Web Design Trends For 2009

Moodstream in Web Design Trends For 2009

Personalize in Web Design Trends For 2009

Radioh in Web Design Trends For 2009

Kontain in Web Design Trends For 2009

 

3. PNG transparency

PNG transparency, although unsupported by Internet Explorer 6, seems to have gained popularity on the scene over the last year. Apparently, designers are trying to better integrate background images into the actual content and are aiming for a style that is often seen in printed media, magazines for instance. In most cases, semi-transparent backgrounds stand out in the overall background of a page and are intended to highlight an important design element, such as a headline or announcement. Sometimes PNG transparency is used for the background of modal boxes as well.

Last year, we described a variety of ways in which can get creative with transparency in Web design, and many designers seemed to experiment with these techniques in their work. Interestingly enough, transparency is often used either in the header or footer of designs, but some designs go beyond that.

Cover-headline1 in Web Design Trends For 2009

Png in Web Design Trends For 2009

Oob2 in Web Design Trends For 2009

Png2 in Web Design Trends For 2009

Transp in Web Design Trends For 2009

Wisih in Web Design Trends For 2009

Carrot in Web Design Trends For 2009

 

4. HUGE Typography

We presented some outstanding examples of BIG typography in previous posts. In 2009, big typography should remain popular. In particular, design agencies, portfolios, product websites and online services will use big typography to communicate the most important messages of their websites.

The font size of these design elements often goes beyond 36 pixels, and in many cases quite expensive typefaces are used to reach an audience. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font. The consequence: websites are more beautiful and more consistent and look solid and trustworthy.

Zo in Web Design Trends For 2009

Type1 in Web Design Trends For 2009

Red in Web Design Trends For 2009

Logbook in Web Design Trends For 2009

Vine in Web Design Trends For 2009

Type3 in Web Design Trends For 2009

Type7 in Web Design Trends For 2009

 

5. Font Replacement

As designers pay more attention to typography, they also pay more attention to the fonts that are used for the copy in the body of websites. Although classics such as Helvetica, Arial, Georgia and Verdana undoubtedly dominate, we observed a slight trend towards font replacement (for instance, with sIFR).

What is interesting is that these fonts are often seamlessly integrated in the design of websites; they are almost never used for their own sake or simply to “upgrade” the typography of a website. Designers are trying to blend beautiful typography and arresting visual design to improve the appearance of websites and improve the user experience.

Sh in Web Design Trends For 2009

Sifr1 in Web Design Trends For 2009

Sifr2 in Web Design Trends For 2009

Sifr3 in Web Design Trends For 2009

Daily in Web Design Trends For 2009

 

6. Modal Boxes (Lightboxes)

Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website. Modal windows are always triggered by a user action (e.g. signing up or logging in) and appear on top of the main content, like a window in a regular desktop application. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.

Modalbox2 in Web Design Trends For 2009

Modalbox1 in Web Design Trends For 2009

Groove in Web Design Trends For 2009

 

7. Media Blocks

With more broadband Internet access, users can now afford to browse more than they did a couple of years ago, and designers can use this opportunity to present content in a more attractive and memorable way. Hence, it’s no wonder that many product websites use media blocks (for videos and screencasts) for this very purpose. The main advantage of such elements is that they can communicate content quickly and effectively and make it easier for users to consume information.

Users just lean back and enjoy the show; they get everything explained to them step by step, without having to click, search for descriptions or learn the navigation. The movies are usually pretty short and get directly to the point; they are mostly formal but can be entertaining, too.

But please make sure that videos are an alternative presentation of (and not the main or only!) content on your website. Not every user has broadband access to the Web, not every user is willing to watch a video (e.g. because he or she may have a radio or music playing in the background), and not every user has Flash and JavaScript installed on his or her machine.

Gf in Web Design Trends For 2009

Gb in Web Design Trends For 2009

 

8. The Magazine Look

An interesting development in the design of blogs is the adaptation of various techniques usually found in traditional (print) media. The arrangement of posts on the page, the use of typography, illustrations and even text alignment often resemble traditional techniques from print. Grid-based designs are gaining popularity as well but are used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops.

Magazine2 in Web Design Trends For 2009

Magazine3 in Web Design Trends For 2009

Magazine4 in Web Design Trends For 2009

Maga in Web Design Trends For 2009

Magaz in Web Design Trends For 2009

 

9. Carousels (Slideshows)

Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.

Instead of clicking through various sections of the website for their favorite stories, users can quickly skim through the available stories without vertical scrolling or unnecessary mouse movements. The result: users save time, and the carousel focuses their attention sharply on the content, instead of on interacting with the browser. Such slideshow navigation is often used on entertainment websites and big blogs, but designers also make use of it in their portfolios to showcase their work in a more interactive way.

Amy in Web Design Trends For 2009

Cnnmoney in Web Design Trends For 2009

Musicyahoo in Web Design Trends For 2009

Wein in Web Design Trends For 2009

 

10. Introduction Blocks

The upper-left area of a website is the most important block on the page, because it grabs the most attention from visitors. Therefore, it makes perfect sense to place the most important message of the website right there and thus make sure that readers get the message as quickly as possible.

In fact, this is exactly what many designers are doing. Whether for a Web application, corporate design, online service or portfolio, designers are pushing their slogans and brief introductions to the top of the page and are using strong, vivid typography to make a good first impression. Some introductions are short, others are quite lengthy; in either case, they usually take a lot of space; the full width of the layout and between 250 and 400 pixels in height are common dimensions for these introduction blocks. Notice, though, that introduction blocks almost never appear in blogs and rarely in online shops.

Feature2 in Web Design Trends For 2009

Introd in Web Design Trends For 2009

45r in Web Design Trends For 2009

Feature3 in Web Design Trends For 2009

Introd2 in Web Design Trends For 2009

Stay tuned!

This article covers only 10 of the over 25 trends we’ve identified over the last months. The second part will be published next week. We’ll cover new layouts, new visual approaches and new design elements. Please stay tuned.

Update: the second part of our review is now published as well.

(al)

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 (3 votes, average: 4.67 out of 5)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    Roshan
    January 14th, 2009 9:09 pm

    Nice collection. Thanks :)

  2. 2
    Eric
    January 14th, 2009 9:18 pm

    Thanks for gathering this collection of trends… this is my favorite kind of Smashing Magazine post. Gotta stay on the cutting edge! Looking forward to the follow up post next week.

  3. 3
    AURUM3
    January 14th, 2009 9:25 pm

    Yes this is a great collection indeed. Will have to wait for Part 2 patiently.

  4. 4
    Think Slink
    January 14th, 2009 9:37 pm

    Brilliant. Thanks for the list.

    It’s not always easy combining style with great content but I think the trend will be for strong CMS’s like Joomla to combine style with substance. Then you’ll have a truly inspiring website.

  5. 5
    Tschai
    January 14th, 2009 9:46 pm

    Another trend I’ve noticed is bigger background images…

  6. 6
    Kevin
    January 14th, 2009 9:49 pm

    Great article – looking forward to Part 2.

  7. 7
    Tim Smith
    January 14th, 2009 9:50 pm

    Great Post. I am really into most of these trends. I love ‘em! They immediately capture the eye!

  8. 8
    Justin Yost
    January 14th, 2009 9:59 pm

    Going to repeat what everyone else has said, thanks and great article.

  9. 9
    Soh
    January 14th, 2009 10:04 pm

    awesome post, thank you!

  10. 10
    Alex T
    January 14th, 2009 10:16 pm

    Well, letterpress is been used since a few years i.e. Apple’s revamped website (after aqua).
    What we can see is a global trend to add deepness to graphic design, to make the navigation tips closer to physical perception.

    And thanks for the great job you are doing !

  11. 11
    Ben Jacob
    January 14th, 2009 10:21 pm

    Wow this is a great long post… Has a value of 27 hours of hard work…

  12. 12
    CG
    January 14th, 2009 10:23 pm

    Very amazing collection.

  13. 13
    Mepho
    January 14th, 2009 10:31 pm

    Another amazing post !~
    Thanks

  14. 14
    Peter T - Webshop
    January 14th, 2009 10:32 pm

    Every time I think you guys can’t come up with another great article, you do!

  15. 15
    benhomie
    January 14th, 2009 10:42 pm

    Awesome list! Great to see so many screenshot snippets of the best trending web designs in one post.

  16. 16
    dragoshell
    January 14th, 2009 10:45 pm

    Very pleasing to read post! Will be eagerly waiting for the second part.

  17. 17
    Uday
    January 14th, 2009 10:48 pm

    Very inspirational.
    Are there any tutorials related to Letterpress design?

    Looking forward for Part 2…

  18. 18
    Ben Rowe
    January 14th, 2009 10:51 pm

    I think that ‘The Magazine Look’ is part of a bigger trend – Now that we’ve gotten pretty good at web design, the design of the web and the design of the offline world are merging. Some other examples:

    – Wooden and paper textured backgrounds
    – Handwritten type faces
    – Images with polaroidesque borders

    This is has been happening for a while, but I think we’ll see more of it.

  19. 19
    Andris
    January 14th, 2009 11:03 pm

    Thanx for the trends. I really hope IE6 will disappear this year and we can use full PNG-transparency.

  20. 20
    an.gg.un
    January 14th, 2009 11:08 pm

    this is great…, thanks…

  21. 21
    KRAPPS
    January 14th, 2009 11:17 pm

    excellent informaton .. love the LARGE font style … really makes your message POP!

  22. 22
    Matt
    January 14th, 2009 11:24 pm

    What font is used here, http://www.francescomugnai.com/ ?

  23. 23
    Kelly
    January 14th, 2009 11:36 pm

    Very informative! Thanks!

  24. 24
    Shuuun
    January 14th, 2009 11:47 pm

    wouw nice, what about an article or tutorial about:

    how image replace works and the technics for it.

  25. 25
    David Perel
    January 14th, 2009 11:48 pm

    This is a quality article and one I have definitely bookmarked. I plan on combining some of these techniques that you have mentioned above.

    When I started reading the article I skipped the intro and as I was scrolling I was wondering ‘Where is magazine layouts?!’ but thankfully it is listed. I believe it will be a huge trend in 2009 and is something I mentioned on From the Couch earlier this year.

    Anyway GREAT article.

  26. 26
    Roy Vergara
    January 15th, 2009 12:19 am

    I’m interested in how innovative PNG transparency will get. The possibilities seem endless!

  27. 27
    Dude
    January 15th, 2009 12:21 am

    You seem to refer to all dialog boxes as modal, however some of the examples of dialog boxes you show are not modal. Modality is the greying out of the background so that the page cannot be interacted with while the dialog is open….

  28. 28
    Adam
    January 15th, 2009 12:53 am

    Great article! Thanks :-)

  29. 29
    Benjamin
    January 15th, 2009 12:55 am

    Thanks a lot for the article !

  30. 30
    V1
    January 15th, 2009 1:04 am

    so these are the 72 hour long posts ;o?

  31. 31
    Sacha
    January 15th, 2009 1:05 am

    I think the letterpress style is simply copying apple (like so many other web trends…) I have to say it looks good, though.

  32. 32
    Awarnach
    January 15th, 2009 1:09 am

    You mention 24ways.org @ PNG transparency, but as far as I know there are no (semi) transparent PNG’s used at that website, all transparency is accomplished by CSS! The only images used are those of the writers and the diagonal background image.

  33. 33
    Raymond Selda
    January 15th, 2009 1:13 am

    This is amazing stuff! Looking forward for the second part. It keeps getting better and better. Thank you SM!

  34. 34
    Alis
    January 15th, 2009 1:25 am

    They are really interesting, thank you so much!!!

  35. 35
    Jon Eland
    January 15th, 2009 1:28 am

    ‘letterpress’ – surely this term is inaccurate as it refers to physical type pressed into paper. When what you are referring to is simply emboss and drop shadow styles…

    Otherwise an interesting and thought-provoking article.

  36. 36
    Tim Holmes
    January 15th, 2009 1:36 am

    Really excellent article.

    It is always nice to see what is being used out on the web. I have seen a number of the techniques but had not realised they were quite so mainstream just yet. Maybe they are.

    Will have a bit of a mess with what you have shown to see if it can improve any of my work or future designs.

  37. 37
    Dragos
    January 15th, 2009 1:40 am

    GROW UP guys!

    These “trends” were around for years and you guys are showcasing them for 2009?
    Come on! :))

  38. 38
    mcfee
    January 15th, 2009 2:01 am

    BANG! sparks are flying! love ya!
    Thx singmash manigaze!!!

  39. 39
    Zen Elements
    January 15th, 2009 2:02 am

    Very interesting collection, as well as inspiring.
    Thank you for sharing!

  40. 40
    eduardo
    January 15th, 2009 2:22 am

    Inspiring!

  41. 41
    Web Design Bureau
    January 15th, 2009 2:24 am

    Okay, these are trends alright? They are based on say 2008’s last months and after the 2 articles are published, we’ll see scores of websites with these “trends” cropping up all over the web in less than 2 months and all these will look bland to us. Its always like that.

  42. 42
    Charles
    January 15th, 2009 2:31 am

    Great post ! I’m waiting for the next one !
    Lots of interesting ideas that are confirmed by my day to day surf.
    Thanks !

  43. 43
    Lukasz Bachur
    January 15th, 2009 2:36 am

    Veeery nice article. It’s a great for any inspiration. Thanks!

  44. 44
    Alchymi
    January 15th, 2009 2:37 am

    Viewport from paulicio is awesome !

  45. 45
    kevin
    January 15th, 2009 2:45 am

    thx ! nice work! this is my first reply!

  46. 46
    webunicorn
    January 15th, 2009 2:45 am

    thanks for this helpful article

  47. 47
    robphoto
    January 15th, 2009 2:55 am

    Where do i find some tutorial for letterpress styled text?
    thx

  48. 48
    arnar
    January 15th, 2009 3:02 am

    Great post!!

  49. 49
    >:3
    January 15th, 2009 3:13 am

    Oh you guise! :’3

    Web Design Bureau:
    Betcha with CSS3 we’ll see all these things again and again a few years from now. Some trends never die unless we get bombed back to the stoneage.

  50. 50
    Jennifer Farley
    January 15th, 2009 3:16 am

    Great collection, thank you.

  51. 51
    Majesticskull
    January 15th, 2009 3:17 am

    Very nice collection, thanks!

  52. 52
    theneemies
    January 15th, 2009 3:34 am

    Drupal Con’s got Smashed – strong motivation for Drupal themers!

  53. 53
    Lee Munroe
    January 15th, 2009 3:43 am

    Inspirational post and some great examples. Thanks for the mention

  54. 54
    Riccardo
    January 15th, 2009 4:24 am

    Nice article!

  55. 55
    Jenn
    January 15th, 2009 5:29 am

    ok, lets keep it straight, letterpress is not possible on the web. I have yet to see anything that even slightly resembles the beauty of letterpress printing anywhere on the web, drop shadows and embossing in Photoshop just doesn’t cut it. Visually interesting…yes, Letterpress…no. If you really want letterpress on your website, do the real thing and scan it in, now that’s innovative!

  56. 56
    Wiki Chaves
    January 15th, 2009 5:33 am

    Great post. I was thinking of twisting my site a little bit this way.

  57. 57
    Tommy M.
    January 15th, 2009 5:38 am

    I normally don’t spend as much time as I do on one post (Reading, following links, etc.). I literally ended up with about a dozen tabs open. It wasn’t until I started to bookmark the ones I really enjoyed and closed the others did I realize how I got to them in the first place – this post.

    Thanks!

  58. 58
    Schop
    January 15th, 2009 5:38 am

    Except for _maybe_ the first two, these are not really new trends for 2009 I think. The title should have been: The most popular trends in web design in the last couple of years. Of course, it’s hard to predict what’s going to happen, especially in a field as fast changing as web design.

    Nice article though, but it’s not what the title promised.

  59. 59
    MiJa
    January 15th, 2009 5:41 am

    Great post! I’m in the process of designing my personal/portfolio website, and found this to be very inspiring! Keep up the great work, you’re my fav resource!

  60. 60
    c wylie
    January 15th, 2009 5:59 am

    i always like hearing about trends.. gives me guidance on what NOT to do too often.

  61. 61
    Mick
    January 15th, 2009 6:29 am

    Good stuff, I enjoyed trawling through it

    Thanks a million

  62. 62
    rhoustons
    January 15th, 2009 6:43 am

    Very nice collection. I particularly like Modal Boxes. A trend I’ve noticed is that the font
    Helvetica Neue is being used more often. But when I load a site using this font it displays jagged in Firefox.

  63. 63
    Andrei Gonzales
    January 15th, 2009 6:48 am

    Sigh. The misconceptions of the design-uneducated masses…

    There are no such things as web design trends, only good, appropriate design.

    P.S. Most of the “trends” posted have been around since 2006 or more…

  64. 64
    Kristin Andrews
    January 15th, 2009 6:54 am

    Bad ass article for us web designers. Danke.

  65. 65
    Cédric GIRARD
    January 15th, 2009 7:10 am

    Good stuff, even if it’s a pity some visitors use old browsers (as IE6… More than 14% in december in Europe) ; these old browsers doesn’t support new tricks as PNG transparency, it’s an awful puzzle for webdesigners to adapt websites for all browsers…

    Note that CSS3 specifications permits transparency and fonts remplacement ;-)

  66. 66
    Timothy
    January 15th, 2009 7:13 am

    a lot of these aren’t even from 2009. I’ve seen some of these sites on CSSRemix and other “inspirational” CSS galleries a year or longer ago.

  67. 67
    Roger
    January 15th, 2009 7:23 am

    hate the word trend

  68. 68
    Sal Azad
    January 15th, 2009 8:37 am

    magazine style! love it… light and informative….

  69. 69
    Kayla
    January 15th, 2009 8:50 am

    Nice collection. I’ve noticed a big increase in typography design this year…even if the main focus isn’t typography.

  70. 70
    Brad
    January 15th, 2009 9:16 am

    My website makes use of the letterpress look for headers. Didn’t realize it was such a popular trend…dang.

  71. 71
    Shaun
    January 15th, 2009 9:17 am

    *Ahem* I don’t think the DrupalCon site uses PNG transparency.

    Just throwing that out there.

  72. 72
    heather van de mark
    January 15th, 2009 10:52 am

    loved the post, but i wonder if the term trends makes us go out and implement these visual strategies, no questions asked or imagination required. rather than if they were named as inspiration, perhaps then we’d use, manipulate and go beyond them… these will be in my head most definitely, but we should all strive to create new trends not live by them.

  73. 73
    eAi-nEt
    January 15th, 2009 11:13 am

    You rock smashing , Thanks

  74. 74
    kocsmy
    January 15th, 2009 11:20 am

    awesome.

  75. 75
    Pedro Silva
    January 15th, 2009 11:29 am

    Great article, looking forward to part 2, and expect the colour trends for 2009.
    But the most important thing is that many of these things are related to user experience. Nice to see that the websites are getting more and more focused on the user, and still looking great.

  76. 76
    Navdeep
    January 15th, 2009 11:35 am

    I love all the designs on the list.

  77. 77
    trancescript
    January 15th, 2009 12:31 pm

    Beatifully design.
    thanks for sharing.
    you make me get some idea.

  78. 78
    KLamb
    January 15th, 2009 12:42 pm

    Random question, but what software made the video on the media boxes section (www.goodbarry.com). Is it straight Flash or is there a program that is outputting to Flash?

  79. 79
    j_d_h
    January 15th, 2009 1:21 pm

    trend is a scary word because it has the connotation of dating (usually poorly), but I can get behind a lot of these directions because many have held up well when applied to print design.

  80. 80
    Mikey G
    January 15th, 2009 2:08 pm

    Awesome post! Thanks again SmashingMag!

  81. 81
    matt
    January 15th, 2009 2:08 pm

    what a great collection guys, thanks a lot! some of it is neat, and others, well, they are becoming a bit of a cliche.

  82. 82
    Mike
    January 15th, 2009 2:42 pm

    Well, this was interesting, never heard of sIFR befor, thank you very mcuh for mentioning it!
    I’m excited about the second part.

  83. 83
    Chris
    January 15th, 2009 2:53 pm

    Letterpress allowing the background to show through is a great idea. Wish I’d thought of it.

    Great design article, as always.

  84. 84
    Jarryd
    January 15th, 2009 4:30 pm

    2009 is looking like a great year :)

  85. 85
    DKumar M.
    January 15th, 2009 5:03 pm

    Nice Collection of trends… Thanks !!

  86. 86
    Jessica
    January 15th, 2009 5:59 pm

    We have to kill carousel. It’s over!

  87. 87
    Marco Sousa
    January 15th, 2009 6:14 pm

    I just literally spent 4 hours reading all of it, making new bookmars, taking some notes…
    thank you, awsome post, will keep an eye for the next one :)

  88. 88
    Sergey
    January 15th, 2009 6:24 pm

    Interesting trends. Thanks.

  89. 89
    Paul
    January 15th, 2009 7:31 pm

    Great article. I’d love to see a tutorial on the Letterpress technique or a link to one.

  90. 90
    garyspaz
    January 15th, 2009 7:55 pm

    Best Smashing Post ever. Bangin.

  91. 91
    Kurniawanz
    January 15th, 2009 8:13 pm

    the PNG transparent thing…is nice…hehe..i can’t wait to try it, thanks

  92. 92
    Laxman Koushik
    January 15th, 2009 8:32 pm

    grt article…highly useful….

  93. 93
    gica
    January 15th, 2009 11:38 pm

    Letterpress trend came from CS4 (icons, loading screen)

  94. 94
    speedcu
    January 16th, 2009 12:18 am

    great!

    I didn`t know about the sIFR thing … have to test it now :) great stuff!

  95. 95
    Robert
    January 16th, 2009 12:51 am

    Best Compilation!

  96. 96
    Joe
    January 16th, 2009 2:04 am

    Wow, this inspires me like a small green egg!

  97. 97
    flashmotus
    January 16th, 2009 2:40 am

    very cool, 2009 great year

  98. 98
    Chris Campbell
    January 16th, 2009 5:10 am

    Great inspiration. It has opened my eyes to what my blog needs adjusted :).

  99. 99
    Andrew
    January 16th, 2009 5:17 am

    The last thing the web need now is more sites with massive fonts (and no content), or those pointless flash carousels… whee, look at it spin!

  100. 100
    sam
    January 16th, 2009 6:08 am

    Good article, but the pedant in me couldn’t help making the following points:

    I can’t help but join Jenn in pointing out that the first style is not what you’d describe as ‘Letterpress’ in print media. Letterpress refers to printing using metal letters. The style you’ve featured would probably be better described as de-bossing, a printing technique where the type is stamped into the surface you are printing, so the letters form an inverted relief pattern.

    Also, a lot of the examples you give for png transparency are actually created using the CSS opacity feature.

    That’s it, end of pedantry.

  101. 101
    Nathan
    January 16th, 2009 6:12 am

    See this article? This article right here? The one we all just read?

    Yeah…this is exactly why Smashing is so great. I used a couple of the simpler features listed above to build a complete site overhaul for a large corporate client. GREAT reaction to it. Thanks again!

  102. 102
    Bryan Le
    January 16th, 2009 7:28 am

    I hope you all remember, that just because they are all trends, doesn’t mean that they are all good….

    I’m going to hate a lot of sites designed this year because some of these trends are wack.

  103. 103
    dman
    January 16th, 2009 8:10 am

    Sorry folks, but letterpress was being overused in the late 90’s and carried on all through 2000+.

  104. 104
    Hai Feng Ma
    January 16th, 2009 8:47 am

    It’s cool, I like them. Thanks for your article.

  105. 105
    Greg Huntoon
    January 16th, 2009 9:23 am

    This is a great collection and list of things, as always. Unfortunately, and I’m not sure if I’m alone on this one, I feel like this would’ve been a great list for last year. I guess it just depends on what the threshold or tipping point making a technique a trend, but I feel like many of these trends picked up speed in 2007.

    Either way, this is a good roundup. Thanks for taking the time to collect so many visual examples.

  106. 106
    yavanarani
    January 16th, 2009 9:38 am

    sorry its by mistaken. ur article is very good

  107. 107
    yavanarani
    January 16th, 2009 9:40 am

    Good article

  108. 108
    Maurice
    January 16th, 2009 1:45 pm

    I’ve not heard of Smashing before this. Definitely bookmarked now. Great article, and great response for the most part. Please, designers, keep your comments positive, do not give in to your inner hater :)

  109. 109
    Emilio Mariscal
    January 16th, 2009 4:40 pm

    Starred! thanks :)

  110. 110
    fuiun
    January 16th, 2009 7:38 pm

    I can’t wait to read the second part!

  111. 111
    Abhilash
    January 17th, 2009 1:26 am

    Nice job.
    I, impressed with the “Letter Press”. Planning to implement in my next web platform.
    Thankz

  112. 112
    Patrick kanne
    January 17th, 2009 5:13 pm

    Interesting..

    Both the letterpress and the re-introduciton of introduction blocks. The first reminds me of the emboss-period, Photoshop 4 era IIRC.
    And re-emerging introduction blocks. Much like the ‘coverpage’, stuff like that just seems to keep coming back with every new jump in the ever growing web-publish-enabled group of people in our society. Makes you wonder if they should maybe be considered a natural step in someone’s evolution towards a full blown publisher. A need to identify oneself in an unknown environment. Much like how when you’re new in a bar it takes a while before new faces are introduced to you, as opposed to you being introduced to new faces.

    png transparency? about time! :)

  113. 113
    Bob Schmidt
    January 18th, 2009 9:15 am

    Nice compilation. I wonder though if some of the png transparency is really done through css.

  114. 114
    Scott Mackenzie
    January 18th, 2009 2:38 pm

    All of this reflects trends that have been around for the past 2-3 years. Really surprised the boundaries weren’t pushed here…. not mention of Mobile Web Trends?

  115. 115
    shape_tea
    January 18th, 2009 9:08 pm

    AWESOME!!…thanks a lot for sharing it with us ^o^

  116. 116
    January 19th, 2009 1:52 am

    good

  117. 117
    Matthew Simo
    January 19th, 2009 6:32 am

    Who is the author? They are very astute.

    Good article with some great examples of the developments of the web.

    Interested in the follow up article!

  118. 118
    Anthony James Bruno
    January 19th, 2009 12:46 pm

    Web Design Trends to avoid in 2009

  119. 119
    DG
    January 19th, 2009 5:36 pm

    Decent article, however, I don’t agree with a few aspects…

    Letterpress is nothing new and has been around for many years. Maybe it’s just making a small comeback like bell-bottoms did. I wouldn’t expect this to gain momentum in ‘09.

    Modal dialogs have also been around for some time now. Any Windows developer has been familiar with them with MDI applications for over a decade now. The .NET framework ajax extensions introduced an easily adaptable ajax modal back in ‘06/’07. Now frameworks like jQuery have made this easily done as well.

    Just having heard of sIFR, I find to be a terrible solution to an age-old design problem. Who seriously wants the extra overhead of marking all site text with sIFR tags and then have javascript run through, and overlay flash on everything. Who came up with this?!?!?

    Off the top of my head it can think of a way more efficient solution:
    How about introducing a new link attribute “font” like so:

    Then the user’s browser can simply download/install the font to it’s temp directory and display the page properly. Now the page isn’t littered with flash and extra markup; only browsers need to be updated to support this.

  120. 120
    Pradeep CD
    January 19th, 2009 10:47 pm

    Superb collection…

  121. 121
    imaginepaolo
    January 20th, 2009 4:23 am

    Great article!

  122. 122
    Swami K
    January 20th, 2009 4:46 am

    Interesting and very useful article. I am going to refer this link in my blog

    Regards,
    Swami K

  123. 123
    InnoC3nT
    January 20th, 2009 5:47 am

    Arg!! very nice, thanks a lot!!

  124. 124
    lorraine_p
    January 20th, 2009 6:03 am

    Interesting article. Something which has been around for a while is introduction blocks. Some of my clients have been using them, and like you say they only work in certain situations. When running usability tests with participants, some find the intro informative on a site when there are few clues indicating the site’s purpose. In other situations they make the homepage feel cluttered and are often overlooked in favour for navigation links and calls to action.

    Look forward to reading the remaining 15 trends.

  125. 125
    Gaurav
    January 21st, 2009 4:06 am

    nice collection );

  126. 126
    Merewald Valletta
    January 21st, 2009 6:35 pm

    Absolutely awesome. Thanks for sharing this.

  127. 127
    monicasian
    January 21st, 2009 11:45 pm

    Awesome!!! Its really very helpful to me.

  128. 128
    Sarah
    January 22nd, 2009 12:48 am

    I have to agree with some of the others– I feel like a lot of these trends aren’t new, just making comebacks. I know CSS3 has a new RGB transparency feature, which may be the reason for this new resurgence. However I remember the popularity of using the CSS alpha(opacity) trick in the early 2000s. The return to the embossed type look actually scares me a bit– it can look awful in the wrong hands.

  129. 129
    Dambold
    January 22nd, 2009 1:02 pm

    I hope embossed type goes away very quickly. It’s too close to photoshop filters. They aren’t… exactly, but there’s some kind of psychological connection there…

  130. 130
    Anandarup
    January 22nd, 2009 10:05 pm

    Awesome!

  131. 131
    Timothy
    January 23rd, 2009 8:39 am

    Definitely some great new web design trends for the new year. It’s really amazing to see just how far it has come and what web designers are able to do…it seems like magic!

    Great post that has some really solid examples of the new movement in web design.

    Timothy
    Boston, MA

  132. 132
    dora lesinska
    January 24th, 2009 10:18 am

    Web technologies and endless design possibilities are finally heading in the right direction!
    Excellent article!

    Keep on experimenting and making websites interesting!
    D

  133. 133
    walter
    January 24th, 2009 9:04 pm

    Love the pressed letters and the big fonts. Found the example site to be interesting too. :-) Thanks!

  134. 134
    Grant
    January 25th, 2009 1:20 pm

    Thanks for the great article. And thanks for featuring our work.

  135. 135
    Harnish
    January 25th, 2009 10:56 pm

    Ability to mirror web design from print media design or just natural scenery around us is a great step for users to map to the online world from their offline experiences. Good list.

  136. 136
    thibaut
    January 25th, 2009 11:17 pm

    Nice work !

  137. 137
    dean_l
    January 26th, 2009 6:09 am

    great and useful. thank you

    pity that some great designs are heavy to load. must be my slow aussie connection.

    suggestion: it would be great if users (we) could rate each example (just small + / – maybe) – just to see which layout made biggest impression. that would reveal which trends will stick in our (designers) mind

    cheers

  138. 138
    chris rhee
    January 27th, 2009 7:04 am

    Thanks for mentioning our site (cut and taste). I have no idea what “magazine look” means, but the clicks come either way, haha. There is a grid structure to the site, but I’m sure it is under-utilized, compared to other sites that change their layout from page-to-page. Anyway, thanks again for including our site in the mix!

  139. 139
    john milton
    January 27th, 2009 10:46 pm

    Hi.
    Great article, Very informative.

    But still i would like to make a suggestion that web design trends and fads come and go as fast as you can say the word “Trends”. So to stay on the top of web design trends it can be difficult and time consuming.

    But there is still one things any web designer can do is to learn the newest trends or fads and put your own spin to them. To stay on top of web design trends you must visit websites, blogs, read books, magazines and articles like this one and also explore new design agencies.Through this one can know as well as find out the latest trends happening in web designing.

    So i would hope that you all do agree to this.

    Thanks
    John

  140. 140
    Blink
    January 30th, 2009 6:58 pm

    Great post. Please continue your web design trends in various aspects, its educational.

    I find that the example on this page have more user focus than those: http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
    The later seems to be a designer ego show and ignore the fact that people have to read and use the pages.

    So I like those trends much better :)

  141. 141
    Andrew Cairns
    February 1st, 2009 4:38 am

    Maybe should have mentioned there are many ways to allow PNG’s to display correctly in IE6
    Additional development and can be tedious at best… but, it works!

    Nice post. Thnx

  142. 142
    Daniel
    February 5th, 2009 2:34 pm

    Are there any tutorials on how to makes the slide shows (Carousels)? Particularly the yahoo one? I’m not a flash guy.

  143. 143
    line29
    February 6th, 2009 3:07 am

    thinks! very nice.

  144. 144
    Vanguard
    February 13th, 2009 1:01 am

    really good compilation :D 10/10

    but i think 1 thing they forgot is the good old mootools slider noticed alot of the sites using it amongst the collection.. maybe that was last year :P

  145. 145
    Duncan Tang
    February 19th, 2009 5:53 pm

    very useful information~~ thanks

  146. 146
    DeusXMac
    February 20th, 2009 11:06 am

    Actually, not only is what you’re showing not “letterpress,” it isn’t even an “emboss” either.
    It’s mimicing a “deboss.”
    “In debossing an image such as a logo, a title, or other design is heat-pressed into the surface of the paper with a die, creating depressions rather than raised impressions as in embossing. The same techniques used for embossing — blind, foil, and ink — can be used with debossing to create visual effects and texture. Debossing can be done on hard and soft covers.”
    Lack of knowledge of fundamentals rears is ugly head again.

  147. 147
    .jar
    February 25th, 2009 10:39 am

    i was thinking, about the new trends for 2009, i was thinking in 3D full interactive sites, without plugins, multiplatform and others, i was trying to connect the java 3D with the cms content (web 2.0) for make the new 3.0 web see more at http://www.jarivia.com.ar/hanxo_swan.html

  148. 148
    Tom Bradshaw
    March 10th, 2009 5:47 am

    Thanks very much for outlining some great examples. I particulary like the pressed letters, PNG transparency and magazine style. I’d like to use these in some of my own designs in the future. But at the same time – I like to try and create my own style rather than follow a trend.

  149. 149
    Danny Foo
    March 11th, 2009 11:55 pm

    At least with introduction blocks, users now worry less about not knowing what the website is about. But, that’s only for the homepage. :P

  150. 150
    Shyju PG
    March 13th, 2009 11:40 pm

    Really worth to know these things. Thank you very much!!!!!

  151. 151
    KIt
    March 15th, 2009 4:52 am

    It’s a great help for us knowing all these stuffs. :)

  152. 152
    Nope
    March 17th, 2009 1:45 pm

    Too bad TARGET = “_blank” isn’t a trend. I got really tired of hitting the back button or cmd clicking on your links.

  153. 153
    Joy
    March 18th, 2009 9:32 am

    I’d really like to know how to get the Letterpress effect on typography and implement that into some of my website designs. Any advice?

  154. 154
    Michael Benin
    March 19th, 2009 4:51 pm

    Very helpful thank you.

  155. 155
    Sora
    March 25th, 2009 1:00 pm

    First of all, thanks for taking the time to post all these wonderful pages…and second, I wanted to know if there’s any tutorial on the letterpress/emboss trend yet, I would love to apply that into something I’m working on… I looked for something similar but couldn’t find anything that gets the beautiful results shown here… Please, Help!!!!

  156. 156
    Nathan Hauritz
    April 1st, 2009 1:30 am

    There are many latest web designing trends that have come today in picture.

    Amateur and professional Web designers alike are getting a new tool to help them easily create sites that are fully interactive.

    -There should be a consistent theme and design running throughout your site ie same header image and/or logo, slogan, navigation, copyright and colors.

    Regards,
    Nathan Hauritz

  157. 157
    Nathan Hauritz
    April 1st, 2009 1:33 am

    It sounds intersting

  158. 158
    azizbaba
    April 1st, 2009 4:35 am

    That’s amazing. Thanks for that nice and helpful article

  159. 159
    smashingmagazine_fan
    April 3rd, 2009 8:17 pm

    well done!!!

  160. 160
    globalpinay
    April 10th, 2009 1:48 am

    Good job! Awesome work…

    I need to know more how to do it…
    I am more interested in the magazine look! Please send me the links.

    Thanks!

  161. 161
    Hashe
    April 21st, 2009 4:49 am

    Great sharing about trend2009, I really like it too much and also would like to know more about the latest updates about web designing issue.

    Thank you very much.

  162. 162
    KoolDesigning
    April 21st, 2009 5:44 am

    Very nice and thanks for sharing cute latest thing about designing and trends.
    I would like to know and read more amazing and interested post at smashingmagazine.com

    All the best!

  163. 163
    Ronzox
    May 8th, 2009 5:38 am

    Great job, will be usefull

  164. 164
    Timothy
    May 12th, 2009 11:56 am

    I absolutely love the magazine look. I think it brings me back to the good ol’ days of print ads. It’s very simple and clean, leaving the page uncluttered but dynamic enough to attract the readers attention.

    Great post!

    TJ
    Boston Web Design

  165. 165
    Gorge
    May 20th, 2009 1:35 am

    super! i love SM

  166. 166
    Bob_H
    May 20th, 2009 10:22 am

    Just thinking a bit about some of the offerings here. All really nice, crisp looks.

    I want to encourage those of us watching these trends to not simply copy them. Instead, absorb the look, determine how you might interpret that in your own visual language and then “go get some.”

    Staying current with fashions and trends is fun. However, avoid becoming a copy cat. Take what you see and synthesize it into something that suits your style and your client’s needs.

    There’s another thing to take into consideration. Don’t just do something because you think it’s cool. Do it because it truly expresses a point of view or an essential quality.

    Not everyone is an innovator. Yet everyone can synthesize ideas. Ideas, like language, are viral. They mutate quickly and become something more than what they were the last time they were encountered. Ideas easily evolve into something new – and hopefully interesting.

    I can’t emphasize enough how much we as designers need to step back and ask ourselves — “Are we truly representing ourselves and our clients’ best qualities?” Or are we merely plagiarizing the work of others.

    Synthesis over “Me-Tooism,” I believe, will win every time.

    BTW- I think calling the style “letterpress” is a misnomer. The look appears to be more like “die cut” or “deboss.” It is a more representative naming based on the analog versions of the style, as done before in the print world.

    Peace

  167. 167
    Cassie
    May 22nd, 2009 6:17 am

    For everyone after that tutorial…

    http://line25.com/articles/web-design-trend-showcase-letterpress-text-effect

  168. 168
    transfoemrs
    May 22nd, 2009 8:56 am

    Very nice and thanks for sharing cute latest thing about designing and trends.
    I would like to know and read more amazing and interested post at smashingmagazine.com

  169. 169
    abdul wasim
    May 25th, 2009 11:12 am

    i like these latest design its helpful 4 all the web designer
    thanks 4 its

  170. 170
    ashlee
    June 9th, 2009 9:09 pm

    I love what bludomain.com offers!

    Ashlee

  171. 171
    Wes
    June 15th, 2009 10:43 am

    Great article and the screen shots really showcase these features well!

  172. 172
    sumit roy
    June 17th, 2009 1:16 am

    this article will surely help me.

    thank you for sharing the knowledge with the world.

  173. 173
    ARUN P SIDHARTAN
    June 18th, 2009 2:14 am

    Really helpfull!!!!!!!!

    Very nice examples!!!!!

    Thank you!!!!!!!!!!!
    Thank you very much!!!!!!!!!!!!!!!

    Expecting more kind of this from you!!!!!!!!!!!

  174. 174
    Ashley Adams
    June 29th, 2009 9:32 pm

    Whoa, it’s pretty extensive. Thanks for the detailed and well-illustrated post. I’m still trying to take in everything that you’ve mentioned and am finding myself agreeing with most of it.

    The options are many. Ideas abound in playful abundance. But only a few of these will stand the test of time and manage to shape and mold the future.

    Only time will tell which ones those would be.

  175. 175
    markferrer
    July 1st, 2009 3:12 am

    great article! nice work!

  176. 176
    Spoon
    July 2nd, 2009 10:34 am

    Thanks for the trends and the nice examples….
    is there any possibility of giving some tutorial sites on the above trends.

  177. 177
    bibi
    July 4th, 2009 8:44 pm

    OMG, I love you for this post. Thank you. I’m developing a concept for my portfolio and this is just what I needed. Thanks again!

  178. 178
    W3Spor
    July 15th, 2009 11:11 am

    Thank you, very useful. Even there are different trends, for instance in Norway. We are designing for emotions!

  179. 179
    Mohan singh rathore
    July 26th, 2009 5:00 am

    Wow that’s great efforts !!! :-)

  180. 180
    Chris
    August 5th, 2009 6:08 am

    Well done.

  181. 181
    Safdar Ali
    August 7th, 2009 2:01 am

    Well done, Too helpful post with nice examples.
    I like this informative post .
    Thanks you very much

  182. 182
    Kristian Gali
    August 15th, 2009 8:33 pm
  183. 183
    kenyib wintersuns
    August 23rd, 2009 12:20 pm

    yap yap.. this i’ve looking for..
    nice information..
    i wonder what’ll be next year trends??

  184. 184
    abigail
    August 24th, 2009 10:08 am

    awesome job!!!!!!!!!!!!

  185. 185
    Bob Billy Bob
    August 31st, 2009 9:22 am

    Ok. You f**ing idiots need to stop commenting! Your spamming the hell out of this website! Stupid no-life-Hobos! Go Get a job and get off this site! Fags. Gawd. Anyway. Nice page. I guess. Not really that good though.

  186. 186
    BaZookaPL
    September 9th, 2009 6:54 am

    Haha!! Good post… at least NOW we know what to expect!
    But yeah, everything on there is true. Use of illustration could have been on there somewhere too though

  187. 187
    Debasish
    September 21st, 2009 3:22 am

    Hi,
    This article really dashing 7& much helpful to me……………
    Thanks

  188. 188
    Lindsey
    September 24th, 2009 12:05 pm

    I can’t believe so much has changed within a few years so referring to these articles keeps us fresh!!

    I <3 Whitespace

  189. 189
    LaQuanta Williams
    October 1st, 2009 8:15 am

    THIS IS AWESOME! THANKS!

  190. 190
    bartleahar
    October 9th, 2009 7:59 pm

    warm smaller small slowly suggested satellite volunteer developer

  191. 191
    alhrikgerr
    October 9th, 2009 8:03 pm

    fuel melts direct intensity international emission yahoo conclusions

  192. 192
    Ashish
    October 10th, 2009 4:55 am

    fantastic updates on the latest trends. We do see them but don’t realize. This is categorized and put in a very good manner.

    Keep up the good work!

  193. 193
    de
    October 16th, 2009 7:56 am

    lol 365 use cloaking!!!!!!!!! Do you believe this people could steal the design?? )))))

  194. 194
    degz
    October 21st, 2009 1:48 am

    Nice one.
    I have also been seeing more movable tabs lately!!!!

  195. 195
    RavenX86
    October 24th, 2009 12:51 am

    they are all css alpha chanel and not png transparency. Almost no serious webdesigner woulduse direct png transparecny since it’s a rescource eatteer and even yahoo with the yahoo marking system for websites strongly disagrees with it. us coul create a transparent div wich are directly controlled by web browser so the rendering is much faster. Also the size of png is actually not compact for websites

  196. 196
    Sumit Pranav
    October 30th, 2009 10:34 pm

    Great article, Thanks !

  197. 197
    aravind
    October 31st, 2009 1:52 am

    Really nice……

  198. 198
    creativebrain
    November 2nd, 2009 1:46 am

    great inspirations….

  199. 199
    huneng
    November 2nd, 2009 7:10 am

    the very good . i like

  200. 200
    barb
    November 15th, 2009 3:46 am

    Very helpful – thank you

  201. 201
    Stacie
    November 16th, 2009 3:10 pm

    It’s so hard to keep on top the trends. As a web designer, I feel like I’m falling behind the latest and greatest. The logo designs are great. Another list I go off of is web2logo.com . I think I see some of these styles emerging there. I’m going to try embossing on my next logo.

  202. 202
    chris
    November 18th, 2009 4:45 pm

    this collection is grade..
    thanks

  203. 203
    Teena
    November 18th, 2009 7:34 pm

    This article is very helpful. Thanks

    Please tell me some goods fonts for big typography. I always fed up of selecting fonts

  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