Hoe bouwden we de Marlon website

Hoe bouwden we de Marlon website

Ongeveer 2 jaar in the making, deze website. Want natuurlijk zijn we zo druk bezig goede websites voor andere mensen te bouwen, dat die van ons onderaan het lijstje komt te staan.

Maar we zijn er! En zo ging het in zijn werk:

Ooit al zelf het plan van je huis getekend?

Normaal vraag je dat aan je architect. Wij zijn dan ook architecten van het web (en ook bouwers, en onderhouden het ook), dus tekenen we ons eigen plan uit. En natuurlijk hebben we allemaal een mening over hoe het moet, wat er wel en niet in mag.

Dus vertrekkende van de oude site, na bepaald te hebben wat de nieuwe moest bevatten, werd gestart met het prototype, waarvan je hieronder een paar iteraties ziet.

Zoals je merkt is ook bij dit project analysefase de essentiële basis geweest om dan ... euh....razendsnel verder te kunnen doen.

Een eerste versie van het prototype van de Marlon website

Het prototype dat je hierboven ziet geeft al heel goed weer hoe de site er zal uit zien. Je merkt de evolutie van de homepagina waar bepaalde elementen van de inhoud verplaatst worden, verdwijnen, terugkeren en aangevuld worden.

Uiteindelijk merk je dat het voorstel rechtsonder, in vergelijking met de realiteit vandaag, zeer goed lijkt op het eindresultaat. Daarvoor dient net een prototype: om vroeg in het proces de juiste zaken uit te testen en aan te passen.

Ontwerpen op basis van een goed plan

Eenmaal het prototype afgewerkt, beginnen we te ontwerpen. Waarbij je hieronder aan 4 iteraties van de homepagina kan zien dat we toch nog dingen durven verplaatsen en aanpassen, maar dat de grote lijnen al bepaald zijn in het prototype.

We stoppen in ons design al zoveel mogelijk realistische inhoud door de juiste visuals te hanteren en waar mogelijk al een eerste versie van de teksten te stoppen. Tekeningen zijn voorlopig nog schetsen, maar ze helpen ons inzien of we in een bepaalde ruimte voldoende kwijt kunnen, wat het ritme van de pagina wordt, en of ze wel helpen of niet té storend zijn.

Over de website: het design

En het mooie zit hem in de details: icoontjes, marges, het juiste lettertype, de juiste schakering van de achtergrond.

En dan bouwen

Zoals we al aangeven hebben we een eigen Content Management Systeem (CMS). En hier hebben we zelf weer de voordelen gehaald uit dat systeem: de basis was snel opgezet, en de specifieke structuur van onze inhoud (projecten, thema's, services) werd op maat toegevoegd aan het CMS.

Fratello CMS

 

Want ook wij willen snel en netjes de inhoud van onze website aanpassen. En daarbij zorgen dat zaken aan elkaar gelinkt worden: services met projecten, projecten met blog posts, services met blog posts.

Afwerking is alles dus ging de site pas live wanneer alle teksten goed zaten — we geven toe, we wijzigen ze nog continu, wanneer zaken zoals een humans.txt klaar was, wanneer de fout-pagina goed zat en alle SEO teksten perfect uitgewerkt zijn.

Ideeën, opmerkingen, fouten? Drop us a line!