Design it!

03 Pagina layout

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien Ordening

Prototyping

Opdrachten

Gestalt principes

Gestalt in psychologie betekent gehelen

Duitse psychologen (1912) beschreven hoe mensen visuele elementen verwerken en organiseren
De vijf principes

Nabijheid (proximity) Gelijkheid (similarity) Gebied (Prgnanz / figureground) Symmetrie (symmetry) Continuteit (closure / continuation )

Gestalt principes
Nabijheid (proximity)

Het principe van nabijheid geeft aan dat elementen die dichter bij elkaar in de buurt zijn als een groep worden gezien

Gestalt principes
Gelijkheid (similarity)

Het principe van gelijkheid geeft aan dat elementen die dezelfde visuele kenmerken hebben als een groep worden gezien

Kenmerken zoals vorm, grootte, kleur, textuur en richting

Gestalt principes
Gebied (Prgnanz / figureground)

Het principe van gebied stelt dat sommige onderdelen een prominentere rol krijgen (figure), terwijl andere onderdelen als achtergrond (ground) worden gezien

Gestalt principes
Symmetrie (symmetry)

Het principe van symmetrie stelt dat als een figuur symmetrisch is het als een geheel wordt gezien

Een andere, meer complexe, vorm wordt niet meer gezien

Gestalt principes
Continuteit (closure / continuation )

Het principe van continuteit geeft de voorkeur aan voor doorgaande, ononderbroken contouren met een zo simpel mogelijke vorm

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien Ordening

Prototyping

Opdrachten

Compositie Richtingslijnen

Alle elementen hebben een positie en richting

linkerlijn element 1 linkerlijn element 2

onderlijn element 1

eleme nt 1

eleme nt 2
onderlijn element 2

Compositie Richtingslijnen

De informatiewaarde van een beeld is omgekeerd evenredig aan het aantal richtingslijnen

Dus: hoe meer richtingen hoe minder informatie wordt herkend

weinig inf ormatie
v eel inf ormatie

element element element element element

element element element element element

Compositie Richtingslijnen veel

Compositie Richtingslijnen weinig

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien Ordening

Prototyping

Opdrachten

Compositie Stramien

Het is belangrijk dat een compositie volgens n consequent principe is opgebouwd

Compositie Stramien voorbeeld

Compositie Stramien voorbeeld

Compositie Stramien weinig

Compositie Stramien veel

Compositie Stramien consistentie

Stramien kun je gebruiken om consistentie te realiseren Bijvoorbeeld: startscherm

Compositie Stramien voorbeeld

vervolgschermen

Compositie Stramien paginaontwerp

Op basis van een stramien maak je een paginaontwerp

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien Ordening

Prototyping

Opdrachten

Compositie Ordening

Ordening bepaalt de invulling van het stramien

uitlijnen, groeperen, schikken, ritme

Ordening schept rust of chaos

Compositie Ordening Uitlijnen

Compositie Ordening Groeperen

Compositie Ordening Schikken

Symmetrisch Asymmetrisch

Compositie Ordening Schikken

Vrije schikking Combinatie

Compositie Ordening Ritme

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien Ordening

Prototyping

Opdrachten

Prototyping

Prototyping is een validatie techniek en kan gebruikt worden om risicos te verminderen Wordt vaak gebruikt om te concretiseren Low fidelity prototype

Snel, gemakkelijk en goedkoop Bijvoorbeeld: paper prototype, sketch tools

High fidelity prototype

Nauwkeurig, compleet, duur Bijvoorbeeld: Photoshop, Visio of HTML mockups

Prototyping Low fidelity voorbeeld

Prototyping High fidelity voorbeeld

Prototyping Van schets tot realisatie

Prototyping tools

Verschillende tools: http://www.webdesignshock.com/showcase/b est-online-wireframe-tools/#more-2200

Handige tool - Pencil: http://pencil.evolus.vn/enUS/Downloads/Application.aspx

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien Ordening

Prototyping

Opdrachten

Oefeningen
1.

Gegeven een homepage van de Erasmus universiteit

verander in Photoshop zodat er een visueel georganiseerde homepage ontstaat

2.

Gegeven twee screenshots van online webwinkels. Wat is goed / slecht?

verklaar, beschrijf, geef aan, teken, aan de hand van de theorie uit deze les

Oefeningen Screenshots Oefening 1

Oefeningen Screenshots Oefening 2