Tried something new for the first time it tasted groggy but fun isn't it? Well... At least that's what I felt first when I first tried to make a UI design of a mobile app and ended up with too small text so it couldn't be read:D

Here's some info that hopefully can help a friend who will create the UI design.

1. Software to create UI design

  • Photoshop (https://www.adobe.com/products/photoshop/free-trial-download.html)
  • Sketch (https://www.sketchapp.com/)
  • Adobe XD (https://www.adobe.com/products/xd.html)

2. Canvas size

  • Android App → 360px * 640px
  • iOS App → 320px * 568px (iPhone 5), 375px * 667PX (iPhone 6, 7.8)
  •  Website → 1440px * 900px (for more flexible websites. Better the size of the canvas is adjusted to the resolution of your laptop/computer screen. Why? So you can put your design in the browser and look fit)

3. Text Size

  • Android → https://material.io/design/typography/the-type-system.html#applying-the-type-scale
  • iOS App → https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
  • Website → http://typecast.com/blog/a-more-modern-scale-for-web-typography (Btw, for this website is pretty flexible still its size is important easy to read and clear between the title and description)

4. Distance between elements

  • Android → https://material.io/design/layout/spacing-methods.html#baseline (multiple 4 or 8)
  • iOS App → Haven't found any official info from Apple in this regard. During this time I used 5 increments to determine the spacing between the elements on the iOS design.
  • Website → There is no standard spacing between elements on the website. I used to use 5 increments to determine the distance between elements on the website

5. Text color

  • Android → https://material.io/design/color/text-legibility.html#text-types. (Basically using 3 types of opacity 87%, 60%, 38% of the base color. And these 3 opacity types you can use to create a text hierarchy)
  • iOS App → Haven't found any official info from Apple in this regard. You can use the principle of Android (by using 3 types of opacity) to create a text hierarchy.
  • Website → flexible. You can use the principle of Android (by using 3 types of opacity) to create a text hierarchy.

6. Size Icons

  • id → https://material.io/design/iconography/system-icons.html#grid-keyline-shapes
  • iOS → https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/custom-icons/ (Btw... This is the icon size for the Tab Bar iOS, for the size of icons used in addition to the tab bar I usually use a size of 24 x 24)
  • Website → flexible. I usually use a size of 24 x 24.

7. UI-Bulary

A. Margin

Spacing between elements (green color)

B. Padding

Distance an element with elements in it (purple color)

C. Kerning/Letter Spacing

Spacing between letters in a text

D. Line Height

Generally line height is known to set the line spacing in a paragraph.


If the above information is considered to be less precise or if you want to add information related to the topic of starting up UI designing, Please feel free to leave your feedback, and we will revise this article together.

Thank:)