WE CREATE BRANDS PEOPLE L♥VE
Share

iOS Design Guidelines


Tegra - September 6, 2020 - 0 comments

iOS Design Guidelines

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.

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

Assets and Screen Sizes

Assets and Screen Sizes

App Icons

App Icons

Font Sizes

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.

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.

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 
Apple Guidelines Page https://developerapple.com/app-store/marketing/guidelines 
Other Resources https://ivomynttinen.com/blog/ios-design-guidelines

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.

Related posts

Leave a Reply