Trender i dagens web-design

Trender i dagens web-design

0

Smarttelefonene representerer nå den største brukergruppen av moderne websider. Begreper som ”mobil først” og ”responsiv design” er bli viktigste merkelapper innen web- og interaksjonsdesign. Vi har sett litt på hvordan mobilen endrer internett, og søkt å beskrive noen sentrale trender innen dagens webdesign.

Alt kan rulles

Da Steve Jobs viste frem den første iPhonen i januar 2007, fokuserte han på en rekke forskjellige fingerbevegelser; Knipe, åpne, sveipe, dobbeltklikke, flerfinger-bevegelser osv. Mange trodde at dette ville prege all interaksjonsdesign fremover. Slik ble det ikke.
Isteden har websidene på mobile enheter i de siste to årene blitt til noe som mer kan beskrives som en uendelig rulling, og tankegangen overføres også til lesebrett og desktop. Man kan undre seg om det er brukernes latskap som formgir designutviklingen. Kanskje det er blitt for slitsomt å klikke?

Mer sannsynlig er det vel at klikking med én finger på en liten knapp på en liten skjerm er en lite effektiv navigasjonsmetode. Og vi vet også fra bruksundersøkelser at leserfrafallet er enormt dersom brukerne må gjøre et klikk for å lese mer. Rulling er blitt den selvfølgelige løsningen, og stablingen av informasjonselementene under hverandre har fått et eget begrep; en-side-design (one-page-templates). Enkelt fortalt betyr det at innholdet man tidligere måtte klikke seg frem til via knapper eller linker, nå automatisk plasseres nederst på en uendelige rulllbar webside. Den siste trenden her er å se for seg en nettside som et hjul, når man har nådd slutten på siden starter den automatisk på toppen igjen.

Screenshot uendelig rulling

Det finnes etterhvert mange eksempler på nettsider som utnytter uendelig rulling (infinite scrolling). Sosiale mediekanaler som twitter, pintrest og facebook er typiske eksempler på nettsider der du kan rulle gjennom den historiske flommen av innlegg i det uendelige. Men også andre bransjer utnytter tankegangen rundt "rullehjulet" i sitt design, Agence de Communication à Toulouse, Département Créatif, trekkes ofte frem som et godt eksempel på dette.

Et annet rullegrep som har fått mye oppmerksomhet de siste årene er Parallax rulling. I webdesign er dette et forsøk på å vise virkeligheten i ”stereo” (se samsyn/stereopsis – http://no.wikipedia.org/wiki/Samsyn).  I webdesign anvendes parallax rulling for å skape et inntrykk av dybde og rom uten å anvende 3D-modeller.

Løsningen har vært tilgjengelig en stund (2011), men det tok litt tid før løsningene begynte å prege nettsteder. Parallax rulling krever et betrakningspunkt, et stasjonært bakgrunnsbilde og en bevegelig forgrunn. Når brukeren ruller får nettsidens bakgrunn en svak bevegelse, mens forgrunnen beveger seg inn eller ut av syne med en annen hastighet/bevegelse enn bakgrunnen.

Det finnes mange gode eksempler på kreativ bruk av Parallax Scrolling. Rob Palmers artikkel The troublesome misconception of parallax in web design er et godt startpunkt for folk som vil forstå hva dette er. Som spennende eksempler på anvendelse av teknologien kan nettsidene under være verdt et besøk (klikk på bildene):

Screenshot Sony-site

Screenshot hotdot-site

Screenshot terra-digitalis-site

Flat design

Flat design er intet nytt. Men med Windows 8 og iOS 7 kom flat design tilbake som en nesten enerådende digital trend. Plutselig forsvant retroimitasjonene fra vår visuelle verden og mobilene våre fikk kjapt et snev av Bauhaus-skolen med et strengt informasjonsgrid. For de som kjenner litt til typografi, ble overgangen som å bytte fra Comic Sans til Akzidenz Grotesk...

Fra flere hold rettes det likevel kritikk mot denne minimalistiske stilen. Flere sentrale designere påpeker at flat design har svakheter sett fra et brukerperspektiv, knapper og interaktive elementer blir vanskelig å finne for brukerne når man ikke lengre benytter imitasjoner for å fremheve dem. Andre hevder at minimalismen er til hinder for originalitet og unikhet, at alt blir likt.

Med et historisk designperspektiv som utgangspunkt, er det likevel lite å frykte for kritikerne. Trender kommer og går, nye løsninger dukker opp og får stor utbredelse. Det eneste som er sikkert at de trendene som stadig vender tilbake og blir sentrale i det visuelle landskapet, har noen allmenngyldige kvaliteter. Minimalismen er utvilsomt en slik trend.

Det finnes etterhvert et uendelig antall gode eksempler på nye minimalistiske nettsider. Men nettsidene til det norske arkitektfirmaet Snøhetta, kan kanskje være et godt eksempel på minimalistisk utforming av nettsider?

Screenshot Snøhetta

Responsiv design

Med den stadig økende bruken av mobile enheter, strever de aller fleste nettsteder nå med overgangen til responsive design på nettstedet sitt. Responsiv design er uten sammenligning den mest populære løsningen for å skape gode brukeropplevelser på mobile enheter om dagen, siden løsningen sømløst tilpasser websidene til skjermstørrelsen. Dermed kan samme kilde benyttes mot alle skjermstørrelser, uten ekstra programmering. Begrepet mobil først brukes ofte for å forklare en designprosess der man starter med å definere nøkkeltjenestene i en informasjonsoppgave, og samtidig sørge for at dette innholdet får en tilpasset plass og en presentasjon på små skjermer. Større skjermer kan presentere mer informasjon. Designoppgaven er derfor å sørge for at hver plattform og skjermstørrelse utnyttes optimalt. 

Utfordringen knyttet til utvikling av responsive nettsider ligger i all hovedsak på kostnadssiden. Det kan fort bli kostbart å flytte mye gammel moro over på en ny designplattform. Det er også klart at for spesielt omfangsrike nettsteder, der mye informasjon må presenteres samtidig, vil designere slite med å finne optimale responsive designløsninger uten at infomasjonsomfanget reduseres eller forenkles. 

Til tross for utfordringene har responsiv design er i løpet av kort tid blitt den totalt dominerende designløsningen, ikke bare for nettsider, men også som et verktøy for utvikling av apper. HTML5 er ingen nødvendig del i responsiv design, men HTML5 har en verktøykasse som de fleste webdesignere sikler etter å ta i bruk. Slik nettlesertilbudet og bruksmønsteret ser ut i dag, er det vanskelig å forklare hvorfor vi skal fortsette å slite med å tilpasse nettsider til et avtagende antall Internett Explorer brukere som nekter å følge med på utviklingen.

Responsiv design er ikke bare en designløsning for små skjermer, det er også en løsning som hensyntar informasjonsoppgaven og tilpasser denne sømløst til brukerens infrastruktur, uansett skjermformat. Designutviklingen er riktignok blitt mer komplisert, og rammeverket som anvendes kan forbedres, men responsiv design er definitivt en fremtidsrettet designtrend.  

Screenshot Milimeterpress

Antall nettsider med responsiv design øker hurtig. Det du leser akkurat nå, er et eksempel på en responsiv nettside. Tar du tak i nedre høyre hjørne av nettleseren din, kan du skalere ned denne siden og se hvordan elementer og design tilpasser seg skjermstørrelsen. Legg for eksempel legge merke til plasseringen av innholdet i sidespalten og hvordan menyen endre utforming i små størrelser.

Typografisk mangfold

Da vi i Millimeterpress rundt årtusenskiftet utviklet nettstedet www.digi.no var typografi et ikke-tema. Sikre webfonter som Georgia, Verdana og Times var enerådende på nettet. Våre forsøk med å lage bilder av fonter og komplekse bakgrunner rant ut i sand. Nettsidene ble kort og godt for tunge for datidens internett basert på kobberkabler.

Men løsningen på det overnevnte problemet var allerede oppfunnet, og oppfinneren var norsk. I 1994 presenterte den norske informatikeren Håkon Wium Lie den første versjonen av CSS (Cascading Style Sheets, gjennomgående stilark). Med CCS 3 kom muligheten for nedlasting av fonter. Webdesignere hadde dermed tilgang til mange av de samme skriftsnittene som tidligere bare ble benyttet i trykksaker. Men det var fremdeles et sentralt problem; rettigheter.

Skriftsnitt, er som bilder og annen kunst, rettslig beskyttet. De kan ikke anvendes uten en lisens. Først i de aller siste årene er det kommet gode løsninger knyttet til rettigheter og bruk av fonter. Ikke minst har tjenester som TypeKit og Fonts.com, og gratisløsningen Googlefonts, bidratt til at internett etter hvert preges av unike fonter.

Fullskjermsider

En trend som gleder mange designere er fremveksten av bilder og videoer i fullskjermvisning, som en integrert del av et webdesign. Bruk av fullskjermbilder, illustrasjoner eller videoer gir utrolig effekt og er med på å skape nettsider som blir lagt merke til. Utfordringen er likevel å klare å kombinere det visuelle med det informative, finne god plassering av navigasjonselementer og informasjon.

Flere nettsteder har derfor tatt i ulike ”slideshow” som fullskjermbakgrunner, noe som bidrar til en bredere informasjonsflyt. Løsninger som kombinerer fullskjermbilder og gode rullevisninger, er en annen spennende løsning for mer informasjonsrike nettsider.  

Animasjoner

Bruken av HTML5 brer om seg. Med HTML5 åpnet det seg en helt ny verden for webdesignere.

Tidligere måtte vi benytte Flash og gif-animasjoner, eller kompliserte javascriptløsninger for å lage animasjoner. Dette var ofte tidkrevende løsninger og med kostnader deretter.  Integrert i HTML5 finnes det nå en hel rekke enkle koder for å gi ulikt innhold bevegelse. Mange vil kanskje hevde at det allerede er blitt altfor mye bevegelse og støy på mange nettsteder. Men slik er det ofte når ny teknologi tas i bruk. I starten blir det litt for mye av det gode. Uansett vil bevegelse og animering på sikt kunne bli nyttige verktøy for å skape god navigasjon og oppmerksomhet, kanskje særlig på informasjonstunge nettsider.

Både mer og mindre tekst

Som i alle andre etablerte informasjonskanaler skjer det stadig utvikling i fortellerform og presentasjonsstrategi. Parallelt med utviklingstrekk som ”mobil først” og ”uendelig rulling”, dukker det frem diametrale motsetninger. På innholdssiden finner vi mange nettsider nesten uten tekstlig informasjon, der bildene, vignetter og animasjoner har overtatt fortellerstemmen.

I den motsatte enden av skalaen finner vi ekstremt informasjonstunge nettsteder der bilder er erstattet av tekst og typografi. I denne enden av skalaen finner vi et siste moteord i web-verdenen; langlesing (longform).

God design med fokus på å skape gode leseropplevelser på skjerm, har lenge vært et underprioritert fokus for nettutviklere. Det er forståelig, papir er rett og slett en fantastisk plattform for å skape gode leseopplevelser. Men det dramatiske fallet i opplag og annonseinntekter har skapt et nytt klima for å søke å utvikle gode, men billigere, løsninger for langlesing.

Ikke minst har magasinbransjen hastverk med å finne frem til en god digital formidling av sitt innhold som kan gjenskape noe av den leseropplevelsen papirmagasinet kan tilby. Vi tror vi vil se mange ulike tilnærminger og løsninger for presentasjon av omfangsrikt innhold. Nederst i denne artikkelen finner dere eksempler på noen av våre favoritter.  

Share This Post: