Some Points to Consider Before Implementing a UI in Xamarin Forms

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!

So, Let’s Start! 😎

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:

1. Identify the Best Layout to Use 🕵‍♂

Before starting, it’s very important to identify the layout(s) that you will be using, taking into account some important points:

• 📌 Is this layout that I am selecting the most optimal in terms of the performance of my app?
• 📌 Is there any way to simplify the layout(s) in order to improve performance and use less code in the app?
• 📌 If the Grid is used, am I correctly counting the number of rows and columns? Am I adding any unnecessary ones?

After we have the answers for all of these questions, we can continue to the next step!

2. Identify Components You Should Use 🕵‍♂

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:

• 📌 Based on time, what would be cheaper for me: assigning my team the development of a custom component or finding a component library that fit my needs?
• 📌 Does the component library have good support and meet all my expectations?
• 📌 Did I like the reviews of previous clients?

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.

3. Divide in Blocks the Order to Develop 🕵‍♂

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!

4. Have the Resources You Need at Hand 🕵‍♂

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! 🙋‍♀️