Visualiseren & prototypes maken

Tweede competentie

Inleiding

De tweede competentie die ik tijdens mijn meeloopstage bij DutchGiraffe heb uitgevoerd, is ‘visualiseren & prototypes maken’. Ik heb voor deze competentie gekozen omdat ik heb gewerkt aan het ontwerp voor de nieuwe website van DutchGiraffe zelf. Hierbij heb ik mijn concepten uitgewerkt naar visualisaties en prototypes, en ik ben enthousiast om hierover mijn voorbeelden toe te lichten.

Naast deze voorbeelden heb ik tijdens mijn stage ook andere taken uitgevoerd die mij hebben voorbereid op het volledig uitvoeren van deze competentie. Zo heb ik bijvoorbeeld ook een interactief online animatiemagazine gemaakt waarin alle mogelijkheden van WPM 3.0 worden getoond. Dit magazine is opgemaakt met beelden van DutchGiraffe, waardoor mijn stagebedrijf duidelijk aan klanten kan communiceren wat er mogelijk is met animaties.

Daarnaast heb ik ook teasers gemaakt van online magazines voor potentiële klanten. Samen met collega’s heb ik pdf-magazines omgezet naar online magazines. Echter, ik wilde graag meer ontwerpen en bij voorkeur werken in hun veelgebruikte programma Figma. Daarom heb ik ervoor gekozen om de uitwerking van de nieuwe website voor DutchGiraffe te beschrijven voor deze competentie. Voor deze website heb ik ook animaties uitgewerkt in Figma, voor de knoppen en voor verschillende blokken. De knop animaties zal ik hieronder al toelichten.

Als laatste heb ik ook dit stageportfolio gevisualiseerd en vormgegeven in mijn eigen huisstijl van mijn eigen portfolio. Dit past goed bij mij en het was leuk en leerzaam om mijn eigen huisstijl toe te passen en uit te breiden!

Wat is visualiseren & prototypes maken voor mij?

Voor mij betekent visualiseren en het maken van prototypes het proces waarin ik mijn ideeën en concepten omzet in concrete visuele representaties en functionele ontwerpen. Visualiseren houdt in dat ik ontwerpen, lay-outs en structuren creëer die de look en feel van een product of project weergeven. Dit kan van alles zijn, van het beeld geven aan interfaces tot het ontwerpen van componenten en het definiëren van de gebruikerservaring.

Prototypes maken gaat een stap verder in interactieve ontwerpen die de bruikbaarheid van een product of een actie simuleren voordat het definitieve ontwerp wordt geïmplementeerd. Hierdoor kan ik de functionaliteit testen, feedback van gebruikers verzamelen en mogelijke problemen oplossen en oplossen voordat de volledige ontwikkeling wordt gestart. Tijdens deze stage heb ik mijn prototypes helaas niet kunnen testen.

Visualiseren animaties

Bij mijn eerste taak in het visualisatieproces was het toepassen van animaties op het ontwerp in Figma. Dit was mijn eerste kennismaking met animaties in Figma, waarbij ik ook moest leren hoe auto-layout werkt, iets wat ik nog niet eerder had gebruikt. Auto-layout is handig omdat het helpt om componenten responsive te maken. Bijvoorbeeld, wanneer je een knop maakt, kun je later de tekst aanpassen en zal de knop automatisch in lengte meerekken. Daarnaast was auto-layout ook erg handig bij het aanpassen van padding en uitlijning binnen een blok.

Om dit toe te kunnen passen, moest ik eerst onderzoek doen om erachter te komen hoe het werkt. Gelukkig zijn er veel duidelijke YouTube-video’s beschikbaar die stap voor stap uitleggen hoe je auto-layout kunt gebruiken. Ik heb een aantal van deze video’s bekeken en geoefend met auto-layout.

Toen ik het eenmaal onder de knie had, ben ik auto-layout gaan toepassen op knoppen. Eerst op algemene knoppen en daarna op knoppen die voorkomen in het ontwerp van Anne voor de nieuwe website van DutchGiraffe. Hieronder zie je een video met de verschillende mogelijkheden die ik heb uitgewerkt.

De mogelijkheden zijn eindeloos, omdat je alleen een beginversie en een eindversie van de knop hoeft te maken. Met de auto-animate instelling voor hover maakt Figma hier dan een prachtige animatie van. Wel merkte ik hierbij op dat de animatie soms wegviel of aan de andere kant snel druk werd als er veel tegelijk gebeurde.

De animatie bij de knoppen vond ik meteen heel toepasselijk en passend bij mijn opdracht. Ik wilde ook graag een animatie toevoegen aan het logo, maar het lukte me nog niet om dit minimalistisch en mooi toe te passen. Ik blijf oefenen om dit onder de knie te krijgen. Voor nu heb ik daarom alleen animaties toegepast op de knoppen in mijn ontwerp. Ik heb twee verschillende knoppen gemaakt: een met een achtergrondkleur en een met een lijn eronder, en bij beide heb ik een passende animatie toegevoegd.

De animatie bij de knop met achtergrondkleur laat de kleur veranderen, waarbij de achtergrond beweegt in de richting van de pijl die naast de tekst op de knop staat. Ik heb verschillende variaties van deze knop gemaakt, zodat ze op verschillende kleuren achtergrond kunnen worden geplaatst en nog steeds opvallen.

Bij de knop met een lijn onder de tekst heb ik een animatie toegevoegd waarbij deze lijn uitbreidt tot een rechthoek die over de tekst heen gaat. Deze knop wordt vooral gebruikt op egale achtergronden, waardoor de kleur van deze knop goed opvalt!

Op het uitwerken van deze knoppen kreeg ik goede en enthousiaste reacties! Anne wilde graag animaties toevoegen op de nieuwe website, maar dit moest niet te ingewikkeld worden omdat we de website zelf moeten bouwen. Een eenvoudige toepassing in de knoppen vond ze daarom heel goed. Wel kreeg ik feedback dat er veel verschillende variaties waren en dat het misschien overzichtelijker zou zijn als er minder verschillende knoppen waren. Hier was ik het mee eens. Echter, bij dit nieuwe speelse ontwerp kon ik niet helemaal vermijden dat de knoppen opvallen, gezien de verschillende kleuren van de blokken op de pagina’s. Dit is een goed punt om volgende keer direct mee te nemen bij het ontwerpen van de pagina’s waar de knoppen in passen.

DutchGiraffe website

Om te bewijzen dat ik deze competentie nu beheers, zal ik twee voorbeelden laten zien waarbij ik concepten heb uitgewerkt tot visualisaties en prototypes. Bij deze voorbeelden zal ik niet alleen laten zien dat ik ontwerpen en lay-outs heb gecreëerd, maar zal ik ook meer animaties toevoegen om interessante, interactieve en dynamische elementen aan mijn prototypes toe te voegen. Deze combinatie zal de functionaliteit en gebruikerservaring van het ontwerp versterken. Ik zal beschrijven hoe ik mijn creatieve ideeën heb vertaald naar praktische en effectieve oplossingen.

Klik op een van de knoppen om het voorbeeld te bekijken.

Klik hier voor het eerste voorbeeld

Expertisepagina voor DutchGiraffe

Klik hier voor het tweede voorbeeld

Cases en contact voor DutchGiraffe