Herinner je nog dat de notitie-app van iPhone eruitzag als een bladzijde uit een schoolschrift? Tegenwoordig ziet het UI design van de app er strak en modern uit, net als veel andere apps. Maar is zo’n simpel design eigenlijk wel beter?
De jaren 2000: Skeuomorfisme
Wat is skeuomorfisme?
Skeuomorfisme is een ontwerpstijl waarbij elementen in een digitaal product eruitzien als objecten uit de echte wereld. Denk bijvoorbeeld aan een notitie-app die eruitziet als een papieren notebook. Dit maakt het makkelijker voor gebruikers om meteen te begrijpen hoe ze een app of website kunnen gebruiken.
Wat zijn voorbeelden van skeuomorfisme?
Stel je voor dat je een echte prullenbak hebt waar je dingen in gooit die je niet meer nodig hebt, zoals papiertjes of lege verpakkingen. Het prullenbak-icoon op je computer werkt hetzelfde. Het is ontworpen om eruit te zien als een echte prullenbak, zodat je meteen weet dat je dingen die je niet meer wilt, zoals bestanden, daar naartoe kunt slepen of “weggooien”.
Steve Jobs, de oprichter van Apple, was een van de eerste voorstanders van skeuomorfisme. In oudere versies van de iBooks- en Newsstand-apps van Apple was er bijvoorbeeld een “Boekenkast”-weergave die eruitzag als een echte houten boekenkast met boeken en tijdschriften. Het ontwerp gebruikte een visuele vergelijking, zodat het leek op een echte bibliotheek of boekwinkel. Dit maakte het voor mensen gemakkelijk om te begrijpen dat ze in de app door boeken en tijdschriften konden bladeren, net zoals ze dat in een echte boekenkast zouden doen.
Hoe is skeuomorfisme ontstaan?
Skeuomorfisme is ontstaan in de jaren 80. Het is bedacht om technologie toegankelijker te maken voor mensen die nieuw zijn met digitale producten. Zo maakten vroege versies van Apple’s mobiele besturingssysteem, iOS, gebruik van skeuomorfisme. Knoppen zagen eruit als glanzende ‘echte’ knoppen en foto’s hadden witte randen die deden denken aan fysieke foto’s. Skeuomorfisme werd beschouwd als een van de redenen waarom de iPhone zo eenvoudig te gebruiken was voor mensen die nog nooit een touchscreen-smartphone hadden gebruikt.
Wat zijn de voor- en nadelen?
Voordelen:
- Het maakte de overgang naar digitale producten makkelijker door ze te laten lijken op objecten uit de echte wereld.
Nadelen:
- Soms werden er te veel texturen, schaduwen en kleurverlopen gebruikt om visuele elementen realistischer te maken, waardoor gebruikers afgeleid werden van hun daadwerkelijke taak.
- Skeuomorfisme zorgde voor drukke interfaces en langzamere laadtijden doordat er veel gedetailleerde texturen en schaduwen werden gebruikt.
Dankzij de drukke interfaces en langzame laadtijden van websites en apps, ontstond een decennium later flat design.
2012: Flat design
Wat is flat design?
Flat design is een ontwerpstijl die eenvoudige, 2D-elementen en felle kleuren gebruikt om een minimalistische uitstraling te creëren. Er wordt geen gebruik gemaakt van diepte, zoals schaduwen, verlopen en texturen. Ook wordt er gekozen voor eenvoudige typografie, dus meestal sans serif (lettertype zonder kleine lijn aan het uiteinde van letters). Er zit veel witruimte tussen de verschillende elementen op de pagina, zodat de website rustig oogt en overzichtelijk blijft. Het ontwerp is georganiseerd met behulp van een grid. Dit is een soort onzichtbaar raster dat helpt om de pagina netjes en logisch in te delen. Hierdoor kunnen gebruikers snel en eenvoudig kunnen vinden wat ze zoeken.
Wat is flat design 2.0?
Doordat er in flat design geen gebruik wordt gemaakt van diepte, kan het voor gebruikers lastig zijn om te zien welke elementen klikbaar zijn. Om dit op te lossen is “flat design 2.0” ontstaan. Dit is een verbeterde versie van flat design, waarbij eenvoudige elementen worden gecombineerd met effecten zoals schaduwen, kleurverlopen en texturen. Hierdoor wordt het voor gebruikers makkelijker om te begrijpen waarop ze kunnen klikken.
Wat zijn voorbeelden van flat design?
Bij Label Vier kiezen we vaak voor flat design. Dit betekent dat we werken met eenvoudige, 2D-elementen. Een voorbeeld van een website met flat design is die van Invest International. Het ontwerp daarvan is gemaakt door een bureau genaamd Minsk. Het laat goed zien hoe flat design zorgt voor een strakke, moderne uitstraling.
Op de website van Invest International hebben de kopjes een klein detail, namelijk “schreven” (de kleine lijn aan de uiteinden van letters). Dit voegt wat meer stijl toe aan het ontwerp, maar het blijft nog steeds strak en modern. Het ontwerp heeft veel witruimte tussen de verschillende elementen op de pagina en maakt gebruikt van een grid, wat zorgt voor een gestructureerde en overzichtelijke indeling.
Een ander voorbeeld is de website van Coen Hagedoorn, ontworpen door Beeldblinkers. Ook hier is gekozen voor eenvoudige, 2D-elementen, veel witruimte en een grid. Wat deze website bijzonder maakt, is de toevoeging van de schuine streep. Deze zie je op verschillende plekken op de website terugkomen, zoals in de navigatiebalk en bij de afbeeldingen. Dit geeft de website een dynamischer en speelser gevoel, terwijl het ontwerp verder strak en modern blijft.
Hoe is flat design ontstaan?
Flat design werd populair in de jaren 2010, vooral door de komst van Windows 8, Apple’s iOS 7 en Google’s Material Design. Het werd bedacht voor responsive design, wat betekent dat het ontwerp zich automatisch aanpast aan de grootte van je scherm. Doordat het ontwerp eenvoudig is, laadt de pagina snel en werkt het goed op allerlei apparaten.
Wat zijn de voor- en nadelen?
Voordelen:
- Flat design is geschikt voor responsive design, omdat het een snelle laadtijd heeft door eenvoudige elementen.
- Een eenvoudig ontwerp maakt het makkelijker om de informatie te verwerken.
- Het zorgt ervoor dat het ontwerp er consistent uitziet.
- Het ziet er modern uit en past bij de nieuwste ontwerpstijlen.
Nadelen:
- Als alle visuele elementen in het digitale product vlak zijn, kunnen gebruikers niet duidelijk zien waarop ze kunnen klikken.
Omdat flat design zo veel voordelen biedt, wordt het nog steeds veel gebruikt in moderne websites en apps.
Nu: Neumorfisme
Wat is neumorfisme?
Neumorfisme is een designtrend die elementen combineert van skeuomorfisme en flat design om digitale producten te creëren die bijna 3D lijken. Ontwerpen zien er realistischer uit door slim gebruik te maken van schaduwen en texturen. Hierdoor lijkt het alsof knoppen en andere onderdelen eruitzien alsof ze uit het scherm komen of erin worden gedrukt. Dit geeft je het gevoel alsof je de knoppen echt kunt aanraken.
Wat zijn voorbeelden van neumorfisme?
Veel ontwerpers experimenteren met neumorfisme voor apps die slimme apparaten in huis bedienen. Door gebruik te maken van zachte, ingedrukte vormen en schaduwen, zien knoppen en schakelaars eruit alsof ze echte fysieke objecten zijn.
Een ander voorbeeld waar neumorfisme goed werkt, is bij muziekspeler-apps. De knoppen om muziek af te spelen en de schuifregelaars worden zo ontworpen dat ze er realistisch uitzien, alsof je ze kunt aanraken of indrukken.
Hoe is neumorfisme ontstaan?
Het ontwerp van een bankapp door Oleksandr Plyuto wordt beschouwd als het eerste ontwerp van neumorfisme. Zijn ontwerp ging viraal op Dribbble, een website waar ontwerpers hun werk laten zien. Het idee achter zijn ontwerp was om te laten zien hoe skeuomorfisme eruit zou zien op moderne telefoons. Veel ontwerpers waren enthousiast en gingen deze stijl ook uitproberen.
Wat zijn de voor- en nadelen?
Voordelen:
- Het voegt diepte en textuur toe, waardoor gebruikers een tastbaar gevoel krijgen.
- Het biedt de mogelijkheid om je merk te onderscheiden met een unieke, moderne uitstraling.
Nadelen:
- Subtiele verlopen en zachte schaduwen kunnen het contrast verminderen, waardoor het voor gebruikers met visuele beperkingen lastiger wordt om elementen van elkaar te onderscheiden.
- Het ontwerp kan als een tijdelijke trend worden gezien, waardoor het minder toekomstbestendig is.
Wanneer moet je een designtrend volgen?
Ben je benieuwd of het verstandig is om mee te doen met een design trend voor jouw merk? Het volgen van een trend kan veel voordelen hebben, maar het is niet altijd de juiste keuze. Om je te helpen hebben we drie handige richtlijnen voor je: Budget, Brand en Behavior ー de 3 B’s.
Budget
Als je een digitaal product wilt herontwerpen, is het belangrijk om te overwegen of je het budget hebt om bij te blijven met de nieuwste trends. Wat nu populair is, kan over een paar jaar alweer verouderd zijn. Als je eens in de 6 tot 8 jaar een herontwerp doet, is het misschien niet de beste investering om mee te doen met de nieuwste trends. Maar als je het budget hebt om regelmatig je ontwerp aan te passen, kun je het risico nemen om de nieuwste trends te volgen.
Brand
Het kan voor jouw merk waardevol zijn om te laten zien dat je voorop loopt met de nieuwste trends. Dit geldt niet voor iedereen, zoals bijvoorbeeld overheidsinstellingen, banken of bedrijven in de financiële sector. In deze sectoren verwachten mensen betrouwbaarheid en stabiliteit. Als jouw merk niet profiteert van nieuwe trends, is het vaak beter om ze te vermijden. Maar als jouw klanten vernieuwing verwachten, kan het juist voordelig zijn om mee te gaan met de nieuwste trends.
Behavior
Doe alleen mee met trends als het de gebruiksvriendelijkheid van je digitaal product verbetert. Stel dat een trend draait om grote knoppen: hiermee help je je gebruikers door het makkelijker te maken om ergens op te klikken. Dat is een goed voorbeeld van een trend die echt iets toevoegt. Maar als een trend bijvoorbeeld zorgt voor tekst met weinig contrast, wordt het lastig om te lezen. Dit kan de leesbaarheid beïnvloeden, wat in strijd is met de WCAG-richtlijnen voor toegankelijkheid. Dat kan bezoekers frustreren en leiden tot klachten of minder goede resultaten. Kies daarom alleen trends die je gebruikers écht helpen en hun ervaring verbeteren.
Weet je niet zeker welke designtrend het beste bij jouw website of app past? Neem dan gerust contact met ons op voor persoonlijk advies! Wij denken graag met je mee.
