Week 2: Het stageproject!
Zo, de 2e week stage bij Inventis loopt stilaan op z’n einde. Hoog tijd dus om even de afgelopen week neer te typen en te evalueren.
Op het einde van vorige blogpost had ik al een tipje van de sluier kunnen oplichten, over het programma van deze week, nl. het stageproject!
Na de gebruikelijke designers-vergadering kreeg ik van Bart op maandagochtend de inleiding tot dit project, waar ik de bestaande inventisstage.be website onder handen zal mogen nemen! Het doel van deze website is om scholen en studenten op de hoogte te houden van het reilen en zeilen van de stagiair(e)s binnen Inventis.
Als webdesigner bestaat mijn eerste taak er in een degelijke informatie architectuur uit te werken en dit te vertalen naar een wireframe met werkend prototype. Dit model diende volledig responsive onderbouwd te zijn, d.w.z. dat de website toegankelijk en aanpasbaar moet zijn voor ieder medium, gaande van mobiel apparaat (gsm, tablet) tot desktop. Op zich vanzelfsprekend, omdat mobiel surfen in grote getale toeneemt en toekomstgericht je website dus meer (verschillende soorten) bezoekers toelaat. Maar als complete rookie binnen dit gegeven is er deze week een schat aan informatie op me af gekomen.
Axure
First things first! Om na te denken over de informatie structuur en de algemene opbouw van eender welke website kan het maken van een wireframe erg hulpvol zijn. Binnen Inventis werken ze met Axure en ik begrijp waarom. Deze tool laat je toe in een mum van tijd een basic, ‘werkend’ ontwerp te maken van je idee. Dit is in de eerste fase al erg handig om naar je klant toe te stappen, want die ziet enkel de noodzakelijke gegevens en kan al klikkend door het gegenereerd ontwerp zijn weg zoeken. Zo kan je in de beginfase al een degelijke basis vormen voor het verdere project.
Voordien had ik al enkele malen geëxperimenteerd met Axure, maar met dit project had ik echt iets gericht, om uit te werken in het programma.
LESS’ do this!
Na anderhalve dag had ik een vrij degelijk ontwerp en met de bijsturingen van Bart kwam het tot een waardig niveau, zodat de volgende fase van start kon gaan. Een eerste pagina mocht al eens worden omgezet in een responsive design met behulp van HTML5, CSS, LESS & Bootstrap.
De twee eerst vernoemde talen waren me vrijwel bekend, maar met LESS heb ik voorheen nooit gewerkt. Wat is dat dan eigenlijk?? Wel, LESS is een dynamische techniek om bestaande CSS uit te breiden met variabelen, mixins, functies, … Op deze manier kan je veel terugkerende elementen bundelen in een class en deze op zijn beurt dan weer koppelen aan een andere class. Het vergt een andere manier van denken dan je gewend bent van CSS te schrijven, maar op lange termijn krijg je ‘more’ gedaan met LESS!
Dit alles werd op een responsive grid geplaatst van Twitter Bootstrap. Met deze front-end toolkit kan je vrij snel een ontwerp omzetten naar een werkend prototype. Voor een beter inzicht in deze tools te krijgen heb ik wel enkele dagen mijn weg moeten zoeken en hier en daar eens tegen de lamp moeten lopen, maar het is het zeker waard!
Monkeytalk
Op donderdagnamiddag mocht ik met de designers mee op uitstap, naar de allereerste editie van Monkeytalk in Mechelen. Deze conferentie stond volledig in het teken van User Experience Design (UXD).
Als je nu bezig bent met het maken van websites, mobile apps of andere vormen van interfaces dan is het toepassen van een goede UX meer dan nodig om de gebruiker op de juiste manier wegwijs te maken en de gewenste ervaring te bezorgen. Dit gaat en staat met een goed functionerend product.
De 5 talks gingen van het maken van (mobiele) prototypes tot het optimaal betrekken van jouw publiek en tot slot een speelse oefening met ‘brainstorm in a box’. Op zich eens leuk om te kijken hoe anderen deze processen aanpakken en doorlopen in de praktijk, maar in vergelijking met enkele modules op school leverde het weinig nieuwe of verrassende inzichten op. Toch was het voor een eerste event een zeer knappe organisatie en ga ik ook hun toekomstige conferenties in het oog houden.
Op vrijdag heb ik verder gewerkt aan mijn responsive design, wat op zich al stukken beter ging en waar ik meer grip kreeg op het gebruik van reeds genoemde technieken. De eerste basic pagina heb ik voor het weekend nog aan het werken gekregen!

Knap werk Wim! Je eerst wireframe schermen zien er al zeer goed uit.
De eerste wireframes zitten idd al goed, benieuwd naar het resultaat.
Leuk geschreven blogpost, blij dat je het naar je zin hebt!