Skip to content

Polishing a UI Tips and Tools

Jump to bottom Edit New page
Sophia Kecir Camper edited this page Feb 16, 2017 · 7 revisions

Overview

Building beautiful iOS apps starts with understanding how to approach building a delightful UI and each of the components that contributes:

design  design  design

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 typo on a same page and UI guidelines!
  • 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 you 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 - Check out the following sites or these material design examples for looking at 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 either on the iOS color guidelines or on Material Design colors, using a sensible color scheme. Check out material palette or the coolors generator for other takes on picking colors.
  3. Use Proper Icons and Colorful Images - Use images, icons and backgrounds for your UIs leveraging resources like iOS system icons, TheNounProject, MaterialDesignIcons, IconFinder, iconmonstr, flickr, Google Image Search or create your own with a vector software like Figma, Sketch or Illustrator. For app icons, systems icons, custom icons, refer to the iOS iconography style 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 and layouts - Use shape and layer drawables cliffnotes to create colorful backgrounds and borders to your buttons, listviews, and other views. See the material card view for a look at modern styles for lists. // TO BE UPDATED FOR IOS
  6. Improve ActionBar and Navigation Appearance - Review our style guides for the ActionBar and Tabs guide. See generators linked in next section. // TO BE UPDATED FOR IOS
  7. Follow iOS UI Standards - Use iOS Human Interface Guidelines.
  8. Implement Intermediate UI Elements - Make sure to add progress bars when loading, along with placeholders for images and empty states in cases when there's no content. // TO BE UPDATED FOR IOS

Further Reading

Additional reading: // TO BE UPDATED FOR IOS

References

Hello Manh Okne

Add a custom sidebar
Clone this wiki locally