De nieuwe website van Kathleen Van Brempt -al eerder besproken op onze blog en nieuws- werd in een dikke maand op maat gebouwd in ons eigen Blender CMS. De afbeeldingen links proberen inzicht te geven in het ontwerpproces dat we voor dergelijke sites volgen.
1. Na de initiële briefing worden structurele en grafische eisen al snel vertaald in eerste schetsen. Een website grafisch voorstellen en bespreken werkt vaak veel handiger dan het zoveelste Word-document. Hoewel minstens even belangrijk, heeft een opdrachtgever minder oog voor het technische datamodel achter de website.
2. Los van de uiteindelijke grafiek (kleuren, lettertypes, foto's) worden de verschillende type-pagina's en hun essentiële bouwstenen verder uitgewerkt in een wireframe om uit testen waarmee een pagina gevuld wordt. Door zo in etappes te werken, proberen we te vermijden dat een volledige layout wordt uitgewerkt voor zaken die niet op hun plaats staan.
3. Daarna wordt in Photoshop een maquette aangemaakt om dit wireframe verder in te kleden met kleuren, lettertypes en afbeeldingen. Er wordt hier gewerkt met het 960 grid system in 12 kolommen om rust te krijgen in de hoeveelheid aan info.
4. Ondertussen wordt er op de achtergrond het beheerssyteem opgezet dat toelaat
om de bouwblokken te voeden met de nodige info.
In dit geval kunnen volgende items oa. beheerd worden:
- het aanmaken van artikels en nieuwtjes, met bijhorende media (youtube, flickr, eigen afbeeldingen)
- aanmaken van polls (enquêtes)
- het opladen van beelden bovenaan en in de rechterkolom. Bij het opladen kunnen de beelden op het juiste formaat worden gesneden in de browser.
- het aanmaken en versturen van nieuwsbrieven
- het linken van artikels aan themas en tags. Op die manier kunnen we automatisch verwante inhoud opzoeken en tonen voor bepaalde artikels.
Voor elke type info worden slechts de juiste invulvelden getoond: zo heeft een artikel vb. een verschijningsdatum, een artikeltekst die je kan opmaken binnen de browser, bijhorende tags en thema's, en verschillende gekoppelde media.
5. De grafische maquettes worden -na feedback- vertaald naar HTML/CSS (de opmaak voor in de browser) en gekoppeld aan de dynamische achterkant. De interactieve elementen, die in Photoshop moeilijker zijn voor te stellen, worden verder uitgewerkt. In dit geval vb. de koppeling met Flickr-beeldmateriaal dat in een pop-up wordt geopend.
6. Ook andere detaillering wordt pas in de browser echt zichtbaar. De keuze
voor een vaste navigatie balk zorgde hier voor een kleine uitdaging: de pagina-inhoud
dient er achter te verdwijnen, het silhouette ligt er echter bovenop. Bij
het scrollen laten we daarom de figuur vervagen, en wordt ze vervangen door
een 'terug naar top' link.