A Simple Styleguide for iOS Apps

This is a quick overview of some key design guidelines that we had put together while re-vamping Etch’s user interface. We decided to publish it here in case any of you find it useful :) Most of the materials presented in this documentation are taken from a tutorial called Design and Code. If you’d like a more comprehensive introduction to iOS App design, feel free to purchase the tutorial from the hyperlink above.

Before getting started with any specific guidelines, here are a few things we learned about design in general:

1 — The Ten Principles of Good Designs

2 — The 10,000 Hours Rule. Your skill will simply improve with deliberate practice

3 — The rule of the three — it is most efficient to present each product with 3 features at most

Basics:

1 — There are 4 major resolutions we should consider while designing iOS apps

2 —Certain elements such as the tab bar will keep the same height across all screen sizes, while other content (such as collection view cells) in the app may vary in size

3 — App Icon should be exported in the resolutions presented below

4 — A very quick overview of text and button sizes: use 44pt for buttons, 11-12pt for small text, 15-17pt for body text, and 20+pt for titles

Typography and Readability:

In reality, most of your app’s interface is “the content”. Hence, typography and readability are the first thing you should optimize for.

1 — The minimum font size you should use on a retina screen is 11pts

2–16 pt font is optimal for reading

3 — Use 120–145% line height for an optimal reading experience

4 — Keep in mind that 45–90 characters per line is best for readability

5 — Use SF UI Display for 20+pt fonts, and SF UI Text for 20pt or lower. The SF Font Fixer plugin for sketch can help you do the job.

6— Adjust font weight at different sizes. This way, larger text won’t steal too much attention

7 — Basic typography terminologies are explained in the image below:

Spacing and Alignment:

1 — Keep a minimum of 8pts distance between border and content

2 — Keep a minimum of 5pts between elements

Coloring:

1 — Apple actually uses colors that display as well on a white background as on a black background

2 — Use color sparsely. Only 10–15% of your UI should be colored, and the rest should be neutral tones like white and gray

3 — Colors should be used carefully to indicate specific interactive capabilities. E.g. Tappable Buttons are usually presented in Blue

4 — Pick Primary, Secondary, and Tertiary colors for your app and stick with them

5 — Vibrant Primary / Secondary Colors will direct attention to interactive places.

6 — Using HSB (Hue, Saturation, Brightness) might make adjusting colors more intuitive than using RGB

7 — Usingn monochrome colors with white/black overlay, or different brightness might be your safest bet

8 — Analogous colors can be used if you feel more comfortable with colors

9 — Use complementary colors (colors that are opposite to each other) if you want to energize your interface

10 — Neutral tones are more important than any other colors, because they serve to defend a user’s attention to the content

11 — An easy way to find your neutral tone: use your main color, then drag saturation to nearly zero, and change the brightness to Light/Dark

12 — Adobe Color is a neat tool for getting Palettes

Buttons:

1–Usually keep buttons between 30–60pts. 44pts is optimal

2 — Text buttons should have at least 30pts of tappable zone

3 — Set 22pt for links inside texts, but use it carefully

Icons:

1 — Accompany text with icons as much as possible. If not, at least use text for the first 2 times, then get rid of it

2 — Always reuse icons, never make new variations of the same icon!

3 — Avoid using the same icon for different purposes

4 — Be specific: use “Back to Home” rather than “Back”

5 — Staying as close to native icons as possible allows your app be more intuitive

6 — Use line icons when you want more focus on the content

7 — Tab bar icons (and most other) should have a canvas size of 30*30 pt

8 — Borrow/Customize existing icon sets to get a quick start. The Sketch Icon Font Plugin, and Icon Jar can help you organize icons

Layout:

1 — Try to include a “headline” in every page, explaining what it does

2 — Use one dominant color for all interactive states

3 — Use the same neutral colors for all inactive states (usually light gray)

4 — Use as much space as possible, this helps you emphasize on the content

5 — Enrich experiences with animations, gestures, and sounds; but use with moderation

6 — Use Tab Bar for main sections, and Segment Control for sub-sections

Transitions, Animations, and Sound:

1 — Use transitions to indicate information architecture (e.g. Zoom in and out of a folder)

2 — Think of Blur like Bokeh in photography. It is a tool that helps you shift focus between foreground and background

3 — Keep animations fast and fluid, ideally between 0.3–1 second

4 — Provide feedback on interactions to give a sense of direct manipulation

5 — Frameworks like Spring can help you get started quickly

6 — Use/combine basic animations (Translate, Rotate, Scale, Spring, Property Change…)to achieve the desired effect

7 — A few places that you should sounds on:

  • Notifications
  • Positive Actions
  • Destructive Actions

8 — Find free sounds online —e.g: Octave, FreeSound, Sonics

To wrap things up, below is a list of resources that can help you with iOS app designs which we found useful, also recomended by Design and Code.

Guidelines:

iOS Design + Code Tutorials — https://designcode.io/iosdesign

Apple Human Interface Guidelines — https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

iOS Do’s and Don’ts — https://developer.apple.com/design/tips/

iOS Design Guidelines by Ivo Mynttinen — http://ivomynttinen.com/blog/ios-design-guidelines

Google Design Resources — https://design.google.com/resources/

Typography Guide — http://typogui.de/

Icon Organization App Icon Jar — https://geticonjar.com/

This Is How Design Works — https://startupsthisishowdesignworks.com/

Sketch App Sources — https://www.sketchappsources.com/

Sketch Repo — https://sketchrepo.com/

Sketch Plugins:

Export images to code (no need to worry about resolution and image sizing) — https://www.paintcodeapp.com/sketch

SF Font Fixer Plugin — https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer

Keyboard Kit for Sketch — https://dribbble.com/shots/2262120-iOS-9-Sketch-Keyboard-Kit

Color Palettes Plugin — https://github.com/andrewfiorillo/sketch-palettes

Icon Font — Tons of Icons in Sketch — https://github.com/keremciu/sketch-iconfont

Fluid for Sketch — Mimics Auto Layout — https://github.com/matt-curtis/Fluid-for-Sketch

Magic Mirror — Simple Mockups Tool — http://magicsketch.io/mirror/?src=old

Content Generator — Easy Name/Picture Generator — https://github.com/timuric/Content-generator-sketch-plugin

App Store Image Template — https://github.com/MengTo/AppStoreSketch

Zeplin — Translate Design To Code — https://zeplin.io/

Flinto — Prototyping Tool — https://www.flinto.com/mac

Templates & Libraries:

iOS 10 GUI — http://facebook.design/ios10

Facebook Design Templates — http://facebook.design/

Sketch Repo Templates — https://sketchrepo.com/

Sketch App Sources Templates — https://www.sketchappsources.com/

Gradient Templates — https://uigradients.com/#Subu

Pixel Love Icons — https://www.pixellove.com/

Streamline Icons — http://www.streamlineicons.com/

FontAwesome Icons — http://fontawesome.io/

Free Sketch Ionicons — https://github.com/andrewsardone/ionicons-sketch

Octave Free UI Sound — http://raisedbeaches.com/octave/

Freesound — http://freesound.org/

Sonic Free Sound — https://www.sonics.io/

Dev Tones Paid Sounds — http://rcptones.com/dev_tones/

Sketch Device Mockups — https://designcode.io/angle

The Pattern Library — http://thepatternlibrary.com/