project[4]
0344034.
BDCM
.Application Design I
::project[4]
project[3]: Hi-fi prototype
todo:
- Create a hi-fi prototype of the redesigned app
process:
ResResList (responsive, bidirectional, list)
This started out as an experiment to figure out if fully implementing the hi-fi prototype in code was possible. The first item on my list was this concept list I had in my mind, mainly due to me being hyper aware of the low information density in my prototype. Tangent — it definitely came from comparing some of the screens to their equivalents in Tasker. Tasker has a very utilitarian approach to design (using majority built in Android components), & makes little compromise for aesthetics. It was very apparent in screens like the properties screen, where 2 properties took up as much space as 4 in Tasker. Tangent over. With this very problem under the microscope, as well as the side urge to find a way to solve the responsive problem, I came up with the concept of ResResList
.
As I started actually writing the implementation though, it got increasingly apparent that I was definitely not completing the entire prototype in code. However, having a frame of reference for a ResResList
implementation was still high up in my priority, as there was no way XD could represent it anywhere closely.
The implementation of ResResList
itself is split into two components:
I could so nerd out on & on about what, how, & why certain details were there, but today is not the day; just check out the repository.
Drawer, sub-button, list item editing
I wanted fancy animations. Fortunately I had fancy animations, so I shall show you.
The actual prototype lol
For this, I took the identified pain points from the last project & fixed them all up in Adobe XD. I did also implement a few more screens that I felt were apart of the app's core functionality. Whilst I was at it, hey, making things look prettier & fixing up some layout inconsistencies too!
final:
https://ljslol.notion.site/ljslol/app1-project-4-prototype-fe813e17f763471e8def806bf2ac211f
reflection:
My experience was generally positive. The mix-media rojak approach to this project really does show itself to be different from the rest of my work in Application Design I. Whilst I did have some trouble getting everything up to tip top shape, finishing the rest of the project didn't feel like absolute hell.
I feel like, other than the practical skills like better svelte
composition & Adobe XD utilisation, the largest takeaway was to simply to use tools that let you achieve what you want most efficiently. I could've definitely found a way to implement the full prototype in code, but I eventually found that doing it in XD was much more efficient, as breaking things by moving, adding, removing, was a lot quicker in something that was designed for it. I could probably even make the statement that using it improved my final outcome by not needing to worry about any nitty gritty. However, all that still doesn't excuse the limitations, & the fact that limitations are what drove me to explore less efficient options. Mixing a tool that's limited, with one that is not, but a lot less efficient, has genuinely been an eye-opening concept to me, however trivial it sounds.
Finally, it may be obvious to all that knows it, but I feel like I'll be utilising this approach a lot more for prototyping in the future, especially when it comes to tight schedules or limited skillsets. For that, I think I'd redo this project any day of the week.
Comments