Top 10 mooiste websites ter inspiratie in 2024

Wat maakt een website mooi?

Over schoonheid valt niet te twisten! Toch zetten wij voor jullie de 10 mooiste websites op een rij. Daarom goed om vooraf te benoemen: wat vinden wij nu eigenlijk mooi? Natuurlijk moet een website er gelikt uitzien. Lees: kleurgebruik, typografie en lay-out moeten perfect passen bij het merk. Daarnaast letten we ook op functionaliteit. Daarom zie je in onze beoordelingen ook waardering voor overzichtelijkheid, toegankelijkheid, mobiel gebruik en gebruiksvriendelijkheid. Functioneel mooie websites dus!

Moooi

We beginnen met de persoonlijke favoriet van onze lead designer Chris van den Broek: Moooi. Whats in a name! Dit is een typisch voorbeeld van een website waarvan je niet direct verwacht dat het in WordPress is gebouwd. Het is volledig gericht op beleving en design. Perfect passend bij het designmerk Moooi. Een combinatie van prachtige fotografie met een kleine hoeveelheid tekst in mooie lettertypes. 

Door de manier van schalen van de blokken past een foto-tekst-combinatie altijd precies in je venster. Bij het scrollen heb je bovendien heel subtiele animaties, zoals een scrollvertraging en lichte parallax op de foto’s. Omdat het zo subtiel is, gaat het echter niet ten koste van de gebruiksvriendelijkheid. 

Verbetertip: Door het menu dat onderaan de pagina staat, scoort de site iets minder op gebruiksvriendelijkheid en toegankelijkheid. Je moet het eerst zoeken, voordat je verder kan.

Moooi

• 100% beleving en design
• Prachtig gebruik van whitespace
• Goede mobiele weergave
• Werkt supersnel
• Mooie, subtiele animaties

Minder moooi

• Het menu staat niet op een logische plek
• Door veel (bewegend) beeld iets minder toegankelijk voor sommigen
  

Neem een kijkje

NASA

We gaan de oceaan over, naar NASA. De website is strak opgemaakt en oogt… ruimtelijk. Het zwart als achtergrondkleur in onder andere het menu en footer is een mooie knipoog naar het donkere heelal. Eenzelfde knipoog staat in het menu, dat de tekst ‘explore’ heeft. Het dikkere en schreefloze lettertype maakt de site goed leesbaar, zelfs wanneer teksten in fotografie staan. 

Ook qua functionaliteit en gebruiksvriendelijkheid scoort de website goed. De gebruiker krijgt goede feedback bij buttons, linkjes en tabjes. Ondanks de grootte van deze mooie WordPress website, zijn de site en het menu nog steeds overzichtelijk. Bij de (langere) nieuwsartikelen blijft de inhoudsopgave van het artikel bovendien continu ‘sticky’ in beeld, waardoor je snel door de tekst navigeert.

Verbetertip: Er zijn nog wat kleine verbeterpunten op het gebied van toegankelijkheid. Op sommige plekken staan grijze alineateksten die klein zijn en een te laag contrast hebben, waardoor ze moeilijk leesbaar zijn.

Mooi

• Strakke, stoere uitstraling past bij de organisatie
• Grote site, maar toch overzichtelijk
• Teksten in foto’s zijn goed leesbaar
• Duidelijke interface zorgt voor goede gebruiksvriendelijkheid 
• Nieuwsartikelen hebben een sticky snelmenu 

Minder mooi

• Sommige grijze alineateksten zijn te klein en hebben een te laag contrast, wat ten koste gaat van leesbaarheid.
• Categorie-titels hebben een slecht leesbaar monotype letter, met grote letterafstand.

Neem een kijkje

The New Yorker

We blijven in Amerika en kijken naar een mooie website die uitermate geschikt is voor WordPress, door de vele artikelen. The New Yorker is een tijdschrift voor nieuws en achtergrond, dat al bijna honderd jaar bestaat. Met een mix van reportages, opinie en satire brengen zij wekelijks een papieren magazine uit. De website brengt die artikelen digitaal, met hun typische lettertype als herkenbaar element. 

De site is rustig en overzichtelijk waardoor artikelen heel fijn weglezen. Toch ademt de site een goede sfeer, door het gebruik van veel en grote fotografie. Ook de afwisseling van verschillende blokken op de homepage geeft een fijne dynamiek. The New Yorker opent hun website bovendien altijd met hun cover.  

Verbetertip: Sommige teksten, waaronder die van de navigatie, zijn op desktop erg klein. Sommige gebruikers zullen hier moeite mee hebben. Op mobiel zijn sommige pagina’s erg lang, wat voorkomen kan worden door keuzes te maken en bepaalde vormgevingselementen weg te laten.

Mooi

• Unieke, herkenbare typografie
• Veel beleving dankzij goed gebruik van fotografie
• Sfeer ligt in lijn met magazine
• Artikelen staan in rustige, afleidingsvrije omgeving

Minder mooi

• Mobiele pagina’s soms (te) lang
• Teksten van navigatie zijn klein

Neem een kijkje

Uit Pauline’s keuken

De website Uit Paulines Keuken herken je direct, dankzij de kenmerkende typografie die doet denken aan een magazine. Ook de contrastrijke stijl van de fotografie is consequent doorgevoerd en geeft de website een mooie, geheel eigen look. Omdat de rest van de site qua kleuren rustig is gehouden, springen de foto’s met al het lekkers er echt uit. 

Voor de gebruiksvriendelijkheid van de website zijn enkele handige snufjes toegepast, zoals de kookmodus, waardoor je scherm niet op stand-by springt tijdens het koken. Ook functionaliteiten als het toevoegen van je boodschappen aan het winkelmandje van AH of Jumbo maken de site erg gebruiksvriendelijk. 

Verbetertip: De site gebruikt alleen maar staande fotografie. Op mobiel worden pagina’s hierdoor soms wat lang.

Mooi

• Opvallende en herkenbare typografie
• Opvallende en consequente stijl van fotografie
• Rustige kleuren laten fotografie spreken 
• Handige tools vergroten gebruiksvriendelijkheid

Minder mooi

• Langere pagina’s op mobiel door staande fotografie

Neem een kijkje

Douwe Egberts cafe’s

Douwe Egberts is een sterk Nederlands merk. De site ademt wat je bij het merk verwacht: sfeer, warmte en een gevoel van thuiskomen. De teksten en fotografie dragen hieraan bij, maar ook de knappe mix van verschillende typografieën, die duidelijkheid en een sfeervolle krijtletter – zoals op een sandwichbord bij een café – combineert. Ondanks de verschillende lettertypes, de vele foto’s en animaties, blijft het een mooi en rustig geheel, mede dankzij de royale witruimtes tussen de blokken. 

De animaties in de site zijn een voordeel en nadeel tegelijk. De effecten die worden gebruikt voor hovers en het laden van elementen zijn origineel en trendy. Maar ze zijn misschien ook nét even iets teveel. Vooral de vertraagde smooth scroll is naar onze mening net even iets té traag. Dat is dan ook onze grootste verbetertip voor deze website.

Verbetertip: De site heeft een te langzame scrollvertraging, waardoor hij wat sloom overkomt. Door de ‘smooth scroll’ iets te minderen, houdt de website de sjeu, maar reageert hij voor je gevoel sneller op bezoekersacties.

Mooi

• Zet de sfeer van DE perfect neer
• Knusse fotografie, waar veel gebruik van wordt gemaakt
• Mooie mix van drie type letters.
• Mooie effecten

Minder mooi

• Smooth scroll is tikje overdreven, waardoor het traag voelt.

Neem een kijkje

Stock Dutch Design

De volgende mooie website is een designwebsite op en top. Het gaat dan ook om een Nederlands designmerk. Deze WordPress website is een perfect voorbeeld van wat er allemaal met het veelzijdige CMS mogelijk is: zwevende foto’s met een wisselende achtergrondkleur wanneer je binnenkomt, veel mooie animaties en prachtige kleurovergangen. Hier is duidelijk nagedacht over de uitstraling van de site en het merk. 

Ook typografisch is de site een pareltje. Een schreefletter (met voetje) is mooi gecombineerd met een schreefloze letter. Op mobiel is de site duidelijk iets rustiger gehouden, wat voordelig is voor de performance en gebruiksvriendelijkheid van de site. 

Verbetertip: Ieder voordeel heeft zijn nadeel. Zo ook de mooie animaties en bewegende elementen op deze site. Soms gebeurt er zoveel, dat het afleidt van de inhoud. Vorm ging hier waarschijnlijk boven functionaliteit. Ook qua performance zie je dat terug, doordat elementen soms traag en haperend laden.

Mooi

• Design op en top
• Toffe animaties, origineel en gevarieerd
• Prachtige kleurovergangen
• Mooie typografie
• Mobiel is rustiger gehouden

Minder mooi

• Qua performance laat het soms nog te wensen over
• De toegankelijkheid is minder, door veel bewegende elementen en kleine letters
• Vorm boven functie

Neem een kijkje

Tonal

Dit is een voorbeeld van een mooie productwebsite, die volledig is ingezet voor de verkoop. Hij is optimaal ingericht voor goede conversie, doordat hij zowel interesse wekt, informeert, overtuigt als goede call to actions heeft. Video, fotografie en tekst wisselen elkaar mooi af, waardoor de website spannend blijft om doorheen te scrollen. Je wordt steeds weer verrast door een nieuw element. 

Als je op de site komt, beleef je het product echt. Je opent direct met beelden waarbij de thuisgym wordt gebruikt. Ook mogleijke resultaten dieje kunt boeken met het apparaat worden direct getoond, net als verschillende functies. Duidelijk, direct zichtbaar en overzichtelijk weergegeven. De site gebruikt weinig kleur, maar de conversieknop ‘Pricing’ is opvallend gekleurd aanwezig om bezoekers snel naar conversie te begeleiden.  

Verbetertip: Openen met een video maakt impact, maar heeft ook impact op de performance. De site laadt minder snel met een video die direct afspeelt. Deze video is bovendien niet te pauzeren. In verband met toegankelijkheid is dat wel aan te raden.

Mooi

• Goede productbeleving
• Sterk ingericht op conversie
• Duidelijke CTA

Minder mooi

• Button en ‘scroll-to discover’ op home niet toegankelijk door laag contrast en kleine font-size.
• Video above the fold heeft impact op je prestaties, daarnaast kan je deze niet pauzeren dus ook niet toegankelijk.

Neem een kijkje

The White House

Een van de bekendste huizen in de wereld maakt gebruik van ’s werelds bekendste CMS WordPress. Het Witte Huis benut de functionaliteiten van WordPress optimaal. De site toont overzichtelijk het vele nieuws en de vele informatiepagina’s en artikelen die op de site te vinden zijn. Deze mooie WordPress website heeft een rustige en ruimtelijke uitstraling met subtiele vormgevingselementen, zoals veranderende achtergrondkleuren van blokken.

Bij deze website is ook duidelijk goed nagedacht over toegankelijkheid. Het menu is als woord uitgeschreven, in plaats van enkel drie streepjes te tonen. Het opent in een vol scherm met een overzichtelijk aantal keuzes. Op mobiel is het menu met de duimen makkelijk bereikbaar, omdat het onderin is geplaatst. Buttons en linkjes zijn bovendien duidelijk aangegeven. 

Verbetertip: Mobiel wijkt de site erg af van wat gebruikers gewend zijn. Hoewel sommige aanpassingen in de basis niet verkeerd zijn, is het een risico om af te wijken van ‘de standaard’. Bezoekers moeten dan langer zoeken hoe iets werkt.

Mooi

• Overzichtelijke en rustig interface
• Contrastrijk kleurenpalet, dat goed leesbaar is
• Goed nagedacht over toegankelijkheid
• Rustige en schone vervolgpagina’s 
• Snel! De performance van de site is fantastisch.

Minder mooi

• Mobiel wijkt af van de gangbare standaarden
• In ‘featured news’ staan onleesbare teksten door de afbeeldingen

Neem een kijkje

FrieslandCampina Ingredients

Dit is een typisch voorbeeld van een sterk functioneel design. Het staat wellicht haaks op de fancy vormgevingselementen van andere voorbeelden van mooie websites uit deze lijst, maar doet desalniettemin precies waarvoor het gemaakt is. De doelgroep van deze zakelijke website is vakmensen. Zij krijgen een overzichtelijke website voorgeschoteld, waarbij marktsegmenten ieder een eigen kleur hebben. Deze blijft zichtbaar in het opvallende ‘sticky’ menu wanneer je scrolt. 

Qua looks ademt de website de huisstijl van FrieslandCampina, met veel rondingen en lichte kleuren. Hoewel de site vooral opvalt in zijn functioneel design, zitten er ook leuke stijlelementen in. Zo beweegt de golf in de footer. Dat effect komt op verschillende punten subtiel in de site terug. 

Verbetertip: Sommige pagina’s zijn (bijna) leeg. Die lege pagina’s geven het gevoel dat de site nog niet af is en doen afbreuk aan de verder strak vormgegeven website.

Mooi

• Functioneel sterke website, passend bij doelgroep
• Subtiele animaties en kleurgebruik
• Goede toepassing huisstijl FrieslandCampina
• Navigatie blijft altijd zichtbaar
• Mobiele weergave goed ingericht

Minder mooi

• De website bevat (nog) wat lege pagina’s

Neem een kijkje

Wereldouders

Een website waar de vrolijkheid vanaf spat. Deze website heeft een prachtig kleurrijk palet met felle kleuren. De rustige achtergrondkleur houdt daarbij de site in balans. Samen met de unieke typografie, waarbij handgeschreven letters worden afgewisseld met stevige blokletters, geeft het de site een vrolijke en speelse uitstraling. Een mooie insteek van het goede doel, dat zich inzet voor het welzijn van kinderen in Latijns Amerika. 

De grote foto’s op de website maken impact. Ze zetten de sfeer neer en geven direct een beeld van wat de hulporganisatie doet. De doneerknop heeft een prominente plek in het menu en geeft daardoor een duidelijk signaal aan bezoekers hoe zij kunnen helpen. Ook de doneerpagina zelf is duidelijk en gefocust, waardoor doneren erg makkelijk wordt gemaakt. 

Verbetertip: Door het vele kleurgebruik vallen op sommige plekken de call to actionknoppen, zoals de doneerbutton, wat weg.

Mooi

• Kleurrijke en vrolijke uitstraling
• Unieke en herkenbare typografie. 
• Goed gebruik gemaakt van fotografie
• Duidelijke doneerpagina

Minder mooi

• De doneerknop wordt soms wat ondergesneeuwd door de andere kleuren.

Neem een kijkje