Design Trends (Predictions)

Friday, February 5, 2010

As we are stepping in a new decade, I can foresee that web design in 2010 is going to be fun and filled with experimental works. With the new CSS3 and HTML5, designers and developers are trying to utilize the new features to create impressive designs. Sketchy and large background styles are fading out. Serif fonts and texturized background will be popular. Thanks to CSS3, we are going to see a lot of rounded corners, RGBA transparency, and drop shadows. With the rise of smart phones, mobile web design is going to pick up this year.

Serif Fonts

In the last decade, most web sites were designed in either Verdana or Arial (sans-serif fonts), but that is going to change in this new decade. Serif fonts will get more attention. Read this article to find out why: Next Serif Trend.

Big Headings

Big headings in header (as part of design interface) will gain more popularity in 2010.

Custom Font Embedding

As Typekit is expanding their font list and more free quality fonts are available (e.g. FontSquirrel, OpenType, and The League of MoveableType), I think more people will use custom font embedding in the coming year.

Texturized Background

The big background trend is going to be gradually out-of-date and be replaced with subtle and texturized (particularly the light noise) background.

Minimalist & Grid

Minimalist and grid designs are not today’s new. They have been popular for the past couple years and I think it will continue to grow in 2010. Check out my previous post for more minimalist sites.

CSS3 New Features

Although CSS3 is not fully supported by all browsers yet, but a lot of designers are experimenting with the new features such as: rounded corners, multi background images, multi-column, border images, and animation. The following sites show good implementation of CSS3’s new features with fallbacks. So, we will see more and more CSS experimental works.

CSS3 Animation

Neutron Creations’s blog uses webkit-transform to spin the circle graphics (view it with Mac Chrome or Safari). If your browser doesn’t support webkit-transform, it will just show the static circles.

Rounded Borders and Box Shadows

Border-radius and box-shadow are the most commonly used CSS3 properties.

Text Shadow

A lot of designers are using text shadow to add more depth to text.

RGBA & Opacity

RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect.

Mobile Design

Since the release of iPhonein 2007, everybody is talking about mobile design. Now with more smart phones that support full CSS and Javascript, mobile design is definitely going to be the future of web design. A lot of sites(ranging from design agencies to editorial sites to web apps) are offering a mobile version. Below are some great examples (screenshots are captured with iPhone).