Sebelumnya apakah kalian sudah mengetahui apa itu UI atau User Interface ? Antarmuka pengguna (User Interface) adalah titik hubungan antara manusia dengan komputer dan melakukan komunikasi dalam suatu perangkat, mencakup layar tampilan, keyboard, mouse, dan tampilan desktop. Antarmuka pengguna memungkinkan pengguna untuk secara efektif mengontrol komputer atau perangkat yang berinteraksi dengan mereka. User interface juga merupakan salah satu cara di mana para pengguna dapat berinteraksi dengan aplikasi atau situs web. Dengan semakin banyaknya bisnis yang bergantung pada aplikasi web dan aplikasi mobile, telah mendorong banyak perusahaan untuk menempatkan peningkatan prioritas pada User Interface dalam upaya meningkatkan pengalaman secara keseluruhan.
Beberapa info membuat Desain UI :
- Software untuk membuat desain UI
- Photoshop
- Sketch
- Adobe XD
- Ukuran Canvas
- Android App →360px * 640px
- iOS App → 320px * 568px (iPhone 5), 375px * 667px (iPhone 6,7,8)
- Website →1440px * 900px (Lebih baik ukuran canvas nya disesuaikan dengan resolusi laptop / layar komputer Anda supaya Anda bisa menaruh design Anda di browser dan terlihat pas)
- 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 untuk website ini lumayan fleksibel sih ukurannya yang penting mudah dibaca dan jelas antara judul dan deskripsi)
- Jarak antar elemen
- 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
- Warna Teks
- Android (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.
- Ukuran Icons
- iOS , untuk ukuran icon yang digunakan selain di tab bar saya biasanya menggunakan ukuran 24 x 24)
- Website → Fleksibel. gunakanlah ukuran 24 x 24.
- UI-Bulary
- Margin
Jarak antar elemen (warna hijau)
- Padding
Jarak sebuah elemen dengan elemen di dalamnya (warna ungu)
- Kerning / Letter Spacing
Jarak antar huruf pada sebuah teks
- Line Height
Umumnya line height diketahui untuk mengatur jarak baris dalam sebuah paragraf.
Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com