vandesmit.nl
We hebben met trots onze eigen website ontworpen en ontwikkeld. Idee --> Design --> Code --> Live website
Van Idee naar Design
De wens voor een nieuwe website ontstond uit frustraties met onze oude site. De huidige website gaf te weinig informatie richting de gebruikers, waardoor bezoekers een verkeerd beeld kregen van onze diensten. Een voorbeeld hiervan was een bezoeker die dacht dat we computerbeheer doen voor bedrijven – #oeps. Bovendien werkte de techniek van de oude website tegen ons. Het gebruik van één pagina om alle informatie te vertonen maakte het moeilijk om te zien welke informatie bezoekers daadwerkelijk hadden bekeken. Daarom wilden we een website maken waar de onderwerpen van elkaar gescheiden zijn, zodat er meer ruimte is om per onderwerp gedetailleerde informatie te bieden.
Om dit uit te werken, gebruikten we onze bestaande styleguide en begon Matthijs met het ontwerpen van nieuwe componenten. Het was essentieel dat de nieuwe website in lijn bleef met onze huisstijl en een vertrouwde look and feel houdt.
Van Design naar Code
Bij het kiezen van de techstack hadden we specifieke componenten nodig. Als basis framework kozen we voor de gouden standaard: React met Next.js. Hiermee zijn we beide goed vertrouwd en kunnen we snel ontwikkelen. Om goed samen te kunnen werken, gebruiken we TypeScript, wat de kans op fouten vermindert en persoonlijke voorkeuren in het programmeren minimaliseert. Daarnaast maken we gebruik van een headless CMS, namelijk Sanity. Een headless CMS is handig omdat het contentbeheer en presentatie loskoppelt, wat meer flexibiliteit biedt en beter schaalbaar is. Voor het snel nabouwen van design elementen in code, kozen we voor Tailwindcss.
We begonnen met het bouwen van een raamwerk: een pagina met een gescheiden “header”, plek voor content, en een vaste “footer” voor de website. Vervolgens bouwden we één voor één de CMS-blokken zoals ze in het design stonden. In het CMS creëerden we een paar pagina’s met de verschillende CMS-blokken om te controleren of alles er uitzag zoals ontworpen.
De vorige website was ook gebouwd met React, Next.js en Tailwind, waardoor we veel componenten konden hergebruiken, wat ons veel tijd bespaarde.
Van Code naar Live Website
Zodra de code zo goed als af was, begonnen we aan de volgende fase: van code naar live website. Dit omvatte keuzes voor versiebeheer, deploymentstrategie, hosting, content en SEO.
Voor versiebeheer kozen we snel voor GitHub, een fijne applicatie waarmee je goed versiebeheer kunt voeren en al onze projecten kunt beheren. GitHub is ook een uitstekende plek om je deploymentstrategie te definiëren. Hier kunnen we de bouwstappen van de website instellen en acties uitvoeren na codewijzigingen.
Als hosting kozen we voor Vercel, de makers van Next.js, wat de beste hostingopties biedt voor een Next.js applicatie. Bovendien is een basis Next.js applicatie gratis te hosten, wat betekent dat we geen hostingkosten hebben behalve voor de losse tooling die we gebruiken.
Nu we een volledige ontwikkelstraat hadden met versiebeheer en een werkende website, moest deze alleen nog gevuld worden met content. We bepaalden de contentboom met stickies op de muur, creëerden pagina’s in het CMS en schreven de teksten. Na het schrijven lieten we een AI-tool de teksten controleren en verbeteren. Vervolgens gingen we zelf weer over de teksten heen om ervoor te zorgen dat ze onze eigen stem behielden.
Samenstelling van de Website
• Hosting: Vercel - Hobby plan
• Framework: Next.js
• Code Libraries: React, TypeScript, Radix UI, Tailwindcss, Formspree
Met deze aanpak hebben we een moderne, gebruiksvriendelijke website gerealiseerd die onze diensten en projecten helder en aantrekkelijk presenteert. Dit project illustreert onze expertise in webontwikkeling en ons vermogen om effectieve, klantgerichte oplossingen te creëren.
Wil jij ook een state-of-the-art website?
Laat je gegevens achter en we nemen contact met je op.Van de smit B.V.
Rijsselseweg 1
2803PZ Gouda
Volg ons op LinkedIn