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:

https://pttrns.com/applications/2#2913 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)[https://developer.apple.com/ios/human-interface-guidelines/graphics/system-icons/], TheNounProject, MaterialDesignIcons, IconFinder, iconmonstr, flickr, Google Image Search or create your own with a vector software like (Figma)[https://www.figma.com/]. 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)[http://iosfonts.com/], (Swift custom font examples)[https://gist.github.com/cmoulton/f5640b2e75411d87df9b], (iOS library to programmatically load custom fonts)[https://github.com/ArtSabintsev/FontBlaster].
  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)[https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/].
  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

8ballking

Clone this wiki locally