12 min lezen
Het proces achter het bouwen van een website
Het volgen van een gestructureerd en goed gepland webontwerp en -proces is het geheim van het produceren van een briljante website. U kunt het meest innovatieve webontwerp en de meest flitsende code hebben, maar als u één kleine fout in uw XML-sitemap mist, zal het hele project eronder lijden.
Een solide website-bouwproces zorgt er niet alleen voor dat het bouwen van uw website soepel verloopt. Door in elke fase controle en aandacht te tonen, laat een web design agency zijn klant zien dat het inderdaad een expert is in zijn vak, dat altijd het proces in de gaten houdt en in staat is om te anticiperen op eventuele tegenslagen en deze op te vangen.
Het bouwen van een website vanaf de basis volgt dezelfde algemene stappen.
Het team werkt in alle fasen met de klant samen om ervoor te zorgen dat het werk op schema ligt en in lijn is met de afgesproken doelen. Dit volgt een patroon van presentatie aan de klant > feedback en discussie > wijzigingen zodat zowel de ontwerper als de klant de kans krijgen om de basis te raken en de voortgang te bespreken. Door op deze manier te werken, vermijden ze dat ze terug moeten komen en wijzigingen moeten doorvoeren die later meer tijd kosten.
Voordat het proces voor het maken van de website begint, moet de agency informatie verzamelen. Er zal een meeting moeten plaatsvinden tussen de klant en het team om de doelstellingen en doelstellingen van de klant te begrijpen. Wat willen ze bereiken met de website? Is dit een totaal nieuwe website of een vernieuwing van een huidige website? Is het nieuwe ontwerp bedoeld voor een rebranding, of wil het bedrijf gewoon zijn website up-to-date houden?
Het is van cruciaal belang om deze punten in deze fase duidelijk te maken, omdat ze een rol zullen spelen in elk aspect van het project. Het is handig als de klant een projectbeschrijving kan geven, of als de agency met de klant samenwerkt om er een te maken. Dit document bevat meestal details over het klantprofiel, de bedrijfsgeschiedenis, de identiteit en de missie of doelstellingen.
De klant en de agency zullen ook het budget en het tijdschema bespreken om de omvang van het project te begrijpen. Hoe meer informatie er in dit stadium kan worden verstrekt, hoe beter de agency aan de opdracht kan voldoen. Enkele belangrijke zaken waar de agency rekening mee zal houden zijn:
Dit kan een onderdeel zijn van de projectpitch en plaatsvinden voordat de klant besluit de agency in te huren, maar het kan ook gebeuren nadat het contract is getekend. In deze fase doorloopt de agency een onderzoeksfase waarin gegevens worden verzameld over de positie van de klant in de markt en hoe de geïdentificeerde doelen en doelstellingen kunnen worden benaderd.
Brainstorm- en onderzoektools die in deze fase worden gebruikt:
De klant kan zijn eigen bedrijfrichtlijnen geven, die het ontwerpteam helpen hun opties en beperkingen te begrijpen op het gebied van kleuren, typografie, vormen, beweging en visueel gevoel. Het bredere team kan ook profiteren van de identiteit die wordt overgebracht in de bedrijfrichtlijnen.
Door onderzoek te doen naar het type klant in de doelgroep en naar waar concurrenten succesvol in zijn, kan de agency manieren identificeren om zich te onderscheiden en op te vallen. Als de klant een SEO-strategie voor zijn website heeft, wordt er voorlopig SEO-onderzoek uitgevoerd om te begrijpen hoe de website moet worden gestructureerd.
De agency zal zijn ideeën aan de klant presenteren en enkele visuele voorbeelden laten zien om de beoogde richting over te brengen. Ze kunnen ook website-inspiratie en moodboards aanbieden om de look en feel te demonstreren die ze willen gebruiken.
Zodra de doelstellingen en richting zijn overeengekomen, zal de agency een voorbeeld van de werkzaamheden opstellen. Dit komt meestal in de vorm van een Gantt-diagram dat een tijdlijn weergeeft. De belangrijkste start- en einddata van elke fase worden aangegeven in het Gantt-diagram.
Bron: teamgantt.com
Een veelvoorkomend probleem dat van invloed is op websitebouwprojecten is scope creep, dat wil zeggen de ongecontroleerde verlenging van deadlines en complicaties van projectresultaten. Het is niet ongebruikelijk dat er gaandeweg nieuwe functies worden geïdentificeerd en toegevoegd aan de projectomvang, en hoewel dit geen probleem is, kan het de tijdlijn en de middelen van een project verlengen. Het bijhouden van een Gantt-diagram betekent dat er op een gecontroleerde manier extra werk aan het project kan worden toegevoegd, zonder dat dit de middelen voor de klant of het bureau te veel belast.
Een Gantt-diagram is niet alleen bedoeld voor de agency. Alle inhoud, informatie, feedback of tests die van de klant worden verlangd, worden ook toegevoegd om een tijdige voortgang van het project te garanderen.
Tijdens de kick-off meeting bespreken de agency en de opdrachtgever de omvang van de werkzaamheden en komen de data op de Gantt-chart overeen. De agency verzamelt aanvullende informatie zodat het team verder kan gaan met het ontwerpwerk.
In deze fase begint de website vorm te krijgen. De sitemap vertegenwoordigt de structuur van de website, dus het is essentieel om dit goed te doen voordat u verder gaat.
Het bouwen van een website zonder sitemap zou hetzelfde zijn als het bouwen van een treinstation zonder blauwdruk. Het zou veel langer duren, veel meer fouten met zich meebrengen en het resultaat zou helemaal niet intuïtief vloeien.
Een sitemap verduidelijkt de structuur van een website en creëert een duidelijke en logische architectuur waarop het ontwerp kan worden gebouwd. Dit is belangrijk voor zowel UX als SEO.
Bron: Apple.com
Uw sitemap heeft een krachtig effect op de SEO van uw website. Ontdek hoe u een sitemap kunt maken en deze in detail kunt indienen bij Google. Andere tools die worden gebruikt om een sitemap te maken zijn Screaming Frog, XML Sitemaps en Flowmapp. U kunt zelfs Excel gebruiken om de structuur van uw site te schetsen.
Het grootste deel van de rol van de webontwerper in het project speelt zich in deze fase af. Een wireframe is een visuele weergave van een webpagina zonder interactieve elementen. De knoppen zijn aanwezig, maar kunnen nog niet worden aangeklikt. Wireframes zijn essentieel voor de volgende fasen van het project.
De webontwerper maakt mogelijk niet slechts één set wireframes. Verschillende soorten wireframes omvatten handschetsen, low-fidelity, high-fidelity en zelfs interactieve wireframes. De webontwerper kan al in een vroeg stadium geschetste wireframes gebruiken om ideeën aan het interne team over te brengen en zelfs low-fidelity wireframes produceren in de sitemapfase.
Er kan een interactief wireframe worden gemaakt om goedkeuring te krijgen voor een duur of complex ontwikkelingswerk, om verspilling van tijd en middelen te voorkomen.
Adobe XD, Sketch, Craft CMS en Figma zijn enkele van de meest betrouwbare webontwerptools die worden gebruikt om wireframes te maken.
Zodra de wireframes zijn voltooid en het bureau een duidelijke visuele weergave heeft van hoe elke pagina eruit zal zien, kunnen er twee dingen tegelijk gebeuren: het maken van inhoud en het ontwikkelen van de website. Hier kijken we eerst naar het maken van inhoud. De inhoud bestaat uit:
Ze zeggen niet voor niets ‘content is king’. Omdat een groot deel van het klantenbestand van een bedrijf tijd online doorbrengt, heeft goede inhoud de kracht om uw merk tot succes te brengen. Semrush ontdekte dat bij bedrijven waar 10-70% van het marketingbudget aan contentmarketing werd besteed, 73% van de bedrijven zeer succesvol was in hun doelstellingen.
Content is het instrument voor goede resultaten op de pagina. SEO content helpt een website zoekwoorden te targeten, interne en externe links op te bouwen die de zichtbaarheid in de resultaten van zoekmachinepagina's (SERP's) vergroten, de klikfrequentie verhogen en het bouncepercentage verlagen (waardoor een website zonder enige andere actie te ondernemen). Bovendien geldt dat hoe meer en kwalitatief betere inhoud een merk aanbiedt over zijn branche of onderwerp, hoe meer expertise het aan de dag legt. Dit helpt de autoriteit van het websitedomein te vergroten, omdat zoekmachines het bedrijf als een expert interpreteren.
Content is niet alleen cruciaal voor SEO. Het overbrengen van de boodschap, de toon en de principes vergroot het bewustzijn van de reputatie en identiteit van het bedrijf en moedigt klanten aan om relaties met het bedrijf op te bouwen.
Content kan worden gemaakt volgens de bedrijfrichtlijnen of rechtstreeks door de klant worden aangeleverd. Het bureau kan tools zoals Ahrefs en Google Keyword Planner gebruiken om te zoeken naar trefwoordmogelijkheden om de inhoud te optimaliseren. Afbeeldingen en video kunnen worden aangeleverd door de klant, gegenereerd door het bureau, of bronnen via stockfoto-archieven van uitbesteding.
De rol van het webontwikkelingsteam is om de wireframes te nemen en aan de slag te gaan met het coderen van de website zodat deze er precies hetzelfde uitziet, maar met alle toegevoegde functionaliteit. Afhankelijk van de aard van de website zal de ontwikkeling variëren.
Gebruik HTML en CSS
Het ontwikkelingsteam kan rechtstreeks code schrijven voor een deel, het grootste deel of de hele website, wat betekent dat de website helemaal opnieuw is opgebouwd in plaats van een template. Ontwikkelaars kunnen deze methode gebruiken om code te schrijven voor websites die zeer op maat zijn gemaakt en zeer specifieke functies vereisen, of om gewoon kleine functies aan bestaande websites toe te voegen.
Deze methode vereist over het algemeen een code-editor en een file transfer protocol (FTP) en is tijdrovender dan een CMS, maar levert een zeer op maat gemaakt resultaat op.
Configuratie met een Content Management Systeem
Een contentmanagementsysteem (CMS) is een platform dat wordt gebruikt om websites te maken en te publiceren. CMS zijn tegenwoordig zeer efficiënt en flexibel en bieden een breed scala aan plug-ins of extra functies om websites de nodige mogelijkheden te geven. Ze maken het ook eenvoudig om een website te bewerken.
De meest populaire CMS zijn WordPress en Craft, met andere favorieten zoals Magento, Squarespace en Drupal. Een CMS presenteert de inhoud van uw website in 'admin'-modus, niet als code, maar als gemakkelijk te begrijpen inhoudsblokken en functies. Ontwikkelaars kunnen echter nog steeds de code van de website wijzigen.
Veel eenvoudige websites kunnen uitsluitend met CMS worden gebouwd. Paginabuilder-plug-ins zoals Divi en Elementor maken dit proces veel eenvoudiger door u kant-en-klare pagina-template te bieden die u in de websitebeheerder kunt bewerken.
Zodra de website volledig is gebouwd en het CMS is geconfigureerd, is deze klaar om gevuld te worden met inhoud. Het bureau gaat pagina voor pagina door en voegt tekst, afbeeldingen en andere inhoud toe, zodat alles past en er perfect uitziet.
Het hebben van een CMS maakt deze fase eenvoudig omdat het niet door een ontwikkelaar hoeft te worden gedaan. Alle contentmanagementsystemen zijn ontworpen om eenvoudig en intuïtief te gebruiken, zelfs door ongetrainde mensen, en bevatten vaak functionaliteit waarmee afbeeldingen responsief worden geschaald en de inhoud enigszins wordt verplaatst om alles in balans te houden in de lay-out.
Dit is de laatste grens voordat de website live wordt gezet. Op dit punt zou de website klaar moeten zijn om aan de klant te presenteren, maar er kunnen gemakkelijk kleine verschillen in het ontwerp sluipen en gaandeweg worden gebouwd. Meerdere teamleden doorlopen de website, pagina voor pagina, met een fijne kam om te controleren of alles er correct uitziet en werkt. Fouten kunnen het gevolg zijn van een kleine fout in de code of een ongeluk bij het invoeren van de inhoud, maar dit is het moment waarop ze moeten worden gevonden. De agency gaat kijken naar:
Zodra de agency tevreden is met het werk, is het tijd om de website aan de klant te presenteren, zodat deze zijn eigen controles kan uitvoeren. De website komt op een stagingsite te staan, wat betekent dat deze nog niet toegankelijk is voor het publiek en niet wordt geïndexeerd door zoekmachines. De testsite blijft bestaan wanneer de website live wordt gezet en wordt gebruikt als back-up om in de toekomst veilig wijzigingen door te voeren.
In dit stadium krijgen sommige klanten ook training over het gebruik en het aanbrengen van wijzigingen in hun nieuwe website in het CMS.
De agency en de opdrachtgever kunnen eventueel een geschikte dag afspreken om de website live te zetten. Dit zou voor de klant een tijd van rustigere zaken moeten zijn, maar een tijd waarin zowel de klant als het ontwikkelingsteam klaarstaan voor het geval er iets misgaat.
Het live brengen van een website gaat niet altijd zonder ongelukken, dus de agency zal de website na de livegang nauwlettend in de gaten houden en letten op eventuele fouten of problemen.
Het bureau zorgt vaak ook voor de installatie van de serverhosting, wat een aanzienlijke invloed kan hebben op de verkeersafhandeling, de functies die de website kan gebruiken, de beveiliging en de prestaties van de website. Zij kunnen u mogelijk ook helpen bij het kopen en onderhouden van uw domein en u wegleiden van ongewenste domeinproviders.
Als u er klaar voor bent om een web design agency in te huren en samen deze reis te maken naar een prachtige nieuwe website, bekijk dan onze handleidingen over waarom een niet telefoon vriendelijke site slecht is voor je bedrijf en hoeveel kost een website om u te helpen de juiste beslissingen te nemen.