Ontwikkeling in het design van websites

Responsive

Een website moet er op alle devices, smartphone, tablet, laptop en desktop computer goed uitzien. Om dat te bereiken maken wij responsive websites. Het uiterlijk van de website past zich aan, de website schaalt. Op een desktop bestaat het ontwerp bijvoorbeeld uit vier kolommen, op een tablet zijn dat er drie en op een smartphone één.

Afbeeldingen en teksten hoeven maar op één plaats te worden ingevoerd. Er zijn, tenzij er speciale redenen voor zijn, geen verschillende varianten. Eén website, geschikt voor alle schermbreedtes. Als de site er goed uitziet op de telefoon, is een app vaak ook niet nodig. Actuele informatie kan juist via de website vaak het beste worden aangeboden.

Wit

Een aantal ontwerpzaken waren vroeger taboe. Nu juist niet meer. Bijvoorbeeld scrollen. Vroeger wilde men dat alle relevante informatie in één oogopslag zichtbaar was. Op smartphones gaat scrollen zo makkelijk en het scherm is zo klein, dat dit niet meer geldt. Long scroll is een trend.

Typografisch is er steeds meer mogelijk. Moest vroeger gebruik gemaakt worden van fonts die de gebruiker op zijn computer had staan, nu kan gebruik gemaakt worden van extern ingeladen fonts. Dat maakt typografisch veel meer mogelijk. De gebruikte letters zijn ook groter, met een grotere regelafstand en meer witruimte.

Was wit eerst taboe, misschien omdat een website dan teveel op een tijdschrift leek, nu is het gebruikelijk veel witruimte te gebruiken. Meer accent op een knop? In plaats van groter, kan er ook meer ruimte omheen.

Foto's en flat design

Foto’s zijn steeds belangrijker geworden. De grotere bandbreedte enerzijds en betere compressie anderzijds, maakt dat grote foto’s het beeld kunnen verfraaien. Een grote openingsfoto (een “hero”) is een veelgebruikt onderdeel van homepages.

In de eerste iPhones moesten de app-icoontjes zoveel mogelijk lijken op de “echte” wereld. iBooks was een boekenkast. Sinds Apple dit gewijzigd heeft en overgegaan is op flat design: eenvoud, geen 3d, geen schaduw, geen opstaande randjes, zie je dit ook overal in het design van websites terugkomen. Google heeft diepte en schaduwen met het concept “material design” weer teruggebracht. Niet om de “echte” wereld te imiteren, het blijft minimalistisch design, maar om de gebruiker een duidelijker gevoel te geven wat belangrijk is, waar hij kan klikken en wat er gebeurt.

Minimalisme

Minimalisme is sowieso de trend. Transparante knoppen met een dun lijntje die over een foto heen staan, “ghost buttons”, lijken voor net zoveel conversie te zorgen als de grote, knalkleurige “klik hier”-buttons van een aantal jaar geleden.

De menu’s reageren niet meer op mouseover, hier kunnen de smartphone en tablet moeilijk mee overweg, maar op mouseclick. Je krijgt geen submenu’s uitgerold als je er met je muis overheen gaat, maar er gebeurd pas iets als je klikt. Het handige hamburgermenu (drie liggende streepjes) voor de telefoon zie je ook steeds meer in minimalistisch design in websites voor de desktop.

Tenslotte is de indeling van een pagina in blokjes, card layout, afgeleid van Pinterest, een handige manier om een grote hoeveelheid inhoud overzichtelijk te presenteren.

Alle trends samenvoegend in één zin zou je kunnen zeggen: websites zijn grafisch volwassen geworden.