Hoe ontwerp je een website in 9 stappen

Sara Mote en ik richtten MOTE agency op in 2014. We zijn gespecialiseerd in ecommerce en bieden verfijnd design, geavanceerde techniek en service van het hoogste niveau aan een voortdurend veranderende markt. In mijn carrière als webontwikkelaar heb ik een passie ontwikkeld voor innovatie en focus ik me op het bouwen van websites voor merken die duurzame relaties met hun publiek willen opbouwen. Hier volgen enkele inzichten uit mijn 26 jaar ervaring.

Een website ontwerpen is zo eenvoudig als je het zelf maakt: je hoeft geen professionele webdesigner of ontwikkelaar te zijn om een geweldige website voor je merk te creëren. Met een drag-and-drop websitebouwer, een basis websitethema en inzicht in de behoeften van je doelgroep kun je zelf een mooie, intuïtieve site bouwen.

Lees verder om te leren hoe je zelf een website ontwerpt en ontdek voorbeelden van websites die je onderweg kunnen inspireren.

Hoe ontwerp je een website

1. Brainstorm
2. Kies een platform en template
3. Neem brandingbeslissingen
4. Begin met het aanpassen van je template
5. Creëer een basisraster
6. Voeg content toe
7. Zorg voor consistentie over alle kanalen
8. Test en meet
9. Weet wanneer je een professional moet inschakelen

De exacte stappen die je neemt om een website te bouwen, hangen af van het type site dat je maakt en het websitebouwplatform dat je gebruikt. Hier zijn enkele basisrichtlijnen die van toepassing zijn op vrijwel elke drag-and-drop websitebouwer:

1. Brainstorm

De eerste stap in het webdesignproces is een stap terug doen en nadenken over welke boodschap je wilt overbrengen en welke acties je wilt dat bezoekers ondernemen. Als je deze kerndoelen van je site kent, kun je beter bepalen hoe je die informatie het beste presenteert.

Overweeg de volgende vragen om je brainstormsessie te sturen:

• Publiek: Voor wie is deze website? Hoe ga je verbinding maken met je doelgroep?
• Inspiratie: Zoek voorbeelden van bestaande sites die je mooi vindt. Wat vind je eraan?
• Content: Welke content heb je nodig om je verhaal te vertellen? Tekst? Afbeeldingen? Video?
• Prioriteiten: Waar op je site zullen gebruikers het meeste tijd doorbrengen? Je productcollectie? Blog? Homepage?

Denk bij het beantwoorden van deze vragen na over hoe je gebruikers de informatie kunt geven die ze nodig hebben op elke webpagina zonder hen te overweldigen. Het klinkt misschien ouderwets, maar een handige manier om ideeën uit je hoofd te krijgen is om weg te stappen van schermen en analoog te werk te gaan met pen en papier. Maak ruwe schetsen van hoe je wilt dat je website eruitziet en aanvoelt, met focus op waar je verwacht dat gebruikers het meeste tijd doorbrengen.

2. Kies een platform en template

Met je schets op papier heb je een goed beeld van de functies die je site nodig heeft. Die stap helpt je gemakkelijker een websitebouwer en drag-and-drop designtemplate te kiezen.

Als je bijvoorbeeld een online winkel wilt maken, is Shopify's gratis Dawn-thema een beginnersvriendelijke plek om te beginnen. Shopify is een alles-in-één platform, wat betekent dat een Shopify-abonnement toegang biedt tot domeinnamen, webhosting, een websitebouwer, betalingsverwerking en alles wat je verder nodig hebt om online te verkopen.

Heb je een website nodig voor iets anders dan ecommerce? Contentmanagementsysteem WordPress is populair bij bloggers, en Wix is een solide optie om snel een portfolio te maken. Vergelijk de functies, kosten en beschikbare thema's van verschillende websitebouwers om een no-code websitedesigntool te vinden die bij jou en je unieke behoeften past.

3. Neem brandingbeslissingen

Als je al brandingrichtlijnen hebt, ben je een stap voor. Zo niet, dan moet je enkele brandingbeslissingen nemen voordat je begint met het aanpassen van je websitetemplate. Of je nu een ecommerce website of een persoonlijke portfolio maakt, het consistent houden van je lettertype en kleuren voegt persoonlijkheid en legitimiteit toe aan je site.

Lettertypen

Begin met het kiezen van de lettertypen van je merk. Kies een broodtekstlettertype dat goed leesbaar is. Bij het koplettertype is er iets meer ruimte voor experimenteren, maar de woorden moeten nog steeds herkenbaar zijn.

Je letterkeuzes kunnen sfeer en persoonlijkheid overbrengen terwijl ze een raamwerk voor je website vormen. Je broodtekstlettertype helpt het raster van je website te bepalen—de regelafstand, kolombreedte en horizontale en verticale padding die een gevoel van ritme binnen de site creëren.

Beperk je lettertypeselecties tot een minimum om een overweldigend drukke site-ervaring te voorkomen. Beginners kunnen het beste bij maximaal twee soorten lettertypen blijven die elkaar aanvullen: één lettertype voor koppen, één voor broodtekst.

Kleurenpalet

Met je lettertype op zijn plaats kun je verder gaan met je kleurenpalet. Voor maximale leesbaarheid is een zwart-wit kleurenpalet vaak het beste. Maar er is nog steeds ruimte voor branding binnen dat scala aan tinten: een gebroken wit kan warm of koel zijn, en antraciet kan puur zwart vervangen voor een minder streng gevoel.

Welke kleuren je ook kiest voor je merkpalet, het is verstandig om contrastrijke kleuren te gebruiken voor betere webtoegankelijkheid. Het helpt om je kennis van kleuren op te frissen om een duidelijker beeld te krijgen van welke kleuren het beste samenwerken, en hoe je verschillende stemmingen kunt oproepen met kleurpsychologie.

4. Begin met het aanpassen van je template

Dezelfde template kan op onbeperkt veel manieren worden ingericht. Je kunt hem er compleet anders uit laten zien, afhankelijk van de lettertypen, kleuren en andere opties die je selecteert. Veel websitebouwers, waaronder Shopify, hebben de mogelijkheid om brandingbeslissingen zoals kleuren, lettertypen en logo's automatisch toe te passen op je hele site. Als je bouwer deze functie biedt, is het een geweldige plek om te beginnen met no-code website-aanpassing.

5. Creëer een basisraster

De verticale en horizontale hulplijnen die de basis vormen van de lay-out van een webpagina worden het basisraster genoemd. Het gebruik van een rasterlay-out helpt een samenhangende visuele hiërarchie te creëren en geeft je een overzicht van waar je de verschillende elementen van je site plaatst. Je basisraster moet overeenkomen met de hoogte van je broodtekstlettertype, daarom is het belangrijk om je lettertypen te kiezen voordat je in deze stap duikt.

Je websitetemplate heeft mogelijk een standaardraster dat je indien nodig kunt aanpassen. Als je een drag-and-drop websitebouwer gebruikt, zou je een voorbeeld moeten kunnen bekijken van wijzigingen die je aanbrengt in je template. Controleer terwijl je je raster aanpast hoe het eruitziet op desktop versus mobiele apparaten. Als je site responsive design heeft (wat ingebouwd is in Shopify-thema's), zal het aantal kolommen automatisch afnemen als reactie op de schermbreedte van de gebruiker. Als het merendeel van je sitebezoekers vanaf mobiel komt, wil je misschien je standaardvoorbeeld op mobiel instellen om deze stap in het ontwerpproces te stroomlijnen.

6. Voeg content toe

Begin op basis van je schetsen op papier met het toevoegen van content aan je gebrandmerkte websitetemplate.

Websitecontent moet doorgaans elementen bevatten zoals:

• Gebruiksvriendelijke navigatiemenu's
• Hero-beelden zoals foto's of video
• Gebrandmerkte webteksten, inclusief een Over ons-pagina
• Productpagina's (bij een ecommerce bedrijf)
• Contactinformatie

Wanneer je content toevoegt aan je webpagina's, kun je de boven- en onderpadding bepalen—hoeveel ruimte je tussen elementen laat. Door dezelfde paddingnummers (of veelvouden daarvan) door de hele site te gebruiken, creëer je een gevoel van verticaal ritme terwijl bezoekers door je site navigeren.

7. Zorg voor consistentie over alle kanalen

Als je website linkt naar of vanaf andere platforms, zoals je social media-accounts, is het belangrijk om rekening te houden met harmonisatie tussen kanalen.

Stel bijvoorbeeld dat je Instagram-branding compleet anders is dan je websitebranding. Als iemand je site vindt via je Instagram-account, kunnen ze een verwarrende gebruikerservaring hebben door die inconsistenties. In dat geval kan je onregelmatige branding tussen platforms het vertrouwen van je publiek in je merk ondermijnen, zelfs als je website mooi en functioneel is.

Maar als je samenhangende branding over platforms heen vaststelt, creëer je een consistentere gebruikerservaring (UX), waar je publiek je merk ook tegenkomt.

8. Test en meet

Controleer telkens wanneer je wijzigingen aanbrengt in je site, zoals het toevoegen van een video of een plug-in van derden, hoe die wijzigingen je core web vitals beïnvloeden. Core web vitals zijn metingen van hoe goed je site functioneert, zoals hoe lang het duurt om te laden. Core web vitals zijn niet alleen belangrijk voor UX. Ze zijn ook een belangrijk onderdeel van zoekmachineoptimalisatie (SEO), omdat zoekmachines sites met slechte core web vitals deprioriteren.

Als je je core web vitals voor en na elke wijziging controleert, weet je precies welke website-elementen prestatieproblemen kunnen veroorzaken. Die data stelt je in staat om met vertrouwen de juiste wijzigingen aan te brengen.

9. Weet wanneer je een professional moet inschakelen

Als je uiteindelijk besluit om een webdesigner in te huren om je site verder aan te passen, zal je initiële doe-het-zelf-ervaring met het webdesignproces van pas komen in die samenwerking. Je praktijkervaring met je websitetemplate helpt je te verwoorden wat erin ontbreekt en geeft je de taal die nodig is om beter te communiceren met een professionele designer. Dat helpt jullie beiden om je visie efficiënter te realiseren.

Voorbeeld ecommerce websitedesign: Klur

Huidverzorgingsbedrijf Klur is een uitstekend voorbeeld van hoe een minimalistische aanpak kan resulteren in een sterke site-ervaring. De webdesignkeuzes van Klur creëren een serene sfeer, waardoor websitebezoekers in de ontspannen mindset komen van een luxe zelfzorgritueel.

Klur coördineert zijn branding over contactpunten heen. Het gebruikt bijvoorbeeld varianten van één enkel lettertype voor zowel zijn productverpakking als website. Als productverpakking niet van toepassing is op je merk, overweeg dan andere manieren waarop je harmonisatie tussen kanalen kunt creëren, zoals het gebruik van hetzelfde lettertype voor je visitekaartje, e-mailhandtekening en website.

Voorbeeld redactioneel websitedesign: Unconditional Magazine

De digitale aanvulling van Unconditional Magazine op zijn gedrukte magazine roept een gevoel van visueel gemak op terwijl het de kijker op emotioneel niveau betrekt. Het duidelijke navigatiemenu maakt het gemakkelijk om precies te vinden wat je zoekt, maar als je in de stemming bent om te verkennen, kun je gewoon naar beneden scrollen om een samengestelde selectie van afbeeldingen te onthullen die linken naar eerdere edities.

Een grote hero-afbeelding op de homepage is een geweldige manier om sitebezoekers onmiddellijk onder te dompelen in je merkwereld, ongeacht je branche of bedrijfsdoelen. Het periodiek wijzigen van je hero-afbeelding is ook een gemakkelijke manier om je website op te frissen zonder de kernbranding of functionaliteit te wijzigen.