Medical Service — MAUI App Implementation. Phase #0 — Review Design
This is a start of a journey to implement Apps in an accurate Enterprise way actual applications are made.
Hi Folks, I started with you a new journey about implementing mobile applications in .NET MAUI. We would implement one single page of Medical Service from a dribble.
Still, we will make it from a simple stupid showcase of implementing UI to a complete Enterprise application with controls, bindings and validations. All this will be done in separate blog posts and describe one thing in one post, so later, you can search for an exciting part of this story more easily.
Also, I would film all that process with some of my comments, hoping that will be useful for somebody.
Here is a list of future blogs; I will add links later after writing:
- Phase #1 — Implementing Page in XAML with inline data.
- Phase #2 — Adding View Model.
- Phase #3 — Adding Validation.
- Phase #4 — Adding Services with Mock Data.
- Phase #5 — Refactor XAML, creating custom controls.
- Phase #6 — Adding Unit Tests.
- Phase #7 — Adopt UI for Small/Large Screens.
Phase #0 — Review Design
In the real world, you will get this high-fidelity design from your designer in some web app, like Figma or Adobe or Zeplin. And you will have access to all details like font, font-size, colour, margins between, icons in SVG format and other crucial things. Here we have only one image, which is unacceptable in Enterprise development but may be a deal sometimes in some freelance development. Anyway, we got this; what should be our next steps now?
First, we should determine all margins and colours we would use and create Colors.xaml and Dimensions.xaml with all values we found there. This will be done in Phase #5 because I would like to show you how we can eject it from the raw XAML code. In Phase #1, we will use them all in our XAML.
I’m not a designer, but in an exemplary design, there should be a magic “x” value, and all margins and padding should re-use that “x” with some multiplier, like 2x, 4x, and 5x. And if that “x” is less, than 4px it is not so good.
I’m using Figma for such measuring because it’s free and ideal for the simple things we will do with that image. So, what are we doing here? — We first created a couple of squares of 16 or 24 pixels and checked how they fit. Later create more if they are needed. But, it’s essential to try not to make a difference between your “boxes” of 1 pixels, and if that is possible, also try to avoid all odd numbers of pixels.
And we were going to do this for all elements on the screen. After that, we need to pick up all colours we see there.
That’s it. The initial — preparation phase is done. Now we are going to move this UI to .NET MAUI, where we are going to use XAML for everything because I would like to show how raw XAML becomes an actual Enterprise Mobile app, see you folks 🙃 😉
