Upload
chaib-el-kouri
View
232
Download
0
Embed Size (px)
Citation preview
8/2/2019 03 Pagina Layout
1/39
Design it!
03 Pagina layout
8/2/2019 03 Pagina Layout
2/39
Inhoud
Gestalt principes
Compositie
Richtingslijnen Stramien
Ordening
Prototyping
Opdrachten
8/2/2019 03 Pagina Layout
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 )
8/2/2019 03 Pagina Layout
4/39
Gestalt principesNabijheid (proximity)
Het principe van nabijheid geeft aan dat elementen diedichter bij elkaar in de buurt zijn als een groep wordengezien
8/2/2019 03 Pagina Layout
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
8/2/2019 03 Pagina Layout
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
8/2/2019 03 Pagina Layout
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/2/2019 03 Pagina Layout
8/39
Gestalt principesContinuteit (closure / continuation )
Het principe van continuteit geeft de voorkeuraan voor doorgaande, ononderbroken contourenmet een zo simpel mogelijke vorm
8/2/2019 03 Pagina Layout
9/39
Inhoud
Gestalt principes
Compositie
Richtingslijnen Stramien
Ordening
Prototyping
Opdrachten
8/2/2019 03 Pagina Layout
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
8/2/2019 03 Pagina Layout
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
8/2/2019 03 Pagina Layout
12/39
CompositieRichtingslijnen veel
8/2/2019 03 Pagina Layout
13/39
CompositieRichtingslijnen weinig
8/2/2019 03 Pagina Layout
14/39
Inhoud
Gestalt principes
Compositie
Richtingslijnen Stramien
Ordening
Prototyping
Opdrachten
8/2/2019 03 Pagina Layout
15/39
CompositieStramien
Het is belangrijk dat een compositie volgens nconsequent principe is opgebouwd
8/2/2019 03 Pagina Layout
16/39
CompositieStramien voorbeeld
8/2/2019 03 Pagina Layout
17/39
CompositieStramien voorbeeld
8/2/2019 03 Pagina Layout
18/39
CompositieStramien weinig
8/2/2019 03 Pagina Layout
19/39
CompositieStramien veel
8/2/2019 03 Pagina Layout
20/39
CompositieStramien consistentie
Stramien kun je gebruiken om consistentie terealiseren
Bijvoorbeeld: startscherm
8/2/2019 03 Pagina Layout
21/39
CompositieStramien voorbeeld
vervolgschermen
8/2/2019 03 Pagina Layout
22/39
CompositieStramien paginaontwerp
Op basis van een stramien maak je een paginaontwerp
8/2/2019 03 Pagina Layout
23/39
Inhoud
Gestalt principes
Compositie
Richtingslijnen Stramien
Ordening
Prototyping
Opdrachten
8/2/2019 03 Pagina Layout
24/39
CompositieOrdening
Ordening bepaalt de invulling van hetstramien
uitlijnen, groeperen, schikken, ritme
Ordening schept rust ofchaos
8/2/2019 03 Pagina Layout
25/39
CompositieOrdening Uitlijnen
8/2/2019 03 Pagina Layout
26/39
CompositieOrdening Groeperen
8/2/2019 03 Pagina Layout
27/39
CompositieOrdening Schikken
Symmetrisch Asymmetrisch
8/2/2019 03 Pagina Layout
28/39
CompositieOrdening Schikken
Vrije schikking Combinatie
8/2/2019 03 Pagina Layout
29/39
CompositieOrdening Ritme
8/2/2019 03 Pagina Layout
30/39
Inhoud
Gestalt principes
Compositie
Richtingslijnen Stramien
Ordening
Prototyping
Opdrachten
8/2/2019 03 Pagina Layout
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
8/2/2019 03 Pagina Layout
32/39
PrototypingLow fidelity voorbeeld
8/2/2019 03 Pagina Layout
33/39
PrototypingHigh fidelity voorbeeld
8/2/2019 03 Pagina Layout
34/39
PrototypingVan schets tot realisatie
8/2/2019 03 Pagina Layout
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/8/2/2019 03 Pagina Layout
36/39
Inhoud
Gestalt principes
Compositie
Richtingslijnen Stramien
Ordening
Prototyping
Opdrachten
8/2/2019 03 Pagina Layout
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
8/2/2019 03 Pagina Layout
38/39
OefeningenScreenshots Oefening 1
O f i
8/2/2019 03 Pagina Layout
39/39
OefeningenScreenshots Oefening 2