Polishing a UI Tips and Tools - codepath/ios_guides GitHub Wiki

Overview

Building beautiful iOS apps starts with understanding how to approach building a delightful UI and each of the components that contribute to it. For screen-by-screen inspiration, browse curated iOS app screens on Pttrns and Mobbin.

Critical Guidelines

Be sure to pay attention to the following elements of beautiful visual design. The devil is in the details. Trust that small improvements can make a big difference on the overall experience. Prefer minimalism over too much noise:

  • Colors. Having three colors (One primary, one secondary, and one accent) used consistently through your app.
  • Typography. Using the correct sizes for different information to create a consistent visual hierarchy. Be cautious not to have too many different typefaces on the same page.
  • Iconography. Icons should generally be a muted single-color (gray, faded colors) and not be too eye-catching unless they are actions or meant to draw attention.
  • Spacing. Make sure to tighten up spacing of elements. Spacing on the top and bottom should be consistent. Pay attention to proper spacing between elements as well.
  • Alignment. Make sure elements are aligned to a grid. In other words, each view should be aligned to surrounding elements (i.e text to middle of image).
  • Information. Having multiple pieces of text that are all near each other in an item that are exactly the same size, color and style is usually not a good practice.
  • Tabs. Tabs should be consistent with the background color of the Toolbar above them.

Links and Resources

Polishing up the user interface of your application starts with the following enhancements:

  1. Benchmarking to Adhere to Good Designs - Browse curated iOS app screens on Pttrns and Mobbin or the Apple Design Awards gallery to study how popular apps look and feel.
  2. Pick a Vibrant Color Scheme - Pick a primary color and a secondary color for coloring your app, relying on the iOS color guidelines and using a sensible color scheme. Check out the coolors generator or Adobe Color for other takes on picking colors.
  3. Use Proper Icons and Colorful Images - Use images, icons and backgrounds for your UIs leveraging resources like SF Symbols, TheNounProject, IconFinder, iconmonstr, flickr, Google Image Search or create your own with a vector software like Figma, Sketch or Illustrator. For app icons, refer to the iOS app icon guidelines and the broader iconography guidelines.
  4. Review Typography - Check out the iOS typography guide to understand the common font type for iOS apps and default type colors and sizes. You can also find custom font libraries: iOS font, Swift custom font examples, iOS library to programmatically load custom fonts.
  5. Apply backgrounds and borders to views - Use CALayer properties on any UIView — cornerRadius, borderWidth, borderColor, shadowColor, shadowOffset, shadowOpacity — to give your buttons, table views, and other views colorful backgrounds, rounded corners, and shadows. For frosted-glass / translucent effects, use UIVisualEffectView.
  6. Improve Navigation Bar and Tab Bar Appearance - Review our style guides for the [Navigation Controller]] and [Tab Bar Controller to customize colors, fonts, and icons. The HIG sections on toolbars and tab bars describe the expected behavior and styling on iOS.
  7. Follow iOS UI Standards - Use the Designing for iOS section of the Human Interface Guidelines.
  8. Implement Intermediate UI Elements - Show a progress indicator (such as UIActivityIndicatorView or a HUD) when loading, along with placeholders for images and empty states when there's no content.

References