Web Design Trends for 2010

If we had Steve Ballmer introducing this article, the pleasantly plump Microsoft CEO would be stalking the stage, sweating and exclaiming “Typography!, Typography!, Typography!, Typography!”. That’s how much we think typographic implementation will be the biggest trend in web design for 2010. We also think minimalism, print world influence, importance of mobile device optimization, and rising usage of HTML5 and CSS3 techniques will be major players on the design front for 2010. Before this turns into a “People” magazine style piece (”Why You Must Use Plaid on Your Website in 2010!!!”) please note that these are just simple trend-spotting ideas from a small web design firm in Philadelphia, not hard and fast rules to follow. Who knows? We could be totally wrong and the dominant web design trend could very well be influenced by Latvian folk art from the mid 1800’s. That’s all part of the fun!

1.) Typography

As Mr. Ballmer has so eloquently drilled into our heads (at least in our imaginations), focus on typography will be the dominant trend of 2010. With the increasing usage of the @font-face CSS property thanks to Typekit and other font replacement techniques, designers will pay much more attention to typography as an integral part of the design. Designers will also become more educated about the subtle complexities of choosing fonts, laying out pages with type, and on-screen font rendering. Robert Bringhurst’s classic tome “The Elements of Typographic Style” has never been more relevant. The floodgates are now open for standards based font usage! At the recent Standards.Next conference, Opera CTO Håkon Wium Lie stated that the history of the web will be looked back upon as the “pre-font” and “post-font” eras. (He also got into a “friendly argument” with the Internet Explorer rep, but that’s another story for a different day.)

Typographic Resources:
Typography is the Backbone of Good Web Design by Brian Hoff
“On Web Typography” by Jason Santa Maria
20 Do’s and Dont’s of Effective Web Typography
Typography on the Web:Questions for Jeffrey Zeldman
“The Elements of Typographic Style” at Amazon.com

2.) Minimalism

As an adjunct to the typography trend, minimalism will rule the day. Designers will be designing with type instead of building pretty images around it. This will lead to a cleaner look for many websites, with the font choices and layouts doing most of the work aesthetically.

3.) Influence from the Print World

Another big trend we see will be magazine or newspaper style layouts and poster-style design for web sites. Designers will be seeking inspiration from the traditions of the print world instead of online. The magazine style layout has gained a foothold in the design community in recent years and can be expected to keep it’s popularity in 2010. Many content heavy sites can benefit from this approach. Tons of exciting stuff is also happening in the field of poster design. Webheads can incorporate ideas like big, bold scale and visual impact from posters. Paul Boag has an excellent article on this trend called “Stop Designing Websites, Start Designing Posters”.

4.) Mobile Web Optimization

Smartphone usage is expected to trend upwards significantly in 2010 with some industry honchos predicting prices will be cut in half at the end of the upcoming year. Designing for mobile devices is not just about shrinking an existing web site down to size, but redefining the user interface to accommodate the habits of the mobile user. Let’s be honest here, shall we? Browsing a website with a smartphone can sometimes be a frustrating exercise in futility, but it’s here to stay and it’s incumbent on designers to turn that experience into a pleasurable one.

Mobile Web Resources:
A Guide to Mobile Web Design Tips and Tricks
How to Design Websites for Mobile Phones and iPhones
Designing an iPhone Friendly Website
Safari Reference Library on iPhone Design
Mobile Web Design on Smashing Magazine
Designing for the Mobile Web at Sitepoint (Older Article)

5.) HTML5/CSS3

Of course, these two won’t be fully implemented in all browsers (yeah, I’m looking at you IE) until the L.A. Clippers win the NBA title, but we can still use some of the techniques available in Firefox, Safari, and Opera. Check out this “When Can I Use..?” compatibility table. HTML5 will introduce more semantic tags like “header”, “footer” and “nav” as well as the much anticipated “canvas” element. CSS3 promises some cool implementations including multiple background elements, rounded corners, text-shadowing, and our personal favorite, the opacity property. An important thing to keep in mind is the use of progressive enhancement or graceful degradation to make these work in older browsers. Expect to see more designers take advantage of incorporating these elements in 2010.

HTML5/CSS3 Resources:
HTML5 Doctor
HTML5 Wiki
HTML5 Demos and Examples
HTML5 Gallery
Smashing Magazine article on CSS3 by Chris Spooner
W3C Page on CSS3
70 Tutorials and Resources on CSS3 and HTML5

Related Posts: