Roosterbeheerapplicatie
Pieter van Foreest
Ontwerp
Concept
Tijdens mijn minor “Visual design & front-end development” mocht ik voor vier blokken van 5 weken, zelf een leerdoel kiezen. Het eerste blok koos ik ervoor om mij te verdiepen in animaties en interacties in webdesign. Mijn doel was om mijn Figma skills verder te ontwikkelen en de mogelijkheden van animaties en interacties toe te passen in mijn ontwerp.
Wil je meer te weten over dit project? Lees dan hier verder!
Het doel van deze opdracht was om een interactieve en geanimeerde webpagina te ontwerpen en te realiseren. Ik wilde leren hoe ik animaties en interacties effectief kon inzetten in een webdesign, niet alleen om mijn vaardigheden in Figma te verbeteren, maar ook om klanten beter te kunnen overtuigen met pakkende en interactieve prototypes.
In eerste instantie begon ik met het verkennen van de basisprincipes van animaties in Figma door cursussen te volgen die me leerden over de verschillende animatievormen, zoals smart animate, en het gebruik van componenten om mijn werk efficiënter te maken. Ik volgde tutorials over het instellen van animaties, het creëren van interactieve elementen en het gebruiken van componenten en component sets in Figma. Gedurende het proces heb ik mijn aanpak aangepast door stap voor stap te werken en regelmatig mijn voortgang te evalueren. Dit hielp me om te leren van de fouten die ik maakte en mijn werkwijze aan te passen, bijvoorbeeld door eerst animaties te creëren voordat ik verder ging met de webpagina.
Voor het realiseren van de animaties heb ik gewerkt in Figma. De belangrijkste functies die ik gebruikte, waren de componenten en component sets voor het creëren van herbruikbare elementen en het beheren van animaties. Ook maakte ik gebruik van smart animate om vloeiende overgangen en animaties te creëren tussen de verschillende staten van componenten.
Proces
Daarnaast leerde ik om met frames te werken voor het opzetten van de juiste structuur voor de animaties en om de snelheid en timing van de animaties goed af te stemmen met behulp van de ease in / ease out opties.
Mijn proces voor het maken van animaties begon met het ontwerpen van de basispagina en het onderzoeken van de animaties die ik wilde implementeren. Eerst maakte ik losse animaties en deelde ik mijn werk in kleine taakjes, zoals het animeren van een carousel, het toevoegen van tekstanimaties, en het implementeren van button- en scrollanimaties. Ik werkte stap voor stap, waarbij ik eerst de animaties per element instelde en deze later combineerde in mijn webpagina. Een belangrijk leerpunt was dat het essentieel is om de animaties en componenten goed te structureren voordat je ze in een complexere interactie of webpagina integreert. Hierdoor voorkwam ik dat animaties niet goed werkten of dat de interface te complex werd.
Hier zie je wat schetsen die ik maakte voor de website.
Hier zie je de styletile van de website.
Wat goed ging, was dat ik de basisprincipes van animaties in Figma goed onder de knie kreeg, zoals het gebruik van smart animate en de mogelijkheden van componenten. Deze tools gaven me de flexibiliteit om efficiënter en sneller te werken. Daarnaast heb ik geleerd hoe ik animaties op een interactieve manier kon gebruiken om gebruikers meer te betrekken bij de webpagina. Ook het opdelen van taken in kleine stappen met behulp van de kanban methode hielp me mijn werk beter te plannen en prioriteren.Aan de andere kant maakte ik ook fouten, vooral in het begin van mijn proces, zoals het niet goed instellen van componenten of het niet goed structureren van frames, wat zorgde voor onjuiste animaties.
Ook vond ik de timing en snelheid van de animaties soms moeilijk af te stemmen, en ik had graag meer tijd besteed aan het verfijnen van de animaties en het testen van verschillende interacties. Bovendien kwam ik erachter dat het perfectionisme me in de weg stond, omdat ik te veel tijd besteedde aan het verfijnen van details die niet essentieel waren voor het eindresultaat. Deze ervaring heeft me geholpen te leren hoe ik met meer focus kan werken en niet vast moet blijven zitten in onbelangrijke details.
Wat ik heb geleerd
Klik hier om het prototype te bekijken!
![](data:image/svg+xml,<svg display="block" id="1189051114" role="presentation" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg"><path d="M 20.4 0 L 3.6 0 C 2.645 0 1.729 0.395 1.054 1.098 C 0.378 1.803 -0.001 2.756 0 3.75 L 0 16.25 C 0 17.245 0.379 18.198 1.054 18.901 C 1.728 19.604 2.644 20 3.6 20 L 20.4 20 C 21.355 20 22.271 19.605 22.946 18.902 C 23.622 18.197 24.001 17.244 24 16.25 L 24 3.75 C 24 2.755 23.621 1.802 22.946 1.099 C 22.272 0.396 21.356 0 20.4 0 Z M 19.597 2.499 L 12 8.439 L 4.403 2.499 Z M 20.4 17.5 L 3.6 17.5 C 3.282 17.5 2.976 17.368 2.752 17.134 C 2.526 16.899 2.4 16.581 2.4 16.25 L 2.4 4.063 L 11.28 11 C 11.706 11.333 12.294 11.333 12.72 11 L 21.6 4.063 L 21.6 16.25 C 21.6 16.581 21.474 16.899 21.248 17.134 C 21.024 17.368 20.718 17.5 20.4 17.5 Z" fill="rgb(255, 255, 255)" height="20px" id="EdetBMibR" width="24px"/></svg>)