Ironhack UX/UI Bootcamp Prework — Exercise 5
The fifth exercise of Ironhack’s UX/UI bootcamp prework is an introduction to animation. Students are asked to use Invision to create interactions between the wireframes designed in exercise 4.
Before using Invision, the course introduces students to Flinto, a software that helps designers create custom animations. While exploring Flinto, I felt like discovering a new world of infinite opportunities and while I’m eager to learn about animations, I was glad to start with Invision which makes the process easier for beginners.
Creating interactions between Emov’s wireframes
The following map shows what the users can do in the demo. There were only 7 screens in the original exercise and I didn’t design any additional screens so some interactions (like a Contact screen or FAQ screen) are missing from the demo.
I had one problem while making the prototype. On the filter screen (see screen opposite), I wanted the user to be able to select one filter and click on the button OK.
I didn’t manage to do it: I could not make the hotspot clickable unless the overlay is not active (square is not filled)
I tried various combinations of parameters to resolve this problem but none of them worked. For now, users have to click twice on the filter button (turn it on and off) or not click at all to be able to click on the OK button.
I’ll update the post when I find a solution.