Future web design trends

Web design in 2008 still seems to be encompassed by the 'Web 2.0' moniker. But what's actually happening?

Layouts are improving, for one thing. Content is being presented far more clearly than ever before. As in the print world, it's through the use of rigid grids. Yes you read that right: grids are making a comeback. Mind you, if you've looked at any major redesigns recently, you'll know that already. Web design expert Craig Grannell says this trend represents the "increased use of the foundations of layout design" with the bonus of better typography too. "Grid-oriented pages tend to provide a pleasing vertical (and sometimes horizontal) rhythm that makes reading text and navigating a page more pleasurable and easier," he explains.

"An advantage of using a grid is that some questions are answered for you during the layout phase, regarding things like element dimensions." In other words, once you've made the decision to go with a grid, it's something that will dictate the size of your page elements, enabling you to sideline annoying debates about how big things should be.

"Grid-based design is nothing new. It's a trusted tool in any traditional graphic designers' tool kit, but from my experience it's never been a prominent trend in web design," adds Simon Taggart, senior web designer at Clickfire. He believes the increase in grid-based layouts is borne out of the want for friendlier websites: "With the never-ending quest to improve usability, [grids seem] to be making more of an appearance recently, especially on information-rich sites where delivering quantity of information to the viewer in the most usable fashion is highly important."

Grannell says there are some disadvantages to using the method though. "[A grid-based site] typically takes longer to create and fine-tune, and is therefore more expensive. It's tricky to create liquid grid-based layouts; it's at the extremes of 'technical' and 'design', thereby requiring a strong head for both; and it's also somewhat restrictive in that you need to ensure elements are of set vertical sizes (or multiples thereof), in order to retain adherence to the grid."

Grannell warns that if your grid uses relative values, some browsers won't render the page correctly as they have rounding errors. "A design that's off-grid by a pixel or two by the time you're part-way down the page will still look better than a design that doesn't use one at all."

Our second trend is all about giving your content space - another bonus of many modern grid designs. "Dare to give your content room to breathe," says Icon 22's Jan Ligaard. "Less is more and when it comes to cool and impactful design, going the minimalistic way is right for elevating a brand in today's cluttered web. Combine the right elements with simplicity and you'll end up with a website that has clear communication."

Ligaard says this trend goes hand in hand with a renewed focus on content and information presented on the web. "In contrast to other periods in the web age, where content has previously been named king, it is now the way it is communicated that is interesting from a design point of view."

However, web designers aren't going wholesale for the trend. "The overriding general trend at the moment is 'more of the same' with too many designers forcing irritating and dated '2.0' garbage into any design, regardless of relevance," rues Grannell.

Ligaard agrees. "Every time a new feature like a podcast, Flash, widgets and so on has been introduced to the market, [designers] tend to go a bit overboard in their excitement of it. Then the focus shifts from what we need to communicate in our message, to how we do it through this new feature. Suddenly everybody has to have a blog, but why?"

Eugene Reisch, senior art director at Digital Outlook adds that Web 2.0 actually means there's a lot more to think about implementing into a site. "Instead of a vast 1024x768 canvas where anything goes, we now squeeze our content into widgets, gadget, games, profiles, tools and applications that need to live on someone else's site," says Reisch.

Owen Gibson, head of design at Lateral believes there will now be a 'Web 2.0 aesthetic' backlash; a return to contextual design. "There are some obvious positive elements to the clichd Web 2.0 look - the use of space, bright colours and large text all make for more usable and understandable sites - but when this approach is used as default without proper consideration to content it can make for a poorly designed site."

However, Jason Holland, creative director at specialist digital agency Underwired thinks that designers should be resourceful with the increased creative use of screen real estate. "With the extra resolution being seen, what about the area outside the main page? Here we have a clear canvas available for great visuals and framing the content in a spectacular way."

Pictures have not traditionally played a large role in website design, acting as part of the content rather than being integral to the design. But this is changing - our third major design trend. We asked Amber Calo, senior manager of Creative Intelligence at Corbis why. "As we encounter more and more information online, we're experiencing information overload. We're craving simplicity more than ever and imagery has the ability, unlike text or graphics, to communicate complex ideas and concepts in a matter of seconds. It allows us to avoid wading through pages of information, instead providing the overall gist of a story or idea in one quick glance. Imagery helps us absorb information in a more efficient manner."

But images must be chosen carefully, says Ligaard. "Today many webpages are filled with stock photos and have lost most of their uniqueness - smiling faces of a heterogeneous group of people don't quite have the same impact that they did 24 months ago."

"[Designers should] think about the user experience and how they must compete with other sites on both a visual and emotional level," adds Calo. "Users will either be drawn to websites that easily and quickly communicate ideas and concepts, or those that provide an emotional component or connection. This is often achieved through visual media - be it still photography, video or other forms of interactive media."

And it's not just about photography either. Taggart believes vector art will become a more familiar element of web design. "I feel the use of vector art in web design will increase in popularity over the coming year as designers become more adventurous in the way they display their content," he says. "The use of big, high-impact backgrounds, headers or footers gives so much more of a visual impact compared to the usual white space websites we've become used to."

Speaking of footers, they're our fourth design trend to watch out for. Traditionally, footers don't exactly get the most attention when it comes to page design - but they're making a comeback. What we're seeing a lot more of are huge footers packed with plenty of information.

Many redesigned major sites boast elongated footers, the "often forgotten orphan of any webpage" according to Holland. "This strip across the bottom of sites is usually an afterthought, but footers can be so much more."

Taggart says the neglect has traditionally been with good intent. "Footers on websites have, for many years, been neglected with the commonly held belief - and rightly so - that the most important information resides at the top of the page."

Holland cites websites like www.yodiv.com and www.surfgarden.de that use footers to "emphasise the design after scrolling from the beauty of the header, or house functionality that would otherwise clutter the page".

Taggart adds that the trend for large footers stems from modern blog design, where a footer can be used to list useful links to recent posts, comments, affiliates or even other blogs. "Corporate applications can include contact and address details, or even a repetition of parts of the navigation for the user to quickly and easily make their way to important areas of the site.

"It's like having an unexpected tasty morsel of interestingly designed content for the user to digest as they reach the end of your article." Try it and see.

We're noticing a lot of sites designed with bigger typefaces, and many that utilise unusual fonts - our final major design trend. Jan Ligaard believes that this trend will stay for the next year, with serif fonts such as Georgia and Garamond leading the way. "This is a bit old-school. Big fonts are actually a blessing," says Ligaard. "They're clear, easy to view and have no tiny pixels to ruin the impression of a clear communication of your brand. Again, the basic principle is to separate a brand from the others, so not only will we start seeing fonts used in new ways to communicate the job of the brand, but we will also see new fonts that are not part of the normal web fonts crowd."

"In the last few years UK digital design has become much more aware of the importance of solid hierarchical typography," explains Gibson. "Typography is no longer a specialist subject, owned solely by those working in print but an important part of the development for all communication/interactive designers.

"Flash has always made possible the use of any font, and part of the Flash backlash is down to the unconstrained use of inappropriate fonts. Flash became a byword for visually heavy sites celebrating style over content."

It's only a matter of time before you can display any font on your webpage without losing any effectiveness in terms of search engine optimisation (SEO). "When this happens you no longer have to use Flash or images if you want something a bit extra on the font front," says Ligaard.

Gibson cites sIFR as a way in which Flash can be used sparingly and effectively. "It lets you use any licensed font on your websites by cleverly working with Flash, JavaScript and CSS," he explains. It's supported by all the main browsers except Opera. "You can now use any font for headlines, subheadings etc - the font degrades to live text (system fonts) if the Flash player is not installed. This makes the use of this technology fully accessible. The type is also editable." And that means it's useful for SEO.

CSS3 and font matching also help with this. CSS3 allows for the display of fonts on sites in a variety of ways. "To the CSS expert some of these methods have been available since CSS1, but the most interesting development in how CSS can handle fonts comes with CSS3 and the treatment of fonts like any other piece of data such as an image." The browser requests the font as specified in CSS and this is downloaded into your browser's cache. However, only Opera and Safari currently support font downloading, although the other major browsers will eventually follow suit.

But Gibson warns that the use of these methods won't always end in success. "The designer will be able to choose any font for the body copy for his website - and this could mean a plethora of badly used fonts and a new wave of poorly readable and understandable websites," he rues. "Let's hope the understanding of good hierarchical typography continues to spread amongst those considering designing for the screen." And of clean, crisp design for that matter. With a footer. And a nice big image.