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.
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:
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.