Why analysing your product is essential when ux-designing Flutter apps
For me, designing my first Flutter app is like writing my first article for Medium.com: you sit in front of an empty screen and don’t know where to start. The only thing I knew about Flutter was that there will be one codebase for multiple OS and so there will be also sort of overarching UX/UI design. The first thing that came to my mind was something like React Native or NativeScript. At first I panicked: The same codebase for an UX/UI design which should work on iOS just as well on Android? Until now, sharing code for user interfaces always resulted in poor user experiences. Can Flutter do better or are independent designing for iOS and Android still the way to go? I was very sceptical but also open and curious about that topic. So let’s see what happened…
It’s easy, isn’t it?
Luckily, at the time when I started designing for Flutter, we had a request in our company for a mobile test device rental app. With the app we can borrow the test devices of our company on our own. Seems like the perfect preconditions.
When beginning to make a UX design for Flutter apps there are some resources and code examples. At first I checked the official Flutter widgets catalogue, which is something like a template for the most common UI elements on both OS platforms with documentation. “Wow, with that it seems easy to build a Flutter app for iOS and Android which looks even native-like” I thought.
So I started.
And failed.
Using the Flutter widgets catalogue is an easy and comfortable way to design Flutter apps. But unfortunately by using these widgets you miss the purpose of Flutter, which is to build a cross-platform, brand-first design. The picture above shows my first UI design approach with the iOS-style widgets. As you can see I used elements like a navigation bar or a segmented control which are iOS-only elements. Making a UI design with these widgets works well and you quickly get a good and especially familiar looking UI design. But when the design goes into development there will be complications. At the beginning the developer for our mobile test device rental app removed the segmented control. It’s “too complex” and “way too much effort” to build this iOS specific element for both platforms because at the time the segmented control wasn’t part of the widgets. Besides, additional code must be written when a Flutter app should look operating system-specific.
Because of the development effort and our deadline before the beginning of next year, we decided together to replace the segmented control with tabs. Actually, the segmented control element isn’t that far from the tab’s function and quite similar to the purpose of tabs.
Yes, Flutter is known to enable “fast development” and “native performance” but for the UX and UI design it’s not “fast designing” or “native looking” with simply using Flutter’s specific platform Widgets. For the software developers it would be way more effort to develop a Flutter app which looks on iOS exactly iOS-like and on Android Android-like.
That’s another reason to keep the UI design of Flutter apps brand-first. But don’t totally forget the Flutter Widgets, just put the own identity and character of your project into the foreground and make your Flutter app identity-centric. When I realised that point for the mobile test device rental app I started to create a UI design including the spirit and identity of our company. Our unique company style is also displayed through our brand new website on which I oriented myself for my Flutter app project.
Apps that need to deliver brand-first designs are particularly well suited for Flutter.
Navigation in focus
Beginning with the brand-oriented UI design the app navigation is in the focus. At first our mobile test device rental app has only core functions for the MVP like scanning test devices for rental or showing an inventory of all mobile test devices. Despite that, users have to be guided through all different functions and screens. To not complicate the software development of the app for both platforms I came back to the Flutter widget catalogue and was looking for elements, which are common or similar on both iOS and Android.
So for the navigation it was obvious that some kind of bottom navigation would be the easiest to implement and also familiar to iOS and Android users because both platforms are using such an element in their native apps.
To come back to the brand-centric UI design the navigation‘s font within the app is the same as on the website. It’s always written in lower case which is a rule for both, web and app.
The devil is in the detail
While looking at our company’s corporate identity and UI elements on the website one thing directly catches one’s eye: the button style. They contain a smooth and balanced gradient, consisting of grandcentrix’ main colours: cyan and green. Including the sans-serif company font in clean, white letters it fits conspicuously but not too persistent in the overall picture of whitespace, imagery and living typography. I also need to mention that they have a nice hover effect with changing the gradient’s color.
These buttons and it’s effect should also be the main style element of the test device rental app. They fill it with life and provide a consistent eye catcher within the overall clean, fact-and image-focused style of the app. Following the website’s corporate style, the buttons within the app are not rounded. So the rule for tappable elements like buttons is that they have sharp corners.
Compared to the grandcentrix website the text on the button is centred instead of left-adjusted. For me personally, centred text on buttons support the call-to-action function by bringing the text into the focus. Besides, the buttons within the mobile test device rental app always have the same margins to the left and right edge of the screen. Because of that, the text length has enough space to be adjusted to the buttons. The website buttons also have a disclosure on them. Following some general ui patterns these disclosures are on the right side to imply that a new underside will be opened. I explicitly designed buttons without these disclosures because there is less space available on mobile apps in comparison to websites - especially with the many different screen sizes on Android devices and small screens like on an iPhone SE. In general one can also assume that mobile app users will recognise the button pattern and understand their function.
Hidden highlights
A contrast to the sharp cornered button forms should be other elements like cards and labels which are also rectangular. As seen on the grandcentrix website itself, it doesn’t have card or labels. This is why I set my own rule for them to have small rounded corners of 2 pt in comparison to the tappable elements on the website. Also iOS and Android use non-tappable components, like cards and labels, which users easily recognise from other apps.
Attention to the finer details highlights the brand-first design of the test device rental app made with Flutter. To be consistent with the website’s design language all icons follow the grandcentrix logo style with sharp corners. The custom fonts from the website finally bring the grandcentrix look to mobile and replaces Roboto and San Francisco everywhere. These little things are used on purpose because they are effective and easy to implement. They form the unobtrusive highlights of a brand-centric UX/UI design.
Mark the difference
In combination with the above mentioned style elements and the official Flutter widget catalogue, the brand-first design approach represents an effective survival kit for designing your first applications with Flutter.
For me, what matters most is an open mindset when it comes to design for cross-platform apps. For example, following overall design patterns paired with creative solutions for a cross-platform screen design . It doesn’t matter if it’s a newly created brand identity or if it’s an existing one. UX design for Flutter apps is way more harmonic when the app’s user experience is brand-design based instead of platform based.
That’s what makes the difference.
If you have questions or Feedback don’t hesitate to leave a comment or contact me at Twitter or here at Medium!
Interested in working with us? Checkout our jobs page: we’re hiring UX designer, developer and more: https://www.grandcentrix.net/
