01. UI
kleurtheorie
Het kleurenpallet is een belangrijk aspect binnen een digitaal ontwerp. Voor sommige ontwerpers wordt kleur beschouwd als een esthetische keuze, maar het is in feite een belangrijk onderdeel van de psychologische impact van een ontwerp op gebruikers, en dus ook op UX.
Een goed doordacht kleurenpalet kan een ontwerp van "goed" naar "geweldig" verheffen, terwijl een slecht kleurenpalet afbreuk kan doen aan de algehele ervaring van een gebruiker. Het kan zelfs het vermogen van een gebruiker om een site of app te gebruiken kan belemmeren, denk maar aan kleurenblinden.
kleurenpsychologie
De psychologische effecten die kleur op gebruikers kan hebben, is een vaak complex en subjectief. De emotionele impact van kleuren mag dus niet over het hoofd worden gezien. En hoewel sommige kleuren "universeel" zijn in UX-ontwerp (zoals zwart, wit en grijs, waarvan er minstens één wordt gebruikt in vrijwel elk goed ontwerp dat er is), kunnen de kleuren waarmee ze worden gecombineerd een enorme impact hebben op perceptie van een gebruiker.
Er kan veel over gezegd en geschreven worden, maar misschien kan het best uitgelegd worden aan de hand van voorbeelden.
De manier waarop kleur wordt gebruikt kan een sterke invloed hebben op hoe het wordt waargenomen. Blauw dat als primaire kleur wordt gebruikt in een modern, minimalistisch ontwerp, zal bijvoorbeeld een heel andere uitstraling hebben dan hetzelfde blauw dat wordt gebruikt als accentkleur in een meer complex bedrijfsontwerp.
kleuren & branding
Merken moeten een belangrijke rol spelen bij het creëren van een kleurenpalet. Industrienormen zijn ook van cruciaal belang én de kleuren die al door concurrenten worden gebruikt. Het gebruik van een kleurenpalet dat bijna identiek is aan de concurrentie van een merk is een geweldige manier om verwarring te creëren en ervoor te zorgen dat het merk niet opvalt.
De eerste stap naar het creëren van een kleurenpalet is om de betekenis van de verschillende kleuren te begrijpen en hoe ze lichter/helderder/donkerder/doffer/etc. kan hen beïnvloeden. Hier is een basisoverzicht van wat verschillende kleuren betekenen:
Rood is de kleur van gevaar en passie, maar ook van opwinding. Het is een zeer sterke kleur en kan sterke reacties bij mensen oproepen. Door het lichter te maken tot roze wordt het vrouwelijker en romantischer, terwijl het donkerder maken van de tint tot kastanjebruin het ingetogener en traditioneler maakt.
Oranje is een zeer creatieve kleur die ook wordt geassocieerd met avontuur en jeugd, dus ook erg energiek. Door de sterke binding van oranje met de jaren 70-stijl kan het ook een retro-gevoel oproepen.
Geel wordt geassocieerd met geluk, optimisme en is opgewekt. Het is populair in ontwerpen voor zowel kinderen als volwassenen. Meer pasteltinten worden vaak gebruikt als een genderneutrale babykleur, terwijl helderder geel populair is in creatieve ontwerpen. Donkerdere tinten geel worden goud, wat wordt geassocieerd met rijkdom en succes.
Groen heeft verschillende verenigingen. Aan de ene kant roept het gevoelens van rijkdom en traditie op (met name donkere tinten), terwijl het aan de andere kant sterk wordt geassocieerd met milieubewustzijn en de natuur. Kalkgroenten worden vaak geassocieerd met vernieuwing en groei.
Blauw wordt meestal geassocieerd met loyaliteit en vertrouwen. Helderdere blues kan worden geassocieerd met communicatie, terwijl saaiere en donkerdere blues kan worden geassocieerd met verdriet en depressie. Blauw is de meest geliefde kleur ter wereld, wat misschien verklaart waarom zoveel bedrijven kiezen voor blauwe tinten voor hun branding.
Paars is een andere tint met verschillende betekenissen. Het wordt al lang geassocieerd met royalty's en rijkdom (aangezien paarse kleurstof zeldzaam was in veel oude beschavingen, was het gereserveerd voor royalty's). Maar het wordt ook geassocieerd met mysterie en spiritualiteit. Paars kan ook creativiteit oproepen.
Zwart staat voor verfijning en luxe. Het kan echter ook worden gekoppeld aan verdriet en negativiteit. Afhankelijk van de andere UX-kleuren die naast zwart worden gebruikt, kan het modern of traditioneel, formeel of casual aanvoelen.
Wit is gebonden aan zuiverheid, onschuld en positiviteit. Wit is ook erg populair in minimalistische ontwerpen, vanwege zijn neutraliteit en eenvoud. Net als zwart neemt wit gemakkelijk de kenmerken aan van andere kleuren waarmee het wordt gebruikt.
Grijs heeft verschillende betekenissen, afhankelijk van de context. Het kan conservatief en verfijnd zijn of groezelig en saai. Het kan emotieloos of humeurig zijn. Het kan ook worden geassocieerd met verdriet en verdriet.
Bruin (wat eigenlijk een donkere tint oranje is) wordt geassocieerd met nuchter en geaard zijn. Het wordt ook geassocieerd met de natuur en zelfs gezelligheid. En het kan natuurlijk te maken hebben met vies of groezelig zijn.
Het kennen van deze basiskleuren en hun betekenissen geeft ontwerpers een solide basis om kleurenpaletten voor elk merk of product te bouwen.
typografie
Met 16,8 miljoen kleuren en 100.000 verschillende lettertypen op het web zijn de mogelijkheden vrijwel onbeperkt. Qua typografie volgen nu een aantal 'best practices' voor webtypografie om duidelijke communicatie mogelijk te maken. Door het maken van de juiste keuze beoog je een mooie en vooral comfortabele leeservaring.
font keuze
Elke zin die op een scherm gelezen wordt, gebruikt een lettertype en zorgt zo voor een bepaalde stemming en uiterlijk. Hieronder staat een lijst met de namen van de beste sans-serif webfonts op dit moment.
lettergrootte
Nog niet zo lang geleden stond het web vol met piepkleine lettertypen. Onderzoek heeft ondertussen meermaals aangetoond dat een grote lettergrootte sterkere gevoelens oproept en de inhoud beter overbrengt.
Maar hoe bepaal je de juiste lettergrootte? Begin met de hoofdtekst (body) en de font-size naar een lettergrootte tussen 15-25px. Vroeger werd veelal een te kleine lettergrootte gebruikt, meestal standaard 12px. Een kleine lettergrootte belast de ogen en leest minder vlot. Vandaag gaat de voorkeur uit naar een standaard fontgrootte van 16px.
html {
font-size: 100%; // in de meeste browsers staat dit standaard op 16 pixels
@media (min-width: 768px) {
font-size: 112.5%; // = in de meeste browsers 18 pixels}
}
titels
Titels dienen als wegwijzers voor lezers zodat ze snel de algemene structuur van de inhoud kunnen verwerken. Indien het kan, beperk je dan tot twee niveaus (h1 & h2).
Zorg hierbij dat de grootte van de hoofdtitel (h1) ongeveer 180-200% van de hoofdtekst is. Een ondertitel (h2) zou qua grootte 130-150% van de hoofdtekst zijn.
regelafstand
Soms is een tekst moeilijk te lezen, enkel en alleen omdat er een gebrek aan witruimte is. Om een tekstblok meer leesbaar te maken, wordt de regelafstand (line-spacing) ingesteld op 120–145% van de puntgrootte.
space-between
Voeg ruimte tussen letters toe (tekenspatiëring), zodat de tekst er ruimer uit ziet. Er komt dus meer ruimte tussen de tekens in een groep tekst. Hierbij twee tips:
gebruik minder spatiëring bij grotere lettergroottes
gebruik meer ruimte bij titels
witruimte
De afstand tussen de koptekst (h1 tot h6) en de hoofdtekst moet open en licht aanvoelen. Deze ruimte beïnvloedt de manier waarop de aandacht naar de inhoud gaat. Wanneer de ruimte tussen headers en de body wordt ingesteld, kan dit helpen:
witruimte tussen h1 en tekst: 30px
witruimte tussen h2 en tekst: 20px
witruimte tussen h3 en tekst: 15px
aantal woorden per regel
Om de leesbaarheid te optimaliseren wordt de breedte van een tekstblok beperkt. De optimale lengte van een regel voor een pagina met één kolom is 45-90 tekens. De ideale breedte van een tekstblok is 66 karakters.
Indien er meer dan 90 tekens per regel gebruikt worden, zal je als lezer overweldigd wordt. De tekst wordt hierdoor minder (of zelfs niet) gelezen. Dit komt omdat de aandacht en focus psychologisch gaat naar het begin van elke nieuwe regel. De focus neemt echter langzaam af als de woorden verderop in de rij staan.
plaatsing
ruimte in het ontwerp
Ruimte kan worden gebruikt om elementen in een ontwerp zowel te scheiden als te verbinden. Bredere ruimtes scheiden elementen van elkaar en smallere ruimtes verbinden elementen om relaties tussen duidelijk te maken. Overlappende elementen maximaliseren hun relatie. Door de ruimte in ontwerpen te beheersen en vorm te geven, wordt ritme, richting en beweging gecreëerd, kortom een designflow.
Witruimte zorgt voor drie belangrijke dingen in een ontwerp:
het maakt groeperingen van elementen,
het creëert nadruk en hiërarchie,
het verbetert de leesbaarheid.
Een systematisch gebruik van witruimte op pagina's verbindt die pagina's. Ruimte is indeling. Wanneer de ruimte tussen elementen op een pagina hetzelfde blijft, raken bezoekers niet gedesoriënteerd. Navigatie en logo staan op elke pagina op dezelfde plaats.
Natuurlijk kunnen verschillen qua indeling ook binnen een bepaalde sectie. Zolang de standaardtekst qua plaats consistent blijft, is het duidelijk voor de bezoeker dat hij zich op dezelfde site bevindt.
Het evenwicht en systematisch gebruik van witruimte is een kenmerk van professioneel ontwerp. Veelal is bij een ontwerp van een amateur te weinig aandacht besteed aan de ruimte binnen het ontwerp.
Witruimte geeft de ogen rust en net dat is wat ze nodig hebben om de boodschap op te nemen. Witruimte is een visuele aanwijzing dat er een breuk in de inhoud zit, of dat de inhoud afgerond is. Het zorgt er ook voor dat navigeren op een pagina makkelijker wordt.
Witruimte kan actief of passief zijn. Wanneer de ruimte in een ontwerp symmetrisch in balans is, wordt de ruimte passief. Het is statisch en formeel en eerlijk.... voor het grootste deel saai. Wanneer die ruimte asymmetrisch in balans is, wordt ze actief. Het is dynamisch, modern en interessant.
ruimte in webdesign
Het gebruik van ruimte binnen een ontwerp voor webdesign onderverdeeld worden in twee types.
Micro witruimte
Micro-witruimte houdt zich bezig met ruimte tussen kleinere elementen, zoals de marges rond tekst en de ruimte (line-height) tussen tekstregels of de spaties tussen afzonderlijke tekens. Het is ruimte tussen elementen van een lijst en ruimte tussen een afbeelding en het bijschrift. Het betreft ook de ruimte tussen elementen binnen een groter element. Stel dat er bijvoorbeeld 2 afbeeldingen in een zijbalk naast elkaar staan, of een zoekvak en een zoekknop op een formulier.
Veel van de micro-witruimte zal in typografie plaatsvinden. Het correct gebruik van ruimte in typografie speelt een grote rol speelt in hoe leesbaar teksten zijn. Denk maar aan het instellen van de regelafstand (line-height).
Macro witruimte
Macro witruimte is de ruimte tussen de belangrijkste elementen binnen het ontwerp. Deze ruimtes zijn meestal groter en hierdoor meestal meteen duidelijk. Ruimte wordt gebruikt om elementen te scheiden en te verbinden. Randen (borders en achtergronden (background) worden vaak gebruikt om sommige elementen te verbinden, terwijl ze zo ook worden gescheiden van andere elementen.
Witruimte kan worden gebruikt om elementen te benadrukken. Degenen die in of nabij grote blokken ruimte worden geplaatst, winnen aan belang door hun scheiding van andere elementen. Ze vallen natuurlijk ook op in een veld van lege ruimte.
Rasters en ruimte
Grid of rasters zijn een manier om ruimte te organiseren. Door grid gebruiken wordt een ontwerper gedwongen na te denken over witruimte en deze te leren vormgeven in ontwerpen. Rasters worden gedeeltelijk zichtbaar door de manier waarop elementen worden uitgelijnd en ook door de velden en paden van lege ruimte die niet zijn gevuld. Grid of rasters moedigen aan om meer dynamische en asymmetrische composities te creëren waarin ruimte niet alleen aanwezig is, maar ook door en rond elementen in het ontwerp stroomt.
Vaste en vloeiende lay-outs
Veel webdesigners ziet kiezen voor een vaste of fixed lay-out, is omdat het de werkruimte van je ontwerp vastlegt. Het zorgt voor minder verrassingen in de witruimte. Momenteel is het gebruikelijk om de paginabreedte in te stellen op 960px. Dit geeft webdesigners meer controle over de horizontale ruimte, aangezien één aspect van de totale ruimte vast ligt. Vaak zijn die vaste lay-outs gecentreerd in het browservenster. Dit creëert een passieve (symmetrische) balans van ruimte buiten de pagina. Binnen de 960px is de ontwerper vrij om passieve of actieve ruimte te gebruiken.
Door te kiezen voor een fluid of vloeiende lay-out wordt de controle over de totale ruimte losgelaten. Hoe vloeiender het ontwerp, hoe minder controle je hebt over de totale witruimte: Zal elke kolom in het ontwerp vloeiend zijn? Zo ja, hoe wordt de microruimte in de kolom beheerd als de kolom uitzet en inkrimpt? Kunnen sommige kolommen 'fixed' worden en zo ja, hoe wordt de macroruimte tussen de belangrijkste elementen beheerd?
De grootste tekortkoming bij vloeiende lay-outs is de manier waarop de witruimte verandert bij verschillende browserformaten. Wat er goed uitziet en gemakkelijk te lezen is op de ene breedte, ziet er vreselijk uit en wordt moeilijk te lezen op de andere. Dat verklaart het meer voorkomen en dus gebruik van vaste lay-outs.
gulden snede
Eeuwen geleden begonnen mensen patronen te observeren in de prachtige natuur om zich heen: van de bladschikking bij planten tot het patroon van de roosjes van een bloem, de schutbladen van een dennenappel of de schubben van een ananas,... telkens kwam hetzelfde patroon terug. Dit patroon werd omgezet in een getallenreeks 1, 2, 3, 5, 8,13, 21, 34,... Wanneer je begint met het berekenen van de verhouding van het fibonacci-getal met het vorige fibonacci-getal, eindigen we met iets als 1.61803 ... een irrationeel getal afgerond op 3 decimalen 1.618, wat de gulden snede is waarover we lezen.
Wiskundig wordt gesproken van een gulden snede of golden ratio als twee grootheden in hun verhouding gelijk zijn aan de verhouding van hun som tot de grootste van de twee grootheden.
Last updated