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

    Web Design Trends 20092

  2. Rich user interfaces

    Web Design Trends 20093

  3. PNG transparency

    Web Design Trends 20094

  4. Big typography

    Web Design Trends 20095

  5. Font replacement (sIFR, etc.)

    Web Design Trends 20096

  6. Modal boxes

    Web Design Trends 20097

  7. Media blocks

    Web Design Trends 20098

  8. The magazine look

    Web Design Trends 20099

  9. Carousels (slideshows)

    Web Design Trends 200910

  10. Introduction blocks

    Web Design Trends 200911

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.

Design Trends 200912

Design Trends 200913

Design Trends 200914

Design Trends 200915

Design Trends 200916

Design Trends 200917

Design Trends 200918

Design Trends 200919

Design Trends 200920

 

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.com21 and Quicksnapper.com22), 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.

Design Trends 200923

Design Trends 200924

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.

Design Trends 200925

Design Trends 200926

Design Trends 200927

Design Trends 200928

Design Trends 200929

Design Trends 200930

Design Trends 200931

 

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 design32, 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 designs33 go beyond that.

Design Trends 200934

Design Trends 200935

Design Trends 200936

Design Trends 200937

Design Trends 200938

Design Trends 200939

Design Trends 200940

 

4. HUGE Typography

We presented some outstanding examples of BIG typography in previous41 posts42. 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.

Design Trends 200943

Design Trends 200944

Design Trends 200945

Design Trends 200946

Design Trends 200947

Design Trends 200948

Design Trends 200949

 

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.

Design Trends 200950

Design Trends 200951

Design Trends 200952

Design Trends 200953

Design Trends 200954

 

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.

Design Trends 200955

Design Trends 200956

Design Trends 200957

 

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.

Design Trends 200958

Design Trends 200959

 

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.

Design Trends 200960

Design Trends 200961

Design Trends 200962

Design Trends 200963

Design Trends 200964

 

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.

Design Trends 200965

Design Trends 200966

Design Trends 200967

Design Trends 200968

 

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.

Design Trends 200969

Design Trends 200970

Design Trends 200971

Design Trends 200972

Design Trends 200973

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 review741 is now published as well.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/
  2. 2 http://365daysofastronomy.org/
  3. 3 http://www.newspond.com/science/
  4. 4 http://rustinjessen.com/
  5. 5 http://www.francescomugnai.com/
  6. 6 http://www.chigarden.com/
  7. 7 http://listen.grooveshark.com/
  8. 8 http://www.goodbarry.com/
  9. 9 http://cutandtaste.com/
  10. 10 http://www.itv.com/
  11. 11 http://productplanner.com/
  12. 12 http://365daysofastronomy.org/
  13. 13 http://www.alexbuga.com/v8/
  14. 14 http://brightkite.com/
  15. 15 http://www.powerset.com/
  16. 16 http://www.storenvy.com/
  17. 17 http://unblab.com/login
  18. 18 http://www.leemunroe.com/
  19. 19 http://2d2.es/
  20. 20 http://www.respiromedia.com/
  21. 21 http://www.newspond.com
  22. 22 http://www.quicksnapper.com
  23. 23 http://www.quicksnapper.com/
  24. 24 http://dc2009.drupalcon.org/
  25. 25 http://konigi.com/interface/mobileme-calendar-date-selector
  26. 26 http://www.newspond.com/science/
  27. 27 http://www.howcast.com/categories
  28. 28 http://moodstream.gettyimages.com/
  29. 29 http://www.gettyimages.com/
  30. 30 http://listen.grooveshark.com
  31. 31 http://www.kontain.com/#home
  32. 32 http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-design/
  33. 33 http://24ways.org/
  34. 34 http://rustinjessen.com/
  35. 35 http://dc2009.drupalcon.org/
  36. 36 http://24ways.org/
  37. 37 http://labs.paulicio.us/viewport/#2
  38. 38 http://www.restroom.nl/
  39. 39 http://www.wishingline.com/notebook/
  40. 40 http://carrotcreative.com/
  41. 41 http://www.smashingmagazine.com/2007/10/15/the-showcase-of-big-typography/
  42. 42 http://www.smashingmagazine.com/2008/05/20/the-showcase-of-big-typography-second-edition/
  43. 43 http://www.francescomugnai.com/
  44. 44 http://madebygiant.com/
  45. 45 http://theautumnfilm.com/red-white-sale/us.html
  46. 46 http://www.signalapps.com/
  47. 47 http://www.blackestate.co.nz/
  48. 48 http://www.onefastbuffalo.com/
  49. 49 http://www.shiftpx.com/
  50. 50 http://blog.iso50.com/
  51. 51 http://365daysofastronomy.org/
  52. 52 http://www.chigarden.com/
  53. 53 http://www.nonesuch.com/journal
  54. 54 http://daily.creattica.com/
  55. 55 http://typedeskref.com/
  56. 56 http://www.realmacsoftware.com/rapidweaver/overview/
  57. 57 http://listen.grooveshark.com/
  58. 58 http://www.getbackboard.com
  59. 59 http://www.goodbarry.com
  60. 60 http://www.objectifiedfilm.com/
  61. 61 http://www.inspirationbit.com/sources-of-inspiration-to-the-rescue/
  62. 62 http://www.good.is/
  63. 63 http://cutandtaste.com/
  64. 64 http://www.nonesuch.com/journal
  65. 65 http://www.itv.com
  66. 66 http://money.cnn.com
  67. 67 http://music.yahoo.com
  68. 68 http://vickycristina-movie.com/
  69. 69 http://www.shannonmoeller.com/
  70. 70 http://productplanner.com/
  71. 71 http://www.45royale.com/
  72. 72 http://revyver.com/
  73. 73 http://creamscoop.com/
  74. 74 http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/

↑ Back to top Tweet itShare on Facebook

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

Advertisement
  1. 1

    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!

    0
  2. 102

    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.

    0
  3. 203

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

    0
  4. 304

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

    0
  5. 405

    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.

    0
  6. 506

    sorry its by mistaken. ur article is very good

    0
  7. 607

    Good article

    0
  8. 708

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

    0
  9. 809

    Starred! thanks :)

    0
  10. 910

    I can’t wait to read the second part!

    0
  11. 1011

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

    0
  12. 1112

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

    0
  13. 1213

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

    0
  14. 1314

    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?

    0
  15. 1415

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

    0
  16. 1516
  17. 1617

    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!

    0
  18. 1718

    Anthony James Bruno

    January 19, 2009 12:46 pm

    Web Design Trends to avoid in 2009

    0
  19. 1819

    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.

    0
  20. 1920

    Superb collection…

    0
  21. 2021

    Great article!

    0
  22. 2122

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

    Regards,
    Swami K

    0
  23. 2223

    Arg!! very nice, thanks a lot!!

    0
  24. 2324

    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.

    0
  25. 2425

    nice collection );

    0
  26. 2526

    Merewald Valletta

    January 21, 2009 6:35 pm

    Absolutely awesome. Thanks for sharing this.

    0
  27. 2627

    Awesome!!! Its really very helpful to me.

    0
  28. 2728

    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.

    0
  29. 2829

    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…

    0
  30. 2930

    Awesome!

    0
  31. 3031

    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

    0
  32. 3132

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

    Keep on experimenting and making websites interesting!
    D

    0
  33. 3233

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

    0
  34. 3334

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

    0
  35. 3435

    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.

    0
  36. 3536

    Nice work !

    0
  37. 3637

    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

    0
  38. 3738

    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!

    0
  39. 3839

    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

    0
  40. 3940

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

    0
  41. 4041

    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

    0
  42. 4142

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

    0
  43. 4243

    thinks! very nice.

    0
  44. 4344

    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

    0
  45. 4445

    very useful information~~ thanks

    0
  46. 4546

    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.

    0
  47. 4647

    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

    0
  48. 4748

    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.

    0
  49. 4849

    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

    0
  50. 4950

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

    0

↑ Back to top