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.
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.
3. Think device first
Be aware of the “unsafe areas” (notch, camera punch-hole, etc.
4. Font Type & Size
Different fonts can evoke different emotions and provide easy readability at the same time.
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.
6. Long-Scroll Problem
Keep screens as short as possible, using cards with a tap to expand features or by breaking tasks into screens.
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.
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.
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.
10. Accessibility
Design for everyone, consider multiple holds. These are three common types of holding a mobile, design the main actions within these areas.
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.
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.
13. Make it Responsive
When you think about mobile screens think of designing for the smallest screen, then make it responsive to larger screens.
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.
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?
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.
