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).
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?
Loading ...
Great post Nick! Thanks for summarizing these key trends.
Very good guesses. I think HTML5 will also come into play quite a bit.
great post.
There’s a small error in the firste sentence:
“In the last decade, most web sites were designed in either Verdana or Arial (serif fonts), ”
That should be “Verdana or Arial (sans serif fonts)” instead.
Martin LeBlanc
My question concerns the upcoming trend with large headers. See, I agree that design trends are headed in that direction, but why?
I recently redesigned my site and I actually made the header smaller so that the content was more readily available to my readers. I wanted to go against the grain a little bit as far as headers go.
Anyway, would appreciate any thoughts people have on WHY bigger headers, not smaller.
Thanks for sharing.
nice list, Nick.
I’ll have to pay more attention to mobile design but here in Belgium the mobile era is still low-profile. We don’t have the mobile internet rates/speeds as you USA-citizens.
thx for using my advice for this list (#bengie)
I think you have nailed it. Using custom fonts with @font-face are going to be huge and are probably what I’m looking forward to the most.
Thanks for the quote! I think you are pretty spot on with your predictions. Most of that stuff was already showing up at the end of ’09 but will carry over into 2010. I think mobile will be even bigger. It’s the thing to do now. Especially with platforms like Droid that have big screens like the iPhone more clients will want a mobile presence.
A great summary.
My real concern is keeping websites compatible with older browsers. As much as I’d like to tell everyone to ditch IE6, they won’t. Dropshadows and rounded corners are going to remain as GIFs for a while (unfortunately).
Great post and great collection !
Minimalist designs and mobile design will be the big trends for this year 2010.
Big headings
I think they are a result of increasing screen resolutions
Custom fonts / CSS3 new features
We’ll see more of them as they are more widely supported in browsers
Minimalist and grid design
With CSS3 subtle nuances, and @font-face, I think there are more opportunities to do this kind of design without designs looking too similar
Mobile design
A must as mobile device growth is huge
As for textured backgrounds and serif fonts, surely that comes down to spec? Designers shouldn’t choose a font type and add a background texture based on a broad trend.
I guess the argument with subtle textures is that, again, monitors are improving all the time, so subtle details are more likely to display well to a larger audience (those with decent monitors), but I don’t understand why users will, in general, be using serif fonts more in 2010.
Very interesting article. I do believe the Serif fonts are in the rise this year and look excellent. I have seen a lot of coporate design ideas combined with creativitity as of late. The textured backgrounds are brilliant, this is something I have been adding to my designs over the past 4 weeks. Nice post, Thanks.
Minimalism will be big – I’m working on a design right now that only uses 1 lead image and LOTS of whitespace, its killing me being so reserved but I know it will be worth it in the end.
Nice collection there, however surely it’s just 2009 again but with the addition of more of sites designed for mobile users?
Excellent insight into some of the predicted trends for 2010 design.
I know I am certainly hoping to see more emphasis on creative and effective typography use in web design – whether that means more serif OR sans serif is debatable.
I also agree that the emphasis on mobile designs is going to skyrocket this year [say 'no' to poopy mobile interfaces]. Making web design and functionality equally as effective for mobile should definitely be a focal point for the upcoming year!
Great post.
Great article, thanks for this.
Even though mobile design has sky rocketed over 2008 and 2009, I think we will still see the trend grow at a slower pace in 2010. But I do not think it will trail off, because of an ever growing market of devices.
I also agree with Kev Adamson about the use of custom fonts and CSS3. Browsers are always changing and updating. And even though I am not the loudest supporter of Internet Explorer, it would blow me away if Microsoft actually changed it up a bit, and completely wiped out IE6 and 7. And that could be their major contribution to the world in 2010. But a man can dream can’t he?
Hi Nick,
great insight, good predictions and hope you’ll be right, it will make the web a beautiful (typographic) place! My (still in development) redesign of my online portfolio is according to some of your predictions!
Very interesting, thanks for sharing, Cheers & Ciao …
This were 2009 trends…
I agree with Piotr. These are all so 2009. It doesn’t seem to be very forward-thinking.
I think there will be a revolution of sorts, designers not worrying about IE(as much anyways) becuase IE is now in 2nd place amongst browser usage. I agree we will see minimalism, yet wonderful elegance as the CSS3 designs take precedence. I think 2010 will be a leap forward in better design practices