What you need to know about Web Design in 2012

As every year comes to an end, reflec­tion and antic­i­pa­tion come togeth­er. If you have a part in the ever chang­ing world of web design, you might start to won­der, “Are my web­sites miss­ing some trick or trend, some tech­nique that would make them just a lit­tle bit bet­ter?” I wan­dered the web a lit­tle bit and came up with the fol­low­ing list of four web design trends that need to be on your radar for 2012. If you are already doing these things — you are an awe­some web design­er, keep up the great work! If you’ve never heard of it — take a look at each fur­ther read­ing sec­tion and make your­self a smarter, bet­ter web design­er for 2012.

1. Responsive Web Design

The hot topic issue of 2011 was respon­sive web design. Using CSS3 media queries, lay­outs and con­tent can adjust based on width, height, device ori­en­ta­tion, and more. 3 inch smart­phones, 10 inch tablets, 52 inch tele­vi­sions — they can all now access the inter­net and your web­sites. The explo­sion of inter­net capa­ble devices in all their var­i­ous sizes and shapes will only con­tin­ue to grow in 2012. Be pre­pared for clients want­i­ng bet­ter look­ing, easy to touch web­sites on their smart­phones. Now is the time to start plan­ning, design­ing, and devel­op­ing respon­sive web­sites that adapt to how the user is inter­act­ing with your site.

Examples

• http://www.colly.com/
• http://www.stephencaver.com/

Further Reading

• http://www.w3.org/TR/css3-mediaqueries/
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.webdesignerwall.com/tutorials/responsive-design-in-3-steps

 

2. @font-face

Typography has grown on the web in 2011 as web browsers have devel­oped bet­ter sup­port for @font-face and bet­ter solu­tions for pub­lish­ing fonts on the web became avail­able. Type foundries joined forces with ser­vices like Typekit and Fontdeck to offer high-quality, unique typog­ra­phy in a sim­ple to imple­ment way.

Headlines, body copy, links, and more can now be eas­i­ly styled to cre­ate con­sis­tent brand­ing across both print and web. 2012 is the time to start offer­ing your clients the advan­tage of set­ting their site apart with cus­tom styled text and uni­fied branding.

Examples

• http://www.twopaperdolls.com/hiring/
• http://www.futureofcarsharing.com/
• http://www.lostworldsfairs.com/

Further Reading

• http://www.miltonbayer.com/font-face/
• http://www.webdesignerwall.com/tutorials/css3-font-face-design-guide
• http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
• http://www.fontsquirrel.com/

 

3. One Page Web Design

It is often said that sim­pler is bet­ter. Some design­ers have taken this idea and boiled down an entire web­site into one page. This trend isn’t for every­one, but it’s an option to be aware of as a web design­er. Take a look at the con­tent you have to con­vey and see if it can be arranged in one page with inter­est­ing inter­ac­tions that can engage the user. Sometimes an entire con­tent man­age­ment sys­tem (CMS) might be overkill. Like respon­sive web design, this is anoth­er tech­nique that involves plan­ning at the begin­ning of the project to guide the entire devel­op­ment process. It also involves care­ful con­sid­er­a­tion for nav­i­ga­tion and user interaction.

Examples

• http://www.smartusa.com/
• http://www.janploch.de/
• http://www.carterdigital.com.au/
• http://www.onepagelove.com/

Further Reading

• http://www.noupe.com/design/single-page-websites-examples-and-good-practices.html
• http://www.sixrevisions.com/web_design/the-science-behind-a-single-page-website/

 

4. User Interaction with a Story

How a user inter­acts with your web­site has always been a pil­lar of web design. Nobody likes a site if but­tons are hard to find and tasks are dif­fi­cult to com­plete. But what if you could add more to how the user is inter­act­ing with the web­site? What if you add a com­pelling story?

People like a good story. People like to be more engaged; they want to have a two-way con­ver­sa­tion instead of you just telling them some­thing. Social media and it’s new role in cus­tomer ser­vice and sup­port is a good exam­ple of this interaction.

By increas­ing the amount of user par­tic­i­pa­tion just a lit­tle bit — and keep­ing it sim­ple, you can cre­ate more inter­ac­tion and make the user feel more of a part­ner and less of a tar­get. These types of user inter­ac­tion usu­al­ly involve lead­ing the user down a path or play­ing a game. Again, this isn’t a tech­nique for every­body, but it’s a pop­u­lar idea to take a look at in 2012 for improv­ing user interaction.

Examples

• http://www.head2heart.us/
• http://www.benthebodyguard.com/index.php#utmxpreview=0
• http://shape.method.ac/

Further Reading

• http://uxdesign.smashingmagazine.com/2010/02/11/better-user-experience-through-storytelling-part‑2/

 

There’s plen­ty more going on in web design — there’s always new cod­ing and lan­guage devel­op­ments as well as artis­tic design trends. I chose these four trends as the most promi­nent to explode in 2012 based on their momen­tum and their wide rang­ing impact on the entire design process. I would love to hear your sug­ges­tions in the com­ments. Are these trends boom or bust? What trend would you add to the list as num­ber five?