Designing for Native with Xamarin forms

If you’ve ever designed or built for mobile or tablet apps, you’ll know that it can be difficult and time consuming to have two pieces of code to build and maintain. In the typical design process you take your user research and design with the user in mind, not the build. However, if you take into account the agile practices that many teams today are using, it’s critical that you understand the libraries and tools that developers have at their disposal to get your designs in front of users, faster.

This is where Xamarin forms comes in. Xamarin allows you to write one code in order to display two UI’s that lean on native UI libraries. One code, two apps.
xamarin design process.

If you’ve ever designed for both android and iOS apps, you’ll know the patterns and designs can and will differ. So why would you use Xamarin UI or even lean on these external libraries in your design? Firstly, it takes time – time to design the two things and then do the handover process with developers to get any of the ‘custom’ library work added.

As a designer it’s critical to get the first release out as fast as possible. Designing for progress, not perfection.
agile process.

This is why I always try to pull items from libraries such as Material UI (Google), or iOS (Apple) to pick up existing patterns that users are already familiar with and are fast to build – meeting the needs of users, developers and the business. The problem is, is that these often render differently – see my example below:

Google and Apple says.
The ‘Learn defaults’ buttons are different, input field is different as well as the fonts. This is the same with everything from process animations to scroll bars and toggles. By using the Xamarin Visual system, you can choose to either use either the Material or iOS version or keep them looking the same which is what most teams want.

Design objective.

The added benefit is that you’ll be able to maintain consistency with support calls. If a user needs assistance, it’s easier to tell users to click on the red button on the top right if they’re the same on both Android and iOS.

Libraries for your reference:
https://material-ui.com/
https://developer.apple.com/design/

So for developers looking to find out what these new components are called, they have a helpful list on their website. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual/material-visual and seem to be making the call based on what they deem to be the correct term.

For example. A UI activity indicator on iOS, is as Progress bar on Android. Xamarin have called this the activity indicator.
Activity indicator Xamarin.

But what about designs components that I want custom? Yes, that is all doable as well. This will be important for projects where brand guidelines are imperative. Apply custom colours and patterns where you need, but leave room to compromise in order to get new projects in front of users. A nicely branded app won’t be useful to anyone if it never sees the light of day.

Screenshots from a Xamarin competition that compares iOS to Android builds using one code base.

So to wrap up, Xamarin visuals are a great way to speed up the design and build of apps by coding once and applying a Material theme to create consistency and efficiency with design. As a designer, if your team is working with Xamarin, try to lean on Material guidelines to maintain consistency within your designs. There are a ton of Sketch, Figma and Adobe XD libraries that can take you from a blank page to pull in these components easily.

Thanks to Maddy Ledger – program manager who gave a talk about Xamarin visual design systems.

Stay informed,
Tania Richardson Designer.

Author avatar
Tania
https://taniarichardson.com
15 years as a digital designer. Author and Director of Richardson Creative, that helps start-ups and large organisations use design and data to design the best online experience for their business.