Wat betekent het om mooie websites te bouwen? 5 belangrijke regels voor mooi webdesign

Mooie websites bouwen

De belangrijke zaken om een mooie website te bouwen volgens Motionmill

1. Beperk je tot twee of drie basiskleuren voor je ontwerp
2. Kies je afbeeldingen (en video’s) met liefde
3. Vergeet die typografie niet!
4. Pas de gulden snede toe en gebruik rasters
5. Een geheim ingrediënt?!

1. Beperk je tot twee of drie basiskleuren voor je ontwerp

Goed kleurgebruik is essentieel voor het bouwen van een mooie website.

Kleuren kunnen gebruikt worden om elementen te benadrukken waarop je de aandacht wil trekken. Consistent kleurgebruik verhoogt je merkherkenning en je kleurkeuze beïnvloedt hoe bezoekers je website ervaren. Want verschillende kleuren veroorzaken andere emoties bij mensen:

• Rood is warm, passioneel en krachtig. Rood licht zou zelfs je hart sneller doen kloppen.
• Groen is genezing, rust, natuur, fris. Groen staat voor vitaliteit, ziet er milieuvriendelijk uit en is rustgevend.
• Blauw is kalmerend maar krachtig, loyaliteit, betrouwbaarheid. Blauw is populair bij de overheid en medische bedrijven vanwege een gezaghebbende uitstraling. Het is niet voor niets dat de politie blauwe uniformen draagt!
• Paars is duur, adel, vorstelijk, verfijnd en spiritueel. Paars was vroeger een duur pigment en die associatie is blijven bestaan.
• Roze is vrouwelijk, onschuldig en zachtaardig. Interessant genoeg was roze vroeger juist een mannelijke kleur.
• Wit is licht, vredevol en zuiver. Wit mag niet onderschat worden, want je schept er ruimte mee.
• Bruin is natuurlijk en aards, ruw, betrouwbaar en authentiek. Bruin wordt gebruikt om een krachtige en stabiele indruk op te wekken.
• Zwart is onderscheidend, serieus en gezaghebbend. Zwart is verfijnd en klassiek, net als een net pak.
• Oranje is energie. Het trekt de aandacht, is leuk en cool en geeft klanten het gevoel dat ze te maken hebben met een cutting-edge bedrijf.

“Leuk, maar jullie wilden het toch hebben over het reduceren van het aantal kleuren in een website?”

Klopt, maar wat denk je als je dit leest?

Mogelijk denk je dan iets zoals “dat ziet er grappig uit!” Maar het is waarschijnlijker dat je denkt: dit leest moeilijk. De kans dat je vertrouwen in deze boodschap stijgt en je absorbeert wat ik probeer te schrijven, wordt kleiner.

Te veel kleuren geven hetzelfde effect. Je bezoeker verliest al snel de aandacht, en jij laat de kans liggen om je boodschap goed over te brengen.

Dat wordt dus elimineren. Ik kies altijd 1 hoofdkleur. Vervolgens ga ik op zoek naar een mooie steunkleur die de hoofdkleur aanvult. Eventueel kan er nog een derde accentkleur bij.

Met coolors.co vind je supersnel een mooi kleurenpalet.

Voor het bouwen van een mooie website moet je dus niet alleen mooie kleuren uitkiezen, maar vooral ook de juiste kleuren.

2. Kies je afbeeldingen (en video’s) met liefde

Net zoals bij het kiezen van je kleuren zijn de juiste afbeeldingen essentieel om je site als mooi te laten ervaren.

Wij mensen zijn zeer visuele wezens, dus (bewegende) beelden trekken niet alleen onze aandacht, maar maken ook emoties los en betrekken ons meer bij wat we zien. Als je website aantrekkelijk beeldmateriaal heeft, is de kans groter dat mensen je website mooi gaan vinden, bekijken en doorklikken.

Ook hier geldt dat rust en balans de sleutel zijn. Kies je beelden dus zorgvuldig met liefde en zorg dat ze qua kleurtoon en warmte bij elkaar passen.

Gelukkig zijn er tegenwoordig goede (gratis) alternatieven. Ik heb er eerder al een bericht aan gewijd.

---

3. Vergeet die typografie niet!

Sta me toe om even te klagen. Klanten stappen soms naar ons toe met een lettertype dat ze ergens op het internet gevonden hebben en willen dan dat we dat op hun website gebruiken.

Soms is dat ok, maar vaak duiken er problemen op in de fontsets die je op het web vindt. Fonts kunnen namelijk veel verschillen in kwaliteit, ook al zien ze er niet altijd zo verschillend uit.

Een slecht gemaakt font zorgt voor problemen: de spatiëring klopt niet, of er ontbreken belangrijke karakters. Kies daarom voor een betrouwbare bron — vaak niet wat je gratis op het internet vindt, maar premium fonts van ervaren vormgevers. Al kan gratis ook! De lettertypes op Google Fonts zijn gratis én van een goede kwaliteit. Daar maken we dus enthousiast gebruik van.

Let er ook op dat niet elk lettertype geschikt is voor dezelfde taak. Sommige lettertypes zien er erg leuk uit, met speciale vormen of veel krullen, maar dat leest dan niet zo vlot meer op een groot stuk tekst.

Kies daarom voor een Serif of Sans Serif lettertype.

Een Serif lettertype wordt ook wel een lettertype met schreef genoemd. Dat verwijst naar de haakjes die je hierboven ziet aan de uiteinden van de letterlijnen. Een font met schreef oogt klassieker en kan luxe uitstralen. Boeken en magazines maken er gebruik van, want ze zijn zeer geschikt voor het leesbaar houden van lange teksten. Maar ook op het web is het een praktische keuze.

Bij een Sans Serif lettertype zie je dan weer schreefloze letters. Zo’n letter oogt strakker en moderner, en is vooral zeer neutraal, zonder overbodige details die je zullen afleiden. Schreefloze fonts zijn de meest populaire keuze op het web.

Specialere fonts vind je onder categorieën zoals Script en Decorative. Script lettertypes zien er uit als handgeschreven letters, terwijl Decoratieve fonts er vaak speelser uitzien. Prima voor een logo, eventueel leuk voor titels en tussentitels, maar de broodtekst? Die houd je beter simpel.

The quick brown fox jumps over the lazy dog — in deze zin komen alle 26 letters van het alfabet voor. Handig om een font mee te controleren.

Veel succes met je lettertype zoektocht!

---

4. Pas de gulden snede toe en gebruik rasters (een meetlat is optioneel)

Nu wordt het hier even wiskundig, want ook al bouwden ze geen mooie websites, die Oude Grieken hadden gelijk. Met de gulden snede schep je écht harmonie in je webdesign.

Even de gulden snede opfrissen?

Het ene deel heeft een lengte a, het andere deel lengte b. De lengte van het gehele lijnstuk is dan a+b. Voor de gulden snede geldt: de lengteverhouding tussen b en a is gelijk aan de verhouding tussen a en de totale lengte (a+b).

In cijfertjes uitgedrukt levert dit (ongeveer) het volgende op: 3 verhoudt zich tot 5, zoals 5 zich verhoudt tot 8. Of het kleinste deel verhoudt zich tot het grootste, zoals het grootste zich verhoudt tot het geheel.