Web design trends for 2009

Software advances are broadening the possibilities for online designers – what lies ahead this year and beyond?

Online design is one of the most flexible, exciting and variable areas of the design sphere. Almost as soon as new technology appears, designers will adopt it for commercial and personal projects, creating more elegant rich-media experiences and dynamic marketing messages.

Last year saw rapid development in web-design technology, particularly with the evolution (and greater adoption) of the Adobe Flash and Microsoft Silverlight delivery platforms, but also with the increasing sophistication of W3C standards.

For example, the Cascading Stylesheets (CSS) 3 specification contains standard rules for creating far more stylized content – giving designers freedom to experiment with richer layouts that can be faithfully rendered by all up-to-date browsers.

That other lingua franca of browsers, JavaScript, has been revitalized by the rise of methodologies such as Ajax, which deliver interactive applications to online users in the form of webpages.

This type of design – ideal not only for social networking purposes but also for a more personalized user experience – is set to grow further this year.

“I think designers need to consider and be aware of the possibilities Ajax and JavaScript offer when designing a rich HTML page with lots of functionality,” says Tom Dougherty, digital art director at London-based digital creative agency Delete, www.deletelondon.com.

“This applies mainly to designers working on social networks, e-commerce platforms or online applications. Advances in web development mean it’s now possible to offer users customizable interfaces, which presents a greater challenge to interface designers.”

Simon Parbutt, creative director at webdesign agency Splendid, www.howsplendid.com, agrees. “We’ll see more personalization, allowing users to consume content on their own terms,” he says. “Also, social shopping and collaboration – where multiple users complete tasks like organizing a holiday or preparing a presentation.”

Parbutt also predicts a rise in the use of rich interactive maps, as well as visual search results, connected devices, useful data visualization and geo-tagging, where services are promoted according to their proximity to the user’s current location.

Most designers agree that Photoshop will still occupy a central position in their toolset. However some, like Jonathan Lovatt-Young, creative director at digital agency Fortune Cookie, www.fortunecookie.co.uk, aren’t bound to Adobe’s product range.

“CS4 will take some time to get up to speed with all the tweaks, but the main technology change for designers is [Microsoft’s] Silverlight,” he says. “All designers have the usual Adobe interface tools engrained in their minds, but Silverlight is completely new way of working.”

Jason Anderson, technical director at agency AllofUs www.allofus.com, agrees. “The Microsoft Expression suite will undoubtedly affect the way that designers work,” he says. “Allowing creatives and technologists to work together, at the same time, on the same digital assets, opens up the possibility of extending the ‘agile’ way of working to an entire studio, rather than being confined to developers.”

Agile web development is a modular method of project management, in which small chunks of the project are completed and passed to the client for feedback and approval.

Darrell Wilkins, managing director of interactive consultancy Specialmoves, www.specialmoves.com, also believes that 2009 will see a continued move towards agile development, which will also be offered by Adobe with its product FlashCatalyst (previously known as Thermo).

“Working out how to integrate this with client servicing is going to be interesting,” he says. “A pure agile workflow is much more suited to software development than web development, but some of the principles – such as frequent inspection and adaptation, close team-work and self-organization – are extremely useful.”

Adobe’s Creative Suite 4 Web Premium includes a version of Dreamweaver that supports the Spry Framework 1.6.1 for Ajax, as well as several other Ajax-related features that are bound to affect site design in the coming year.

Flash has also changed dramatically, with CS4 now supporting an object-oriented animation model that will allow a complete paradigm shift in Flash sites.

Flash Player 10 now offers a speed boost and advanced 3D, audio and text controls, as well as custom filters and effects similar to those found in After Effects.

“Once all the bugs are worked out, Flash 10 will be widely adopted,” says Jeff Lin, founder and creative director of Hybrid Studio, www.hybridstudio.com, enthusiastically. “It handles performance so much better. I think you’ll see talented coders digging into AS3 and bringing forth Flash 10’s capabilities. ”

Flash to the future

Another major change in Flash and CS4 is the shift towards greater use of 3D, while Flash-related technologies such as Papervision3D, Away3D and Unity3D are likely to be deployed on the Internet in ever-greater quantities.

“Unity3D is going to be big in 2009,” says Darrell Wilkins. “The ability to do high-quality realtime 3D in the browser and on the iPhone is huge. We’ve already got a couple of projects commissioned and expect quite a few more in the next 12 months.”

Thanks to the proliferation of widescreen displays, broadband and CSS3-capable browsers, the use of high-resolution, full-screen graphics is set to continue as a big trend.

“I believe we’ll see a return to stretchy, fluid layouts that work from 1024 up to 1600 widths,” says Jonathan Lovatt-Young. “With the new WCAG 2 guidelines, I hope navigation remains accessible rather than animated or Flash-based.”

Simon Parbutt anticipates a trend for marketing or promotional sites going fullscreen, with no browser chrome to maximize audiovisual impact, while for functional sites, he feels there will be less clutter and a greater focus on the job in hand.

“The great sites produced next year will be the ones that manage to combine these contrasting approaches,” says Parbutt. “Providing the user with a useful service or meaningful experience within an immersive, entertaining environment.”

Jeff Lin also sees fullscreen usage on the rise, especially with entertainment-based sites. “This will trickle down to sites not normally expected to use a fullscreen format,” he says.

“Navigation will continue to evolve, with a trend in two directions: a video-game style of navigation and a simplified hidden navigation panel activated on rollover. This will happen slowly and through a few sites that influence the majority of web designers.”

Lin is also pushing for more mousewheel integration and shortcut keystrokes. “Creating more intuitive methods of navigation through the tools we take for granted will be something else that we’ll begin to experience,” he adds.

Text-based information has always been a stalwart of the Internet, and this is another area that’s likely to be revitalized in the coming year. This is not only thanks to the explosion of blogging, but also because CSS3 allows designers to embed rich typographical effects approaching the level of those possible in traditional print design.

Revert to type

“Designers seem to be becoming more aware of things the web does well, and using its limitations as strengths,” says Matt Barnes, art director at AllofUs.

“This can be seen in a more refined use of typography in HTML text, which has aligned web design even more closely to exciting developments in print and information design.

"In blogs as well, we are seeing more and more bookish references. The old argument of full Flash sites being able to deliver an experience that HTML cannot has very nearly worn thin.”

Barnes also sees typographic composition playing a more important role in website navigation, layouts and screen real-estate. “Web 2.0 has meant that we now have massive swathes of information kicking around out there,” he says.

“It’s the designer’s job to organize and interpret this immense amount of information, so good design and, more specifically, good typography is paramount.

"Usability and accessibility are also being taken more seriously by more designers, as well as end-users. The speed of accessing information is becoming more key as we are getting what we want quickly, and are less impressed with whistles and bells.”

Delete’s Tom Dougherty agrees, and calls for a renewed attention to legibility. “For a while it was trendy to find the most abstract or futuristic typeface to incorporate into a webpage design, especially in Flash sites.

"However as the need for more accessible W3Ccompliant websites increases, there has been a return to the more conventional serif and sans-serif fonts.”

Dougherty would also like to see designers producing cleaner interface designs with an emphasis on space. “Especially using vertical space on a page and not being afraid of the browser scroll bar – people are fine with it!” he adds.

“The interface should always be designed around the content it is housing. Priority needs to be given to the images, video and copy and not to big glossy buttons or overpowering page backgrounds.

"An interface should be designed as a vehicle to allow the user to move through content and find their way on a site, not as a piece of artwork that overpowers everything on the screen.”

Get on the grid

Dougherty says we’ll continue to see more grid-structured page layouts with clearly defined areas for type, imagery, video, navigation and so on.

“This all helps the user to subconsciously understand the logic of the page and results in a more pleasurable consumption of information and clearer communication,” he says.

“It also means designers are able to follow rules they have set when designing with templates.”

Online design, for both marketing and entertainment, will also benefit from advances in video technology. “A shift to widescreen, for example on YouTube, and increases in home broadband speeds will allow more and more embedded video,” says Jonathan Lovatt-Young.

“The success of the BBC iPlayer has shown just how successful video on-demand is and how people are changing their viewing habits.”

Simon Parbutt feels we’ll see more user interrogation of the video itself. “Navigating between chapter markers, hotspots on people or things linking to content or advertising and overlaying the video stream with related content,” are some tools he predicts.

“I think we’ll also see more social recommendation around video content. Businesses like Quick.tv are developing exciting ideas in this space,” he continues.

Matt Barnes predicts video will be increasingly used for providing instructions. “For a quick way to explain or demonstrate something, a posted video is perfect,” he says.

“Also, its potential as a means of self-expression is obvious. Video is popping up in just about every aspect of online life – where there used to be an image to illustrate, explain, narrate or simply convey emotion, now it is often moving image.

"You should expect fullstream video streaming to move closer to broadcast quality – as we’re already beginning to see with the Sky Player simulcast service we’ve just designed.”

New patterns of viewing will affect the way designers create webpages. The long-awaited convergence of media platforms seems to be well underway, with the Internet (and increasingly Flash content) now accessible from games consoles and Blu-ray players, as well as handheld devices, smartphones and other mobile technology.

Mobile authoring has been around for a while, but thanks in part to the iPhone, it’s increasingly likely that clients will demand a flexible design that encompasses all formats.

Jonathan Lovatt-Young stresses the need for experience architectures to be improved, so that user journeys are completed more quickly on such devices. “We’ll see sites that have redirected or specific pages for the iPhone,” he predicts.

“Interaction designers will need to get their heads around a range of experiences that use web technology, but are not necessarily websites,” suggests Simon Parbutt.

“Designing for devices requires an ability to take a step back and see the overall context of the user’s desire. Do you need to be in front of your PC to search for something? Why not take a picture to start a finding experience? Visual designers will start to develop fluid, component-based, and application-like systems, as opposed to rigid web templates.”

“Don’t forget about the human experience,” recommends Jeff Lin. “There are more tools to learn, more techniques to use, more things to account for – but at the end of the day, it still comes down to the human experience. When the landscape gets complicated, aim for intuitive simplicity.”

Another trend is to leapfrog prototyping in favour of live production, as a means of driving innovation. “Products and services must go live as soon as possible,” says Simon Parbutt.

“No point having great ideas if they’re stuck in a PowerPoint deck.” “It doesn’t take a huge budget to shoot video anymore,” adds Jeff Lin. “More and more these days, complex ideas can be realized inexpensively. Let the great ideas flow.”

Web trend: fullscreen designs
According to Jeff Lin, this Hybrid Studio Flash site for the film The Incredible Hulk illustrates three trends for 2009. “It’s an example of ‘designing bigger’ and taking into account large and small resolutions,” he says. “It has a fullscreen mode, and the scroller reacts to the mouse scrollwheel.”

Web trend: engage the user
Darrell Wilkins of Specialmoves thinks we’ll see further movement away from interruption advertising, and more focus on user engagement. “This will require a move back to first principles of interaction design,” he says. “What’s in it for the user? What is the benefit for them? How are they best served? Take the Room Planner, which Specialmoves created for MyDeco. It’s a fully featured Flash application that provides real, tangible user benefit, while still driving the business goals of selling more furniture.”

Web trend: 3D in Flash
Many designers will be moving into the third dimension in 2009, taking advantage of 3D support in Flash. Expect to see more Flash sites integrating 3D components using dedicated tools for this purpose. For example, Agency Republic used Papervision3D and the PureMVC framework to create the MySackboy Generator, part of the LittleBigPlanet game site.

Web trend: better user interfaces
The work by AllofUs on the Sky Player site includes the design and development of the user experience and Sky Player user interface, involving detailed information architecture design, on-screen visual identity development, user interface behaviour definition and user evaluation. The new Live TV service offers On Demand content, available using Silverlight 2.

Web trend: high-res images
Travel brand Kuoni’s redesigned wesite, by Fortune Cookie, is dominated by high-resolution photography. “It allows users to drill into journeys based on what they need – by destination, type, style or time of year,” explains Jonathan Lovatt-Young. “Removing all the teasers, thumbnails and other page elements allowed the design to become the most important element. We used a scientific validation approach, testing the new design for emotional engagement. Eye tracking allowed us to score the involvement and affectivity of design – we see these helpful tools as pushing forward the effectiveness of design and removing the subjectivity.”

Web trend: video content
“This online graphic novel we created for Max Payne illustrates the integrated use of video and After Effects as crucial techniques for website experiences,” says Hybrid Studio’s Jeff Lin. “It hones in on depth, which is hot with animation and typography. It’s also a wholly unique piece we concepted, wrote, and put together from scratch.”

How not to do it

We polled some designers to see what site elements they hope get left behind in 2008. For example, Simon Parbutt, Creative Director at Splendid, wants to consign “Flashterbation, poor typography, Comic Sans and page curls” to the design dustbin.

Darrell Wilkins of Special Moves gives his vote to abolishing what he refers to as ‘mediocracy’. “There’s still far too much ordinary work being done and passed off as ‘great’,” he says.

“Most of it isn’t. The noise level is still too high, with agencies’ PR departments talking up beautiful – but usually pointless – projects that don’t have any end-user benefit. I hope there’s more accountability in 2009.”

“I hope the gloss and reflections start to die a death,” says Fortune Cookie’s Jonathan Lovatt-Young. “If everyone continues to add reflections to every element, as good as they can sometimes can look, it will be increasingly difficult to differentiate brands by means other than the logotype.”

Tom Dougherty, digital art director at Delete, hopes to see an end to Flash-heavy sites that force the user to wait for five minutes watching a bar before nothing much happens and then another pre-loader begins.

“It’s a pet hate of ours,” he says, going on to list other common flaws, including: “Sites which lack a sense of direction or narrative – this applies mainly to the more experimental sites; a misuse of a 3D platform on Flash sites and pointless use of downloaded icon sets that are badly integrated into website interfaces.”

Finally, Hybrid Studio’s Jeff Lin says there’s no need to share everything – with particular reference to blog sites. “Only certain content deserves to be shared,” he says. “Once oversaturated, it has the same effect as an online ad – you know it’s there, but you don’t pay attention.”

Elsewhere on IDG sites

Read Next...