3 Quick iOS UI Hacks That You Can Learn In 5 Minutes And Will Help You Forever

Aspect Ratio

First, we need to understand what is aspect ratio? The aspect ratio is the ratio of the width to the height of a screen.

If we observe the above images, iPhone 5S, iPhone 6, iPhone 6Plus, and Android (HD screens) have the same aspect ratio i.e 9:16. So we can design only by maintaining an aspect ratio 9:16 for the screens we are building instead of making different designs for different screens. Andrew Hedge aspect ratio calculator is really handy to calculate sizes.

Color Palette Generator

First, choose your main color for the theme. (Tip: Choose flat colors.) My hack to choose flat UI color from https://flatuicolors.com/ Now, How to Generate color shades, tones, and tints values and generate color palette? My hack to generate a color palette.

http://colllor.com/ Go to the above link and in pick color fields, Pick your color. You will get shades/tints, tones, mix colors, and similar color. You can also dive deeper into color palettes by checking out Canva’s Color Theory article that lets you find the perfect color combinations that work well together. Some color palette examples:

Flat colors

Retro Colors

Monotone colors

Typography & Font size

iPhone uses Helvetica font and android uses Roboto. iPhone renders fonts in points. Now, When you make a design in Adobe Photoshop, one is used to have fonts in pixels. So how to convert pixels to points?

If you are designing for retina display then 12 points in Photoshop are equal to 6 Points in iOS and for non-retina, 12 points in Photoshop will be 12 points in iOS My hack to convert pixels to points Go to Angry Tools and on the left side click on pixels first. Then on the right side in the text field enter font size which is in pixels. It will automatically convert font size from pixels to points for iOS and DP (Density pixel Independent) for Android.

Content Team

This blog is from Mindbowser‘s content team – a group of individuals coming together to create pieces that you may like. If you have feedback, please drop us a message on contact@mindbowser.com

Keep Reading

Keep Reading

  • Service
  • Career
  • Let's create something together!

  • We’re looking for the best. Are you in?