task[2]: Animation prototype

todo:

Create prototype to showcase final animations

process:

Conceptualising

There were a few main concepts that I thought would be fitting for the app:

Expandables

Expandables are dropdown-sque components which are collapsed by default. They enable density of information by default whilst also letting users peek & edit its contents quickly. They also fit the module-oriented organisation of nomaid, encapsulating its contents into a modular UI element, that's versatile enough to be used throughout the app.

Bottomsheets

Bottomsheets are fragments of UI that slide up from the bottom. Their Y positions are controllable via touch, & the user can either expand them to fill the whole screen, or slide them back down to dismiss them. This lets nomaid place items high up in the UI without worrying about reachability. It also enables quick dismissal & further eases the peek/preview experience of modules.

Animating

Before any work, I plotted everything I intended to do on a Miro board, including the bottomsheets, expandables, & everything else I thought would be beneficial to cue the user.

After that, going based off of the prototype from Application Design I, I made a few minor modifications. These mostly consisted of animation tweaks to more accurately reflect the bottomsheets, as well as the bottom nav, which was switched to a more "dramatic" variation, more expressive via animation to users' touches.

final:

Alternatively, open in new tab

Figure 1.1.1, Animation conceptual map, 31/10/2022

Alternatively, open in new tab

Figure 1.1.2, Animation prototype, 14/11/2022

reflection:

The experience was as one would expect. Nothing too out of the ordinary happened, but maybe that's good. Maybe that just means I'm getting the hang of things, or maybe I'm doing something so tremendously wrong that I don't even notice the blaring nuclear sirens.

The main thing I got from the project is actually the whole deal about maps to convey animation. It's almost like it's an extended user map, but (at least with how I did it) with coloured arrows & additional component labels.

So after all that, a conclusion? I'll probably continue using the mapping techniques learnt here, & I also appreciate practice in XD. Not a bad farewell before the complete Figma takeover.

🔎

task[2]