Quick UI Planning Session
I just want to start with an apology to anyone triggered by my use of Illustrator to do these plans/layouts instead of something like Figma. Although I've used FIgma before, I'm simply more used to Illustrator, and I don't need to share the files with other team members or form detailed wireframes. The screenshot to the left shows some MOOVPAD Desktop App UI screens developed for user MOOV program planning.
There are a couple of challenges to overcome when implementing something similar in a web app, developed in Blazor and using a responsive display layout across both large and small displays. Besides the obvious, I also need to learn the most efficient way to implement drag/drop functionality in Blazor. I realise that javascript can do this too. However the interop function calls may make the whole thing more inefficient when moving between JS and C#. I found one approach using C#, but I'm hoping to review others too.
So my first task will be to handle the easier elements, like the initial input fields, followed by adapting the current item scroller developed for other UI screens to be able to serve the role of MOOV selection by the user, and allow drag/drop. Once those basics are covered, I'll then develop the day/week view control to also accept drag/drop actions by the user. So there are a few things I need to learn more about to get this part of the UI working as efficiently as possible.
Because up to now, it was just too easy lmao 🙂
Stay awesome,
EMH
HOW MOOVPAD IS BEING BUILT
For the overview of how MOOVPAD apps are being developed, the reasoning behind particular decisions during development, policies, and more in relation to all the technical things, please see the link to the left.
This will be an ongoing work in progress, and will always be linked to the bottom of each upcoming Blog post.