Website voor Marketingbureau

Het doel achter dit project was om een moderne en zeer creatieve website te maken met een aantal nieuwe tools om ook te leren en onze horizon te verbreden. Daarom zagen we de klant als een marketingbureau - want wie moet er creatiever uitzien dan zij, toch?

 

We hebben onszelf de basisgrenzen gesteld:

• Standaardpagina's die elk bureau nodig heeft
• Donker ontwerp met een off-zwarte achtergrondkleur
• Een heldere oranje tint als de belangrijkste bedrijfskleur van het merk. Harmoniserend en creatief.
• Iets speciaals maken dat onmiddellijk de aandacht trekt en dat totaal anders is dan wat we eerder hebben gedaan.

Dus, we wisten wat we wilden bereiken, nu was het tijd om eerst wat ideeën op te doen over hoe we dat moesten doen. We zijn gaan zitten en hebben uitgebreid gegoogeld, op zoek naar extravagante oplossingen voor de typische websiteonderdelen. We verzamelden alles waarvan we dachten dat het er cool uitzag en dat we op de een of andere manier wilden toevoegen en maakten een moodboard om uit te zoeken wat we bij elkaar konden passen en wat goed zou passen bij welke pagina (en natuurlijk wat niet).

 

Hier is een kleine verzameling van de dingen die we zeker wilden gebruiken:

• Een van de eerste "speciale" dingen die opvalt bij het openen van de pagina is de levendige vloeiende kleurenanimatie op de startpagina. We vonden [deze geweldige GitHub repo van Pavel Dobryakov] (https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) en wilden die zeker gebruiken.
• Erg populair bij creatieve bureaus: De vloeiende cursor. We wilden een vloeiende aangepaste cursor implementeren die de muis van de gebruiker volgt. En dat niet alleen, we hebben hem ook geanimeerd zodat hij van uiterlijk verandert afhankelijk van het onderliggende element. Hij wordt groter als je met de muis over een link beweegt, hij wordt breder als je met de muis over een horizontale schuifbalk beweegt en hij wordt dun als je een tekstinvoerveld gebruikt. Dat maakt de aangepaste cursor niet alleen een leuke gimmick, maar verbetert ook de intuïtiviteit van de website voor de gebruiker.
• Over het algemeen wilden we een supervloeiende ervaring behouden. Daarom hebben we animaties en basiselementen gestandaardiseerd, zoals knoppen die groeien en van kleur veranderen als je er met de muis overheen gaat of de horizontale schuifbalk met vakjes die een licht 3D-effect krijgen als je er met de muis overheen gaat door een gecombineerde krimp- en draaianimatie.
• Een easter egg. We zijn sowieso grote fans van paaseieren, dus dit project had er zeker ook een nodig. Daarom hebben we linksonder een klein ottertje geplaatst dat bij aanklikken een popup met een aangepaste oproep tot actie weergeeft.

Toen we klaar waren met het ontwerp voor elke pagina, was de volgende stap het live brengen ervan. Omdat we dit wilden gebruiken als een extra leerervaring, hebben we elk onderdeel met de hand gecodeerd.

 

De voorkant van de website (wat je ziet als bezoeker) is gemaakt in Next.js, een javascript framework dat vertrouwt op server-side rendering waardoor de website razendsnel laadt aan jouw kant. De achterkant (het deel van de website dat je niet ziet, waar de teksten, afbeeldingen en andere inhoud worden bewerkt) wordt gedaan met Strapi, gebruikmakend van interne API-routes, waardoor de site weer supersnel laadt. Hoewel snel laden leuk is om te hebben omdat het handig is voor gebruikers, is het belangrijker dat het een cruciaal punt is voor de reputatie van een website bij Google. Alle gegevens worden opgeslagen in een dynamische PostgreSQL database.

 

Korte samenvatting: We hebben drie onderdelen waaruit de website bestaat:

1. Frontend
2. Backend
3. Database

Om ervoor te zorgen dat het project klaar is voor de klant, hebben we al deze drie componenten verpakt in zogenaamde “containers” waarmee we de site naar elke server kunnen verschepen en gewoon kunnen starten om hem online te hebben. Dit doen we met alle websites die we bouwen, zodat de infrastructuur de ontwikkeling niet beïnvloedt en bemoeilijkt. Bovendien voegen we een extra beveiligingslaag toe omdat de site in een virtuele omgeving leeft.