文章包括新的设计元素，新的图形方式，并给出大量的漂亮的示例。第一部分10个潮流，第二部分15个潮流(E)。

接下来让我们来预测一下2009年的网页设计趋势：

1. Letterpress 凸版效果

在我们的观察中，一个意料之外的趋势是，凸版效果(Letterpress，也就是我们的篆刻中的阴文效果)。这样的趋势，可能是因为一个简单的原因，因为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上，多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜，现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中，这些基于网页的应用有了惊人的进步，这些交互式用户界面越来越像传统的桌面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目，强大的网页应用。

更看到一些特别之处，这些年我们发现网页上有了更多的空白空间，页面元素间的间距也变得越来越大。我们也观察到，越来越多的站点开始在页面上提供直 观的用户动作响应。比如，页面上的按钮会根据用户的动作，比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的 响应。所以我们断言，自适应用户界面将会在2009年流行起来。

3. PNG透明图片

PNG透明图片效果，尽管不被古老的IE6支持，但似乎在去年变得流行起来。但是这种半透明的背景效果却是设计师们一直希望拥有的特性。

这种背景通常被用在头部和页脚处，但是有一些设计却跳出了这种窠臼。

4. 大尺寸的文字排版

在过去的文章中我们介绍过很多出色的大尺寸文字排版例子。在2009年，这样的潮流将继续流行下去，尤其是设计师网站，个人Portfolio网站以及在线服务类网站，将会采用这样的方式传递给用户最重要的信息。

这样的效果一般会将字号控制在36px以下，设计师们投入了更多的精力在文字排版的细节上，由此可见，网页将会变得更加漂亮，更加一致以及看上去更加让人可信。

5. 字体替换技术

设计师花了非常多的精力在页面排版上，同样的也花了很多精力在字体选择上，除了传统的那些经典字体，（译注：也是我们仅有的安全选择）很多设计师开始采用字体替换技术，也就是我们之前有提到的（sIFR）。

这些字体能大大提供网页的视觉效果，但是在中文世界中，这项技术遇到了前所未有的难题，汉字不是拼音文字，一个字体就可能有几兆，根本无法简单的使用这些技术来替换，也许文字图片替换法是目前中文的唯一选择。

6. 模式窗口（LightBox技术）

模式窗口技术，作为第二代弹出内容技术。模式窗口（LightBox技术介绍）能够很好的代替原来的Javascript弹出窗口，提供更加友好的用户体验，并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发，类似于传统的桌面应用。多数情况下，这些弹出窗口都带有深色半透明的背景和一个关闭按钮。

7. 多媒体模块

随着宽带的普及，现在的用户已经能够接受更多的内容，所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容（比如视频和屏幕录像）。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤，不再需要多次点击，搜索，或者学习如何导航。通常这些视频长度都不会太长，但是内容要保持完整。

注意，绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分，毕竟不是所有的用户拥有良好的网络条件，抑或是有些用户并不希望这种形式，有可能他正在机器上收听音乐或其他视频。

8. 杂志风格样式

在博客类网站设计中，我们发现一个有趣的现象是很多技巧都是取自于传统（印刷）媒体设计。包括文章的组织，页面的排版，插图甚至于文字的对齐方式都和传统印刷媒体越来越接近。Grid-Based（网格化）设计方式在产品网站，博客以及个人工作室网站得到了广泛的应用，但是在企业站点或者在线商店中还未有出现。

9. 幻灯片形式

Carousel，也就是幻灯片导航形式，内容水平或者垂直滚动。通常有两个导航元素来控制滚动方向，以及滚动内容。

这种形式的好处是，用户可以不用多次点击来搜寻他们感兴趣的内容，可以快速的通过滚动幻灯片来浏览希望他们注意的内容。这种形式多用于娱乐站点，或者是一些大型博客。是一种非常吸引眼球的展示方式。

10. 内容介绍模块

页面的左上角是网页上最重要的一块地方，因为最吸引用户的眼球。所以我们可以将最重要的信息放在那里展示，用户也能在第一时间获取这些信息。

对于很多个人工作室网站，或者是产品类的网站，都很好的使用了这个区域来展示内容介绍，相反在博客或者是在线商店类网站上几乎看不到这种方式。

Last week we presented 10 Web Design Trends For 2009, our review of the most promising developments and techniques in web design that may become big in 2009. In the first part we covered embossing letters (”letterpress”), rich user interfaces, PNG transparency, big typography, carousels and media blocks.

This post is the second part of our review. It presents design trends for 2009 in terms of layouts, visual approaches and design elements. Please notice that this post showcases trends and developments that were extensively covered in our previous articles (e.g. handwriting, retro and vintage etc.) and therefore weren’t covered in this post (they are all linked in the overview, so feel free to explore these single posts as well). Did you miss any recent development in this overview? Let us know in the comments!

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

• Web Design Trends For 2009
• 40 Creative Out-Of-The-Box-Layouts
• Textures In Modern Web Design
• Retro and Vintage in Modern Web Design
• Navigation Menus: Trends and Examples
• Hand-Drawing Style In Modern Web Design

Web Design Trends For 2009

Let’s first take a closer look at some of the trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.

1. Out-of-the-box layouts

   

2. One-page layouts

   

3. Multi-column layouts

   

4. Huge illustrations and vibrant graphics

   

5. More white space than ever

   

6. Social design elements

   

7. “Speaking” navigation

   

8. Dynamic tabs

   

9. Still large search boxes

   

10. Category visuals

    

11. Author icons

    

12. Icons and visual clues

    

13. Tag index (instead of tag clouds)

    

14. Illustrations in blog posts

    

15. Watercolor

    

16. Handwriting

    

17. Retro and vintage

    

18. Organic textures, tiles and photographic backgrounds

    

19. Badges

    

20. Price tags

    

21. Ribbons

    

1. Out-Of-The-Box Layouts

As we pointed out a couple of months ago in the showcase 40 Creative Design Layouts: Getting Out Of The Box, we are observing a strong trend towards more individual and creative layouts. Instead of applying conventional boxy layouts, designers are experimenting with the way information is structured, presented and communicated.

In these out-of-the-box-designs, the overall creative approach is often more important and more memorable than the attention to details. Still, usability, typography and visual design are rarely overlooked and are often carefully executed. Creative layouts are particularly popular for portfolios, websites of design agencies and promotional websites (e.g. commercial campaigns of large companies), but they are also very popular on blogs.

When it comes to creativity, the line between a usable and unusable design is very thin; thus, usability testing is particularly important, because a new creative approach can literally break a website. Often, it’s a good idea to find a compromise between a creative approach and a classic, traditional design, and try to achieve a balance between a “bulletproof” (yet ultimately boring) usable designs and an innovative unusable designs. Keep in mind that innovative ideas need some time to mature: to be rethought, modified, adapted, optimized and finally integrated in the design.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

2. One-Page Layouts

An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”). On the contrary, such designs are often quite complex, include rich imagery and vivid animation effects and therefore take some time to load.

When the user clicks on a navigation option, the page changes (partly), and new content is displayed in the area that was previously occupied by the previous content. The navigation of such layouts is supported by sliding and scrolling effects from common JavaScript libraries.

The main advantage for the user is the simple fact that she needs less mouse movement and less clicks to get the information she is looking for. Because this approach is quite new, there is a good chance that some readers will get confused by the unconventional navigation techniques. An alternative “static” version may be helpful or even necessary in this case; you’ll have to offer an alternative version anyway for search engines and for people who have deactivated JavaScript support in their browsers.

3. Multi-Column Layouts

A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for.

Over last few years, we’ve seen an explosion of content on the Web, which has led to the problem of a decrease user attention span, the time that visitors are willing to spend on a given website (see an article on ReadWriteWeb for details). Consequently, it’s no wonder that designers have tried to find ways of presenting information compactly, both to keep visitors on a website as long as possible and to make it as easy as possible to find content.

One way of achieving this is simply to use layouts with more columns placed next to each other. The idea is quite reasonable. Screen resolutions have been constantly increasing in recent years (though a wide adoption of netbooks, like Asus’ Eee PC, may change that), providing users with more horizontal space and designers with additional space to fill with content.

The result: now more and more designers are using more and more columns. We have observed a strong trend towards these so-called multi-column layouts, which are often fixed layouts of 850 by 1000 pixels in width. Multiple columns are used in magazine layouts and portfolios. In these layouts, grids are often used to guarantee a structural balance, hierarchy and order.

With multi-column layouts, the importance of active white space between and within columns cannot be overstated. (Active white space is the space that is deliberately left blank to better structure the page and emphasize different areas of content.)

For this purpose designers often make use of Shneiderman’s Mantra (”convey big picture first, reveal details later”), providing users with a brief overview of available options first and offering details on demand — later, when a link was clicked (Mozilla Labs is a great example of just that).

4. Huge Illustrations And Vibrant Graphics

Just as huge typography keeps dominating modern Web design, huge illustrations seem to be gaining popularity across both professional and personal Web projects. And designers are trying to communicate the message of a website using interactive elements (embedded video blocks) and visual elements (introduction blocks and illustrations). Recently in designs, illustrations have taken up much more space than before and usually supplement huge typography, and they are more attractive, more vivid and therefore more memorable to visitors.

Alternatively, designers are also using vibrant graphics, particularly for backgrounds but also for other design elements. Various styles and graphic approaches are used: grunge, collage and scrapbook, ornaments, retro and vintage, watercolor, organic textures and photographic backgrounds.

5. More White Space Than Ever

Probably one of the most predictable, yet extremely beneficial, developments in Web design over the last few years has been the increasing prominence of white space. White space dominates many designs and is used generously to improve the flow of articles and structure of websites.

In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

6. “Social” Design Elements

If you take a close look at the blogosphere, you’ll hardly be able to find a blog that doesn’t use some kind of “social” icons or social blocks to encourage readers to promote its stories on popular social media websites. Every author loves traffic and recognition, which is why the social element in modern design is becoming bigger and aesthetically more attractive.

Social icons are usually put all over the place, often in the top right of articles or at the bottom of the post. Social blocks often fill the area beneath a post and sometimes appear beside a list of related articles. Twitter, Flickr and Last.FM integration is still common for blogs and portfolios.

7. “Speaking” Navigation

We wrote about “speaking” block navigation in one of our showcases last year, and this design element seems to remain popular across various websites. The most significant task a navigation menu has to accomplish is to unambiguously guide visitors through different sections of a website. However, it’s quite hard sometimes to communicate the content of a website’s section with just one or two keywords, particularly if horizontal navigation is used.

That’s why navigation options aren’t often listed simply one after another using appropriate keywords (i.e. using “silent” navigation). Instead, designers are attempting to concretely explain what options are available and what visitors should expect from a website section upon clicking the corresponding link.

Because designers are trying to initiate more effective dialogue with visitors, we like to call this navigation scheme “speaking” navigation, as opposed to “silent” navigation, which is based on listings of keywords.

So that visitors perceive content as being easy to navigate, the navigation is often structured with blocks of the same height and width. Large icons are quite often used; but in most cases the decision as to whether or not they are appropriate depends on the content of the website and the overall layout. “Soft” hover effects often support the navigation design by making browsing more pleasant.

8. Dynamic Tabs

One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time (the attribute display is used to achieve this effect). You can follow a tutorial on dynamic tabs and ‘tabs’ visual control in jQuery to create dynamic tabs.

Did we miss something?

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

Related posts

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

• Web Design Trends For 2009
• 40 Creative Out-Of-The-Box-Layouts
• Textures In Modern Web Design
• Retro and Vintage in Modern Web Design
• Navigation Menus: Trends and Examples
• Hand-Drawing Style In Modern Web Design

In this collection, you’ll find 45 first-class, downloadable fonts for your use.

Clean, Modern, Web 2.0

Eurofurence

Cicle

Share

Reznor Broken

Alte Haas Grotesk

Abrosia

Babel Sans

AUdimat

Folks TT

Bedizen

tondo

Grunge

Birth of a Hero

Everyday Ghost

Times New Yorker

Grymmoire

District

Ginga

Sidewalk

Trashco

Dirty and Classic

Laundromat 1967

84 Rock

Vintage / Retro

Americana Dreams

Vintage

02.10 fenotype

Automania

Chick

Deftone Stylus

Groove Machine

METRO-RETRO

Registry

Mexcellent

Swingtime MF

Hand Drawn / Painted

Joe Hand 2

advent

Sunday Morning Garage Sale

Rough Draft

Burst My Bubble

Loved by the King

Angelina

Sebastián Font

Karabine

Loveable Scruff

AE Scrawl

Edo

Note

You should read the license of each font before using them in your designs. In some cases, you have to attribute the font designer or need to meet specific requirements for you to use the font for commercial purposes.