RocketTheme Magazine

The web design trends of yesteryears are nothing like what’s hip today. Remember when you’d land on a page and suddenly a man on the right hand side of the page greeted you and explained what the website was all about? Or do you recall the first site that automatically played music? It was like an instant party. Nowadays, these are annoyances people would rather not deal with at all. Animated GIFs, elaborate Flash videos, and unconventional navigation bars are all design elements that may scare away prospective buyers in droves.

One thing that is true of any post regarding “web design trends” is that there will be many web designers reading who’ll say, “I’ve been doing that for years!” If this is the case, then congratulations! You are ahead of the curve and perhaps one of the pioneers that inspired this article. I suppose this is just my little disclaimer. The intention of this article is not just to mention brand new technologies, but also to reflect upon commonalities among some of the best web design looks we see today (even if some of these ideas are not necessarily brand spanking new). Without further ado, let’s take a look.

Trend #1 - CSS3 & HTML5 Replace FLASH.

FLASH is a sensitive issue because there are still designers who absolutely love it. Even though the inner creative artist pines for bold and breathtaking FLASH presentations, it directly conflicts with usability more often than not. Sure, we’ve come up with ways to allow impatient web users to bypass the Flash animations, but what about mobile websites? FLASH does not play well on mobile browsers at all and since over a third of all users access websites from their Smartphones these days (a number which is growing, mind you), it’s just not a wise design decision.

HTML5 now works on Firefox 3.5 and higher, Chrome, Safari, Opera and Internet Explorer 8. This programming language is all about giving developers more flexibility, connecting data / drawings / videos / audio, and delivering designs faster. Without bulky plugins or third party software, you can now use stand-alone HTML to add whatever features you want, be it an interactive animation, game, video, or what have you.

HTML5 Site: http://www.bifter.co.uk/

CSS3 lets developers build content-rich web pages with lightweight code requirements. Your pages will be clean and fast-loading, yet you can still achieve many of the fancy visual effects you love. You can use multi-column layouts, border effects, gradients, drop shadows, transparent images, and multimedia on your pages without fear of compromising functionality.

CSS3 Website: http://www.chirp.twitter.com

Trend #2 - Websites Must Be Mobile-Ready, Without Looking Crummy.

Most people can agree this trend is still a work in progress. By the end of the year, 1 in 2 Americans will have a smartphone. At least a third of all smartphone users regularly use their mobile devices to surf websites for instant information. Since they are on-the-go, they are less patient to spend time looking at fancy design elements, but a mobile-ready website should be more than just taking bells and whistles away. You can use CSS3 to design your site to mobile dimensions.

In all honesty, an entire post could be written about 2011 trends in mobile web design, but here are a few things developers are doing to make attractive sites that are easily viewed on a smartphone:

Using Slider Galleries so users can see multiple pictures.

G-Shock

Using large photos as high-contrast backgrounds

Dolce & Gabbana

Multiple Browsing Options For Full Website, Social Media Sites, or Basic Site

Duda Fresh Foods

Two Column Navigation Menu

Slurpy Studios

Big Clickable Buttons, Rather Than Links For Easier Navigation

Marriott

Find more inspiring examples of great redesigned websites at the Mobile Awesomeness gallery.

Trend #3 - Interesting Typefaces

In past years, typography has been overlooked. After all, customizing typography used to be complicated and annoying. The best and brightest who wanted to go outside the standard web-safe fonts would do so using text images or Flash. This year, you can use TypeKit, Lettering.js, WOFF, Fonts.com Web Fonts and Google Web Fonts, to broaden your web font horizons. Designers are using big and bold fonts. A 60 point font can be incredibly effective if used in the right context. They’re mixing everything from sans serif and serif fonts to color and black & white fonts. More and more, unique fonts are being used as photos to call attention and illustrate a page.

Carsonified

Trend #4 - 3-D & Animated Websites Wow Audiences

Just as films are adding greater depth perception, so are websites. People want to absorb themselves into your world when they visit your site. It’s not particularly easy to create a complex 3-D or animated website just yet. That technology has yet to advance. Yet, there are still web designers who love to layer multiple images overtop one another and create a magical website world for appreciative viewers.

The Pixel Blog

The Bottom Line

Large photo backgrounds, hand-drawn images and minimalist styles are starting to dominate the web. It seems designers are looking for more charming, realistic, and out-of-the-box designs that are keeping pace with similar trends in cinematography, where audiences have come to expect CGI, 3-D, and photorealism. The good news is that, slowly but surely, new programming languages are emerging to enable this sort of transition, without sacrificing functionality and loading times. We don’t want to make the same mistake we made with FLASH, after all. The aesthetics we fall in love with today will be made possible tomorrow by ingenuity and conscientious back-end programming. Who says we can’t have it all in 2011 web design?

About the Author:

Rachel Alexander

Rachel Alexander

Rachel Alexander is the founder of a Christchurch web design agency called Alexanders Internet Marketing, an objective web design team that can not only design, build or refine web sites, but a team that has specialist expertise in marketing web sites to generate a consistent stream of leads. You can follow her on Google+, Twitter and Facebook.



Member Login: