Wat is webdesign? Een handleiding voor beginners
Webdesign heeft een lange weg afgelegd sinds de eerste website in 1991 werd gepubliceerd. Met tegenwoordig meer dan een miljard online websites, is het geen verrassing dat deze industrie niet meer weg te denken is in onze maatschappij. Wix is de thuisbasis van duizenden website-ontwerpprofessionals, enthousiastelingen en designers die de industrie in staat stellen zich te ontwikkelen. Wil jij meer te weten komen over de wondere wereld van webdesign? Dan ben je hier aan het juiste adres! Of je einddoel nu is om een eigen website te maken, of om simpelweg meer kennis op te doen over de designwereld; na het lezen van dit artikel heb je alle nodige inzichten en inspiratie opgedaan die je nodig hebt.
Wat is webdesign?
Webdesign is de kunst van het plannen en ordenen van website-content, zodat deze online met de wereld kan worden gedeeld en geopend. Mensen wenden zich tegenwoordig om tientallen redenen tot webdesign, en afhankelijk van hun einddoelen kunnen ze ervoor kiezen om een van de volgende soorten websites te maken:
Een portfoliowebsite om werk te laten zien
Een webshop om producten te verkopen
Een zakelijke website om een bedrijf te beheren en te laten groeien
Een blog om kennis te delen met andere gelijkgestemden
Een restaurantwebsite om online bestellingen, reserveringen en betalingen te vergemakkelijken
Een diensten-website om nieuwe klanten te boeken
Webdesign is als het ware een combinatie van esthetische en functionele elementen, hetgeen wat het uiterlijk van een website bepaalt. Denk aan kleuren, lettertypen en afbeeldingen, maar ook de structuur van de website en de gebruikerservaring ervan. Wil je ook aan webdesign beginnen? Goed idee! Het maken van een website met een krachtige webdesign is namelijk één van de belangrijkste aspecten van een online aanwezigheid. Hierdoor is de wereld van webdesign super dynamisch. Het evolueert constant, om te blijven voldoen aan de groeiende behoeften van zowel website-eigenaren als bezoekers. Speciaal voor jou als beginnend webdesigner, gaat deze handleiding dieper in op de rol van webdesign. Daarnaast bespreken we nuttige tips, door kritische termen en ideeën te definiëren en voorbeelden te bekijken voor de nodige inspiratie. De volgende onderwerpen worden behandeld:
01. Webdesign versus webdevelopment
De eerste stap in het webdesign beginnen, is om het verschil te kennen tussen webdesign en webdevelopment. Deze zijn namelijk nauw aan elkaar verwant, en worden vaak (ten onrechte) door elkaar gebruikt: Webdesign verwijst naar het visuele ontwerp en de ervaringsaspecten van een bepaalde website. In de rest van dit artikel gaan we hier wat dieper op in. Webdevelopment verwijst naar het bouwen en onderhouden van de structuur van een website. Het omvat ingewikkelde coderingssystemen die ervoor zorgen dat de website goed functioneert. Dit is de software die het meest worden gebruikt om een website te ontwikkelen:
HTML of hypertext opmaaktaal, is een codeertaal die wordt gebruikt om de voorkant van websites te maken. Het is geschreven om de structuur van een webpagina op te nemen, en wordt door webbrowsers uitgevoerd in de websites zoals we ze online zien.
CSS of Cascading Style Sheets, is een programmeertaal die alle relevante informatie bevat met betrekking tot de weergave van een webpagina. CSS werkt samen met HTML om de stijl en opmaak van een website of pagina te ontwerpen. Dit inclusief de lay-out, lettertypen, opvulling en meer.
CMS of een contentmanagement-systeem, is een computersoftware-toepassing die de digitale content van een website beheert. Wix is een voorbeeld van een CMS, dat functioneert als een gebruiksvriendelijk systeem voor het ontwikkelen van website-content. Dit maakt het voor voor iedereen mogelijk om een website te maken en updates uit te voeren, zonder het gebruik van code.
Uitgerust met de juiste tools en tips voor webdesign en tutorials, kan iedereen een website ontwerpen zonder een expert te zijn op het gebied van ontwikkeling.
02. Ontwerpprincipes toegepast op websites
Een beginnend webdesigner moet eerst begrijpen wat goed webdesign precies is, en nog belangrijker; hoe je dit kunt bereiken. We gaan eerst kijken naar de designprincipes ter referentie. Hiermee bedoelen we theorieën die worden toegepast door kunstenaars en ontwerpers, waardoor een bepaalde mate van visuele design wordt verkregen waarnaar elke compositie zou moeten streven.
Door deze principes toe te passen op webdesign, kan zowel een beginnend webdesigner, als een professional in het vak een website maken met een harmonieuze look en feel. Dit zijn natuurlijk geen strikte regels die je perse moet volgen; eerder richtlijnen om te leren hoe we de verschillende elementen van het design van een website kunnen toepassen. Neem het maar van Picasso aan: 'Learn the rules like a pro, so you can break them like an artist.'
Zodra je de webdesign-doelen begrijpt en vertrouwd raakt met elk website-element, kun je alles naar eigen wens aanpassen op een creatieve manier.
Evenwicht
Visueel evenwicht betekent dat je er voor moet zorgen dat geen één van de elementen te overweldigend is, in wat voor compositie dan ook. Dit kan worden toegepast op webdesign, door een denkbeeldige lijn in het midden van een webpagina te tekenen en elementen zo te rangschikken dat het visuele gewicht aan beide kanten gelijk is. Er zijn twee manieren om deze balans op een website te bereiken:
Symmetrische balans is wanneer het visuele gewicht aan beide kanten van de lijn gelijk is, en als een spiegelbeeld is gerangschikt. Wanneer toegepast op je webdesign kan dit gevoelens van balans, schoonheid en consistentie oproepen.
Bij Asymmetrische balans is het visuele gewicht aan beide kanten gelijk, maar de samenstelling en de volgorde van elementen variëren (dus geen spiegelbeeld). Een uitgebalanceerd asymmetrisch ontwerp wordt beschouwd als een moderne benadering. Dit zal een meer dynamische ervaring voor de kijker creëren, terwijl een de compositie toch harmonieus blijft.
Contrast
Contrast verwijst naar het naast elkaar plaatsen van elementen, op een manier die hun verschillen benadrukt. Bijvoorbeeld donker en licht, glad en ruw of groot en klein. Wanneer er contrast in beeld is, zijn het de dramatische en spannende eigenschappen die bezoekers geboeid houden terwijl ze door je website scrollen.
Nadruk
Het nadruk-principe herinnert ons eraan dat niet alle website-elementen hetzelfde zijn. Of het nu je logo, een CTA of een afbeelding is; alles op je webpagina dat als eerste zou moeten opvallen, wordt door het toepassen van het nadruk-principe 'benadrukt'. Dit kan door het gebruik van felle kleuren, animaties of lettergrootte; deze zorgen voor een dominant aspect van je compositie.
Beweging
Wanneer je met webdesign gaat beginnen, zul je ook te maken krijgen met het aspect beweging. Dit is simpelweg hetgeen dat bezoekers van het ene element naar het andere leidt. Door de grootte, richting en volgorde van elementen van een afzonderlijke webpagina te regelen, kun je de kijker eenvoudig door je hele website sturen.
Ritme
Ritme is de herhaling van bepaalde elementen, om zo consistentie en samenhang te creëren of een bepaalde boodschap te versterken. Herhalende kenmerken zoals je logo, merkkleuren en het gebruik van hetzelfde lettertype, kunnen bovendien je merkidentiteit en aanwezigheid op het web enorm versterken.
Hiërarchie
Het plaatsen van je bedrijfsnaam onderaan de startpagina is niet bepaald bevorderend voor een goed webdesign. Waarom? Omdat bezoekers die voor het eerst op je website komen niet helemaal naar beneden willen scrollen om erachter te komen wie je bent. Dit weet je zodra je het principe van hiërarchie begrijpt, dat ons leert dat de belangrijkste content op een prominente plek moet worden geplaatst waar bezoekers deze direct zien.
Witruimte
In kunst en design wordt elk gebied van een compositie zonder visuele elementen aangeduid als witruimte (zelfs als het niet echt wit is). Dit lijkt misschien niet zo belangrijk, maar als je je afvraagt : 'Wat is webdesign?' speelt een bewuste opstelling van witruimte wel degelijk een belangrijke rol. Het geeft visuele elementen van een webpagina namelijk ruimte om te 'ademen'. Daarnaast kan het ook helpen om andere doelen in je compositie te bereiken, zoals hiërarchie, balans, nadruk etc.
Eenheid
Eenheid is het effect van alle individuele elementen van je website, die idealiter resulteren in één harmonieuze compositie. Het doel van eenheid in webdesign is om ervoor te zorgen dat bezoekers niet overweldigd raken of zich afkeren van je website. Ben je beginnend webdesigner? Dan kost het wellicht een paar pogingen om dit aspect het goed onder de knie te krijgen. Maar zodra je een goed webdesign hebt bereikt, kun je ervoor zorgen dat elk aspect van je website een waardevolle rol speelt in zijn functie en prestaties. Dit betekent dat je zorgvuldig aandacht moet besteden aan welke elementen je opneemt, waar je ze plaatst en welk doel ze moeten dienen.
03. Website indeling
Het plannen van de lay-out (of indeling) van je website, betekend als het ware het leggen van de basis. Het bepaald namelijk de rangschikking en volgorde van de visuele elementen op elke pagina van je website. Deze cruciale stap in webdesign speelt niet alleen een rol bij het visuele uiterlijk, maar ook bij de bruikbaarheid van een website en het versterken van de boodschap. De beste lay-out voor je website hangt af van verschillende factoren: je website-doelen, de boodschap die je aan kijkers wilt overbrengen en wat voor soort content je wilt opnemen. Hoewel er geen 'one-size-fits-all' oplossing is, zijn er twee richtingen die je kunt nemen:
Lay-outs die passen bij je content: de lay-out die je kiest moet passen bij het type content. Wil je bijvoorbeeld een lay-out waarin producten worden getoond? Overweeg dan een lay-out die genoeg ruimte over laat voor het plaatsen van afbeeldingen. Een blog-lay-out daarentegen, moet nieuwe informatie juist op een georganiseerde manier overbrengen.
Gemeenschappelijke lay-outs: er zijn tal van vooraf ingestelde website lay-outs. Deze zijn meestal vertrouwd voor gebruikers, omdat ze voortbouwen op hun bestaande verwachtingen of eerdere ervaringen met andere websites. Omdat deze uiteindelijk kunnen resulteren in een meer intuïtieve, gebruiksvriendelijke interface, zijn ze top wanneer je net met webdesign gaat beginnen.
Ontwerp je je eigen website? Gebruik dan website templates van verschillende categorieën, om een stevige infrastructuur te bieden voor je website indeling. Als je vanaf het begin een lay-out wilt ontwerpen, raden we aan om 'wireframes' te gebruiken om mee te starten. Hiermee kun je de lay-out zelf opstellen voordat je het daadwerkelijk gaat toepassen.
04. Functionele componenten van webdesign
Websitefunctionaliteit verwijst in feite naar hoe je website werkt; alles van de snelheid en het gebruiksgemak, tot alle specifieke acties die erop kunnen worden uitgevoerd. Als je je bedenkt hoe snelle en efficiënte websites tegenwoordig functioneren vergeleken met de jaren '90, word je eraan herinnerd dat we al een lange weg hebben afgelegd.
En gezien de vooruitgang in de branche van webdesign, is het in ons eigen belang om de moderne tools te gebruiken die beschikbaar zijn. Alleen op deze manier weten we dat onze websites goed presteren en gemakkelijk te gebruiken zijn. We gaan hieronder kijken naar alle de componenten van webdesign, die van invloed zijn op het functioneren van je website:
Navigatie
Eén enkel webdesign kan bestaan uit meerdere pagina's en items die de bezoeker kan bekijken of gebruiken. Met websitenavigatie kunnen bezoekers eenvoudig alle webpagina's vinden die ze nodig hebben nadat ze op je website terecht zijn gekomen. Dit is dus een belangrijk aspect om als beginnend webdesigner rekening mee te houden. Het toevoegen van een navigatiemenu aan je design is de beste manier om bezoekers een vlotte navigatie te bieden. Een website-menu linkt bijvoorbeeld naar meerdere items op je website. Het helpt je gebruikers snel te navigeren tussen verschillende pagina's en onderdelen. Afhankelijk van het van je website-design kun je kiezen tussen de volgende soorten menu's:
Klassiek navigatiemenu: dit populaire menutype wordt geplaatst in de kop van de website en weergegeven als een horizontale lijst.
Sticky menu: ook bekend als een vast of zwevend menu, blijft een sticky menu staan terwijl bezoekers door de website scrollen.
Hamburgermenu: rare naam, maar een hamburgermenu is niets meer dan een icoon dat bestaat uit drie horizontale strepen, en opent naar een volledig menu zodra erop wordt geklikt.
Vervolgkeuzelijst: ook wel drop down menu, is een menu waarin een lijst met extra items wordt geopend zodra bezoekers op één ervan klikken, óf de muisaanwijzer erop houden.
Zijbalkmenu: hierbij plaats je een lijst met menu-items aan de linker- of rechterkant van je webpagina.
Snelheid
De snelheid meet hoe lang het duurt voordat je website volledig is geladen nadat een bezoeker er terecht komt. Niemand (vooral in onze snelle generatie), houdt van een trage website. Het moet dus altijd op hoge snelheid presteren! Studies tonen zelfs een stijging van 38% in bounce-percentages aan, wanneer de laadtijd van een webpagina meer dan 3 seconden bedraagt.
Houd dus in je achterhoofd: hoe mooi je webdesign ook is; als je bezoekers niet de meest soepele browse-ervaring biedt, zijn ze alweer vertrokken vóórdat ze ervan hebben kunnen genieten... Er zijn veel factoren die de laadtijd van een pagina kunnen beïnvloeden. Sommige zijn gerelateerd aan het eigen apparaat of de internetverbinding van een bezoeker, terwijl andere misschien specifiek zijn voor de website zelf. Tegenwoordig zijn er bewezen praktijken en tools die de prestaties van je website controleren, en bovendien de laadsnelheid van de pagina's verbeteren.
SEO
SEO (of zoekmachineoptimalisatie), is het proces van het optimaliseren van een websit zodat deze goed scoort in de zoekmachines. Omdat dit een grote rol speelt in je succes, moeten we het zeker bij de functionele elementen vermelden. Hoe meer mensen je kunnen vinden op Google, hoe meer bezoekers je uiteindelijk op je website zult krijgen. Hoewel SEO een structurele taak is, zijn er een aantal stappen die je kunt nemen om de prestaties van je website vanaf het begin te boosten. Met de SEO-tools van Wix bijvoorbeeld, waarbij de ingebouwde infrastructuur van de website bijvoorbeeld al positieve prestaties ondersteund. Er bestaan een aantal algemene SEO-praktijken die je kunt volgen voordat je op publiceren klikt. Zoals het opnemen van koppen in je content, het toevoegen van Alt-tekst aan afbeeldingen, het gebruik van metabeschrijvingen op relevante pagina's, en het kiezen van een domeinnaam waarmee je je merk of bedrijf vertegenwoordigt.
Meer te weten komen over SEO? Lees dan dit artikel en ontdek hoe jij je website in minder dan één uur kunt boosten met onze handige tips.
UX
Sinds de enorme toename van het computergebruik in de jaren '80, heeft de technische industrie voortdurend onderzocht hoe mensen beter met technologie kunnen omgaan. Dit is de praktijk van UX, of de gebruikerservaring. En wanneer dit op de juiste manier wordt toegepast op webdesign, kan het een grote impact hebben op de manier waarop gebruikers je website beleven. De term UX wordt vaak door elkaar gehaald met 'gebruikersinterface'-design' of 'bruikbaarheid'. Deze begrippen zijn in werkelijkheid een onderdeel zijn van de grotere UX-visie. Hoewel UX-designers zich wel degelijk bezighouden met deze aspecten van een product, zijn ze daarnaast betrokken bij het kijken naar het grote geheel. Ze proberen altijd manieren te vinden om de producten, branding, ontwerp, bruikbaarheid en functie te perfectioneren en te ontwikkelen. Het proces van UX-design is bedoeld om ervoor te zorgen dat een website hoogwaardige interacties, content, producten en diensten bevat. Dit kan worden gerealiseerd door de volgende zeven factoren te verbeteren:
Geschiktheid
Bruikbaarheid
Vindbaarheid
Geloofwaardigheid
Wenselijkheid
Beschikbaarheid
Waarde
Adaptief ontwerp versus responsief ontwerp
Tegenwoordig zijn mobiele apparaten goed voor meer dan de helft van het online verkeer. Je kunt je dus voorstellen dat het van cruciaal belang is om onze websites aan te passen aan dit kleine scherm. Er zijn twee soorten stijlen die het mogelijk maken om een webdesign te verschuiven van de desktopversie naar mobiel: adaptief ontwerp en responsief ontwerp. Het is handig om het verschil tussen deze twee te kennen, vooral bij het kiezen van de websitebouwer die het beste bij je past. De meeste platforms ondersteunen namelijk één van de 2:
Adaptive design omvat het maken van verschillende versies van dezelfde website, waarbij elke versie kan worden aangepast aan een ander schermformaat of browserbreedte. Met Wix kunnen onze gebruikers bijvoorbeeld zelf de lay-out voor de desktopversie van hun website regelen. Ze krijgen een mobiele website die volledig aanpasbaar is.
Responsive design omvat het maken van websites met een flexibel raster. Dit zorgt voor een dynamische look, afhankelijk van de schermgrootte en oriëntatie van het apparaat dat wordt gebruikt.
05. Visuele elementen van webdesign
De visuele elementen van een website zijn net zo belangrijk als de functionele kwaliteiten, en werken samen om de algehele look en feel vorm te geven. Van kleurenschema's tot lettertypen en video; deze details spelen een grote rol in de gebruikerservaring en de vormgeving van je merk.
Hieronder gaan we de visuele elementen van webdesign bespreken, samen met een aantal tips voor het nemen van je eigen, esthetische beslissingen:
Website-koptekst
Een website-koptekst (header) verwijst naar het bovenste gedeelte van een websitepagina en is het eerste wat bezoekers zien wanneer ze op een website aankomen. Op een strategische locatie wordt een koptekst over het algemeen gebruikt om een navigatiemenu, bedrijfsnaam, een logo of contactgegevens weer te geven.
Voettekst van de website
Een website-voettekst (footer) bevindt zich onderaan de pagina en wordt op elke pagina van je website gefixeerd. Aangezien dit het laatste is dat bezoekers zullen zien, is het een goede plek om belangrijke informatie (die ze misschien hebben gemist), toe te voegen en te herhalen. Let er wel op dat je hiermee niet al te veel visuele ruimte in beslag neemt. Een voettekst is daarnaast een goede plek om contactgegevens, een kaart, een e-mail aanmeldingsbalk of knoppen voor social media op te nemen.
Kleurenschema
Als het gaat om webdesign, zet het kleurenschema van je website de toon zetten voor het geheel. En niet alleen dat. Het strategisch verspreiden van een merkkleurenschema kan bovendien een sleutelrol spelen bij het versterken van je online branding. Bedenk bij het bepalen van het kleurenschema van je website welke tinten je website vertegenwoordigen. Zo is er de primaire kleur (de kleur die het meest dominant is op je website), de secundaire kleur (regelmatig gebruikt, maar minder dan de primaire kleur), en de accentkleuren (om bepaalde details van je website te markeren).
Typografie
Typografie verwijst naar de visuele aspecten van het type, zoals de keuze van het lettertype en de opstelling van de tekst. Het is een cruciaal onderdeel van webdesign, en kan worden gebruikt om de esthetische stijl van een website aan te vullen of om de geschreven berichten op een website te versterken. Houd bij het kiezen van de beste lettertypen voor je website rekening met het feit dat typografie net zo belangrijk kan zijn als de woorden zelf. Je wilt dat het lettertype leesbaar is, past bij het thema van je website, en vooral bij je merk. Net als bij een kleurenschema, kun je primaire, secundaire en accentlettertypen kiezen om de manier te bepalen waarop een bezoeker je geschreven content ervaart.
Website achtergrond
De achtergrond van de website zet de toon voor je pagina en speelt een belangrijke rol bij webdesign. Of het nu statisch of geanimeerd, effen of gestructureerd is; de achtergrond is hetgeen bezoekers consequent volgt terwijl ze scrollen.
Je kunt elke afbeelding of video uploaden om in te stellen als achtergrond van je website. Gebruik een merkkleur, kies een trendy verloopachtergrond of ga voor een minimalistisch thema en laat je achtergrond wit. Wat je ook kiest; zorg er altijd voor dat het past in het algemene visuele thema van je website, en dat het de aandacht van bezoekers trekt zonder hen te storen.
Door het gebruik van scroll-effecten, zoals parallax scrollen, kun je je website achtergrond een extra touch geven.
Beelden
In slechts een paar seconden kan één enkele afbeelding op je website de boodschap die je naar bezoekers stuurt versterken. Maak hier gebruik van door de producten of locatie van je bedrijf weer te geven, foto's van een evenement te uploaden (inclusief je merk-favicon), of afbeeldingen te gebruikt om het ontwerp van je website wat op te pimpen. Wix biedt een rijke bibliotheek met gratis visuele content; van stockfoto's tot collecties van innovatieve ontwerpen. Bijvoorbeeld transparante video's die we kopen van onze getalenteerde gebruikers. Bij het werken aan een webdesign hebben je als Wix-gebruiker tevens de mogelijkheid om je eigen afbeeldingen, stockfoto's van bronnen zoals Unsplash, aangepaste animaties of vectorkunst te uploaden.
Animatie
Eén van de doelen wanneer je aan webdesign gaat beginnen, is om je website te onderscheiden van anderen. Het toevoegen van animatie aan een website is een goede manier om dat te doen; het kan de ervaring en actie van je gebruikers helpen sturen. Je kunt overal op je website animaties opnemen om een meer dynamische ervaring voor kijkers te creëren, of om bepaalde reacties uit te lokken.
Voeg bijvoorbeeld animatie toe te voegen aan:
Een CTA-knop om bezoekers aan te moedigen om te klikken
Elementen zoals pijlen, om richting te geven aan gebruikers
Balken, om hun (hopelijk korte) wachttijd spannender te maken
Aspecten waarvan je wilt dat gebruikers er op letten, zoals een lightbox voor e-mailregistraties
06. Website onderhoud
De webdesign-industrie is er een die voortdurend nieuwe functies, tools en oplossingen introduceert. Dat is natuurlijk top. De keerzijde van deze snel evoluerende wereld is echter, dat jij (en je website), constant up-to-date moet blijven. Ga je aan webdesign beginnen? Dan moet je er rekening mee houden dat je je website regelmatig moet bijwerken na het eerste ontwerp. Dit om ervoor te zorgen dat de content relevant blijft, en het ontwerp niet verouderd. Verouderde elementen op je website kunnen namelijk een negatieve invloed hebben op de interacties van je bezoekers, wat op zijn beurt weer resulteert in een afnemende algehele prestaties en verkopen.
Checken, checken en nog eens checken
Check daarom minimaal één keer per maand je website, om er zeker van te zijn dat er geen fouten in staan, dat alles goed werkt en dat je informatie actueel is. Denk bij het overwegen van een herontwerp onder andere na over de wijzigingen die je kunt aanbrengen om je webontwerp relevant te houden. Maar ook over hoe je het gebruiksgemak of de prestaties kunt verbeteren. Dit kan betekenen dat je nieuwe visuele content of een extra pagina moet toevoegen, je SEO een boost moet geven of een toegankelijkheidsaudit uitvoeren.
07. De beste inspiratie voor webdesign
Nu je een uitgebreid antwoord hebt op de vraag 'Wat is webdesign?' is het tijd om inspiratie op te doen. Gelukkig is deze overal te vinden! We raden je aan om regelmatig door websites als Behance, Awwwards en Pinterest te bladeren om op zoek te gaan naar nieuwe ideeën. Bij Wix houden we de nieuwste webdesigntrends constant bij, en zijn we altijd op zoek naar de beste websites die door onze gebruikers zijn gemaakt. Het is super om te zien wat deze trotse website-eigenaren met ons product doen; van artiesten tot eigenaren van kleine bedrijven, en iedereen daartussenin. Kun je wel wat inspiratie gebruiken? Check dan de volgende Wix-blogs:
Team Wix