Advertisement
Design Theory

The State of Web Design Trends: 2011 Annual Edition

by

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

Web Design Trends and 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 1024x768 and 1280x700. 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:

Web Design Trends : Mobile Web Design 1
Web Design Trends : Mobile Web Design 2
Web Design Trends : Mobile Web Design 3
Web Design Trends : Mobile Web Design 4
Web Design Trends : Mobile Web Design 5
Web Design Trends : Mobile Web Design 6

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

Web Design Trends : Web Typography 1
Web Design Trends : Web Typography 2
Web Design Trends : Web Typography 3
Web Design Trends : Web Typography 4
Web Design Trends : Web Typography 5
Web Design Trends : Web Typography 6
Web Design Trends : Web Typography 7
Web Design Trends : Web Typography 8
Web Design Trends : Web Typography 9
Web Design Trends : Web Typography 01
Web Design Trends : Web Typography 11

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.

Web Design Trends : App Influence 1
Web Design Trends : App Influence 2
Web Design Trends : App Influence 3
Web Design Trends : App Influence 4
Web Design Trends : App Influence 5
Web Design Trends : App Influence 6 title=

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.

Web Design Trends : Web Design Grid Layouts 1
Web Design Trends : Web Design Grid Layouts 2
Web Design Trends : Web Design Grid Layouts 3
Web Design Trends : Web Design Grid Layouts 4
Web Design Trends : Web Design Grid Layouts 5
Web Design Trends : Web Design Grid Layouts 6
Web Design Trends : Web Design Grid Layouts 7

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.

Web Design Trends : Web Design Big Images 1
Web Design Trends : Web Design Big Images 2
Web Design Trends : Web Design Big Images 3
Web Design Trends : Web Design Big Images 4
Web Design Trends : Web Design Big Images 5
Web Design Trends : Web Design Big Images 6
Web Design Trends : Web Design Big Images 7
Web Design Trends : Web Design Big Images 8
Web Design Trends : Web Design Big Images 9
Web Design Trends : Web Design Big Images 10
Web Design Trends : Web Design Big Images 11

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.

Web Design Trends : Web Design Background Textures 1
Web Design Trends : Web Design Background Textures 2
Web Design Trends : Web Design Background Textures 3
Web Design Trends : Web Design Background Textures 4
Web Design Trends : Web Design Background Textures 5
Web Design Trends : Web Design Background Textures 6
Web Design Trends : Web Design Background Textures 7

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

Web Design Trends : Web Design One Page Designs

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!

Related Posts
  • Code
    Articles
    Mobile Operating Systems in 2014Dj45i preview image@2x
    As a mobile developer, it's good to be familiar with the most important platforms in the mobile space. In this article, we'll take a look at the most important mobile operating systems, their current state, and how they're performing in the current mobile landscape.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Web Design
    Interviews
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Web Design
    Industry
    Web Design 2014: What to Watch Out For014 retina
    This year has been a brilliant year in web design. More than any other year perhaps, huge strides have been made towards the maturing of the field. Let's have a look at some of what we can expect for the future of web design as an industry.Read More…
  • Web Design
    Design Theory
    All About Trends in Web DesignDsfd trends retina
    As long as the web has been around there have been certain design trends which have popped up from time to time. Some of these trends have stuck around and, over time, some have disappeared. Think back to the time of Geocities, to the time of ‘Web 2.0’ designs and closer to home, with the “flat design” trend that’s popular now. Now, in 2013, the web industry is changing as rapidly as ever. New techniques, or ways of working, pop up every month, if not every week.Read More…
  • Web Design
    Typography
    Figuring Out @font-faceF preview
    Within the last five years, typography on the web has taken quite an about face (sorry, pun intended). It used to be that web designers were constrained to using web-safe fonts only; system fonts available on all users' computers. As you can imagine (or experienced first-hand), this was frustrating to us type freaks, but we dealt with it. However, in a weird way it was kind of nice because you had a limited set of fonts to choose from, so the time spent picking the perfect font was minimal (I’m not complaining). Now though, a font specific to the look and feel you want to achieve is possible, and companies can now project their visual brand language through typography.Read More…