11 mooie websites om inspiratie op te doen

Mensen vormen binnen 50 milliseconden een oordeel over het uiterlijk van je website. Na deze tijdspanne, die sneller voorbij gaat dan het knipperen met je ogen, is de kans om nog eens een eerste indruk te maken verkeken.

Je bezoeker vind je site lelijk of mooi. Of het design laat je bezoeker volledig koud, wat mogelijk een nog minder wenselijke uitkomst is dan dat ze hem lelijk vindt.

Hoe het ook zij, je bent op dit artikel geland omdat je (waarschijnlijk) inspiratie op wil doen voor je eigen website. Nu zit het internet tjokvol mooie websites, maar je moet even door het puin graven om ze te vinden. Dat heb ik gedaan.

In dit overzicht laat ik prachtige websites zien in alle soorten en maten. Reis websites, ecommerce website, blogs. Ik zet erbij waarom ik vind wat deze sites zo mooi maakt. Daarna geef ik een paar onderdelen van de site die je zou kunnen “lenen” voor je eigen website project.

11 mooie website voorbeelden

1. AirBnB

Type website: Reis platform

Wat maakt deze website mooi?

Ik zal het eerlijk toegeven: in een eerder leven als startup CEO heb ik meer dan eens leentjebuur gespeeld bij AirBnB (zowel hun app als hun website). Hoewel ik en mijn team ons product (een restaurant reservering app) nooit zo mooi hebben weten te krijgen als AirBnB, lieten we destijds onze directe concurrentie in elk geval in het stof bijten.

AirBnB is opgericht door designers. Dit zie je duidelijk terug op iedere pagina van hun site. Het design is minimalistisch en ze laten de prachtige foto’s van de woningen het meeste werk doen. Precies zoals het hoort op een site als deze. Er is een eenduidig lettertype en er wordt slim gebruik gemaakt van icoontjes, zodat je makkelijk informatie tot je kan nemen.   

Elementen die je kunt “lenen”:

• Subtiele rondingen om de hoeken van je afbeeldingen die je site er net iets zachter uit laten zien
• Maximaal twee/drie kleuren gebruiken op je site
• Een product overzicht wat over de gehele breedte van je scherm uitgesmeerd wordt

2. Slack

Type website: Software as a Service (SaaS)

Wat maakt deze website mooi?

Mooie pastelkleuren die perfect in elkaar haken. Subtiele animaties die de voorpagina net wat levendiger maken.

Werk chat software is in de kern heel saai. Slack weet het toch opwindend te maken door hun kleur gebruik en speelse design.

Elementen die je kunt “lenen”:

• Direct op je homepage een rijtje laten zien van bedrijven waar je mee werkt
• Gebruik een in het oog springende CTA kleur
• Subtiele animaties

3. PirateCode

Type website: Webdesign agency

Wat maakt deze website mooi?

Van een webdesign bureau mag je verwachten dat hun site er prachtig uit ziet, maar veel bureaus slaan de plank mis. Zo niet PirateCode, wat met prachtige full-screen afbeeldingen, een toegankelijk lettertype en waanzinnige animaties (kijk eens naar die krokodil die rustig met een frisdrankje in z’n hand van links naar rechts waggelt!) de show steelt.

Elementen die je kunt “lenen”:

• Een overkoepelend site thema wat de verbeelding prikkelt
• Unieke, zelfgetekende afbeeldingen
• Geen strakke lijnen tussen verschillende website secties, maar bijvoorbeeld lijnen die bubbels uitbeelden

4. WireCutter

Type website: Affiliate website

Wat maakt deze website mooi?

Het helpt als je als affiliate site toegang hebt tot het design team van de New York Times. Toen de WireCutter voor miljoenen aan een van de grootste kranten ter wereld werd verkocht, is het design er niet op achteruit gegaan.

Een subtiele grijze achtergrond, harde zwarte lijnen boven de titels, en pittige productfoto’s helpen een design te genereren waar je met een gevoel van vertrouwen doorheen surft.

Elementen die je kunt “lenen”:

• De product boxen op hun product vergelijkingspagina’s (deze zijn weliswaar al geleend door pak en beet de helft van de affiliate marketing community, maar goed)
• Sterk contrasterende kleuren van hun lettertypes
• Affiliate links die knalrood zijn, en alle andere links gewoon zwart houden

5. De La Calle

Type website: Ecommerce

Wat maakt deze website mooi?

De La Calle is een site waarvan de kleuren perfect bij de branding van het bedrijf aansluiten. Dit geldt ook voor het lettertype, waarvan je direct dorst krijgt in zo’n smakelijk Mexicaans frisdrankje.

De site maakt gebruik van zoveel kleuren als ze frisdranken hebben – en dit zijn er 9 – maar op geen moment voelt dit overdadige kleurgebruik overweldigend.

Elementen die je kunt “lenen”:

• Tekst die net een beetje schuin hangt waardoor je site iets speelser oogt
• Gewaagde fonts die buiten de begaande wegen wijken
• Een CTA kleur die tegenovergesteld wordt wanneer je er met je muis over heengaat

6. Switch Research

Type website: Ecommerce

Wat maakt deze website mooi?

Switch Research heeft een rustgevend ontwerp wat als een handschoen gegoten zit rondom het onderwerp van de site. Lichte kleuren, een elegant lettertype, en subtiele animaties.

De site is een ecommerce winkel maar voelt op geen moment “salesy.”

Elementen die je kunt “lenen”:

• Gradient kleuren voor een achtergrond die bestaan uit niet twee maar 3 verschillende kleuren
• Dunne lijnen van 1 pixel die verschillende onderdelen van je site markeren
• Woorden die bij jou business aansluiten die van links naar rechts over het scherm schuiven

7. Too Good To Go

Type website: Tweezijdige marktplaats

Wat maakt deze website mooi?

Too Good To Go zet zich in tegen voedselverspilling. De site haakt hier goed op in door het hebben van aantrekkelijke groene en gele kleuren. Het design is minimalistisch en richt je aandacht compleet op de boodschap van het bedrijf.

Elementen die je kunt “lenen”:

• Nadruk leggen op delen van je tekst door deze een andere kleur te geven
• Icoontjes die zachtjes wiebelen om hiermee aandacht te trekken naar statistieken
• Genereus gebruik van white space waardoor je site een open gevoel krijgt

8. Sonja van Duelmen

Type website: Portfolio

Wat maakt deze website mooi?

De afbeeldingen van Sonja van Duelmen grijpen je bij de lurven. Het is moeilijk je ogen af te halen van het visuele geweld wat de site op je afvuurt, wat precies de bedoeling is van een creatieve designer.

Sonja gebruikt ook op een creatieve, unieke manier animaties die je praktisch nergens ziet.

Elementen die je kunt “lenen”:

• In het oog springende afbeeldingen met kleuren die van het scherm spatten
• Foto’s die grotendeels statisch zijn maar één enkele, eenvoudige animatie bevatten
• Je website enkel wit en zwart houden wanneer de kleurrijke afbeeldingen hebt die de boventoon moeten voeren

9. Sirin Labs

Type website: Ecommerce

Wat maakt deze website mooi?

Ik link niet door naar de website van Sirin Labs omdat het een blockchain/crypto product is (wat ik veracht), maar ik wil ze niettemin in het zonnetje zetten vanwege hun design. De site laat uitmuntende product fotografie zien en bewijst dat fotografie en illustratie prima samen kunnen gaan.

Elementen die je kunt “lenen”:

• Een creatieve “grid” (3 blokken naast elkaar, twee blokken eronder)
• Likkebaardend mooie product foto’s
• Mengelmoes van high-res foto’s en illustraties

10. Wait But Why

Type website: Blog

Wat maakt deze website mooi?

Ik hoor je al denken: wat is er in hemelsnaam mooi aan dit gedrocht van een site dat zo de jaren ’90 uit geplukt lijkt te zijn?

En eerlijk is eerlijk, de meeste andere bloggers zouden Wait But Why niet opnemen in een overzicht van “mooie websites.”

Ik doe dit wel. En de reden is niet omdat Wait But Why een schoonheid is in de klassieke zin van het woord. De reden is dat door de unieke, zelfgetekende illustraties, speelse interpretatie van social media icoontjes en doodsimpele lay-out je een site krijgt die met z’n kop boven de eenheidsworst van het wereldwijde web uitsteekt. De schoonheid van de site zit ‘m in het uniek durven zijn.

Het is een site die je niet vergeet of door de war haalt met een andere site.

Elementen die je kunt “lenen”:

• Als je over enig creatief talent beschikt, zelfgetekende illustraties
• Een sidebar die je bezoekers doet glimlachen

11. High St. Deli

Type website: Restaurant site

Wat maakt deze website mooi?

Levensgrote foto’s van sandwiches, creatief vormgegeven menu’s en een consistent kleurenpalet. High St. Deli dient als een uitstekend voorbeeld voor casual restaurant websites.

Elementen die je kunt “lenen”:

• Menu met de schaduw erachter zonder blur
• Foto’s van eten die een halve of hele pagina in beslag nemen

De principes van goed website design

Hieronder vind je een aantal universele design principes waar iedere goed ontworpen website aan moet voldoen.

Hou het simpel

Denk: less is more. Eenvoud moet het primaire doel van website design zijn. 

Hoe verleidelijk het ook is om allerlei franjes en effecten aan je site toe te voegen, denk altijd aan je gebruiker. Hoe kun je de informatie die zij zoekt presenteren op een zo simpele, helder mogelijke manier? Wordt haar gebruikerservaring beter van allerlei verschillende kleuren, content blokken en andere elementen die op haar afkomen?

Laat je gebruikers niet nadenken 

Of, don’t make me think! in Steven Krug’s woorden. Krug’s boek over dit onderwerp is decennia oud maar anno 2021 nog steeds zeer relevant.

Wanneer je je website ontwerpt is het aan jou om alle vraagtekens bij je bezoekers weg te nemen. Dit kun je doen door het creëren van een duidelijke visuele hiërarchie, logische navigatie en consistentie van design elementen.

Tekst speelt hier ook een ontzettend grote rol: zit er geen dubbelzinnigheid in de woorden die je op je site gebruikt? Is je copywriting zo scherp en helder als het zou kunnen zijn?

Focus de aandacht van je gebruikers op de juiste dingen

Dit sluit aan op het vorige punt. Gebruik kleurcontrast of contrast in grootte om de aandacht van je bezoekers te leiden naar bepaalde onderdelen van je site. Hiermee kun je hen eenvoudig van punt A naar B brengen, zonder dat dit ze moeite kost.

Schroom je niet witruimte in te zetten 

Je site is een stuk beter te behappen wanneer je veel witruimte plaatst tussen je design elementen en tekst.

Witruimte geeft webpagina’s een ruimtelijk gevoel en biedt je bezoekers momenten van ademruimte. Een van de eerste dingen die bezoekers doen is je pagina scannen en de informatie mentaal in makkelijk te behappen blokken te verdelen. Witruimte maakt dit een stuk eenvoudiger.

Originaliteit is prima, maar verlaat de gebaande paden niet te veel

Het internet zou een onmogelijk te navigeren plek zijn als websites vaste design conventies aan de kant gooide.

Net als in het echte leven (bijvoorbeeld, de meeste vliegvelden volgen een soortgelijke blauwdruk), verwachten gebruikers ook op het internet een zekere voorspelbaarheid wanneer ze een site bezoeken. Denk aan een navigatiemenu bovenaan de site, hoe een gemiddeld blog artikel gestructureerd is en hoe een contactpagina eruit ziet. 

Originaliteit is geweldig, maar zorg dat je site niet te veel uit de pas loopt. Volg design conventies waar mensen mee bekend zijn.

Voor meer over website design, bekijk onze extreem uitgebreide website design handleiding.

Hoe maak je zelf een website?

Ben je er nog niet helemaal uit hoe je je eigen website in elkaar gaat zetten? Lees dan een van de volgende artikelen:

• Zelf een website maken
• WordPress website maken
• Gratis website maken