The State of Web Design Trends: 2011 Annual Edition

2010 has been an incredibly verdant year for web designers. Mobile has hit the mainstream; Web typography has reached new levels of sophistication; New coding techniques have vastly improved our ability to get creative with design (without compromising stability). All in all, it’s been a year that’s moved fast, even by the standards of the web, so let’s dig in to our first annual post covering the state of web design as 2010 turns to 2011.

The Death of the Fold

The traditional “fold” (the imaginary line on a screen that designates what content is visible before a viewer needs to scroll) became vague, unimportant, and nearly irrelevant in 2010.

Why? Because the traditional “screen” that people view the web through has undergone an explosion of variety… no longer can we expect web-surfers to be on something close to a 19″ monitor with a resolution somewhere between 1024×768 and 1280×700. Screens nowadays come in all shapes and sizes, from iPhones (and smaller phones) to 60″ HDTVs. It’s not just resolution that can vary wildly though; the very aspect ratio of a screen (even on the same device like the iPhone) can change with the flick of the wrist. Sure, web designers will always be advised to keep the most important messages of a site near the top, but with so many new ways for web-surfers to view the web, there’s no longer a defined height for where content must be above.

We’ll be discussing this topic in a lot more detail this month, so subscribe (it’s free) to stay tuned :)

Mobile Sites

Sites have been being designed for mobile scenarios since the inception of mobile devices… but 2010 has seen a huge push towards entire sub-sites that are designed specifically to be viewed on small, handheld screens. You can thank the iPhone for starting this trend, but the wave of “mobified” sites is spreading like wildfire…. and come this same time next year, I’m sure you’ll be hard-pressed to find a major publishing site without a mobile companion site.

What’s neat about mobile screens is that it forces designers to get creative with a relatively small amount of real estate. Succeeding in the mobile environment isn’t tough if you keep a few rules in mind: Messages need to be conveyed quicker and with more efficiency; Links have to be designed for a touchscreen environment; and text needs to become legible (or at least effectively zoomable). Here are just a few examples of mobile sites:

You can read a LOT more about mobile design at our sister site: Mobile.tutsplus.com!

SubTrend: Tabletified Sites

Just like 2010 saw an explosion of mobile site designs, it can be expected that as consumers pick up tablets more often, major websites will follow suit by creating sites (and apps) designed specifically for a medium sized touch-screen environment.

A Typographic Explosion

Alright, I guess you could make the claim that “typography will explode” each and every year… but 2010 has seen a few major changes to the underlying technology that actually make this claim legitimate. Primarily, the huge amount of growth of font-replacement technology over the last year and the mass adoption of “fonts as services” where third party companies host fonts (and licenses) that designers can use in live development environments. You could also say that designers are getting a lot more bold with typogrpahy as well… with more and more designs coming out lately that blur the line between print-4design and web design.

You can read more about this how to navigate the wide variety of these awesome new typography solutions here. Let’s check out some examples (some using font replacement, others using other methods):

SubTrend: Print Design Inspired Sites

This was all the rage in 2009 – 2010, but the “print revolution” is alive and well on the web, and more and more sites are being designed to mimic great print designs, such as magazines, posters, fliers, and more.

Desktop Application UI Influence

If I were a betting man back in 2009, I would have put all my money into apps… iPhone apps, Android apps, Apple apps, PC apps, web apps… the software environment seems to have gone completely berserk over the past year or two. All of this excitement over creating applications has trickled into the web design style-lexicon in an interesting way: where once the web looked, well, like a website, nowadays it can often look more like an application. Everything from modal windows, context menus, OS inspired buttons, and more are being brought into the web design environment in new and exciting ways… the end result: sites that feel more user friendly and natural.

Grid Intensive Layouts

Grid layouts aren’t new to 2010 (or even 1980), but web designers are starting to break away from traditional web layouts (header, content column, sidebar, footer) in favor of more unique, grid driven layouts. What started out with the 960.gs movement has quickly spread to grid systems that can actually adapt to the viewers screen resolution.

Massive Images

Here’s another trend that’s been happening for more than just this last year. Massive images were once taboo for web designers, but thanks to better image optimization, faster internet connections, and smarter loading methods, designers can gain a lot in some sites by pushing image sizes to the max.

More than just “big images”, we’re beginning to see more trending towards sites that use vast illustrative (and photographic) backdrops that are as a part of the actual experience as they are simply additional artwork.

Immersive Script Integration (jQuery Sliders, etc.)

Coded plugins used to be an afterthought in most web designs… you would finish a mockup, then replace an image with a slider if you could find a great plugin for it. Nowadays, entire designs can be based on scripts and plugins that do more than “add something” to a design… they can define the entire website experience.

Here are just a couple examples of sites that don’t just add script interactivity, they make it the foundation of the site:

You can read a lot more about jQuery and other script integration tricks at our sister site: Net.tutsplus.com!

CSS3 Hits the Mainstream

If I had a dime for every CSS3 article I saw in 2010, I’d be swimming in a pool of them. While CSS3 mass adoption is still a little ways off (here’s a handy link to see what browsers have adopted what parts of CSS3), designers haven’t hesitated to start using some of the fantastic new features. Everything from rounded corners, box shadows, glow effects, CSS3 animation, @font-face, and more have started popping up in designs all over the place. here’s just a handful of examples:

You can read a lot more about CSS3 tricks at our sister site: Net.tutsplus.com!

Texture, Texture, Texture

Textures aren’t new, but as each year passes we see it being integrated in new and interesting ways. 2010 saw a lot of the “subtle noise” texture, but more than anything, we’re beginning to enter a style phase where more designs are starting to feel “touchable”. This doesn’t necessarily mean that big, file-heavy textures are being used… instead, we’re seeing more subtle, well designed textures that repeat naturally.

Infographic Driven Designs

I’ve always been a huge fan of infographics, so it’s nice that we’re starting to see them being integrated into web designs as more than just attachments. I think there’s a lot of opportunity for new and exciting ways of infographic site integration, so keep an eye out for these designs in 2011.

Single Page Sites

3D Environments

This is more of a novelty than a trend… 3D based sites are fun to use, but aren’t entirely accessible from some browsers and devices. That said, there are some fun new things happening in the way of three dimensional environments, so they’re worth checking out, even if you won’t be seeing them on your iPhone anytime soon ;)

Social Media Convergence

The last trend that I’m going to mention isn’t one that requires much in the way of screenshots… mainly because the shift is more strategy than substance. While this trend has been happening for years, things seem to be coming to a head at the moment… and the fate of the future of the internet is going to be decided.

What I’m talking about is “social media convergence”, or rather, the pattern of brands and businesses focusing their efforts on social media sites (rather than their own independent sites). Instead of individual domains, we’re beginning to see more and more businesses moving to strategies that either are based on sites like Facebook, or are at the very least integrating social features in a way that is 100% reliant upon the social media sites.

…instead of an internet composed of millions of different and unique sites, we could end up with a handful of “mega-sites” that everyone (individuals and businesses alike) simply have a page on…

This makes sense for a number of businesses; it’s a whole lot easier to get people to discover and visit your Facebook or Twitter page than it is to have them stumble upon (pun intended!) your own domain (ie: myownawesomewebsite.com/me). The winners of this trend are, of course, the big social media sites who gather up more and more traffic. The losers? Well, if this trend continues, the losers could very well be anyone who doesn’t jump on the bandwagon… so instead of an internet composed of millions of different and unique sites, we could end up with a handful of “mega-sites” that everyone (individuals and businesses alike) simply have a page on.

Let the Discussion Begin!

Alright, so I’ve just hit the tip of the iceberg for all of the great trends happening in 2010, and I’ll be the first to admit that I’m sure I missed something. Post your comments, thoughts, trends, and anything else in the comments section and I’ll be taking any really great comments into account when it comes time to edit this post later on!

Happy 2011!