Web Design in 2010

Posted

As a new year dawns on us we must partake in the tradition of looking to past as we build the future. The last few years have seen a lot of changes in web design and have set the stage for exciting new changes in 2010 and beyond. In this post I will outline some of the trends I expect to fade out and some things to look forward to in web design.

Huge Headers and Footers

Where is it going?

Large Headers

In the past year or two we have seen page headers expand to be product features, welcome blurbs, and sleek navigation bars. The 75 pixel header is a thing of the past and web designers have woken up to the idea of this area of the screen being a gold mine for page identity and product or service promotion. Headers are now exploding with beautiful graphics, giant logos, tag lines, and anything important really. This is all part of a competition to grab user attention and establish your web site as a credible one immediately.

Large Footers

Along the same lines footers have evolved, albeit at a slower pace, from foot notes and contact links to full fledged graphical elements of the page. Now we see twitter and facebook icons, contact graphics, as well as some pretty impressive artwork in some cases. While it may come as a surprise to some people the footer is a frequently viewed portion of a web page. Especially for viewers who are looking for contact information, job postings or social networks.

Photography

Where is it going?

Using large scale, professional photography is starting to make a real presence on the internet, as well it should by now. With more and more users being hooked up to high speed internet, days where we had to worry about how quickly pages are loading are becoming a thing of the past. Rich graphics and photography now flood pages allowing designers to promote products with some real visual influence. We are starting to see web pages resemble full page magazine ads.

Photography

Organic Page Layouts

Where is it going?

2009 saw a huge rise to web pages being built in columns and grids, establishing a clean and professional look for web pages. Unfortunately I am not a fan of this design trend, I think it is taking us away from the usability standards we have been working so hard to achieve. Finding content that you are searching for on an even grid is a frustrating process for users and doesn’t make any sense from a design or advertising perspective.

In 2010 we need to break away from grids and gutters dominating page layouts and make the process more organic! The trick is to find the balance between an organized page and a visual layout that is natural and appealing to a viewer. The Keypoint site is a great example. The important features of the site are clearly visible and typefaces adjust according to how drawn the user is to the page and how much information they want to find.

Organic Page Layout

Typography

Where is it going?

Typography is an age old tradition that has come back in full force. From Ford commercials to every body and their brothers website, the use of text to imply importance, motion, and convey emotion is once again proving to be an invaluable resource. Users can be a part of the digital narrative as they watch the text they read change size, shape, and color to build upon the very purpose of the content itself.

As we launch into the new year and an ever evolving era of design we can expect to see this type of text treatment explored to its fullest potential, although as users become accustomed to this trick it will become much less effective. A word of warning must go along with this trend. When using typography in a static setting, such as content on a web page content please do not rotate words around. This is a wonderful visual stimulant when used along with an audio track where multiple senses are used to follow the story but without the audio it simply makes things harder to read! Don’t make your website harder to read!

With that said here is a good example.

Good Typography

Leave a Reply

XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>