Micro interaction 1 & 2

To provide context, about the micro interactions I created using Figma. Featured are a number of ships.

When a user clicks on the ship picture, that will then cycle through a certain number of ships to showcase to the user.

As for the ‘About’ button. In terms of the concept, if a user clicks on it, the content within the button will vanish, and depending on what ship that is being shown, informational facts about that ship will be displayed.

Finally, is the UI nav. The UI showcases, three types of vehicles, a boat, a plane, and a car. When an icon is clicked on the dark circle will then shift over to the selected icon, and a new page will open for the user.

Micro interaction 1.png

Micro interaction 3

The next page displayed is for planes. Similarly functioned as the ship page. For the context of this page, I wanted to show what the blueprint of a plan could look like for the user.

To achieve this, when a user would click on the eye button, which has three states, a hover, pressing, and pressed.

When the eye button is pressed, the image of the plane would then transition into a blue print style of itself. I thought this would be interesting to showcase, as it provides interesting information of different panelling and functions of what the plan would have.

Microinteraction 2.png