Skrevet af den

5 trends i webdesign 2013

Vil du gerne være på forkant med, hvilke virkemidler og elementer nyskabende webdesign i 2013 kommer til at bære præg af, så læs videre her. Vi spår bl.a., at parallax scrolling, sticky everything og oversized, skalerende baggrundsbilleder i år kommer til at skabe meget opmærksomhed online.

1. Parallax Scrolling

Parallax scrolling er en scrolling teknik, hvor visse elementer scroller i et andet tempo end andre, hvormed der skabes en illusion af dybde.

Teknikken har rødder tilbage i den traditionelle animation lige siden 1940’erne, blev populær i 1980’ernes arkadespil (tænk på baggrunden i Mario-spillene) og har i løbet af 2012 fået sit gennembrud online, som webdesignerens og -udviklerens nyeste våben mod det flade, 1-dimensionelle website.

Parallax scrolling på vondutch.com

Parallax scrolling på vondutch.com

Parallax scrolling kan både fungere glimrende som underspillet men øjenåbnende effekt, eller som et bærende element på websitet. Herunder kan du finde eksempler på begge typer.

Eksempler på parallax scrolling
contrastrebellion.com (Top og bund)
vondutch.com (hele sitet)
bagigia.com (hele sitet)
rowtothepole.com (Baggrund)
yebocreative.com (Baggrund)

2. Sticky Everything

På et website har man mulighed for at positionere elementer fast (fixed) i forhold til browseren, så elementet fastholder samme position, uanset om der scrolles eller ej. Denne teknisk har især været benyttet til at fastgøre topnavigationen øverst på websiden, så brugeren ikke behøver at scrolle hele vejen til toppen af siden, for at navigere.

Fixed topnavigation, som kan foldes ind og ud, på danskebank.dk

Fixed topnavigation, her foldet ud, på danskebank.dk

Benyttelsen af sticky elementer forventes i år at tage om sig og blive implementeret mere intelligent, så det ikke blot er navigationer, der sætter sig fast. Forskellige elementer vil kun være sticky i de områder, det giver mening, ligesom der vil vise sig forskellige elementer afhængig af om man scroller horisontalt eller vertikalt.

Ligeledes vil det blive muligt for brugeren at åbne, lukke eller flytte deres følgesvende, og dermed selv være med til at definere, hvordan websitet skal servicere dem.

Eksempler på sticky elementer
makeable.dk (Kig opad – kontaktbjælken øverst)
dropbox.com (log ind, browse dine filer og bemærk hvor mange elementer, der er sticky)
uponahill.com (Scrolling fanger forskellige elementer mens andre er sticky)

3. Retina Support

Med Apples nye Retina Displays, er der i skærmen på enheden klemt endnu flere pixels ind per tomme samme. Faktisk er der nu så mange pixels, at det menneskelige øje ifølge Apple ikke kan skelne de enkelte pixels længere. Med denne type af displays vil især grafik se endnu mere lækkert og levende ud – hvis det da er optimeret til den højere opløsning.

Tweet fra indehaver af ny Retina-skærm

Tweet fra indehaver af ny Retina-skærm

For webdesigneren og -udvikleren betyder dette, at der skal genereres to typer af grafik – ét til den normale opløsning og ét til Retina Displays, hvormed begge skærmtyper imødekommes.

Da grafik til Retina-optimeret grafik fylder mere, er en løsning først at loade det almindelige billede og efterfølgende udskifte dette med Retina-billedet, som loades efterfølgende. Dette kan man f.eks. bruge et script fra retinajs.com til at opnå.

4. Skeuomorphism

Et underligt ord for en designteknik hvor den fysiske verden ligger til grund for designet (og implementeringen) af et element.

Ligesom man kan udnytte metaforer og mentale modeller i interface- eller webdesign, så kan man med skeuomorphism skabe et interface, der faktisk er en klon af en fysisk genstand. Med skeuomorphism benytter du altså virkemidler, der først og fremmest har betydning for den originale, fysiske genstand.

Skeuomorphic design: 76 Synthesizer

Skeuomorphic design: 76 Synthesizer

Apple har længe benyttet skeuomorphism i deres applikationer – bl.a. har iCal i OSX læderlook som en rigtig kalender, ligesom iBooks er designet som en virkelig boghylde.

Skeuomorphism bliver især brugt i applikationsdesign og trenden vil i løbet af 2013 sprede sig endnu mere til hele eller dele af websites og webapplikationer.

Elsempler på skeuomorphism
cargocollective.com – 76-Synthesizer
dribble.com – Switch & slide
tutsplus.com – Realistiske Google Maps

5. Oversized (skalerende) baggrundsbilleder

Store, professionelle og velvalgte billeder får mere og mere indflydelse i webdesign. Ved at placere et billede som et baggrundselement, og lade det skalere til 100% i forhold til browseren kan det – når det fungerer – skabe en WOW-effekt, der er mere almindelige grafikelementer overlegen.

Skalerende baggrundsfilm på maerskfleet.com

Skalerende baggrundsfilm på maerskfleet.com

Udfordringen er at kombinere sådanne oversized billeder med de øvrige elementer, så websitet både slår benene væk under den brugeren, der dog sagtens kan navigere og orientere sig. Når det fungerer, er det meget effektivt.

Skalerende baggrundsbilleder er også et velkendt fænomen inden for responsive design, der selvfølgelig vil fortsætte sit indtog i 2013.

Eksempler på skalerende baggrundsbilleder
maerskfleet.com (skalerende baggrundsfilm)
whiteboard.is (one pager med store baggrundsbilleder)
sullivannyc.com (kombineret med parallax scrolling)