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

    Web Design Trends 2009

  2. Rich user interfaces

    Web Design Trends 2009

  3. PNG transparency

    Web Design Trends 2009

  4. Big typography

    Web Design Trends 2009

  5. Font replacement (sIFR, etc.)

    Web Design Trends 2009

  6. Modal boxes

    Web Design Trends 2009

  7. Media blocks

    Web Design Trends 2009

  8. The magazine look

    Web Design Trends 2009

  9. Carousels (slideshows)

    Web Design Trends 2009

  10. Introduction blocks

    Web Design Trends 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.

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

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

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 2009

Design Trends 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 loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.

  1. 201

    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.

    0
  2. 202

    This article is very helpful. Thanks

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

    0
  3. 203
  4. 204

    my help me.

    0
  5. 205

    A very very superb and helpful collection…thanx alot!

    0
  6. 206

    Hope there will be a “Web Design Trends For 2010″ post soon :)

    0
  7. 207

    it´s just boring!!! and long…

    0
  8. 208
  9. 209

    The same for 2010 ?

    0
  10. 210

    I think ill learn something out of it….

    0
  11. 211

    Does it have to be so long site?
    What is the goal of this lenght?
    my regards

    0
  12. 212

    I wonder if ‘die-cut’ is a more appropriate term than ‘embossing’? Embossing reminds me of the ancient web trend of shiny text that pops out of the design like a bubble, or so that was what the dead trend was called. Great collection, thanks for sharing. I’m already noticing trends for ’10. :)

    0
  13. 213
  14. 214

    Nice. Can i get it for this year too..

    0
  15. 215

    Excellent Showcase of design trends, very useful inspiration for when we all face the designers block!

    0
  16. 216

    Adorei! Muito legal este post.

    Obrigada!

    0
  17. 217

    Great article on present Web 2.0 standards. I think these kind of articles shows the present international web standarads that can be useful for web designers.

    0
  18. 218

    Nice trends and very helpfull for me and other designers

    0
  19. 219

    thanks for your information, its work’s and helped me finding some inspiration to design

    0
  20. 220

    Propagating an incorrect term like ‘letterpress’ is either irresponsible or demonstration of the author’s ignorance. If you’re a young designer, please don’t think the example provided is called ‘letterpress’. If you have the misfortune of using the term that way, you’re going to look like an idiot. Don’t damage your credibility like this author. He looks like less of a designer and more like a guy who knows his way around web design.

    Really disappointing.

    0
  21. 221

    This is really great information. I really appreciate Smashing magazine for the Great work. I found couple of website that done similar kind of work earlier. dmarkweb.com has been doing great so far in the field of web design and development.

    0
  22. 222

    Rich user Interface is blowing………….

    0
  23. 223

    Nice post and very well written.

    0
  24. 224

    An excellent post. Thanks for sharing.

    0
  25. 225

    Web design trends for 2010 ??

    0
  26. 226

    nice trends and great organized article!

    0
  27. 227

    Nice article for a web designer to adopt emself towards latest trend in the web world. Lots of Tnx… SM…!

    0
  28. 228

    Great:)

    0
  29. 229

    I think the advertising impact is how best to succeed in the short term. This advertising impact is created with a great idea. And this is evidenced by the creators of avatarpublicity.com, where creativity can be observed with full intensity. That’s incredible.

    0
  30. 230

    i want to make a web site can you help me to know those sites that provide free web site

    0
  31. 231

    Camp fire ring

    June 16th, 2010 5:09 pm

    Thats good to know!

    cool

    camp fire

    0
  32. 232

    Great article! I sent the link to all my graphic designer buddies!

    0
  33. 233

    Best animation institute in Chandigarh

    July 2nd, 2010 1:46 am

    thanx and good article..send me more details about this…

    0
  34. 234

    super collection. thanksssssssssssssss.

    0
  35. 235

    Thats a really comprehensive post. Thanks for sharing it Vitaly.

    0
  36. 236

    Nice collection. I like that designs have become more visually pleasing but like most things that trend, they are everywhere and elements are overused. Too much of one thing is not good in my humble opinion. Sites start to look the same, in particular, the large typography and sub-header with the ‘featured area slideshow’.

    0
  37. 237

    Great article! Thank you very much.

    0
  38. 238

    Great to get knowledge and highly detailed informations. Really Appreciated.

    0
  39. 239

    for fonts click here http://www.allyourfonts.com/

    0
  40. 240

    I really appreciate your efforts. Collection still looks latest. do you have posted anything for 2011 as well?

    Thanks again,
    Robert Brown
    web application development company

    0
  41. 241

    It’s very good,Thank you very much

    +1
  42. 242

    Hey guys: I saw your website online while searching for google – I noticed that while your website looks “hot” ( you are a web design company!) Your online rankings were not strong as they could be.

    0

  1. 1

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

    +1
  2. 2

    It’s very good,Thank you very much

    +1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top