Verslag JUG 's-Hertogenbosch 1 augustus

Dinsdagavond 3 juli, na een lekker speciaal biertje en een lekker visje, gaan we van start met de JUG073. Welkom aan de nieuwe Joomla! gebruiker die onze bijeenkomst kwam bezoeken. Na een korte herhaling van het beoogde JUG073 project, waarbij we een website gaan bouwen voor onze host, volgde een rondje rond de bezoekers van deze gebruikersgroep. Daarna viel de eer aan Dennis Buis om ons in te lichten over Wireframing en Design...

Project JUG073 - wireframes en design

Tijdens deze presentatie laat Dennis Buis de zin van het maken van wireframes zien. Hoe je van een wireframe tot een design komt en welke tools hij gebruikt. 

Een wireframe is een brug tussen de sitemap, ruwe ideeën en het design. Het legt de focus op structuur en functionaliteit. Legt de hiërarchie van functionaliteiten op de pagina inzichtelijk. Problemen worden hierdoor eerder zichtbaar dan bij compleet uitgewerkte designs. Tijdens het maken van de wireframe is er nog geen discussie over kleur, huisstijl, ronde hoekjes noch over inhoudelijke teksten. 

Samen met de klant wordt de sitemap uitgewerkt. Per pagina worden de functionaliteiten uitgewerkt en na akkoord wordt het design gemaakt. Schets alle pagina's op papier en kies twee schetsen die het beste voelen. Deze werk je verder digitaal uit.

Voor het uitwerken van het design is een inventarisatie van de huisstijl nodig. Denk hierbij aan een visitekaartje, logo, kleurgebruik, huisstijl manual enz. 

Voor het uitwerken van het design gebruikt Dennis de wireframes als basis. Daarover komt het design sausje. Oorspronkelijk in inDesign met een PDF export naar de klant. Na uitwerken van de developer wijkt het resultaat vaak af van het ontvangen PDF bestand. Dit onder andere doordat PDF schaalbaar is. Voor het maken van wireframes wordt wireframe.cc toegepast.  Na een lange zoektocht is axure.com de gewenste tool om wireframes uit te werken naar design. De tool leent zich ook voor het maken van wireframes. Offline tool die het mogelijk maakt om het resultaat online te publiceren. 

Wat ons opviel bij de bezoekjes aan andere sites van bierbrouwerijen is dat ze vrijwel allemaal een age lock op de site hebben staan.  De tool die hiervoor gebruikt kan worden is de Joomla! plugin Age Lock van JoomlaXTC (https://extensions.joomla.org/extension/age-lock/).

Na de presentatie werden we aan het werk gezet met pen en papier om een schets te maken voor de homepage. Door een A4 pagina drie keer te vouwen heb je acht vakjes. In elk vakje kun je een schets maken van de homepage. Alle schetsen bij elkaar leggen en middels kruisjes plaatsen en overleg kwam er een winnaar uit bus. Deze heeft Dennis omgezet naar axshare.com. Terwijl hij hiermee bezig was hebben we een schets gemaakt voor een standaard pagina.