What Are The Web Design Trends For 2011?

Is it enough to have a beautiful design and no content in your web site? Maybe this was the case a couple of years ago, but not anymore. You will find very quickly, that all the best dynamics in the world and no substance will leave you sitting on the bottom of search results.

A well designed web site with content-relevant information is the new trend. Web statistics and web analytics show that the new Google search engine algorithm (Panda) is cracking down on content farms. No longer can you fill your site with content that is irrelevant and stuffed with keywords that have nothing to do with your site.

It’s all about finding content the visitor is searching for, in the shortest amount of time. A facinating design may hold someone’s attention for a short amount of time, what keeps them there is finding the information they are looking for.

Websites must be able to interact with smart phones, netbooks, pc tablets, laptops and desktops. Intuitive design, easily accessible info, a fast response time and a simplistic design are all a must.

Subtle textures, small and large stripes, round crisp corners and lighter backgrounds are the new in. Using boxes to separate and organize sections such as summaries to more in-depth articles are also in style for landing pages. Dark, hard to read sites are out.

Some of the top web design trends for 2011 are:

CSS3 and HTML5

 While both of these are integrated into Google and Firefox to some degree (current versions only), Google is ahead of the game in support, while Internet Explorer is lagging behind. Some big name web designers are starting to use this, although they are using fallback styles so that Internet Explorer users can still enjoy the web site also. The support for this will get better as more sites start using it.

See caniuse.com for the support offered in different browsers.

Minimal Use of Color

 Use 2 – 3 colors at most and work with the saturation depth of color to mix it up. Work with the colors red, yellow, blue and green in their most basic forms and make the color you pick darker or lighter. See my article on complementary color schemes.

Large Background Images

Make sure that this does not exceed 1MB or you risk losing visitors who pay for bandwidth usage or the visitor who has a slow connection. Larger icons for better viewing of what they are and where they are, are also in style. Make sure all images are optimized for the web. Mobile Web Design – multiple viewport capability. Mobile means smartphones, ipads and netbooks. With the help of CSS media queries, this is a must. Mobile applications are forecasted to outsell PC’s this year.

Some mobile applications have useability issues. Touchscreen devices have no ability to hover and therefore you can’t use dropdowns. Large iimages must also be scaled down for use in mobile devices or you will have unnecessary horizontal scrolling. And again most mobile users are paying for data useage, so make your mobile site lean and mean.

Liquid Layouts

Another must for the mobile design. A magazine type layout where the visitor can flip through the site using a hyperlinked Table of Contents will be the way to go.

Depth Perception

Giving dimension to your site (items near and far) with shadows and layers for a simple 3-dimentional look. Also look at your larger images having selective focus (blurring parts of an image can also decrease size). This means having something sharply in focus in one part of the image, and the rest of the image is blurry. Complicated 3-d imagery, Flash design and gradients are going out of style.

Simplicity

Work on creating simplicity and ease of use, focus on your mobile visitors having the same experience as your laptop and pc crowd. Having 2 different designs (one for mobile and one for all the rest) can be time consuming and expensive, so having one simplistic design is going to be the way to go. Or go with a separate mobile design that is a lite version of your site. Then add links to the full site so if they want to read more they can.

Fonts

Bigger title bars with reduced tracking and kerning (again for the mobile crowd), san serif fonts, crisp and clean fonts, mixing bold and light fonts in the same word of sentence, pressed letters, and most of all readability is the new trend. Larger text for your headlines and logos is the current rage for the desktop. Make sure that they are scaled down for your Mobile users.

Progressive loading

New content only, is loaded as you move through the site, letting the browser cache keep all the static information, without each page having to load separately. This is part of using cascading style sheets and templates instead of each page loading its own styles. Embedded and inline styles are unnecessary except in the most unusual circumstances. Frontpage is a relic a of a past era and it is time to re-design if you still have a Frontpage site!

QR Codes

These are images Certain Web Design QR code that smartphones can take a picture of and look the website up on the internet. They can also contain a message, your phone number which the phone can dial or your email address so that someone can send you a message.

Thumbnail Design

You know when you click on the magnifying glass in Google Results? That’s a thumbnail design and gives you an instant preview of the website page right in the google results. This makes pages with loads of ads less desirable to look at. It also shows a portion of text from somewhere on your page. So all your content must be relevant to the page subject. As more and more people searching Google figure out what this is for, it is going to make a difference what your design looks like. Clutter is out, open and easy on the eyes is in.

Business Cards

Simple designs with a slightly textured background and pressed letters. 3d and extravagant gradient usage is going out of style. Complicated logos are being replaced with simpler geometric design, leaving complicated artwork out, for a cleaner look.

What Is Yesterday's Look

Bokeh and vintage looks are leaving the scene although vintage is still in a lot of designs. Vector illustration is in a lot of designs also. I don’t see them being used nearly as often as in the past. Retro fonts are still being used, but in designs that are more modern looking. I think these may fade out also.

Some of the cool websites showcased in articles I’ve read used their footers as a place for contact me information, biography information and additional relevant links. They are also using their footers for the final decoration of their pages.

Homepage design is leaning towards summary boxes with details in a hyperlinked page. Web 2.0 is about useability (html web design and css web design), maybe Web 3.0 will be about mobile design and readability in smaller viewports.

Good web design will always be timeless.

Disclosure: Please read our privacy policy as it contain important information about using this site.  Product Ads or endorsements are paid advertisements which help control costs.