Grafisch ontwerp Geplaatst op: 4 maart 2022, aangepast op: 7 oktober 2023
Hoe zet je grafisch ontwerp efficiënt in? In dit artikel behandelen we een aantal basisprincipes die je als ontwerper zeker moet kennen.
Grafisch ontwerp is veel meer dan het maken van mooie plaatjes. Grafische vormgeving gebruikt artistieke en technische vaardigheden om een boodschap over te brengen. Tekst, afbeeldingen en in sommige gevallen zelfs video zijn allemaal elementen die je kunt gebruiken in je ontwerp. Maar hoe zet je deze elementen efficiënt in? In dit artikel behandelen we een aantal basisprincipes die je als ontwerper zeker moet kennen. Ook laten we een aantal voorbeelden zien van deze principes.
Met hiërarchie geef je de elementen uit je ontwerp een bepaalde volgorde, van het meest belangrijk naar het minst. De elementen die het belangrijkst zijn vallen zo het meeste op, degene die minder belangrijk zijn krijgen minder aandacht. Met hiërarchie kun je de elementen zo positioneren om zo de aandacht van de gebruiker te sturen.
Hiërarchie kan bijvoorbeeld worden aangegeven door typografie. Een titel van een document kan in dikke grote letters worden afgedrukt, terwijl een bijschrift van een foto in een kleinere lettergrootte wordt geprint. Maar ook kleurgebruik, of de grootte van elementen kunnen hiërarchie aangeven.
De homepage van Mailchimp maakt gebruik van een duidelijke hiërarchie. De aandacht gaat eerst naar de titel, de afbeelding, de korte tekst en stopt uiteindelijk bij de call-to-action knoppen.
Contrast is het verschil tussen tegenstellingen. Een goed voorbeeld hiervan is het verschil tussen twee kleuren (zwart en wit) of grootte (klein en groot). Contrast is belangrijk bij het bepalen van een logische hiërarchie en kan daarnaast een ontwerp stukken aantrekkelijker maken.
Zoals eerder gezegd kan er contrast gecreëerd worden door elementen van verschillende groottes te voorzien. Een grote afbeelding naast een kleine button zal extra opvallen. Ook maakt het verschil in grootte het geheel interessanter om naar te kijken.
Goed voorbeeld van contrast door grootte: de tekst in de titel is vele malen groter dan alle andere tekst op de website van Elliot Jay Stocks.
Door verschillende kleuren op elkaar te leggen kan er ook contrast ontstaan. Een donkere kleur is beter leesbaar op een lichtere achtergrond en zorgt zo voor meer kleurcontrast. Ook kan er gevarieerd worden met de verzadiging (de felheid van een kleur). Lees meer over kleurverzadiging in ons artikel over kleurenleer.
Door voor meer of juist minder kleurcontrast te kiezen kan de ontwerper bepaalde elementen uit lichten. Als een bepaalde kleur opvalt tegen zijn achtergrond zal dit meer de aandacht eisen. Door hier bewust mee om te gaan kan de aandacht van de kijker worden gestuurd.
De blauwe kleur op de website van Team TDA valt goed op tegen de grijze achtergrond en de zwarte tekst.
Ook door verschillende vormen te combineren kan er een contrast ontstaan. Scherpe hoeken contrasteren bijvoorbeeld met ronde vormen en organische vormen hebben een andere vorm dan geometrische vormen. Door deze tegengestelde vormen naast elkaar te plaatsen ontstaat vormcontrast. Ook met deze vorm van contrast kunnen er bepaalde elementen worden uitgelicht en gebruikt worden om de aandacht te trekken, of een bepaalde tegenstelling te versterken. Hier lees je meer in ons artikel over de betekenis van vormen.
In deze testimonial valt de afbeelding op door zijn ongewone vorm.
Witruimte is de (lege) ruimte om elementen heen. Door elementen dichter bij elkaar te zetten, of juist extra ruimte tussen elementen te laten, kunnen elementen gegroepeerd worden. Door elementen te groeperen wordt het ontwerp duidelijker en wordt deze makkelijker te scannen. Aan de andere kant kun je met (wit)ruimte ook aangeven dat elementen juist niet bij elkaar horen. Door voldoende ruimte tussen grafische elementen te laten ontstaat er een scheiding.
Ook kan er met witruimte focus gegeven worden op een bepaald element. Door veel ruimte om een onderdeel te laten wordt de aandacht als het ware hierheen getrokken.
Witruimte is niet altijd wit. Het kan een andere kleur krijgen of zelfs een achtergrondafbeelding zijn. Zolang er elementen van elkaar gescheiden worden met een ruimte spreken we van witruimte.
Meer weten over witruimte en webdesign? Bekijk onze voorbeelden van witruimte op websites.
De website van Lumicast maakt handig gebruik van witruimte. Om de titel zit veel witruimte, waardoor de tekst beter opvalt.
Herhaling is het opnieuw gebruiken van een eerder gebruikt element. Herhaling komt veel voor in bijvoorbeeld muziek, waardoor de muziek een ritme krijgt. Hetzelfde geldt voor grafisch ontwerp: door iets te herhalen wordt het voorspelbaar en is het prettiger om naar te kijken. Herhaling zorgt ervoor dat informatie geordend en consistent wordt getoond. Teveel herhaling kan saai ogen, dus is het belangrijk een balans te creëren tussen voorspelbaarheid en een interessant ontwerp.
Maak gebruik van een grid om herhalende elementen goed uit te lijnen. Dit zal bijdragen aan de leesbaarheid en voorspelbaarheid van je ontwerp. Bekijk voorbeelden van grid websites of alle websites met een grid-layout.
De attracties van het Spoorwegmuseum zijn in 3 blokken gezet met exact dezelfde vormgeving. Hierdoor ziet de pagina er voorspelbaar uit.
Tot slot de basisprincipes waarmee je een gebalanceerd ontwerp kunt maken:
![[Tutorial] Portfolio website ontwerpen in Photoshop](https://mooistewebsites.nl/uploads/_small/tutorial-portfolio-website-photoshop.jpeg)
