Interface & Beweging
Opdrachtgever
Hogeschool van Amsterdam
Vaardigheden
Adobde After Effects/Adobe Photoshop
Opdracht
Bij het vak Interface & Beweging, onderdeel van de minor Visual Interface Design, stond het verrijken van interactieve ervaringen centraal. Door animatie en motion graphics te combineren met interface design, leerde ik hoe beweging niet alleen esthetisch, maar ook functioneel ingezet kan worden. Tijdens deze opdracht heb ik concepten ontwikkeld, storyboards gemaakt en prototypes uitgewerkt die dynamiek en gebruiksvriendelijkheid samenbrengen. Het doel was om animatie en interactie te gebruiken als krachtige tools om informatie over te brengen en de gebruikservaring te verbeteren.
Onderzoek en Context
Ik analyseerde voorbeelden van dynamische interfaces en motion graphics in bestaande applicaties, waarbij ik lette op hoe animaties de flow, hiërarchie en navigatie ondersteunen. Daarnaast onderzocht ik tools en technieken die geschikt zijn voor het creëren van interactieve animaties, waaronder After Effects, Lottie en nieuwe AI-tools. Deze inzichten vormden de basis voor mijn ontwerpkeuzes en hielpen me om animaties te ontwikkelen die niet alleen visueel overtuigend zijn, maar ook effectief bijdragen aan de functionaliteit van een interface.
Onderzoek
Voor deze opdracht heb ik onderzoek gedaan naar verschillende programma’s en tools die geschikt zijn voor het maken van animaties en prototypes. Ik heb onder andere Adobe After Effects, Principle en Figma onderzocht om de mogelijkheden te vergelijken. Adobe After Effects bleek krachtig voor complexe animaties, maar het was minder geschikt voor interactieve prototypes.
Schetsen
Om mijn idee visueel vorm te geven, begon ik met schetsen op papier. Het centrale object in mijn ontwerp, een pistool, werd in verschillende posities en vormen uitgewerkt. Ik experimenteerde met de vorm, schaal en details om te bepalen wat het beste paste bij de animatie en de boodschap die ik wilde overbrengen. Naast de schetsen heb ik kleine testen gedaan, zoals het simuleren van bewegingen en interacties met eenvoudige papieren prototypes. Dit hielp me om een duidelijker beeld te krijgen van de flow en de esthetiek voordat ik digitaal verderging.
Protoype
Met de schetsen en het concept gereed, begon ik met het maken van de animaties in Adobe After Effects. Dit programma bood de flexibiliteit en precisie die ik nodig had om gedetailleerde bewegingen en overgangen te creëren. Nadat de animaties waren voltooid, exporteerde ik deze in een geschikt formaat om ze in Figma te kunnen integreren. In Figma werkte ik vervolgens het prototype verder uit door de animaties te combineren met werkende schermen en interacties. Het eindresultaat was een interactief prototype waarin de flow en functionaliteit duidelijk naar voren kwamen, ondersteund door de geavanceerde animaties uit After Effects.