Samenvatting WI + reader
Bregje van Eldik
2017
,1. Design fundamentals
Gestalt principes
> De Gestaltprincipes beschrijven hoe je hersenen omgaan met visuele informatie.
1. Similarity
- Dingen die op elkaar lijken tot een geheel zien.
- Objecten die er hetzelfde uitzien, worden als vergelijkbaar gezien.
- Voorbeeld: onderstaande foto, de navigatiepictogrammen zien er allemaal anders
uit. De overeenkomsten in kleur, grootte, spatiëring en plaatsing van
pictogrammen suggereren echter allemaal dat elk pictogram hetzelfde
navigatieniveau weergeeft (topniveau).
- Gebruik gelijkenis om betekenis over te brengen en tijd te besparen
2. Figure - ground relations
- Voorgrond vs achtergrond.
- Waarnemingen van bepaalde objecten op de voorgrond en andere objecten als
zijnde op de achtergrond.
,3. Grouping
- Items die ongelijksoortig zijn, kunnen nog steeds worden gegroepeerd om er hetzelfde
uit te zien.
1. Enclosure: Het samenvoegen van ongelijksoortige objecten binnen een
waarneembare grens, waardoor ze worden gezien als groep.
2. Proximity: Mensen laten snappen dat iets bij elkaar hoort. (afstand tussen
elementen) Elementen die dicht bij elkaar liggen, worden als eenheid
beschouwd
4. Closure
- onafgebroken en netjes afgewerkte figuren verkiezen boven onsamenhangende figuren.
- Wanneer een object onvolledig is, maar voldoende van het object is aangegeven, ziet de
geest het object als geheel door de informatie mentaal te vullen.
5. Continuation
- Ogen een bepaalde richting op.
- vindt plaats wanneer het oog gedwongen wordt door één object te bewegen en verder te
gaan naar een ander object.
,1.1 White space
White space / negative space
> Lege scherm ruimte tussen elementen. Hoeft niet wit te zijn
> Door hiermee te spelen zorg je ervoor dat er gefocust wordt op waar jij wil.
> Om effectieve ruimte’s in ontwerpen te plaatsen moet je beschikken over inzicht in esthetiek,
functionaliteit en menselijk gedrag.
> Witruimte moet worden gebruikt als ontwerp hulpmiddel
7 manieren waarop whitespace UI kan beinvloeden:
1. Benadruk bepaalde elementen
2. Communiceer wat verwant is
3. Voorkom visuele rommel
4. Leid de gebruiker door interactieve inhoud
5. Verbeter de leesbaarheid
6. Gebruik als een visuele divider
7. Creëer een gevoel van verfijning en elegantie
De drie hoofdfuncties van witruimte:
1. Verbetering van het begrip
> Wit ruimte kan worden opgesplitst in 4 ruimtes:
- Visual White space = Omringende ruimte tussen afbeeldingen.
- Lay-out white space = Marges, opvullingen en gutters
- Text witte space = Afstand tussen lijnen en tussenruimte tussen letters.
- Content white space = Ruimte tussen kolommen of tekst. (spatie)
2. Het verhelderen van relaties
3. Het trekken van aandacht
Veel witruimte > Luxury
> Veel witruimte geeft het luxe gevoel omdat die het doel hebben oude esthetiek van het
product echt te laten zien.
4 vormen van whitespace:
1. Macro whitespace
> Alles heeft extreem veel ‘adem’ ruimte.
- De algehele positie
- Tekst collum
- Ruimte tussen foto’s
- Padding
- Margins
2. Micro whitespace
> Ruimte die geld tussen de kleine elementen
- Letters
- Regels
- Alinea’s
- List items
- Buttons & icons.
3. Passieve ruimte
> Whitespace alsof het ‘normaal’ voelt.
4. Actieve ruimte
> Bewust ermee bezig zijn
> De nadruk ligt op de whitespace
> Extra white space
Visuele flow
> Waar je ogen naartoe getrokken worden.
, 1.2 Typografie
Typografie
> De esthetiek achter het geschreven woord
> Lettertype, grootte, kleur, positie, en de context er omheen enz.
> Serif lettertypen worden vaak gebruikt voor body tekst.
> Sans-serif lettertypen worden vaak gebruikt voor koppen.
> Elk afgedrukt woord kan twee verschillende betekenissen overbrengen
- De letterlijke definitie
- De emotie gesuggereerd door typografie
> Het kennen van de intentie achter het bericht is de eerste stap in het proces.
Leading
> De ruimte tussen de basislijn van elke regel tekst.
> Tight leading = te smalle ruimte
> Loose leading = te grote ruimte
> Proper leading = Evenwichtige ruimte
Tracking of letter spacing
> De spatie tussen groepen/ meerdere letters.
> Tight tracking = te smalle ruimte, je gaat woorden vormen die er misschien niet staan.
> Loose tracking = te grote ruimte
> Proper tracking = Evenwichtige ruimte
Kerning
> De spatie tussen individuele letters
Het belang van context
> In de kern is typografie slechts een ander hulpmiddel voor communicatie.
> Twee factoren
- De lezers
wie leest je woorden en hoe kunnen ze verschillende visuele aanwijzingen
interpreteren?
- Het type bericht
Onderscheid tussen blogposts, banner-advertenties, productbeschrijvingen
enz. Hebben allemaal invloed op de interpretatie.
Belangrijke punten bij het maken van woordkeuze’s
> Lengte - Hoeveel letters? Hoeveel lettergrepen?
> Geluid - Rijmen kan een invloedrijke tool zijn, dus zoek naar kansen om het te
gebruiken.
>Vorm - Welke letters vormen het woord? Wat is de outline van het woord?
Belangrijke punten bij het kiezen van lettertypes
1. Legibility
- Selecteer slanke en heldere lettertypen
- Trek geen aandacht aan de typografie
- Houdt het in evenwicht
2. Readability
- Pas het lettertype aan zijn rol aan
- Houdt de meetwaarde in je achterhoofd (lijnlengte)
- Creeer ademruimte met de juiste lijnhoogte (voorkeur 1..5)
Typografie
> Gebruik in een ontwerp 1 of 2 lettertypes.
> Wees consistent in stappen tussen lettertype grote.
Bregje van Eldik
2017
,1. Design fundamentals
Gestalt principes
> De Gestaltprincipes beschrijven hoe je hersenen omgaan met visuele informatie.
1. Similarity
- Dingen die op elkaar lijken tot een geheel zien.
- Objecten die er hetzelfde uitzien, worden als vergelijkbaar gezien.
- Voorbeeld: onderstaande foto, de navigatiepictogrammen zien er allemaal anders
uit. De overeenkomsten in kleur, grootte, spatiëring en plaatsing van
pictogrammen suggereren echter allemaal dat elk pictogram hetzelfde
navigatieniveau weergeeft (topniveau).
- Gebruik gelijkenis om betekenis over te brengen en tijd te besparen
2. Figure - ground relations
- Voorgrond vs achtergrond.
- Waarnemingen van bepaalde objecten op de voorgrond en andere objecten als
zijnde op de achtergrond.
,3. Grouping
- Items die ongelijksoortig zijn, kunnen nog steeds worden gegroepeerd om er hetzelfde
uit te zien.
1. Enclosure: Het samenvoegen van ongelijksoortige objecten binnen een
waarneembare grens, waardoor ze worden gezien als groep.
2. Proximity: Mensen laten snappen dat iets bij elkaar hoort. (afstand tussen
elementen) Elementen die dicht bij elkaar liggen, worden als eenheid
beschouwd
4. Closure
- onafgebroken en netjes afgewerkte figuren verkiezen boven onsamenhangende figuren.
- Wanneer een object onvolledig is, maar voldoende van het object is aangegeven, ziet de
geest het object als geheel door de informatie mentaal te vullen.
5. Continuation
- Ogen een bepaalde richting op.
- vindt plaats wanneer het oog gedwongen wordt door één object te bewegen en verder te
gaan naar een ander object.
,1.1 White space
White space / negative space
> Lege scherm ruimte tussen elementen. Hoeft niet wit te zijn
> Door hiermee te spelen zorg je ervoor dat er gefocust wordt op waar jij wil.
> Om effectieve ruimte’s in ontwerpen te plaatsen moet je beschikken over inzicht in esthetiek,
functionaliteit en menselijk gedrag.
> Witruimte moet worden gebruikt als ontwerp hulpmiddel
7 manieren waarop whitespace UI kan beinvloeden:
1. Benadruk bepaalde elementen
2. Communiceer wat verwant is
3. Voorkom visuele rommel
4. Leid de gebruiker door interactieve inhoud
5. Verbeter de leesbaarheid
6. Gebruik als een visuele divider
7. Creëer een gevoel van verfijning en elegantie
De drie hoofdfuncties van witruimte:
1. Verbetering van het begrip
> Wit ruimte kan worden opgesplitst in 4 ruimtes:
- Visual White space = Omringende ruimte tussen afbeeldingen.
- Lay-out white space = Marges, opvullingen en gutters
- Text witte space = Afstand tussen lijnen en tussenruimte tussen letters.
- Content white space = Ruimte tussen kolommen of tekst. (spatie)
2. Het verhelderen van relaties
3. Het trekken van aandacht
Veel witruimte > Luxury
> Veel witruimte geeft het luxe gevoel omdat die het doel hebben oude esthetiek van het
product echt te laten zien.
4 vormen van whitespace:
1. Macro whitespace
> Alles heeft extreem veel ‘adem’ ruimte.
- De algehele positie
- Tekst collum
- Ruimte tussen foto’s
- Padding
- Margins
2. Micro whitespace
> Ruimte die geld tussen de kleine elementen
- Letters
- Regels
- Alinea’s
- List items
- Buttons & icons.
3. Passieve ruimte
> Whitespace alsof het ‘normaal’ voelt.
4. Actieve ruimte
> Bewust ermee bezig zijn
> De nadruk ligt op de whitespace
> Extra white space
Visuele flow
> Waar je ogen naartoe getrokken worden.
, 1.2 Typografie
Typografie
> De esthetiek achter het geschreven woord
> Lettertype, grootte, kleur, positie, en de context er omheen enz.
> Serif lettertypen worden vaak gebruikt voor body tekst.
> Sans-serif lettertypen worden vaak gebruikt voor koppen.
> Elk afgedrukt woord kan twee verschillende betekenissen overbrengen
- De letterlijke definitie
- De emotie gesuggereerd door typografie
> Het kennen van de intentie achter het bericht is de eerste stap in het proces.
Leading
> De ruimte tussen de basislijn van elke regel tekst.
> Tight leading = te smalle ruimte
> Loose leading = te grote ruimte
> Proper leading = Evenwichtige ruimte
Tracking of letter spacing
> De spatie tussen groepen/ meerdere letters.
> Tight tracking = te smalle ruimte, je gaat woorden vormen die er misschien niet staan.
> Loose tracking = te grote ruimte
> Proper tracking = Evenwichtige ruimte
Kerning
> De spatie tussen individuele letters
Het belang van context
> In de kern is typografie slechts een ander hulpmiddel voor communicatie.
> Twee factoren
- De lezers
wie leest je woorden en hoe kunnen ze verschillende visuele aanwijzingen
interpreteren?
- Het type bericht
Onderscheid tussen blogposts, banner-advertenties, productbeschrijvingen
enz. Hebben allemaal invloed op de interpretatie.
Belangrijke punten bij het maken van woordkeuze’s
> Lengte - Hoeveel letters? Hoeveel lettergrepen?
> Geluid - Rijmen kan een invloedrijke tool zijn, dus zoek naar kansen om het te
gebruiken.
>Vorm - Welke letters vormen het woord? Wat is de outline van het woord?
Belangrijke punten bij het kiezen van lettertypes
1. Legibility
- Selecteer slanke en heldere lettertypen
- Trek geen aandacht aan de typografie
- Houdt het in evenwicht
2. Readability
- Pas het lettertype aan zijn rol aan
- Houdt de meetwaarde in je achterhoofd (lijnlengte)
- Creeer ademruimte met de juiste lijnhoogte (voorkeur 1..5)
Typografie
> Gebruik in een ontwerp 1 of 2 lettertypes.
> Wees consistent in stappen tussen lettertype grote.
