— I swear this part is semi-important
Adobe XD is limiting. There are some things that simply cannot be done inside of its protyping suite of tools. This thus entails additional clarification on certain concepts that should be implemented “for real”. The reader should comb through the Main Prototype, & then through Implementation Inconsistencies to build a full picture of the ✨vision✨.
— Hey that’s like the whole project
https://xd.adobe.com/embed/19a3d9a5-e407-4f30-adbc-2f5784bb9b01-4cf0/?fullscreen
Fig 1 Main Prototype Embed
nomaid more like nowilltolive (end me, please)
Fig 2 Main Prototype Link
(Since project[3])
— The parts not in the Main Prototype, either due to time or technical constraints
I want fancy animations for these. Not only do they provide context & feedback to the user upon tapping, they also release dopamine because pretty. Fortunately for me, I’ve always been insufferable, so I’ve had these thoughts for a long time, & have even implemented something like this in a hobby app I made some time ago.
https://www.youtube.com/watch?v=5pg78cNNoUA
Fig 3 Demo of the implementation of animations in “Notify” (the hobby app)
Weird name, but it’s my prototype so I do whatever I want & you (the very important person that gives me grades) deals with it. It’s a conceptual RecyclerView/List-esque component that supports scrolling in the Y or X direction depending on screen width. It should also expand its list items as you scroll to enable showing previews. Even perhaps some carousel-like stacking at the edges & some fancy animation?
Such a combination should provide good balance of not wasting screen real estate (by having small items surrounding the larger ones), as well as ease of checking what the hell is happening inside a module (previews). In a real implementation, the option of toggling between expanding preview & not should exist, but this is not a real implementation, so tough luck.
In the real app, this list component should be present in the home page, as well as in the browse page, & wherever modules are to be scrolled through.
Fig 4 Demo of a rough implementation of ResResList
https://github.com/Sxxov/nomaid
Fig 5 Source code for the rough implementation
<aside> 👇 Resize your browser window, or rotate your phone to try it out!
</aside>
https://nomaid.staging.sxxov.design/
Fig 6 ResResList demo