Grafisch

ontwerp

EigentijdsInspirerend

CreatiefSpontaan

Rules

Design

Vernieuwend

Ken de regels voor je ze gaat breken

Editie Maart 2012

Design does not need to be beautiful, as long as does

were it is meant for

“ “

Rene van Kerkhof

3

Communiceer ipv

Decoreer Kies je kleurmet een rede

Gebruik frames, boxes enborders met een rede

Witruimte is magischMaak het! Gebruik twee typeface

families maximaal

Ontwerp voor scanning, skimming

en jumping

4 126

14

16

18

Om een goed ontwerp te kun-nen maken moet het niet alleen “mooi” of “aantrekkelijk” zijn. Dat komt pas op de tweede plaats. Het is van belang dat je het doel van het te ontwerpen product op de eerste plaats te zetten. Hiermee bedoel ik wat is het wat je wilt communiceren naar de gebruiker, welk gevoel moet het opwekken en hoe moet de ge-bruiker hier op reageren. Hierbij maak je dan een ontwerp dat aansluit en er uiteraard ook wel aantrekkelijk uitziet.

Wanneer je op deze manier te werk gaat kan het zijn dat het er soms wat minder mooi uitziet voor buitenstaanders (dit zul je meestal zelf ook zijn). Maar voor de gebruikers waarvoor het ontworpen is zullen het beter ervaren en er meer mee kunnen doen. Wat uiteindelijk toch het doel van alle ontwerpers zal zijn.

Dit komt doordat onze hersenen zoeken naar betekenis en orde. Als ze dit niet kunnen vinden raken we geërgerd en zijn we geneigd op te geven. Als ontwer-per dien je hier rekening mee te houden. Het is natuurlijk niet de bedoeling dat de gebruiker van je website weggaat of je drukwerk aan de kant legt. Hier kan je als ontwerper natu-urlijk gebruik van maken. Je kan de gebruiker over de pagina sturen zoals jij dat wilt. Dit doe je door gebruik te maken van Head-lines, subkoppen, kleur en af-

beeldingen. Door de juiste lay-out te maken stuur je de gebruiker langs de informatie die hij wilt weten en jij wilt dat ze lezen.

Weet hoe de ogen bewegen! Ja de ogen een heel belangrijk punt. wij westerse mensen zijn van kind af aan aangeleerd om van links naar rechts en boven naar beneden te lezen. Het is daarom niet meer dan logisch dat je de pagina indeling hierop aanpast.

Regel 1

4

5You know were this is all about?

Ongetwijfeld een van de meest belangrijke onderdelen van een ontwerp is kleur. Het kan de stijl, doel en emotie van elk ontwerp versterken of beïnvloeden. Het is daarom ook zeer belangrijk goed na te denken over de kleuren die je gebruikt. elke kleur geeft een andere sfeer en emoties. Je moet dus goed nadenken wat jou ontwerp moet uitstralen en daarop de kleuren aanpassen. Om je te helpen een goeie keuze te kunnen maken zal ik de meest voorkomende kleuren bespreken en waar ze voor staan.

Te beginnen bij “rood”Rood symboliseert vuur en kracht en wordt geassocieerd met pas-sie enbelang. Het helpt met het stimuleren van energie en op-

winding. a

Daarnaast is rood de kleur van woede, boosheid en spoede-

isende hulp die voorvloeien uit de gepassioneerde en agressieve

kwaliteiten van rood.

Daarna hebben we “oranje” sym-bool staat voor geluk, vreugde en

zonneschijn. het is een vrolijke kleur die doet denken aan kinder-

lijke uitbundigheid.

Het is niet zo agressief als rood maar deelt een aantal kwalitei-ten, het stimuleren van mentale activiteit. het symboliseert onwe-

tendheid en bedrog.

6

Waarna we alweer zijn aange-komen bij “geel”

Geel is een heldere en vrolijke kleur die positieve gedachte,

vreugde, optimisme en geluk op-wekken. Ook is het de kleur van intelligentie, energie en helder-

heid.

Helaas brengt geel ook nega-tieve gevoelens met zich mee.

Het staat daarom ook voor voor-zichtigheid, kritiek, luiheid, ja-

loezie en ziekte.

Zoals iedereen wel weet symboli-seert de kleur “groen” de natuur en harmonie. Maar ook geeft de kleur groen mensen een veilig

gevoel en voelen mensen zich al snel beter.

Aan de andere kant symboliseert groen geld, hebzucht of jaloezie. Het word ook vaak gebruikt voor

onervaren of beginners.

Regel 3

7

“Blauw” is en rustige en kalmer-ende kleur die stabiliteit en ervar-ing uitstraalt. Blauw word veelal

gebruikt voor corporate bedrijven omdat de kleur ook symbool staat voor vertrouwen en betrouwbaar-

heid.

Natuurlijk kan blauw ook snel een koud, depressief of passief

gevoel overbrengen.

En de laatste echte kleur die ik wil bespreken is “paars” dat voor rijkdom en luxe staat. Ook geeft

het een geviel van spiritualiteit en stimuleert creativiteit.

Licht paars kan een magisch gevoel opwekken of gebruikt

worden om vrouwelijke kwalitei-ten uit te stralen.

Waarbij donkerder paars al snel tot verdriet en somberheid lijdt.

8

En dan hebben we nog zwart en wit dat officieel geen kleuren zijn maar wel emoties kunnen over-brengen. we beginnen dan maar

bij “wit”

Wit staat symbool voor zuiverheid en onschuld. Het toont ook hy-

giëne en veiligheid.

Aan de anderekant kan wit worden gezien als koel en afstan-

delijk.

En dan eindigen we bij “zwart”, zwart heeft de eigenschappen kracht, elegantie, verfijning en diepte uit te stralen. Er wordt

gezegd dat het dragen van zwart op een sollicitatiegesprek kan

aantonen dat de geïnterviewde een krachtig individu is.

Daarentegen kan zwart ook negatief gezien worden, om-

dat de kleur geassocieerd word met dood, mysterie en het on-bekende. Het is de kleur van

verdriet en rouw.

9

Right and wrong do not exist in graphic design. There is only effective and

non-effective communication.

“ “

Peter Bilak

Ken het doel van elk frame, box of border.

Er zijn andere manieren om een belangrijk stuk tekst te

benadrukken zonder het ge-bruik van frames of boxes. Denk hierbij aan kleur, let-tertype, positie en uitlijning. Overweeg het gebruik van

deze organisatorische meth-ode in plaats van Borders.

12

Ooit het gevoel gehad dat je in een box zit? Boxes, Borders of Frames zijn handige design en organisatorische tools. Het prob-leem is dat je al te gemakkelijk gaat gebruiken terwijl dit hele-maal niet nodig is. Je hebt vast wel eens een folder of brochure gezien dat een box in een box in een box heeft. Het vermogen van een box of een frame is om een bepaald stuk te benadrukken, wanneer je dit alleen maar gaat

gebruiken leg je eigenlijk overal de nadruk op! Waarom zou je dit doen is alles even belangrijk? Of is alles eigenlijk even onbelan-grijk en heeft dus helemaal geen kader nodig. In zon geval moet je altijd kiezen om er geen te ge-bruiken. Het tast te leesbaarheid en overzichtelijkheid van een pagina drastisch aan en is om die rede geen goed excuus om elke keer te gebruiken.

Gebruik kaders en randen al-leen om een bepaald stuk tekst dat beetje extra te geven dat het nodig heeft. Doe het op zo’n manier dat het de leesbaarheid verhoogd niet verlaagd. Bij het juiste gebruik ervan kan het een ontwerp verbeteren. Gebruik Frames met een doel en vooral met mate. Frames vormen een barrière die de lezer moet over-bruggen. teveel frames leiden de gebruiker af.

Regel 2

13

Een van de moeilijkste regels om te leren is het gebruik van witruimte binnen een ontwerp. Dit komt waarschijnlijk omdat de termen die gebruikt worden om witruimte aan te geven gebruik maken van “Negative space”. Witruimte is niets. Het is de afwezigheid van tekst, het ont-breken van beeld. Witruimte is leegte. Maar daarbij is het bel-angrijk om te weten dat het geen verspilde ruimte is. Witruimte geeft een ontwerp visuele adem-ruimte voor het oog. Het breekt de tekst of afbeeldingen op zodat het meer rust geeft.Bestaat er dan zoiets als teveel witruimte? Ja, echter is dit vri-jwel nooit het geval. De meeste mensen voegen zoveel mogelijk informatie aan een pagina toe om er zeker van te zijn dat ze niets

Regel 4

14

vergeten. Ze kunnen geen infor-matie weglaten dus proppen ze alles maar op elkaar. Mijn oploss-ing: gebruik een grotere pagina. Witruimte kan ook worden ge-bruikt om een bepaalde sfeer te creëren, of het over brengen van een bepaald gevoel. Wilt u een ontwerp dat zegt rijkdom, luxe of elegantie? Gebruik dan veel meer witruimte. Wil je een meer down-to-earth ontwerp breng dan meer witruimte bij inkepingen of tussenruimte. Het kan natuurlijk

ook zijn dat je een goedkope, massaproductie of amateuristisch ontwerp wil. Vul dan gewoon je pagina om te overstromen.Er is geen juist percentage van witruimte. als een pagina er druk uitziet of voelt, dan heeft hij miss-chien gewoon wat meer witruimte nodig. Over het algemeen geeft meer witruimte een luxe gevoel.

Creëer witruimte in plaats van het gewoon vol te proppen!

Regel 4

15

Ok misschien 3 !

Door hier overal goeie afwegin-gen in te maken zal je ontwerp meer ‘een’ geheel worden en is het voor de gebruiker veel mak-

kelijker om verbanden met elkaar te maken. Daarnaast is het veel duidelijker en leesbaarder. Dus denk hieraan de volgende keer

dat je een ontwerp maakt!

16

Regel 5

Je kent het vast wel of hebt het vast wel eens gezien. een ontwerp met veels te veel ver-schillende lettertype dat je er bijna scheel van wordt. Buiten dat dit in de meeste gevallen afzichtelijk is, is het ook nog eens heel verwarrend en onleesbaar. Daarnaast maakt dit het ontwerp heel rommelig, goedkoop en druk. Om hier niet de mist in te gaan moet je weten hoeveel verschillende font families je mag/kan gebruiken binnen ‘een’ ontwerp en natuurlijk ook waar je ze gaat gebruiken.

Om je hierbij te helpen is er natu-urlijk weer een ontwerp regel. Gebruik maar twee typeface families maximaal, ok misschien drie. dit heeft niets te maken met verschillende fonts binnen een typeface familie zoals Arial en Arial black. Maar dit geldt uiter-aard wel voor arial en Helvetica.

Daarnaast is het van belang dat je goed nadenkt welke typeface je kiest. Kies niet willekeurig er maar eentje uit maar denk er se-rieus goed over na. Hierbij moet je letten dat je rekening houdt met wat het doel van de tekst is, waar het komt te staan en hoe groot het word. Niet alle type-faces zijn overal geschikt voor of passen goed bij elkaar.

Als je er goed over nadenkt merk jezelf ook al snel dat dit vrij lo-gisch is. Wanneer de tekst ook daadwerkelijk een ander doel heeft is het gebruik van een an-der font gebruikelijk zoals bijvoor-beeld de Header van de pagina en de tekst op de pagina. Voor de titel van de tekst en de tekst zelf is het meest gebruikelijk om gewoon dezelfde font te pakken maar gewoon een maatje groter of een andere kleur. Zo krijg je al snel dat de pagina verdeeld in daadwerkelijk tekst dat een eigen typeface krijgt en de navigatie van de website krijgt een eigen typeface.

17

Regel 6

De RegelOntwerp voor scanning, skim-ming and jumping.Ik weet niet hoe het met jullie zit maar het komt serieus zelden voor dat ik een tekst volledig lees. En dan maakt het niet uit of het gaat om het lezen van in-structies, voorwaarden of een ge-wone tekst. Het grootste gedeelte van de tijd ben ik de tekst aan het scannen op kopjes en subkopjes en andere onderdelen die me opvallen van een tekst. Hierna ga ik pas lezen wat me daadwerke-lijk interessant lijkt. Ik ga er dan ook van uit dat ik niet de enigste ben die op deze manier door een tekst heen gaat. Wanneer je dit van tevoren weet houd je hier tijdens het ontwerpen rekening mee. Verpak belangrijke informa-tie niet in een bundel van tekst.

De TipMaak het voor de gebruikers ge-makkelijk om snel door de tekst heen te kunnen gaan. Gebruik koppen, subkoppen, bullet-points, schema’s en wat het ook kost! Denk na over hoe de gebruiker uw ontwerp gaat gebruiken en ontwerp het zo dat het voor de gebruiker makkelijk wordt.

18

Het VoorbeeldIk heb hier ook een iets anders voorbeeld van. Ik denk dat de meeste van jullie de site NET-TUTS wel kennen. Op NETTUTS merkte ik al snel dat veel mensen helemaal naar de onderkant scrollen voor een link naar de demo en/of source code. Aan de hand van deze demo/ source code bepalen ze dan of de tuto-rial nuttig voor ze is. Wanneer je dit weet kan je natuurlijk over-wegen deze informatie ergens anders te plaatsen of op een an-dere manier onder de aandacht brengen. Een eenvoudige aan-passing als dit kan de gebruiker stimuleren sneller de tutorial te lezen.

19

Rene van Kerkhofral@desigr.nl

0642088723

Grafisch ontwerperWeb, Print, Animation