Basisprincipes voor layout en kleur
-
Upload
culturelestudies -
Category
Education
-
view
710 -
download
4
Transcript of Basisprincipes voor layout en kleur
Proximity
• groepeer wat bij elkaar hoort, in één visuele eenheid
• leidt de blik: waar begint/eindigt de info?
Mary Rottweiler
Blijde-Inkomsstraat 213000 Leuven
BIZdesign
016 32 15 46
Mary Rottweiler
Blijde-Inkomsstraat 213000 Leuven
BIZdesign
016 32 15 46
Proximity
Boodschappenlijstje• zuivel• melk• eieren• bloem• brood• choco
Boodschappenlijstje• zuivel
– melk– eieren
• bloem• brood• choco
benadruk: logische connecties, hiërarchie
Alignment
• geef alles een plaats, strooi niet zomaar wat elementen rond
• zoek sterke lijn, hou één uitlijning aan– bvb: combineer geen center-align titel met left-align
paragraaf
Mary Rottweiler
Blijde-Inkomsstraat 213000 Leuven
BIZdesign
016 32 15 46
Mary Rottweiler
Blijde-Inkomsstraat 213000 Leuven
BIZdesign
016 32 15 46
Alignment
Home about our company
toys contactbooks music instruments
Home about our company
toys contactbooks music instruments
tekst “zit” op een baseline, in het 1e voorbeeld is de tekst niet horizontaal uitgelijnd
Repetition
• smeed een band tussen verschillende pagina’s door – consistentie– een repetitief visueel element
• kleur, breedte van de kolommen, navigatie
Contrast: creëer focus
Contrast
• wanneer twee dingen niet hetzelfde zijn, benadruk dan het verschil
• bij lettertypes:– via grootte– via de vorm
Lettertypes mixen
• Ga voor contrast ipv conflict
Screen TypeTo guarantee uniform presentation across platforms, some Mac web browsers such as Safari, Firefox, Mozilla and Internet Explorer assume the display is 96 pixels per inch.
Screen TypeTo guarantee uniform presentation across platforms, some Mac web browsers such as Safari, Firefox, Mozilla and Internet Explorer assume the display is 96 pixels per inch.
Stappenplan
• Denk vanuit een focuspunt• Groepeer informatie• Creëer een sterke lijn en hou uitlijning
consistent• Gebruik herhaling om eenheid van stijl
te scheppen• Durf sterke contrasten te gebruiken
Kleurmodellen : Color Models
• CMYK : drukinkt : subtractive colorCyaan Magenta Yellow blacK
• RGB : licht : additive color mixing• RGB weergave
– in % – met waarden van 0-255– hexadecimaal: 16-tallig:
(0t/m 9 en A t/m F)
Hexadecimale weergave
• Zo is FFFFFF de waarde voor wit, en 000000 de waarde voor zwart. – 1e byte FF 00 00 is R is Rood. (#FF0000)– 2e byte 00 FF 00 is G is Groen. (#00FF00)– 3e byte 00 00 FF is B is Blauw. (#0000FF)
“Browser Safe Colors”?
• De vroegste browsers konden slechts een 256-tal kleuren goed weergeven
• in 2008 is dat probleem opgelost• perfecte kleurweergave heb je nooit.
Look & Feel
• Zwart: autoriteit, stijlvol, tijdloos, rouw• Wit: zuiver, onschuldig, neutraal, steriel• Rood: emotioneel intens, liefde, accent,
opvallend, gevaar• Blauw: populair, rust, koel, trouw• Groen: natuur, vrijheid, aangenaam voor het
oog, relaxerend, camouflage• Geel: zonnig, vrolijk, optimistisch, energetisch• Paars: luxe, vrouwelijk, spiritueel• Bruin: aarde, saai, degelijk, oud
Kleuren vinden
• Color palette generator– http://www.colorschemer.com/online.html
• Kleuren distilleren– http://www.colorhunter.com/