Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Mobile Design
Webdesign

5 Easy Rules for Mobile UI Design Beginners

by
Length:ShortLanguages:

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.

mobile ui

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.

the thumb zone
Source: usabilla.com

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!

Mobile UI and UX kits
Mobile UI and UX kits on Elements

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.

buttonswhich is better
Which of these two is the better UI?

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). 

common interfaces from iOS and Android
The Instagram interface on iOS and Android respectively

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.

ui

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:

Conclusion

Over to you, get creative! For more inspiration, take a look at these UI and UX kit roundups:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.