Beberapa info untuk kamu yang akan memulai membuat desain UI untuk pertama kali
Mencoba
hal baru untuk pertama kali itu terasa grogi tapi menyenangkan bukan? ,
Well… setidaknya itu yang saya rasakan dulu ketika pertama kali mencoba
membuat desain UI sebuah mobile app dan berakhir dengan teks yang
terlalu kecil sehingga tidak bisa dibaca :D
Berikut beberapa info yang semoga bisa membantu temen temen yang akan membuat desain UI.
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) agen bola
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.
Komentar
Posting Komentar