Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

Guidelines: Crucial Dos and Don'ts for iOS App UI Design

Mockplus Team 19150 Views

This post is a guide of dos and don'ts for iOS App UI design. I See more about delivering an extraordinary iOS App, Ios app, and Mobile design.

With Apple’ s completely revamped design language for iOS App UI design coming out 2 years ago, features like bolder titles and bigger use of cards are making designer’s focusing on animations and function easier and easier. Indeed, as Twain is often quoted as saying: history does not repeat itself, but it does often rhyme. After the widespread using of thin fonts in iOS 7, bolder texts have been a feature of renewed focus. Why does Apple call iOS 10 their “biggest release ever” and how should we designers understand it?

I have been asked many times what are the shortcuts to deliver an extraordinary iOS App that rockets to be crowned in the App Store lists. Well, to do so, there do exist some silver bullets to enhance the usability and appeal of your Apps if you fully grasp the dos and don’ts iOS App UI design that will affect your design universally.

1. Text Readability

Text Readability

In Retina, the most ideal text size for reading is about 16pt, while typography should be at least 11pt to be legible at a typical reading distance without zooming. The general rule is 12pt for small text,17pt for body text and 20pt+ for titles.

2. Descriptive layout

Descriptive layout

Each page must fit the screen of an iOS device. A title should clearly explain what this screen is about. Text should be short and easy to digest.

3. Color

Color

Apple has been using a vibrant color palette, make sure to use a prominent color so that the text can be legible. Picking the right colors(as in web design) and neutral tones can make or break your design.

4. Use Obvious Image

Use Obvious Image

@1x assets will appear blurry on iPhone, so you’d better use high-resolution images that are @2x and @3x. Images that are not at their intended ratio will cause distortion.

5. Use Controls Right

Use Controls Right

According to iOS App UI design principles, Buttons should be 44pt so that it can be accurately tapped with a finger. And you should choose the right UI elements from abundant options like pickers, segmented controls, sliders, switches, steppers and apply them to the right place naturally.

6. Spacing and Alignment

Spacing and Alignment

Align UI elements to improve legibility. The general rule is to have a minimum margin of 8pt. Don’t let users suffocate because your texts are overlapped.

7. Golden Ratio Grid System

Golden Ratio Grid System

Apple applied a golden ratio grid system on some of their icons. You can also consider to size and align elements on your icon according to it. This rule is quite flexible and you need to feel free to break it if your icon works simply better without the system.

8. Animation

Animation

Don’t use animation for the sake of using animation. Excessive animation can distract people, especially in apps that don’t provide an immersive experience. And, make sure each animation makes sense. For example, if a user reveals a page by sliding from left to right, he/she should be allowed to return by sliding it back to left.

Leave your comments below if you have any further resources about iOS App UI design or you can tell me what you want to read in my next post.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com