We Are Mobile First
You’ve come up with a basic idea for an app. It’s creative and, best of all, it could work! Onto the next step: the design process.
In this post, I’ll look to advise you on the basic things to remember when designing for Android in order to help you design an app that not only looks good but works well for your intended users.
Scout out popular and well-made Android apps for inspiration. Look at how they’ve approached their design, what sets their UI apart, and how they achieve a good UX. Make a list of your favourites and think about what elements you’d like to feature in your very own design to help it stand out from the crowd. Side note: don’t use this as an exercise in plagiarism!
I, personally, recommend that you follow the extensive Material Design guidelines on their website to help guide you throughout the designing process. They offer a whole host of tools to help you achieve the best possible outcome and they simplify everything to make it easy to understand. Giving you a lot less to worry about!
When you are designing for mobile, specifically for Android, you need to remember that you’re going to be designing for different screen sizes, configurations and screen densities.
A great way to know how your design will fit the vast majority of Android devices is to fit your design to different screen templates. These templates allow you to see whether or not there’s too much blank space on bigger devices or if items overlap on much smaller ones.
Material Design offer a comprehensive list of Device Metrics where you can browse screen densities, resolutions, aspect ratios and dimensions with ease.
The user interface and user experience are two of the most important things you need to consider when designing for Android. There’s a whole host of user-related issues to plan for that may not be apparent to you from the get go.
Here are some of my top tips for creating a flawless Android design:
It’s important to ensure that the UI elements you’re using are adaptable to different screen sizes, so that you don’t end up changing the relative positions of elements between a 3.7 inch to a 6 inch screen. Remember to accommodate for tablet screens too if you aren’t just designing for mobile!
You also need to consider whether the device you’re designing for is able to change its orientation. If it can, think about how the different elements would be positioned in both landscape and portrait mode. It’s easy for elements to overlap if you don’t take good care!
It’s also important to keep the platform that you’re working for in mind throughout the process. Use the components and actions that the user will be using, once your app is out in the wild, to determine whether everything makes sense as you navigate through the app, move to different sections and share content. Designing for iOS is different than designing for Android. For example, a blur in Android is not as easy as it is in iOS but we should try and take advantage of each platforms’ components and system resources.
When designing for mobile, you should also think about pixel density. Android uses device-independent pixels and scalable pixels. These are units that allow you to accommodate a design across platforms with more flexibility. Material Design elaborates on what these ‘dps’ actually mean for your design:
‘The units used in Android to set the elements sizes are density-independent pixels, written as dp (pronounced “dips”). These are flexible units that scale to have uniform dimensions on any screen. Material UIs use density-independent pixels to display elements consistently on screens with different densities’.
It’s thus hugely important to use dps as the unit to set the sizes, paddings and margins of the differents elements of your UI. Remember that you should use scalable pixels (sp) for the fonts, even though they serve the same function as density-independent pixels (dp). The default value of an sp is also the same as the default value for a dp.
There are some design tools that let you change the unit types easily, such as Sketch, so check them out if you’re interested.
The Android colour system plays an important role in the creation and success of your app design.
It’s advisable to start with a baseline shade, typically a primary colour, before adding in a few variants to define different functions.
Material Design, unsurprisingly, offer detailed guidelines for working with colour and how you can do so for the benefit of your app, from advice on choosing accessible colours to using colour to display errors.
Consistency is key when it comes to designing an app that is cohesive and user-friendly.
Stick to a familiar palette and make sure you use the same element padding between app screens.
You should also try and stick to a family of font styles and sizes for your project, as too many opposing configurations will not only confuse your user but will also make the test and development stages even more complex. Pick a selection that fit with your branding and alternate them as needed.
You also need to think about the different states a screen can have in its life cycle. If we are retrieving data from a web service, what happens when it doesn’t arrive properly?
Make sure you put contingencies in place for when the user doesn’t have internet or there’s a server error and the call to the web service doesn’t work. You also need to think about what will happen if the app doesn’t have all of the relevant information and items are thus missing from the screen. How will the existing data be rearranged?
Consider displaying a placeholder when data isn’t loaded or things aren’t working correctly in order to avoid confusion on the user’s behalf. It’ll make your app look a lot more professional!
As you’ve seen in this post, there are lots of variables to consider when designing for Android.
Take your time, stay organised and consider all of the aforementioned points before drafting your design and you’ll have a much more functional, and hopefully successful, app on your hands.
Need some help bringing your app to life? Send us an email: hi@wearemobilefirst.com.
For some inspiration: https://www.uplabs.com/android
(Hero image credit: The Rivalry)