Webdesign-trender for 2009

Glimrende Smashing Magazine gjør en oppsummering av trender innen webdesign for 2009, sammen med skjermklipp av smakfulle eksempler:

Jeg gjør et klipp-og-lim-utvalg basert på egne preferanser.

Rich User Interfaces

Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. [...] many modern user interfaces display intuitive visual clues to communicate the status of a user’s interaction with the system. For instance, upon being clicked, event buttons often change their appearance from a “normal” to a “pressed” look, confirming and providing immediate feedback on the user’s interaction with the system. Aside from this, more and more services are now able to be personalized by the user: for us, it’s a clear sign that adaptive user interfaces are coming in 2009.

mobileme date selector rich UI example

Modal Boxes (Lightboxes)

Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website. Modal windows are always triggered by a user action (e.g. signing up or logging in) and appear on top of the main content, like a window in a regular desktop application. Modal windows are often presented in a very subtle way: they are often semi-transparent and have a “Close” button.

Grooveshark Lightbox example

One-Page Layouts

An alternative route that designers often take to impress their visitors is using so-called one-page layouts: layouts that use one single page to present the content of the website. It doesn’t necessarily mean that these designs are minimalistic (adhering to the principle “Less is more”).

taptaptap one-page layout example

Multi-Column Layouts

A design with multiple columns (3+ columns) is not necessarily a complex design. On the contrary, when designed properly, multi-column designs can be really helpful to visitors because they are given (hopefully) a better overview of the available navigation options and can more quickly find the information they are looking for.

31three three column example

More White Space Than Ever

White space dominates many designs and is used generously to improve the flow of articles and structure of websites.

In fact, we have never seen so much padding in content areas and navigation menus. Padding of 20 to 25 pixels in the wrapper and content area is becoming a rule of thumb, and even more padding is often considered acceptable. Hopefully, this development is here to stay.

werck whitespace example

Dynamic Tabs

One of the most popular trends in interactive design is having a tabbed area whose content can be changed dynamically. The idea behind dynamic tabs is that the content of all tabs is loaded when the page is loaded, but only one part of the content is displayed at a time

xpressionengine dynamictabs example

4 kommentarer så langt

  1. Ida sa torsdag, 22. januar 2009

    jeg håper dynamic tabs kommer til nettbanken min snart..

  2. Haakon Halvorsen sa torsdag, 22. januar 2009

    * Rich internet apps… er en no-brainer. Man har snakket om det i mange år, men nå kommer de for fullt. Sjekk fotoboka til fotoknudsen for eksempel ;)

    * Gjerne mer whitespace!

    * Lightbox er som regel fint når man har handlinger som brukeren må ta stilling til, men ikke erstatt alle pop-ups med lightbox please!

    * “dynamic tabs” er vel ikke det jeg håper kommer til å slå igjennom. Ser mer ut som at de har tatt nivå 2 navigasjonen og puttet den i bunnen (slik eksemplet er). Tror jeg må få flere eksempler før jeg synes det er en god ide.

    * one page layouts minner skremmende mye om en klassisk splash-screen - jeg er ikke så glad i det.

    Det var mine 5 cents.

  3. Ida sa fredag, 23. januar 2009

    Dynamic tabs, hvor digg det er, innser du ikke før de er helt statiske!

    I nettbanken min, Skandiabanken, så loader hele siden på nytt ved hver minste bittelille ubetydelige klikk. Utrolig irriterende.

  4. Lars K sa fredag, 23. januar 2009

    @Haakon, takk for kommentar, bilde-eksempelet fra dynamic tabs er ikke rettferdig, Ida gir et godt eksempel på hvor det kunne vært brukt hensiktsmessig hos Skandiabanken.

    Helt enig i kommentaren om Lightbox, det må ikke stoppe alle valgmulighetene for brukeren, modale dialogbokser er kraftig kommunikasjon :)

    Registrerte meg hos fotoknudsen for å sjekke fotoboka, snedig tjeneste - skulle bare ønske jeg kunne importert flickr-bildene mine :) Der brukes også Lightbox til å fortelle at jeg må huske å rotere bildene korrekt, hva med å ha det som del av oppgaveflyten med å bestille fotobok? Liker ikke å få masse beskjeder hvor jeg blir henvist til steder jeg må finne selv eller huske hvor er, jvf. http://tenketing.net/2009/01/14/gode-innganger-gir-sympatiske-nettsteder/

    Se flere eksempler hos Smashing Magazine på disse og flere!

Vil du kommentere?

E-postadressen din vil ikke bli vist til andre