Tutorial UI Design —#4 Info Seputar UI Design
Seri Tutorial UI Design Bagian 4, Informasi Unik Mengenai UI Design
Belajar itu membutuhkan info terlebih dahulu, supaya menyenangkan. Tak lupa dengan tips and trick supaya makin betah belajar.
Untuk kamu yang ingin belajar membuat UI Design, berikut info yang akan membantu kamu mempercepat proses tersebut.
Langkah 1 — Temukan Masalah
Dalam kehidupan sehari-hari pasti banyak sekali masalah yang terjadi, entah kendaraan mogok, lupa nge-charge smartphone, jalanan macet, dll.
itu semua bisa dijadikan ide untuk menemukan solusi — dalam arti lain ini mengaplikasikan sebagai UX Research — kita semua tahu, dari masalah diatas sudah banyak solusi yang ditawarkan seperti kendaraan mogok tapi ingin cepat sampai tujuan, alternatifnya bisa menggunakan layanan ojek online. Jalanan macet bisa diatasi menggunakan layanan maps untuk menghindari jalan yang macet.
Langkah 2 — Catat Solusinya
Tulis setiap langkah untuk menyelesaikan masalah. Dimulai dari masalah pertama, bagaimana cara mengatasi nya. tulis hingga akhir dan rinci.
Langkah 3 — Software dan Template
Sekarang, sudah banyak company yang menyediakan software khusus untuk mendesain UI dari yang gratis hingga berbayar.
Tak lupa beberapa fitur yang harus ada pada setiap software UI Design adalah sebagai berikut:
- Freedom to create
- OS or Platforms
- Keyboard Shortcut
- Repeat Grids
- Vector Networks
- Offline and Online Support
- Responsive Design
- Rich Content
- Prototyping
- Collaboration
- File Sharing
Sebagai designer, kita harus mempunyai sense yang bagus untuk menentukan fitur yang akan dipakai, sesuai dengan kebutuhan dan sesuai dengan workflow dengan baik.
Saatnya untuk memilih software UI Design sesuai kebutuhan dan kenyaman kamu.
Sketch
Software pengganti Photoshop dan Illustrator selama 5 tahun terakhir yang tersedia hanya di macOS. Sketch lebih mengutamakan untuk mendesain UI yang elegant.
Kelebihan:
- Banyak sekali plugin yang ditawarkan untuk native (macOS dan iOS)
- Mempunyai integrasi dengan Invision, Zeplin, Avocode, Marvel, UXpin, dll.
- Fitur Sketch Inspector, untuk penyelarasan alignment dan granular export.
Kekurangan:
- Hanya tersedia di macOS.
- Ukuran file yang besar, seperti Photoshop dan Illustrator.
Figma
Figma hadir dengan konsep web based. Dimana mendesain UI cukup dengan browser kalian. Cocok untuk pc kentang :) yang ingin belajar UI Design dengan fitur yang sangat powerful.
Kelebihan:
- Cloud based. Sangat cocok untuk platform dan os apapun yang menyediakan browser.
- Realtime collaboration and easy file sharing. Sangat akurat untuk kalian yang bekerja bersama.
- Vector networks.
Kekurangan:
- Harus online. ya namanya juga web based…
Adobe XD
Adobe tak kalah dengan pesainya, kini hadir untuk memenuhi kebutuhan UI UX Designer yang ingin mendesain dan protoyping secara bersamaan beserta ukuran file yang sangat ramah untuk storage :), tidak seperti pendahulunya yaitu Photoshop dan Illustrator.
Kelebihan:
- Interface tergolong ringan dan cepat
- Support untuk prototyping
- Tersedia fitur Repeat Grids
- support untuk collaboration dan active comment
Kekurangan:
- Support button yang terbatas
- fitur collaboration yang sedikit menyusahkan dalam save project
Referensi lain mengenai komparasi dari ketiga software diatas:
Langkah 4 — Gunakan Official Template
Template berguna sekali untuk kamu yang ngga mau repot mendesain dari awal. Cukup copy paste, lalu sesuaikan dengan ide kamu
Download disini ya…
Langkah 5 — Menentukan Ukuran Canvas
Kamu mau membuat UI pada device apa nih, android/iOS/web? tenang saja, masing masing sudah ada rule nya kok
- Android App → 360px * 640px
- iOS App → 320px * 568px (iPhone 5), 375px * 667px (iPhone 6,7,8)
- Website →1440px * 900px
Untuk website lebih fleksibel (aku menggunakan 1920px * 1080px 16:9). Lebih baik disesuaikan dengan resolusi laptop/ layar komputer kamu. Kenapa? supaya desain kamu terlihat pas di browser.
Untuk android juga disesuaikan dengan device yang digunakan ya.. karena banyak sekali brand yang menggunakan OS android dalam resolusi layar yang berbeda pula. selengkapnya lihat di Device Metrics — Material Design.
Langkah 6 — Menentukan Ukuran Text
Gunakan font dan ukuran yang konsisten serta memenuhi standar yang berlaku tiap device ya..
- 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)
Langkah 7 — Grid, Margin, dan Padding
Ketika membuat UI, alangkah baiknya jika kita setting terlebih dahulu canvas dengan Grid, Untuk setiap jarak antar elemen gunakan Margin, dan elemen dalam elemen gunakan padding.
- 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 → Ngga ada standar jarak antar elemen pada website. Gunakan yang menurut kamu ngga terlalu berdekatan antar elemen. Yang penting tetap konsisten.
UI-Bulary: Margin
Jarak antar elemen(penanda warna hijau tosca).
Contoh diatas adalah jarak antara text field sebelah kiri dan kanan(penanda warna hijau tosca).
UI-Bulary: Padding
Jarak sebuah elemen dengan elemen di dalamnya(penanda warna hijau tosca).
Contoh diatas adalah jarak antar elemen text dengan garis text field(penanda warna hijau tosca).
UI-Bulary: Kerning / Letter Spacing
Jarak antar huruf pada sebuah text (kerenggangan text).
Contoh diatas adalah letter spacing (kiri) dengan ukuran 0 dan letter spacing (kanan)dengan ukuran 0.7. Lebih enak dilihat sebelah kanan ya..
UI-Bulary: Line Height
Umumnya line height diketahui untuk mengatur jarak baris dalam sebuah paragraf.
Contoh diatas adalah jarak vertikal antara paragraf text. Terlalu dekat atau pun terlalu jauh itu ngga baik. Secukupnya saja, komparasi antara line height (kiri) dengan ukuran 15 dan line height (kanan) dengan ukuran 20.
Langkah 8 — Text Color, Opacity
Supaya UI kamu terlihat rapi dan eye catching, gunakan standar tiap device yang ada dibawah ini ya..
- Android → Menggunakan 3 jenis opacity 87%, 60%, 38% dari warna dasar dan 3 Jenis opacity ini bisa kamu gunakan untuk membuat hirarki teks.
- iOS App → Belum ada info resmi dari Apple terkait hal ini. Kamu 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.
Langkah 9 — 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/ (ini adalah ukuran icon untuk Tab Bar iOS, untuk ukuran icon yang digunakan selain di tab bar gunakan ukuran 24 x 24 atau senyaman user berdasarkan riset.)
- Website → Fleksibel. Biasanya menggunakan ukuran 24 x 24 atau senyaman user berdasarkan riset.
Have a nice day!
Ghifari Nur Athoillah, Mahasiswa di Program Profesi CCIT-Fakultas Teknik Universitas Indonesia
Akses materi selanjutnya di:
Referensi:
