In my past blog predicting web design trends for 2010 I covered the strong influence of print design techniques, keypress navigation, horizontal layouts, rich typography and aesthetically pleasing designs.

Web design today is developing rapidly, breaking the limits of conventional approaches and exploring the possibilites of upcoming technologies. Website designers are not only experimenting with new techniques and design approaches, but we are improving the quality of our designs in both technical and conceptual aspects.

Modern websites have flexibility, cross-browser compatibility and personalisation, but they are also becoming increasingly simple and intuitive. This is being done through the application of subtle usability enhancements, drawn either from the web itself or from offline interactive systems.

The web today is increasingly complex, while usage of the web is becoming increasingly simple.

The term is simple: usability.

I will enumerate new design approaches and techniques that are well-used today. Real-life buttons, great usability, subtle interactivity and the rapid adaptation of CSS3 that are applied to the web today.

Real-Life Buttons

One of the most striking features of modern web design and applications is that they provide rich user experiences. User interaction in such systems is becoming very straightforward and intuitive, even “native”.

I have seen more website designs in which design elements either imitate real-life imagery or hide the complexity of choice by letting users make more limited and simpler decisions.

Buttons are good example of the first advanced development. In web design today, buttons look and interact with users just like buttons in the real world. Buttons often look very realistic. They stand out, have vibrant colours and are very responsive. When the user hovers over or clicks on a button, they are often given visual feedback.

This approach doesn’t relate only to call-to-action buttons. It’s about using real-life imagery to convey the meaning and purpose of certain design elements in general. This approach reduces the complexity of user interaction.

Great Usability

Slideshows to showcase services and products is by nature a nice way to hide complexity because they reorganise plenty of information into a compact interactive area.

Slideshows are a good example of design solution that integrates both horizontal and vertical sliding navigation into one element. The layout is clean and provides a good overview of available features.

Pricing plan tables are also a good idea, because it helps users make a decision without having to inspect the whole table. Why display dozens of plans with dozens of features and not let the user make their own decision based on the most important feature of the application?

All pricing plans are summarized, so that users of the site wont have a difficult time to come up with a decision.

Single Log-In and Sign-Up is a great solution for reducing complexity for it combines multiple related features into one single feature.

For instance, instead of having two separate links and pages for logging in and signing up, you could offer users a single “Log in or sign up” button all at once.

The form would update via JavaScript after the user has selected a radio button. For this log-in form, notice that the “Submit” button says “Log in,” and there is a link to retrieve lost passwords. For the sign-up form, the label for the password field prompts users to “Choose a password” and “Sign up” and to accept the terms of service.

An alternative method would be to provide two input fields, labelled “Email” and “Password,” and then put a “Don’t have an account yet? Sign up!” link next to it. Both approaches would work fine for new and returning visitors.

Subtle Interactivity

Why subtle? Because it uses simple and almost traditional way to interact and woo-in would be regular visitors of a certain website.

They use navigation sprites, and simple Javascript popups, and fancy animation which they achieve without the aid of flash. They also use image navigation that disappears as users hover to a certain element.

Rapid adaptation of CSS3

With improving support of CSS3 features in major modern browsers, the design community seems very excited about the new advancements and out of the box possibilities. Everyone seems to be experimenting with CSS3; whether on RGBa transparency, advanced CSS3 selectors, CSS3 transforms, animations or other attributes.

The result is truly remarkable. We’re seeing many designs that are more beautiful, advanced, versatile and robust than before.

The most popular CSS3 features so far seem to be border-radius, animations, multiple backgrounds and box-shadow. This is understandable because these can easily be used to replace quirky earlier solutions that required workarounds and third-party tools to perform the task.

Also, @font-face is rapidly gaining popularity, but keep in mind that it is not a CSS3 feature because it was proposed for CSS2 and was luckily implemented in early versions of Internet Explorer. That's why it’s actually safe to use @font-face in designs today.

The drawback with CSS3 is that in order for the features to be easily applied to all major browsers, we will have to wait for Internet Explorer 8 to expire. And it remains to be seen how well the actual Internet Explorer 9 will support the new standard.

In the meantime, we will have to use CSS3 for modern browsers and integrate workarounds for IE, and there are plenty of them.

Web design progress has been astounding over the past months. Impossible designs are being implemented with pure CSS3, fuelled by the creative minds of the design community.

We may have entered another golden era of Web design, when crucial CSS techniques are being born, similar to that of 2003 to 2005 period when CSS Sprites and CSS Sliding Doors were developed. We have a couple of exciting creative years to look forward to and enhance our design capabilities and outside the box thinking.