Basisprincipes voor layout en kleur

22
Layoutprincipes kort door de bocht

Transcript of Basisprincipes voor layout en kleur

Layoutprincipes

kort door de bocht

4 kernwoorden

• Proximity (Nabijheid)• Alignment (Uitlijning)• Repetition (Herhaling)• Contrast

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

http://www.historischekringhoogeveen.nl/

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

Alignment

http://www.carinsbeeldenstudio.nl/

Repetition

• smeed een band tussen verschillende pagina’s door – consistentie– een repetitief visueel element

• kleur, breedte van de kolommen, navigatie

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

Kleur

Color in Motion: http://www.mariaclaudiacortes.com/colors/Colors.html

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)

Named Colors

“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

Steunkleur + focus

• webdesign palet?• combineer

– neutrale tinten in de achtergrond– focuskleur

Opgepast voor schrille contrasten

http://bloembollenaktie.nl/

Kleuren vinden

• Color palette generator– http://www.colorschemer.com/online.html

• Kleuren distilleren– http://www.colorhunter.com/