03 Pagina Layout

8/2/2019 03 Pagina Layout

1/39

Design it!

03 Pagina layout


2/39

Inhoud

Gestalt principes

Compositie

Richtingslijnen Stramien

Ordening

Prototyping

Opdrachten


3/39

Gestalt principes

Gestaltin 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 )


4/39

Gestalt principesNabijheid (proximity)

Het principe van nabijheid geeft aan dat elementen diedichter bij elkaar in de buurt zijn als een groep wordengezien


5/39

Gestalt principesGelijkheid (similarity)

Het principe van gelijkheid geeft aan dat elementen diedezelfde visuele kenmerken hebben als een groepworden gezien

Kenmerken zoals vorm, grootte, kleur, textuur en richting


6/39

Gestalt principesGebied (Prgnanz / figureground)

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


7/39

Gestalt principesSymmetrie (symmetry)

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

Een andere, meer complexe, vormwordt niet meer gezien


8/39

Gestalt principesContinuteit (closure / continuation )

Het principe van continuteit geeft de voorkeuraan voor doorgaande, ononderbroken contourenmet een zo simpel mogelijke vorm


9/39

Inhoud

Gestalt principes

Compositie


Ordening

Prototyping

Opdrachten


10/39

CompositieRichtingslijnen

Alle elementen hebben een positie en richting

eleme nt 1

element 2

linkerlijn element 1

linkerlijn element 2

onderlijn element 2

onderlijn element 1


11/39

CompositieRichtingslijnen

De informatiewaarde van een beeld is omgekeerdevenredig aan het aantal richtingslijnen

Dus: hoe meer richtingen hoe minder informatie wordt herkend

element

element

element

element

element

weinig inf ormatie

element

element

element

element

element

v eel inf ormatie


12/39

CompositieRichtingslijnen veel


13/39

CompositieRichtingslijnen weinig


14/39

Inhoud

Gestalt principes

Compositie


Ordening

Prototyping

Opdrachten


15/39

CompositieStramien

Het is belangrijk dat een compositie volgens nconsequent principe is opgebouwd


16/39

CompositieStramien voorbeeld


17/39



18/39

CompositieStramien weinig


19/39

CompositieStramien veel


20/39

CompositieStramien consistentie

Stramien kun je gebruiken om consistentie terealiseren

Bijvoorbeeld: startscherm


21/39


vervolgschermen


22/39

CompositieStramien paginaontwerp

Op basis van een stramien maak je een paginaontwerp


23/39

Inhoud

Gestalt principes

Compositie


Ordening

Prototyping

Opdrachten


24/39

CompositieOrdening

Ordening bepaalt de invulling van hetstramien

uitlijnen, groeperen, schikken, ritme

Ordening schept rust ofchaos


25/39

CompositieOrdening Uitlijnen


26/39

CompositieOrdening Groeperen


27/39

CompositieOrdening Schikken

Symmetrisch Asymmetrisch


28/39

CompositieOrdening Schikken

Vrije schikking Combinatie


29/39

CompositieOrdening Ritme


30/39

Inhoud

Gestalt principes

Compositie


Ordening

Prototyping

Opdrachten


31/39

Prototyping

Prototyping is een validatie techniek en kan gebruiktworden 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


32/39

PrototypingLow fidelity voorbeeld


33/39

PrototypingHigh fidelity voorbeeld


34/39

PrototypingVan schets tot realisatie


35/39

Prototyping tools

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

Handige tool - Pencil:http://pencil.evolus.vn/en-US/Downloads/Application.aspx
http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://pencil.evolus.vn/en-US/Downloads/Application.aspxhttp://pencil.evolus.vn/en-US/Downloads/Application.aspxhttp://pencil.evolus.vn/en-US/Downloads/Application.aspxhttp://pencil.evolus.vn/en-US/Downloads/Application.aspxhttp://pencil.evolus.vn/en-US/Downloads/Application.aspxhttp://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/http://www.webdesignshock.com/showcase/best-online-wireframe-tools/


36/39

Inhoud

Gestalt principes

Compositie


Ordening

Prototyping

Opdrachten


37/39

Oefeningen

1. Gegeven een homepage van de Erasmusuniversiteit

verander in Photoshop zodat er een visueel

georganiseerde homepage ontstaat

2. Gegeven twee screenshots van onlinewebwinkels.

Wat is goed / slecht? verklaar, beschrijf, geef aan, teken, aan de hand

van de theorie uit deze les

O f i


38/39

OefeningenScreenshots Oefening 1

O f i


39/39

OefeningenScreenshots Oefening 2

03 Pagina Layout

Documents

Transcript of 03 Pagina Layout