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.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Big Headings

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

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

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.

screen capture

screen capture

screen capture

screen capture

screen capture

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.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

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.

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

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.

screen capture

Rounded Borders and Box Shadows

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

screen capture

screen capture

screen capture

screen capture

Text Shadow

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

screen capture

screen capture

screen capture

screen capture

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.

screen capture

screen capture

screen capture

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

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

screen capture

Twitter Replies (follow me @nickla)

Below are some of the Twitter replies that I’ve received as I was brainstorming for this post. Thanks to everyone!

mattashwood:
Subtle textures. Light noise in the background, or light paper textures almost unnoticeable.

BigWaveDesign:
I think opacity with rgba will be seen more often like my new site http://bigwavedesign.co.uk

echtang:
Regarding 2010 trends, what about the multiscreens phenomenon? With the proliferation of smart phones, tablets and other devices, how are designers going to adopt Flash and other platforms to design for mobile devices?

sixrevisions:
I think (and hope) minimalist designs will become (even) more popular this year. Simple, elegant, classy, fast page response times.

bengie:
I think more HTML5 and CSS3 implementation instead of a trend like letterpress or glossy buttons (those were the days)

leftuppercorner:
I guess the preference for simplicity will continue in 2010. Maybe some professional looking monotone stuff with colorful details.

rappsodystudios:
we will probably see a move towards minimalism. Collage/handrawn design will calm down a bit.

honeydesign:
2010 predictions: super simple, clean designs. minimal. black and white (& gray).

chadengle:
I think large type and making design feel like an experience will continue to show up in 2010.

designlovr:
Even more fancy javascript effects, more CSS3 & HTML5 implementation, minimalistic web designs

aditgupta:
more designers switching to CSS3+HTML5, creative designs utilizing tools like processing.js, more focus on typography, minimalism

TrentWalton:
Bright, flat & (at times) semi-transparent colors

AmpDaily:
I think that 2010 will bring a lot (more) design elements that are actually coded (using CSS3), like box-shadows and text-shadows

chadMueller:
more jquery and more integration of social media in design

logobliss:
massive typography & less ie6 support!

DanHoyDesign:
definitely typography – likely see lots of wild experiments and then possibly a taming down to a handful of favorites…

asipahio:
I think curved corners will be a trend and people might try css3 animations don’t know if it would be a trend though.

mubashirbaweja:
simplicity and solid colours.

Conclusion

2010 is going to be a new adventure for web designers and developers. I and many people (from the Twitter replies) believe that, CSS3 is going to be wowing this year. If you haven’t checked out CSS3 and HTML5 yet, you should really look into it because they will change the way you design and code. You can take advantage of the new features to create cleaner and more efficient layout. For example, instead of writing extra div tags to display multiple background images, we can eliminate it with CSS3. Instead of writing <div id="header"> tag, we can simply write <header> in HTML5.

What do you think?

[poll=19]

212 Comments

1 9 10 11
  1. halaman bermasalah
    Mar 15, 2011 @ 10:02 am

    nice info ..
    thanks

    Reply

  2. Singapore Offices
    Mar 17, 2011 @ 2:23 am

    This is not a nice article. It’s a great article!!! This will really be highly beneficial . Thank you for creating this!

    Reply

  3. Offices
    Mar 17, 2011 @ 2:23 am

    Splendid work. Thank you so much for this post. Interesting content.

    Reply

  4. Foursseasonssvcs
    Apr 5, 2011 @ 3:32 am

    Using our professional team of web designers, we give you the edge you need to step on your competitors.
    Web Application Development

    Reply

  5. dexx
    Apr 17, 2011 @ 3:08 pm

    Lens, in his statement, in advance by expressing a variety of symptoms anlaşılabildiğini, routine checks should be done in order to prevent fatal heart attack stressed.

    Reply

  6. miss emoticon
    May 19, 2011 @ 4:47 am

    Have you ever considered about adding a little bit more than just your articles? I mean, what you say is valuable and everything. Nevertheless imagine if you added some great graphics or video clips to give your posts more, “pop”! Your content is excellent but with images and videos, this website could certainly be one of the very best in its niche. Fantastic blog!

    Reply

  7. Christian Mungle
    May 19, 2011 @ 10:48 am

    Good day! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to me. Nonetheless, I’m definitely glad I found it and I’ll be bookmarking and checking back frequently!

    Reply

  8. www.aktivtek.no
    Jun 16, 2011 @ 2:03 am

    I would also mention modal boxes uset in forms and text frames. Modal boxes are a trend that’s picking up steam and will be virtually everywhere from 2010. A modal box is like the popup’s more sophisticated older brother– it’s smooth, good looking and popular. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer company or freelancer concerned with usability and great looking websites…

    Reply

  9. orhanbt
    Jul 15, 2011 @ 4:46 pm

    Verry Good.

    Reply

  10. Martin Lapietra
    Jul 25, 2011 @ 10:53 pm

    you’ve made my day, Brian, ‘the Brain’ .. lol

    Reply

  11. model
    Apr 30, 2012 @ 4:49 am

    This does look like a great theme.

    Reply

  12. Artesanos
    Sep 27, 2012 @ 3:06 pm

    The hack ‘Get the first image from the post and display it’ doesn’t always have to work on all off the wordpress-themes. As it didn’t work on the gonzoblog.nl

    Reply

1 9 10 11

Leave a Reply