Design Crash Course

TIPS EN TRICKS VOOR STERKER GRAFISCH DESIGN

COMPOSITIE EN LAY-OUT

Gebruik je beschikbare ruimte op een goede en creatieve manier. Daarbij gaat het erom dat je de ogen van de gebruiker voldoende rust geeft door genoeg witruimte te voorzien. Doe je dat niet, dan komt je design heel druk over. Het is ook mogelijk om gebruik te maken van de witruimte als een ‘negatieve ruimte’ die deel uitmaakt van een afbeelding – denk maar aan het yin-yangsymbool.

Gebruik een systeem voor grootte en ruimte waarbij je jezelf beperkt tot een aantal vooraf bepaalde pixelwaarden. Je start met een basiswaarde, bijvoorbeeld 16 pixels, en die vermenigvuldig je telkens met een groter getal. Hoe verder op de schaal, hoe meer de waarden uit elkaar liggen.

Start met te veel witruimte. Het is beter om te starten met heel veel witruimte waaraan je elementen toevoegt tot het er goed uitziet, dan omgekeerd. Witruimte zorgt voor rust in het beeld.

De regel van drie: verdeel je canvas of beeld in drie rijen en drie kolommen zodat je vier snijpunten krijgt. Het belangrijkste onderwerp van je design of foto staat best op een van de snijpunten.

Balans: als de vrije ruimte naast je onderwerp gelijk is, dan worden je ogen automatisch naar het midden van je canvas gezogen.

Relaties tussen elementen duid je visueel aan door objecten dichter bij of verder van elkaar te zetten. Dichter wil dan zeggen dat die objecten bij elkaar horen, verder dat ze niet bij elkaar horen.

Grid design is een soort skelet om te bepalen waar je objecten gaat plaatsen op je canvas of pagina. Het grid bevat verschillende onderdelen: het ‘format’ (de hele pagina), de marge (de ruimte rondom), kolommen (één of meer, waar content staat) en de ‘gutter’ of het gootje (de ruimte tussen de kolommen).

Er bestaan verschillende soorten grids. De meest gebruikte is het ‘manuscript’ of de ‘single column grid’. Die bevat slechts één kolom, wat handig is voor grote blokken tekst zoals in een boek of blogpost. De aandacht gaat dan volledig naar de tekst. Daarnaast heb je ook grids met meerdere kolommen. Hoe meer kolommen in je grid, hoe flexibeler je de pagina kan indelen. Die multi-column grids worden het meest gebruikt voor webdesign. Daarnaast heb je ook modulaire grids, die meerdere gelijke rijen en kolommen bevatten, als een rooster. Zo’n type grid is bijvoorbeeld typisch voor de startschermen van besturingssystemen.

Voor webdesign wordt vooral een grid van 12 kolommen gebruikt. Dat hoeft natuurlijk niet noodzakelijk zo te zijn. Laat je daar vooral niet op vastpinnen maar laat de content het aantal kolommen bepalen.

KLEUR

Voor een efficiënt en esthetisch kleurgebruik kan je een beroep doen op een kleurensysteem. Er bestaan verschillende kleurensystemen. Een aanrader is HSV/HSL, zeker voor beginnende designers. HSV staat voor hue, saturation en value en wordt vooral gebruikt voor drukwerk zoals papieren folders. HSL staat voor hue, saturation en lightness en is vooral nuttig bij het ontwerpen van apps en websites.

Wat is HSV/HSL?

Hue is de tint of kleur die je gaat gebruiken en wordt aangeduid in een aantal graden op het kleurenwiel. 0% is rood.

Saturation is de verzadiging, namelijk hoeveel pigment er in het kleur zit. Bij 0% heb je geen kleur en krijg je als resultaat grijs, terwijl 100% een heel felle kleur oplevert.

Value/lightness slaat op de hoeveelheid licht in je kleur. 0% is heel donker en geeft dus zwart, 50% is je gewone kleur en 100% is extreem licht en geeft dus altijd wit.

Soorten kleurenpaletten

Een kleurenpalet is een combinatie van verschillende kleuren. Je kan je zo’n combinatie zelf bedenken maar het is ook mogelijk om een bepaald systeem te volgen:

Monochromatisch. Als je wil werken met een monochromatisch kleurenpalet dan kies je één tint en speel je daarna met de ‘saturation’ en ‘lightness’. Dit is een ‘veilige’ keuze – alle kleurvariaties zullen in ieder geval goed bij elkaar passen. Het risico is wel dat het wat saai overkomt.

Analoog. Een analoog kleurenpalet bevat tinten die op het kleurenwiel naast elkaar liggen. Je kan die eventueel ook nog aanvullen met monochromatische kleuren. Houd het wel beperkt tot twee of drie kleuren.

Complementaire kleuren: tinten die op het kleurenwiel tegenover elkaar liggen, zoals rood en groen. Ook hier kan je ze aanvullen met monochromatische kleuren.

Complementair splitsen: een variant waarbij je tinten gebruikt die net naast de complementaire kleuren liggen. Je krijgt dan ook contrast maar je hebt meer kleuren om mee te werken.

Het drietal: drie tinten die exact even ver van elkaar liggen op het kleurenwiel. Als je lijnen trekt tussen de drie tinten dan vormen die verbindingslijnen een gelijkzijdige driehoek. Vaak krijg je hiermee heftige combinaties zoals paars, groen en rood.

De rechthoek: twee complementaire kleurenparen. De verbindingslijnen vormen een rechthoek op de kleurencirkel. Deze aanpak werkt het best met één hoofdkleur en drie accenten.

Wat zijn goede kleurencombinaties?

Je kan niet zomaar alle kleuren combineren. Precies daarom is het handig om binnen een bepaald palet te blijven. Sommige kleurencombinaties doen echt pijn aan de ogen. Dat is het geval wanneer er te weinig contrast is tussen de kleuren. Je kan dit oplossen door bij een van de kleuren de verzadiging aan te passen. Je maakt bijvoorbeeld de achtergrond donkerder. Soms is de beste optie om geen of minder kleur te gebruiken, omdat het er duidelijker en overzichtelijker uitziet.

Zoek je nog ideeën voor mooie kleurencombinaties? Laat je inspireren door schilderijen, foto’s of de natuur.

Of gebruik een handige tool als Adobe Color via color.adobe.com. Je kan er een kleurenpalet creëren door te vertrekken van een basiskleur. Via dezelfde tool kan je ook inspiratie halen uit bestaande kleurenpaletten en uit paletten die op dit moment populair zijn voor grafisch ontwerp of illustraties.

TYPOGRAFIE

Typografie gaat over alles wat te maken heeft met lettertypes en het plaatsen van die letters op een canvas.

Soorten lettertypes

Serif fonts: lettertypes met schreef – kleine lijntjes aan het uiteinde van de letters. Met zulke lettertypes krijg je een klassieke, formele look. Het maakt een tekst ook makkelijker om te lezen doordat je er visuele leeslijnen mee creëert. De serif fonts worden vooral gebruikt op papier, bijvoorbeeld voor kranten en tijdschriften.

Sans serif fonts hebben geen lijntjes aan de uiteinden en komen meer ‘clean’ en modern over. Ze maken de tekst op een scherm beter leesbaar.

Display fonts zijn decoratief en kan je best alleen gebruiken voor kleine stukjes tekst die moet opvallen zoals een titel of een slogan.

Verboden fonts. De fonts Comic Sans MS, Jokerman, Curlz en Papyrus gebruik je beter nooit. Ze doen je ontwerp er namelijk kinderachtig uitzien. Ook de teksteffecten van WordArt gebruik je beter niet.

‘Less is more’: gebruik in je design niet meer dan twee of drie lettertypes, nog meer variatie komt niet professioneel over. Wil je meer afwisseling, dan kan je spelen met verschillende groottes, de letterafstand, cursief en vet (bold).

Welke fonts kan je combineren?

Het is niet eenvoudig om zelf een goede combinatie te vinden van verschillende fonts. Je kan proberen om complementaire lettertypes te combineren met bijvoorbeeld een contrast tussen decoratief en simpel, met schreef en zonder, korte en lange lettervormen, bold en light of met de letters dicht op elkaar (condensed) en ver uit elkaar (wide). Dit soort combinaties vind je ook via de tool fontpair.co. Voor webdesigners is Google Fonts erg handig.

De interlinie is de witruimte tussen de tekstregels. Die is zeer belangrijk voor de leesbaarheid van je tekst. Hoe groter het font, hoe kleiner de regelafstand die je nodig hebt. Hoe breder de lijn, hoe meer regelafstand.

Ook aligneren is zeer belangrijk om je tekst visueel helder te houden. Aligneer je tekst zoals hij gelezen moet worden. In de meeste gevallen is dat van links naar rechts, dus aligneer je standaard je tekst links. Centreren kan, maar alleen voor heel korte stukjes tekst van maximaal een paar regels.

Een uitzondering op het links aligneren zijn getallen: die kan je beter rechts uitlijnen, vooral wanneer ze deel uitmaken van een tabel of factuur. De eenheden staan dan mooi onder elkaar.

AFBEELDINGEN

Een goede afbeelding is cruciaal voor je design. Heel belangrijk is dat je altijd werkt met een afbeelding van hoge kwaliteit: scherp, duidelijk en met een hoge resolutie.

Waar vind je goede afbeeldingen?

Neem zeker niet zomaar een afbeelding die je vindt via Google. Niet alleen laat de kwaliteit vaak te wensen over, maar meestal rusten er ook strenge auteursrechten op die afbeeldingen. Zoek daarom een beeld op websites met een aanbod van gratis kwalitatieve foto’s en illustraties met correct onderhandelde copyright. Goede sites zijn:

www.pexels.com

www.unsplash.com

www.pixabay.com

www.stocksnap.io

Welk formaat moeten foto’s hebben?

Opgelet, als je een afbeelding vergroot, gaat de kwaliteit achteruit. In het slechtste geval krijg je dan een ‘geblokt’ beeld waarin je de uitvergrote pixels ziet. Verkleinen of je afbeelding bijsnijden is geen probleem.

Vectorbestanden zijn een uitzondering: die kan je wel zonder kwaliteitsverlies vergroten. Dergelijke bestanden worden vaak gebruikt door ontwerpers van logo’s of illustraties.

Tekst op afbeeldingen

Je kan een afbeelding gebruiken als achtergrond voor je tekst, maar zorg dan wel voor voldoende contrast zodat de tekst goed leesbaar blijft. Je kan bijvoorbeeld werken met transparantie of je kan de afbeelding lichter of donkerder maken of een andere kleurtint geven.

TIPS VOOR WEB OF APP DESIGN

Denk bij het ontwerpen voor een website of app altijd aan het doel of de functie die je wil bieden. Vertrek van daaruit aan je design en ga niet uit van de lay-out op zich. Elementen zoals het menu of het logo zijn zeker in de beginfase slechts bijzaak.

Visuele hiërarchie

Niet alle elementen zijn even belangrijk. Maak dus ook visueel het onderscheid zodat de gebruiker meteen visueel naar de essentie wordt geleid. Dat kan je op een aantal manieren doen:

• Met de font weight (dikte van de letters) en de kleur. Probeer je te beperken tot twee of drie font weights en ook twee of drie verschillende kleuren. Ga niet te licht zodat alles duidelijk blijft. De donkerste fonts gebruik je voor de primaire content zoals titels. De grijze maar nog goed leesbare fonts zijn voor secundaire content zoals de body van de tekst en de heel lichte voor content zoals informatie over copyright onderaan de pagina.
• Speel met de saturatie van je tekstkleur – maak het iets lichter of donkerder. Gebruik geen grijs op gekleurde achtergronden want dan heb je te weinig contrast.
• Je kan ook nadruk leggen door nadruk weg te nemen. In plaats van in het hoofdmenu van je website het thema van de geopende pagina donkerder te maken, kan je bijvoorbeeld de tabs van de andere pagina’s een lichtere tint geven.

Labels hebben meestal geen nut. Bij de contactgegevens is het bijvoorbeeld niet nodig om expliciet ‘e-mail’, ‘telefoonnummer’, en ‘adres’ voor die informatie te schrijven. Het is voor de gebruiker zo ook wel duidelijk. Als je die labels weglaat, ziet het design er ook veel aantrekkelijker uit. Bovendien krijg je dan de mogelijkheid om meer te gaan variëren met de fonts om bepaalde gegevens te benadrukken, bijvoorbeeld door de naam groter te zetten dan het e-mailadres.

Heb je toch echt labels nodig, zoals in een dashboard met veel gelijkaardige data die toch iets anders betekenen, maak je label dan visueel secundair bijvoorbeeld met een kleiner font.

Een label moet wél de nadruk krijgen als je weet dat de gebruiker de pagina zal scannen op die informatie. Zo gebruik je in een technische fiche zeker de labels ‘hoogte’ en ‘breedte’ bij de aanduidingen van het formaat.

KIES EEN PERSOONLIJKHEID VOOR JE SITE

Elke website heeft een eigen uitstraling nodig. Zo wil een bank vooral betrouwbaar en veilig overkomen terwijl een start-up een website wil die er leuk en speels uitziet.

Hoe creëer je de juiste uitstraling?

Font keuze

Een serif font is meer klassiek en stijlvol, sans serif met rondingen is speels en een gewoon sans serif font heeft een neutrale uitstraling.

Kleuren

Bekijk hoe een kleur aanvoelt. Blauw heeft de associatie ‘veilig en vertrouwd’, roze is ‘leuk en minder serieus’, goud doet luxueus aan.

Border radius

Dit zijn de rondingen, bijvoorbeeld van kaders en buttons. Heel afgerond komt speels over, een kleine ronding is neutraal en strakke hoeken geven een ernstige indruk.

Je hebt meer kleuren nodig dan je denkt

Je kan de kleuren die je nodig hebt indelen in drie categorieën:

Grijswaarden: voor het grootste deel van je applicatie. Neem acht tot tien verschillende maar vermijd puur wit en zwart omdat die te ‘goedkoop’ overkomen.

Primaire kleuren: voor acties en belangrijke zaken. Kies vijf tot tien verschillende tinten: donker voor tekst, licht voor de achtergrond.

Accenten: om aandacht te trekken naar niet-essentiële zaken zoals nieuwe features of meldingen.

Semantische accenten

Kleuren hebben ook een betekenis op zich. Zo kan je rood koppelen aan destructieve acties zoals ‘delete’, negatieve zaken of fouten, geel voor waarschuwingen en groen voor goede dingen zoals ‘publish’. Opgelet, leg visueel altijd de nadruk op de belangrijkste actie.

Houd rekening met gebruikers die kleurenblind zijn. Voor hen is contrast een absolute must. Gebruik indien nodig extra visuele ondersteuning met een symbool. Er bestaan ook tools waarin je kan checken hoe je pagina eruitziet voor iemand die kleurenblind is.