Thomas Seyssens, 17 februari 2017

Clickable prototype: de basis van een goed webproject

Een clickable prototype is essentieel om de uiteindelijke versie van de website helemaal goed te krijgen. Nadat het designteam de goedgekeurde designs heeft afgeleverd, begint de analyse van de paginastructuur. Wij als designers bepalen de aparte blokken en kolomindeling, en vervolgens de nodige functionaliteiten of plugins om de gebruiksvriendelijkheid te optimaliseren: carrousel, javascript framework, front-end grid systeem (Bootstrap …). Eenmaal dit alles uitgeklaard, zetten we de clickable prototype-omgeving op in Visual Studio. We installeren de nodige plugins via Bower, een front-end package manager die plugins online beschikbaar maakt.

grunt

Grunt: onmisbaar bij opzetten van clickable prototype

Grunt, een Task Runner die draait op NodeJS, helpt ons om plugins te gebruiken en samen te voegen. Via Grunt installeren we ook de nodige plugins om de te gebruiken preprocessor-files te compileren. Zowel Bower als Grunt gebruiken Git om de plugins/taken te installeren.

De volgende stap is de opbouw van de projectstructuur en indeling van files en folders om het overzicht te behouden. Hierna kunnen we de html-pagina’s opbouwen, met gebruik van Html5-elementen en de grid-structuur uit Bootstrap. In deze fase bekijken we ook welke elementen we kunnen nesten en welke apart moeten staan (menu, popover …). We voorzien nu ook links naar andere pagina’s, zodat het menu een werkend voorbeeld wordt.

bootstrap

Van statisch design naar werkend voorbeeld

Aan de hand van Bootstrap zetten we een deel van de pagina-structuur op voor er toegepaste stijlen geschreven zijn – dit helpt alvast bij de Mobile-First aanpak, omdat de klant onder meer ziet welk blokje waar komt te staan (in eender welke resolutie). In deze fase implementeren we ook statische data, overgenomen van het ontwerp, zodat we de designs volledig kunnen namaken.

Eenmaal de html-structuur van de eerste pagina op punt staat, kunnen we die (zo modulair mogelijk) stijlen, te beginnen met het kleinste scherm, waar de meeste moeilijkheden zitten qua interactie en plaats. De LESS-files zijn ingedeeld volgens bepaalde breekpunten in de paginaresolutie. Daardoor spotten we gemakkelijk de probleemfiles.

Van mobile clickable prototype tot tabletresolutie

Eenmaal de pagina mobiel op punt staat en de functionaliteiten (swipen, openklikbaar menu, …) werken, pakken we de tabletresolutie aan. De lay-out van de pagina staat nu dankzij het grid-systeem grotendeels goed, waardoor we al snel kunnen overgaan tot desktop- en widescreen-formaat (breder dan 1200 pixels).

Testen doen we aan de hand van devices en web-tools als BrowserStack. Als dat nodig blijkt voor het project, implementeren we het front-end Framework (Angular, VueJS, …), dat de pagina toelaat dynamisch te werken zonder dat de pagina moet herladen. Verder helpt het bij de interactie met de gebruiker en kan het data wegschrijven en ophalen via een API. In het geval van een prototype voorzien we valse data om interactie te genereren. Eenmaal dit alles getest, plaatsen we het prototype op een testomgeving en kan de klant beginnen testen.