What steps should we take before we begin coding to ensure a clean UI, delivered on time?
Howdy! 🙋♀ I’m so excited for today’s post! Because today we will be learning a handful of important tips when building UI in Xamarin Forms.
Sometimes when we have to create a UI, we “think while coding” and we do not employ a previous UI development process. But what are the consequences with this practice? If we design while coding, there may be things that we do not see at the beginning that we might realize after we have some code applied. This may end up being pretty time-consuming if we need to rework things, and, therefore, we will deliver a product with less speed.
So, what do I suggest? 🧐 My suggestion is that, before we start with writing code, we apply a previous process which I’ll call a “UI development strategy,” and this will be the topic that we will be covering in this post.
A quick overview: We’ll be touching base with some key points that we must keep in mind before starting to develop a UI. We will reference an example UI that was obtained from Dribble!
In the image above I mention the points that I consider the most important to take into consideration. Below we are going to detail them one by one:
Before starting, it’s very important to identify the layout(s) that you will be using, taking into account some important points:
After we have the answers for all of these questions, we can continue to the next step!
It’s important that we’re clear about the components that we’ll use in our app. Sometimes we have a design that can be fully covered with the native controls available in Xamarin Forms. But on some other occasions, we may be presented with a scenario in which we must decide whether to use an external component or develop a custom renderer. If you encounter this scenario, before making a decision, here are some questions that will help you with the decision:
After this, you can have a clearer answer! And you can continue to the next step.
For instance: In the example UI, we have chosen to use an external provider. In the image above, we have an accordion element, so we can use the one available from Telerik. You can obtain more information here.
This point helps us better organize how we will be developing our work. It depends on how you feel more comfortable: Some people prefer to textually divide the UI they must develop into blocks; others prefer to divide it by components or functionalities. But if you notice, in any case, they split their work in a specific order. This can help you a lot in setting much more realistic goals based on delivery time for your client, especially if you are just starting!
We do not always have the freedom to look for the images to build our app, the clients may have them. It is important that we manage all these resources (fonts, images, etc.) in case the client cannot easily provide them.
This does not mean that we cannot start our development if we do not have this covered—we can use substitute resources. But make sure to start requesting them from the beginning so that, at the time of delivery, you don’t have to wait additional time just for getting resources that should have been provided from the start.
Done! Finally, we can start the rest of the development!! Executing these tips are not mandatory. However, having this process in place helps us better manage our development of a graphical interface or any other type of development. I hope that this helps you better organize and optimize your time and code!
Have a nice rest of the week! See you next time! 🙋♀️
Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.
Subscribe to be the first to get our expert-written articles and tutorials for developers!