In dit document beschrijf ik aan de hand van voorbeelden wat mijn bijdrage is geweest in het project.
Na de briefing zijn we kort gaan brainstormen en begonnen aan de eerste schetsen. De schetsen van de teamleden samen vormde de basis van het prototype.
schets 1
Hier schetste ik het idee om de interface in 3 pagina's te splitsen, een pagina met de datavisualisatie op de kaart, een pagina met je eigen profiel als initiatiefnemer en een pagina met een lijst van andere gebruikers.
Eerste design van de connect pagina
Ik heb de basis van de connect page vorm gegeven, te zien in bovenstaande foto. Gedurende het hele project hebben de vormgevers samen gewerkt in een online design tool :
Zo hebben we makkelijk en snel elkaars werk kunnen verbeteren en makkelijk kunnen designen in een stijl die vanzelf steeds meer een geheel werd.
Naast het itereren op designs van schermen heb ik gezorgd voor passende content in het prototype.
Wij hebben voortdurend samengewerkt aan iteraties, het verwerken van feedback op het prototype en het toevoegen en verwijderen van features. Ik heb bij veel van de functies geholpen met het design en advies kunnen geven over de vormgeving van een aantal andere features.
De energielabels als signalen bij de algemene data over de gekozen gemeente is 1 van de features die het helaas niet heeft gehaald in het technische prototype. Deze zouden moeten aangeven of een waarde uitzonderlijk is.
Naast mijn hulp met de UX design en stijl heb ik Roeland kunnen assisteren met het maken van de profile en connect pagina's in HTML, CSS en JS. Bij het typen van deze code heb ik ook gelet op de interactie en wat extra details van het ontwerp kunnen invullen.
Zo heb ik bijvoorbeeld hover states en animaties uit kunnen werken op een manier die de gebruikservaring en gebruiksvriendelijkheid ten goede komt.
Bij het laden of herladen (na een filter of sorteringsoptie aan te passen) verschijnt de lijst opnieuw in een andere volgorde, gesignaleerd door een animatie die de lijst opnieuw doet verschijnen
Bij het klikken op 'send linkedIn message verschrijnt er met een vloeiende animatie een popup met een tekstvak, waarin de knipperende 'caret' meteen signaleerd dat je kunt beginnen met het typen van je bericht naar een persoon of initiatief die waardevol kan zijn voor je groene project.
Bij het scrollen van de lijst wordt ook de bovenkant altijd afgerond en nooit recht afgesneden, dit zorgt voor een consistent gevoel binnen de stijl.
Groenste Gemeenten Van Oranje
Met deze poster wil ik laten zien hoeveel winst er nog is te behalen in het gebruik van groene energie. Daarbij wil ik de data op zo'n manier presenteren dat het mensen de kans geef om hun gemeente of land op een andere manier te kunnen bekijken dan in een landkaart.
De gemeenten die normaal alleen te zien op hun vaste plek en naast aangrenzende gemeenten zijn nu hun eigen eilandjes die deel uitmaken van een groter grid. Hiermee wordt ook in 1 oogopslag duidelijk hoe maar een klein deel van alle gemeentes aan de groene kant staan.
Groenste Gemeenten Van Oranje
