Beberapa Info untuk Kamu yang Akan Membuat Desain UI untuk Pertama Kali

1. Software untuk membuat desain UI

• 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. Ukuran Canvas

• Android App →360px * 640px
• iOS App → 320px * 568px (iPhone 5), 375px * 667px (iPhone 6,7,8)
• Website →1440px * 900px (untuk website lebih fleksibel. Lebih baik ukuran canvas nya disesuaikan dengan resolusi laptop / layar komputer Anda. Kenapa? agar Anda bisa menaruh design Anda di browser dan terlihat pas)

3. Ukuran Teks

• 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, untuk website ini lumayan fleksibel sih ukurannya yang penting mudah dibaca dan jelas antara judul dan deskripsi)

4. Jarak antar elemen

• Android → https://material.io/design/layout/spacing-methods.html#baseline (Kelipatan 4 atau 8)
• iOS App → Belum menemukan info resmi dari Apple terkait hal ini. Selama ini saya menggunakan kelipatan 5 untuk menentukan jarak antar elemen pada design iOS.
• Website → Tidak ada standar jarak antar elemen pada website. Saya biasa menggunakan kelipatan 5 untuk menentukan jarak antar elemen pada website

5. Warna Teks

• Android → https://material.io/design/color/text-legibility.html#text-types . (Pada dasarnya menggunakan 3 jenis opacity 87%, 60%, 38% dari warna dasar. Dan 3 Jenis opacity ini bisa kalian gunakan untuk membuat hirarki teks)
• iOS App → Belum menemukan info resmi dari Apple terkait hal ini. Kalian bisa menggunakan prinsip dari Android (dengan menggunaan 3 jenis opacity) untuk membuat hirarki teks.
• Website → Fleksibel. Kalian bisa menggunakan prinsip dari Android (dengan menggunaan 3 jenis opacity) untuk membuat hirarki teks.

6. Ukuran Icons

• Android → 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… ini adalah ukuran icon untuk Tab Bar iOS, untuk ukuran icon yang digunakan selain di tab bar saya biasanya menggunakan ukuran 24 x 24)
• Website → Fleksibel. Saya biasanya menggunakan ukuran 24 x 24.

7. UI-Bulary

A. Margin

Jarak antar elemen (warna hijau).

B. Padding

Jarak sebuah elemen dengan elemen di dalamnya (warna ungu).

C. Kerning / Letter Spacing

Jarak antar huruf pada sebuah teks.

D. Line Height

Umumnya line height diketahui untuk mengatur jarak baris dalam sebuah paragraf.