How to design a mobile app for iOS
Visual app builders make it possible for anyone to publish a mobile app. But with the App Store’s notoriously high standards, design can become a roadblock. Here’s how to create a state-of-the-art iOS app as a beginner.
Since the iPhone 1 (bear with us, Gen Z), iOS has been a synonym for best-in-class mobile design.
Steve Jobs shaped how we interact with our phones by popularizing touchscreens. Apple then paved the way for third-party apps by opening the first app store. A few years and tons of new features later, iOS 7 fueled a design revolution by making flat design the dominant style worldwide. And Apple’s design team hasn’t stopped improving and leading the way since then.
Though designers are starting to bring much welcome diversity to the app game, iOS Design remains the standard for many UI professionals and users. This post will share essential design guidelines, examples of exceptional iOS apps, and resources to facilitate your design process.
The basics of iOS Human Interface Guidelines
To ensure maximal consistency across its ecosystem, Apple offers detailed design guidelines and resources called Human Interface Guidelines, or HIG.
Although unique branding and creativity are allowed, following these guidelines will significantly improve your chances to get published on the App Store, especially if you’re a beginner.
Core principles
HIG are based on three core principles or themes:
- Clarity: everything should be readable and intuitive.
- Deference: content is king, and animation and design elements should only be used to enhance it.
- Depth: realistic animations and design elements should be leveraged to provide users with a sense of hierarchy and progression.
iOS layouts and adaptivity
Apple’s #1 rule is adaptivity. Regardless of the screen size and orientation, content should always fit the screen and be easy to read.
While this is good practice for all operating systems, here are a few tips for adapting your layout to iOS devices:
- Use Apple’s layout guides to identify the correct margins and safe areas — aka areas that won’t be covered by navigation elements or the keyboard — and design accordingly.
- Mind device cuts and the status bar height. Since the iPhone X, status bars have gotten taller. It’s tempting to try to hide the status bar or add a black bar at the top and bottom of the screen. But Apple encourages app creators to use all the space available at all times. And unless you’re playing fullscreen media, hiding the status bar might confuse or even frustrate users. Your best options are using a safe area and designing with the status bar in mind.
- Avoid placing text and navigation elements near corners or at the bottom of the screen. First, to avoid weird cropping due to newer iPhones’ rounder corners. Second, because users interacting with these areas might be trying to access system features and destinations like the Home screen.
• Responsiveness: between the new and old iPhones, iPads, or even iWatch, your app might run on very different screen sizes. And on top of being responsive, Apple requests that your app always launches in the device’s current orientation. There is no need to design for every screen though: if you’re using a modern app builder, you can leverage flex properties to apply relative layout settings. If you’re working with developers, Apple provides Auto Layout capabilities that will let you define how you want your layout to look based on different screen constraints.
iOS native elements
Using iOS’ native elements will provide your users with a sense of familiarity and intuitiveness.
- Navigation bar: placed at the top of the screen, below the status bar, it usually displays the title of the page and control elements.
- Search bar: pinned below the navigation bar. Make sure to enable a Clear or a Cancel button so that users can delete their input.
- Tab bars: placed at the bottom of the screen, they provide access to app functionalities. They’re usually translucent and hide when the keyboard opens.
- Action sheets are used to ask users to make a choice. Make sure to always offer a Cancel option and to place the destructive option at the top.
- Activity views are used to let users perform system or custom tasks, such as Copy, Share, or Print.
- Alerts interrupt users’ navigation to display an important message. Their visual aspect cannot be customized.
- System buttons are the most “iOS compliant” type of controls. They come in four colours and three sizes.
Different types of buttons can be used together, to convey hierarchy:
- Pop-Up Buttons open a list of mutually exclusive options, while pull-down button let users select multiple options.
For more details about implementation or less frequent native elements, visit the HIG and Apple Developer websites.
Animations
The best iOS apps use only subtle motion animations, like parallax, to help users visualize the results of their actions. Try to make animations feel realistic to avoid distracting or confusing users.
Finally, before deciding on which animations to deploy, it’s always worth studying iOS built-in app animations. Users enjoy consistency across apps and expect the same smooth transitions, scrolling, and orientation changes as they interact daily.
iOS colours
For a fully immersive look, you can use iOS’ system colours.
You can also use your own brand palette. Regardless, Apple recommends using green for validation/successful actions and red for alerts and errors.
In addition, iOS provides a dynamic system to enable automatic adjustments to light and dark modes.
iOS typography
Apple’s apps ecosystem offers two type families: San Francisco (sans serif) and New York (serif). Both families complement each other, can be used together, and can be downloaded here.
For accessibility purposes, Apple provides dynamic font presets that let you tag your font so that it automatically adapts to users’ text size preferences.
iOS icons and images
App icons are an essential brand asset. To fit into Apple’s ecosystem, they should look simple, use a solid background, and avoid text. It’s recommended to provide different sizes when publishing your app, to make sure it displays perfectly on all devices, and in different contexts.
In terms of text icons, it’s recommended to use one of the 3,200’s iOS’ system icons and only rely on custom icons when a relevant match can’t be found.
There are no specific recommendations for pictures and illustrations, except that Apple has a low tolerance for pixelated images. But keep in mind that high-resolution iOS displays require high-resolution images.
General design tips to improve your approval rates
- Use a splash screen when your app is loading
- Build an onboarding flow to help first-time users get comfortable with your app
- Always request permission to access users’ data and send notifications, and explain why you need it.
- Create sufficient touch targets, preferably over 44x44 pt
- Use iOS’ prompt to ask for a review, and only do so when users have spent some time using your app
- Use responsive fonts to accommodate users who might want to use a larger font
- Don’t show your logo on every screen: iOS apps aim for simplicity and focus on content. Elements like a persistent navigation bar with brand assets don’t create value for users and don’t merge well with the iOS ecosystem.
- Pick two accent colours, to support both light and dark themes
- Preview your app in real-life conditions, not just on your computer. How does your colour palette work when you’re outside on a sunny day? Or inside with artificial light? If your app focuses on content reading or watching, have a look at iOS’ True Tone display to understand how screens can automatically adapt to ambient lighting.
Best examples of iOS apps
The best way to understand how to apply iOS’ design guidelines is to look at popular apps.
Shazam’s app design
An all-time favourite for music lovers, Shazam is the perfect example of simplicity and intuitiveness.
Apple Store’s app design
What could be a better example of a shopping app than Apple’s very own? Redesigned in November 2021, it showcases all the design elements of a modern iOS app.
Carrot Whether
Carrot Whether is the perfect example of an app that follows strict design guidelines while offering unique visuals and personality. So much that it won an Apple Design award with its 2021 redesign.
Best resources to design iOS apps
Human Interface Guidelines
Everything you need to know about Apple’s app design and how to implement it.
Apple Design Resources
A comprehensive library of templates, icons, fonts, and everything in between.
Mobbin
Up to date library of screens from all your favourite apps, Mobbin is one of the best tools you can find out there. It’s not stealing. It’s inspirational.
From app designer to app builder
The hardest part of building an iOS app is no longer the coding part: it’s the design part.
Modern no-code platforms let you go beyond the design process. You can not only design apps that comply with Apple’s many strict guidelines but also export and publish them to the app store. Using no-code technology, you can go from iOS app designer to iOS app builder.
Designware is one of them, and it’s free to try. And whatever you design for iOS, it can also be published to Android, Windows, macOS, or the web as well.
If you have an app project and aren’t sure where to start, feel free to reach out. We’re always happy to help creatives bring their ideas to life.
