Smartphone usage has been growing steadily for years now, with over a third of the world’s population currently owing one. The creation of mobile applications has understandably exploded too, but to design a good mobile application there are several rules we need to take into account which don’t apply to the desktop environment.
1. Size is Everything
It may sound obvious, but the size of smartphone screens is the main UI constraint when creating a mobile application. Size impacts visual design, ergonomics, and even the user journey.
Along with screen size, the fact that smartphone users interact principally using their fingers and not a mouse cursor has a huge impact on the interface design. Designers need to recognize “zones of comfort” and areas to avoid when placing Calls To Action. The Thumb Zone is the broadly defined area swept by the thumb on a smartphone screen. This is the most comfortable area to touch when using one hand.
Get a Headstart with Mobile UI and UX Kits on Envato Elements
If it helps, Envato Elements currently hosts 2.5K UI/UX kits relating specifically to mobile layouts. Take a look, and subscribe to download all the assets you need!
Back to the tutorial..
2. Whitespace is Also Everything
The size of the screen impacts the size of the components displayed, and the whitespace around them.
Take, for example, the common button. Buttons must be large enough to see and click on without difficulty. Guidelines for exactly how big they should be are provided by all major players in the mobile industry (Apple, Android, even Google’s Search Console team). Whitespace is also vital. By placing two buttons side by side, with insufficient space between the two, there is a risk that the user will click the wrong button, leading to a negative impact on your user’s experience.
3. Refer to the Interface Guidelines
Regarding the layout of the different elements on a screen it is wise to favor a vertical and simple layout while respecting the guidelines (which we’ve already mentioned) set out by iOS and Android. These guidelines explain what to do and what not to do for each OS. They are made up of graphic styles (currently a flat design for iOS and material design for Android) and commonly found components (buttons, navigation, typography, cards, tabs).
Here are the guidelines you’ll need; bookmark them!
4. Use One Course of Action
In the interests of optimizing the user experience, aim to have each screen contain only one piece of core information and one action. Think upstream to the hierarchy of information and the user journey. Before starting the design layer of the application, it’s essential to spend time analyzing the needs of the users and their route through the application.
5. Consider Where Smartphones are Used
Finally, don’t forget to take into account the environment in which your application will be used. Smartphones are used literally everywhere: inside and outside, on public transport, walking, running... If we take the example of the variations in brightness (indoor versus outside), contrast becomes even more important. Be sure your design is properly readable in the full sun! Refer to contrast checker tools such as these:
- contrast-ratio.com
- contrastchecker (by webaim.org)
- contrastchecker.com
Conclusion
Over to you, get creative! For more inspiration, take a look at these UI and UX kit roundups:
![]()
WireframingUX/UI Kits to Speed Up Your Design Process![]()
Wireframing20 Must-Have Wireframe Templates and UI Kits for Your Design Library![]()
FigmaThe Best Free Figma Resources: Templates, Icons, UI Kits, and More
