With motion our creations come alive and with prototyping we can test and tweak until we hit the sweet spots. On this page I have collected some animated and interactive samples I have made in various projects. From motion graphics to dynamic web components and different prototyping setups.
Even in the simplest apps/websites there's a lot of interactions to handle. Supporting them with just the right amount of animations is a great way to ensure the users doesn't have to think. And it could also add a little bit of personality and flair to the service. Here's a fast prototype I made in Figma to test some neat animations for screen transitions and button feedback.
***
The possibilities to work with motion are almost endless on the web today – for example using css filters and animations. That's great but we still need to make sure we don't go overboard or forget that some techniques work on desktop only. With the vast number of great design and prototyping tools such as Adobe XD, Figma, Sketch, Principle, Framer, InVision, Proto.io and so on its easy and fun to test stuff. Here I used Figma to compare a few different hover behaviours in the same context.
***
Some things you want to get just right before going into production. With Proto.io I built this quite complex prototype during one early iteration of the Doctor Professor app. The actual parameters I used in the game play simulation was great to have for the developers when later building the app.
***
This is a short part of a longer video I made ages ago for the Da Matteo cafés in Gothenburg about quality coffee brewing.
***
Sometimes Keynote or PowerPoint just isn't enough. Good thing we can hard-code anything. This one was made for e-commerce specialist PartTrap.