iOS Design Guidelines

Ruslan Galba
@hellotegra
Published in
3 min readSep 6, 2020

iOS Design Guidelines 🍏

Courtesy of @ux.mars

◻ Points and Pixels

◻ Assets and Screen Sizes

◻ App Icons

◻ Font Sizes

◻ Color Palette

◻ App Icon Grind System

Points and Pixels

Pixels are the smallest physical element that we can control on a digital display. The more pixels can be fitted into a specific screen size, the higher the PPI (pixels-per-inch), and the clearer the rendered content becomes.

Points are a resolution-independent measurement. Depending on the screens pixel density, a point can contain multiple pixels (e.g., 1 pt contains 2 x 2 pixels on a regular retina display).

When you are designing for various display types, you should think in points, but design in pixels. This means you will still need to export all your assets in 3 different resolutions, no matter in which resolution you are designing your app.

If you need the value in pixels, just multiply by 2 for Retina screens or by 3 for Retina HD screens.

Assets and Screen Sizes

Assets and Screen Sizes

App Icons

Font Sizes

Color Palette

Since iOS 7, Apple has been using a vibrant color palette for the interface of the OS and pre-installed apps. While you can use the default iOS color palette listed above, you can also (and probably should, if you want to stand out) use your own colors.

App Icon Grid System

Apple developed a golden ratio grid system that can be used to size and align elements on your icon correctly. Nevertheless, even Apple designers are not following the grid system very strictly with the native apps’ icons. Feel free to break the rules if your icon simply works better without aligning all elements strictly to the grid.

Source Links

Apple Documentations
https://developer.apple.com/documentation

Apple Design Resources
https://developer.apple.com/design/resources

Other Resources
https://ivomynttinen.com/blog/ios-design-guidelines

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 https://use.tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.

--

--

Ruslan Galba
@hellotegra

Increasing revenue for DTC brands via Facebook / Google ads 🚀Growth Strategist 🤘 Founder @hellotegra growth team 🤖 $5M+ profitable ad spend in 2020