16 Rules For Achieving the Perfect Mobile Design

Share:

When it comes to designing for mobile and while many are standard UX considerations there are other important mobile-specific design aspects you need to take into account. Are you going to integrate your mobile offering with your current offering? Will you use responsive design, mobile-friendly design or mobile-first design?

Back in 2010 at the Mobile World Congress, Google CEO Eric Schmidt announced that moving forward, web designers should put mobile-first. If you’re going to design for mobile, you need to know that you are designing for small screens, one-handed use and a specific group of users.

This rise of smartphones means the way people access the internet has also evolved away from just desktops and laptops.  In 2018 alone 52.2% of all global web traffic was via mobile phones.

What is Mobile-Friendly Design?

The term refers to a website that allows a user the usability to do just about everything on a mobile device as they would on a desktop, with minimal effects on site loading time and functionality. For example, while the desktop version of a website might have large hero images on the home page, the mobile version will likely scale down the size of these photos, or remove them altogether.

Similarly, while a desktop version of a website might display photos horizontally across the page, the mobile version may display these photos vertically.

What is Responsive Design?

When a website is built with responsive design features, the goal is to provide an optimal viewing experience for all users, no matter what type of device they are using. This means when you visit a website on a desktop, the exact same website you visit on mobile will become responsive.

Think of it like the website automatically turning into a mobile application without downloading the application.

What is Mobile-First Design?

Designing for mobile first takes the age-old habit of designing for the biggest possible screen first, and designing for the smallest possible screen first. The method of designing for mobile-first is based on the idea that the optimal viewing experience should be on a mobile device vs. a desktop device.

16 Rules For Perfect Mobile Design

If you’re going to design for mobile, you need to know that you are designing for small screens, one-handed use and a specific group of users.

In this article, we will go through some general principles that will designers such as yourself to get started with Mobile Design.

1. Reach area — thumb reach

Thumb Zone: how easy it is for our thumbs to tap areas on a phone’s screen.

source: UX Collective

2. Platform Guidelines

Use the right design system iOS android have a different user base. Also never carry UI elements from e platform to another.

source: UX Collective

3. Think device first

Be aware of the “unsafe areas” (notch, camera punch-hole, etc.

source: UX Collective

4. Font Type & Size

Different fonts can evoke different emotions and provide easy readability at the same time.

source: UX Collective

5. Call to Action (Buttons)

Design finger-friendly buttons. Mistaken taps often happen because of small touch controls. Create controls that measure at least 10–12 mm (40px) so they can be accurately tapped with a finger.

source: UX Collective

6. Long-Scroll Problem

Keep screens as short as possible, using cards with a tap to expand features or by breaking tasks into screens.

source: UX Collective

7. Tab Bars

Tab bars are part of every app, design clear and clean tab bars also name all tabs whenever possible for better user experience.

source: UX Collective

8. Gestures

Tap or swipe mobile gestures? It’s really important to choose wisely because using the wrong type of gesture can lead to a broken UX.

source: UX Collective

9. Readability

Mobile devices have small screens as compared to desktops, fitting in a lot of information in a small mobile UI can be challenging.

source: UX Collective

10. Accessibility

Design for everyone, consider multiple holds. These are three common types of holding a mobile, design the main actions within these areas.

source: UX Collective

11. Spacing

A small screen doesn’t mean small text, or less space, don’t let text or other elements overlap. Improve legibility by increasing line height or element spacing.

source: UX Collective

12. Padding

New technologies are being presented every day, as a designer you need to stay up to date, for example, Curved displays increased padding my some pixels to avoid unwanted touches.

source: UX Collective

13. Make it Responsive

When you think about mobile screens think of designing for the smallest screen, then make it responsive to larger screens.

source: UX Collective

14. Navigation

Try to use standard sequences for your navigation menu, like the iOS tab bar or Android nav drawer, don’t try to reinvent the wheel. Users are familiar with these common patterns, so your app will be more intuitive to them.

source: UX Collective

15. Visual Weight

Visual Weight in UI comes from a combination of a lot of elements, colors, text size, spacing, etc. What catches your eye?

source: UX Collective

16. Usability testing

Usability testing defines how good your design is. Testings offer a fresh perspective on things that might have escaped your attention, sometimes even a possible redesign.

So, before you deliver a project to the development team remember to handle testing.

Tools you can use:

Also, don’t be afraid to have you, colleagues, potential users, friends or family to test it across multiple devices. Their input will be extremely valuable and will go along way in helping you achieve the best design that’s going to provide the very best experience.

Always remember the Golden Rule of design.

“Users Come First”

* We are not affiliated with any of the companies we listed above.

Beau Buckley

I'm a digital marketing expert, the founder of Revolucion One and SEO Services London. I've personally been making money online since 2009, so when it comes to generating more leads and sales for your business, I'm your go-to expert.

Related Posts

Free Fonts
5 Free Websites to Download Free Fonts

Finding the right fonts for your website, Apps, printed or online projects without...

How to create columns in wordpress
How to Create Columns in WordPress

Columns are an effective way to display and arrange content or complex information...

Leave a Comment

Your email address will not be published. Required fields are marked *

Add Comment *

Name *

Email *

Website

Join 5,000 Readers
AND GET OUR LATEST DIGITAL MARKTING HINTS & TIPS STRAIGHT TO YOUR INBOX

SUBSCRIBE 
Your information will never be shared
close-link

Become a Guest Blogger 

Are you a digital marketing expert and want to have your content seen as well as earn a natural backlink?Become a content contributer for our website.
Contribute Content 
close-link
Click Me