Current technologies have made us participate in learning new skills outside our work environment, the developer now has other skills up his sleeve, but will it be advantageous to get out of the comfort zone?
That and other questions made me, and certainly the world we live in leads us to be self-taught, competition is latent, and having more than one skill makes a difference in getting a job or even a promotion, don’t you believe me? So let’s think about the most terrible thing that could happen, for example, if the only designer missed the job and at that moment the client who wants to show him the prototype of the application arrived, the project manager does not know what to do and all the responsibility falls on him, what would you do ?, maybe the Project Manager convinces him to come another day but the company would be losing reputation, another solution would be to show that you can expose the prototype, since you learned UI / UX design and thanks to your good performance against the problem you receive an increase or maybe you are the new Project Manager xd.
Entering the field of mobile applications, I would tell you to start creating wireframes in your notebooks, it costs nothing to take a pencil or pen and model interfaces, do it as you like, be free and let your imagination flow.
To capture the wireframes you can use AdobeXD, since they launched it I liked it a lot and thanks to its new updates it allows the design process to be very easy.
Design in AdobeXD
As mobile application developers we must have a documentation of the application design, they can use mine as it serves as a guide to create applications in Xamarin.Forms.
Another way to document our interfaces and therefore link the design and development area is the Zeplin tool, the new update offers style guides that allow you to add color palette, catalog of text styles and components, as well as plugins for technology that you use, usually, I use the Xamarin.Forms extension.
Zeplin in action
We use XAML to create amazing interfaces, now if they are? In my view it was always feasible to create beautiful interfaces, the only detail is that there was no clear knowledge, you can guide yourself with the Adobe XD or Zeplin project, here is Have a lot of patience, do not despair and do it calmly so that your interfaces look like the prototype and get the expected result.
Speaking of Xamarin.Forms, the updates have focused on UI, we have CollectionView that groups items both horizontally and vertically, Visual Material is my favorite, a Nuget Package that groups several Custom Renderers based on Google’s Material Design system, and last but not least we have Shell, that with a few lines of code we can create a complex and beautiful navigation system at the same time, but all this is possible thanks to the PR’s and issues of a large community that does not want to stay Go back and move on to new goals.
Google Play Music App Clone made by Alejandro Ruiz Varela (Microsoft MVP)
As Zeplin is the ideal ally to create amazing interfaces in XAML, we must keep in mind that good practices are not only in C #, but also in how to apply controls to your interface, start training your new skills and remember that practice makes perfect .
You can be guided by the UI documentation created by Javier Suarez Ruiz where it details the good practices in XAML, controls performance. etc.
Xamarin.Forms Performance post created by Javier Suárez Ruiz
The following project was inspired by the official website of Xamarin Blog, I took advantage of my design skills and with imagination and patience I managed to obtain this result.
Complete application workflow
If you want to free your imagination, you can motivate yourself through UI / UX resources such as Behance, Dribbble, etc.
To deploy the Adobe XD project to Zeplin follow the instructions in my video tutorial.
Before replicating our design in Xamarin.Forms we must export all the images that will be involved in the application (V.3).
When we have experience in creating interfaces, the first thing that has to be done is to divide the design, this will help to know the locations when we start implementing it in XAML, of course that when you practice more you will no longer have to do this process.
GridLayout is undoubtedly my favorite control to encapsulate other controls, in the MVP publication Leomaris Reyes you will learn to use it correctly.
I usually use global styles, grouped with comments to know which interfaces will be used, another good practice is to abbreviate the x: Keys in the most readable way possible.
Since CSS appeared, it allowed me to reduce code in XAML styles and they are very easy to implement, if you want to learn more you can watch my video tutorial.
The “PlanetXamarin” prototype has the following interfaces:
The “WelcomePage” interface seems simple, don’t you think? Beware of the enthusiasm, because we are creating for Android and iOS platforms, we must be aware of the small details, the first thing they will do, with the help of Zeplin, verify the vertical distance of the top of the interface with the labels, and with the help of OnPlatform we add the different distances, this is done in order to obtain an acceptable optics on both platforms.
WelcomePage Part1 Design
The design button is not common, since it has degraded colors at an angle of 135 °, we can do it with SkiaSharp, but the good news is that there is already a NuGet package called PancakeView created by MVP Steven Thewissen, we simply install the Package Nuget, we implement the xmlns and encapsulate PancakeView in the button control, we add the respective properties and we will get this beauty from button.
WelcomePage Part2 Design
The “BlogPage” design has an intermediate difficulty, but thanks to Grid and CollectionView we can structure it better, first we create layers with the help of two Grids, in the parent Grid add PancakeView with their respective gradients allowing to occupy the entire interface, in the son grid encapsulate the BackgroundImage2.png image and its Labels, add another independent Grid encapsulating a ScrollView with a parent StackLayout, and within it, two StackLayout for each horizontal and vertical collectionView.
Focusing on the CollectionViews, to give it that aspect of homogeneous separation, I used the StackLayout Father and son and with the properties of “Padding” and “Margin” you can get the following result.
The “DescriptionBlogPage” design has the same logic as “BlogPage”, adding two Grids, the parent Grid with PancakeView and the son with three controls, the last label adds a ScrollView to display the description of the publication for the purpose that is not Move the other controls on the interface.
… and finally we have the final application, you can download this repository from my GitHub.
Xamarin Blog app in action
The developers have evolved, and we are not conformist, we seek perfection, we want our software to be of quality and focused on the user experience, therefore, we learn new skills that will help us set shorter goals.
Xamarin.Forms understood that goal and I am very happy that the community in which I am a part helps us and we are always in constant innovation.