Quick look at some of the Popular Web Design Trends from 2011


By

Looking back over the past year we can pick up a lot of fresh emerging trends. Web designers around the world are connected like never before through a seemingly endless supply of social networks (big thums up to Dribble). Thus it’s much easier for new and innovative trends to build a head-of-steam and snowball into the main-stream.
And there is no doubt we’ve witnessed the rise of some real creative ideas in the past 12 months.

I’d like to take a brief look back into some of the more creative ideas that we have seen. Simplifing responsive layouts has been by far and away the most discussed topic. But there are other techniques that have affected the web design design community as a whole. If you’d like a brief recap of some of most impactful web design trends moving into 2012, be sure to keep reading!

HTML5/CSS3 Standards

We couldn’t cover the trends from 2011 without mentioning the importance of the new W3C specifications. HTML5 has introduced a whole slew of new elements including support for audio and video media. All of the latest and popular mobile operating systems support HTML5 audio/video in mobile browsers, which means, pretty soon there will be no more pesky Flash!

All of the major desktop browsers also support many of the new CSS3 properties including text-shadows and rounded corners. Yet both of these time-saving bits of code are just the tip if the iceberg. The new specs also introduced image-free gradients using just a few lines of code.

Dover Fireworks from 2012

It would be wise for developers to adopt these trends in future website projects for 2012. Not only do they save time, but the construction process has been streamlined significantly. It’s also a lot simpler to integrate JavaScript and other dynamic effects.

Mobile Templates

There is no denying how popular the mobile web has become. More and more users are picking up a smartphone for the first time and truly experiencing mobile browsing. If you want to keep on top of your audience you will need to offer a mobile-friendly alternative to your desktop version.

White iPhone 4S model box

The whole process is actually a lot of fun as you get to re-imagine different aspects to browsing around the site. For WordPress users I would definitely recommend checking out the WPTouch plugin and customizing off their base template. The developers are still actively working to improve the product and welcome feedback from users! Also check out these healthy ideas for more inspiration in the mobile design realm.

Fixed-Menu Navigation

This trend has really taken me by surprise as how quickly it’s been accepted into mainstream portfolios. Any website’s core navigation is possibly the most crucial aspect of the entire UI. And as such it makes sense to keep the menu scrolling with the user – that way each of your pages is only a click away.

I’ve witnessed mostly portfolios for web designers who have introduced the coolest examples of these menus. But the trend has snowballed into the design of many other types of websites as well. And these days it’s a simple process of hitting GitHub or Google to find an open-source solution! Developers are practically throwing their code out to the public.

home page fixed-nav menu

Consider the example on Fat Man Collective where you have the stationary menu positioned off to the right. As you scroll the left-hand side appears to scroll through within it’s own content div! I love this rendition as I feel the whole navigation has been refined to a point. Also Loyel’s Toy has a similar example with a beautiful design.

Vector Illustrations

It’s no surprise that talented artists have been propelled into meaningful positions on the web. Cute vector animals and background scenery is the perfect way to catch your visitor’s wandering eyes. These special web graphics cater to brand recognition such as MailChimp’s friend we’ve all grown to love.

MailChimp branding - Monkey mail man

But of course, vector illustrations have grown much further than the realm of animal friends. I know of a few silly designers who have drawn themselves in vector art format throughout the website design. This is a really cool way to give your visitors a small look at who runs things on the backend. It’s also a powerful branding technique for yourself or your company.

Image Carousels

Visitors are much more likely to interact with dynamic content rather than static links. Not only are in-page widgets flashy (pardon the pun), but the UI is much more advanced than modern browsers can typically render. The jQuery effects library has contributed to the development of dozens of open source image galleries, check out our selection of solutions.

These slideshow-type scripts are simple to implement with just a few lines of code. Most of the fancy effects are created using JavaScript but there are plenty of pure CSS3 alternatives for you purists. It’s recommended that you stick to using a single carousel within any website, as too much of a good thing tends to ruin the layout. Try positioning a large display on your home page to immediately draw in attention.

Community Support

One big trend we can’t forget to mention is the friendly nature of our global design community. Every blog you check often includes some tutorials, free PSD or AI files, icons, or some other fantastic resources!

San Francisco Bay Bridge at night

Never before in the history of web design have so many artists been able to connect and share work with each other. And unlike other areas of work, I have actually witnessed many helpful and courteous web designers lending their time to each other in hopes of problem solving. It’s my hope that in 2012 webdevs will come together with even greater support for semantics and design standards.

Conclusion

I hope this quick look back over 2011 has enlivened your designer’s spirit. The last 12 months have seen a dramatic surge in resources and open source projects, along with new budding trends in user interface design. If things keep up at this pace we’re sure to be entering 2012 with a whole lot of steam!

Let us know your thoughts or questions in the discussion area below.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.