Tutorial UI Design — #5 UI Guideline: Colors dan Typography
Seri Belajar UI Design Bagian 5, UI Guideline: Memilih Warna dan Gaya Tulisan
Artikel ini merupakan lanjutan dari UI Guideline: Pengenalan.
Bagi kamu yang belum paham dengan UI Guideline, silahkan membaca dari artikel pertama UI Guideline. Klik disini.
Bagaimana Cara Membuat UI Guideline?
kita flashback pada materi sebelumnya, pahami lagi fungsi dari UI Guideline. yaitu sebagai petunjuk saat membuat sebuah design.
Petunjuk dalam hal apa?
- Petunjuk dalam membuat tombol/button
- Petunjuk dalam menentukan warna
- Petunjuk dalam menentukan font dan tata letak (typography)
Perlukah membuat UI Guideline dulu, sebelum mendesain?
Menurutku sangat diperlukan. Karena UI Guideline sebagai petunjuk, maka sedikit aneh rasanya jika membuat desain skip pada tahapan ini.
Jadi, harus membuat UI Guideline dulu?
Kurasa iya.
Bagaimana cara memulainya?
- Persiapkan alat-alatnya. Jika kalian membuatnya di kertas, it’s fine. atau langsung membuat pada aplikasi no problem.
- Buat sekitar 3–4 halaman UI nya.
- Tentukan tema aplikasi kamu.
- Eksplorasi font yang menurutmu pas dengan tema dan mudah dibaca. Kamu bisa mengunjungi Google Fonts, Apple Fonts.
- Eksplorasi colors yang menurutmu pas dengan tema. Kamu bisa mengunjungi Color Adobe, FlatUIColors.
Setelah membuat Tampilan UI Guideline, yuk lanjut ke colors.
Colors (Warna)
Buat beberapa kandidat warna yang tersedia, kita bisa lihat warna dasar yang terbagi menjadi beberapa bagian
- Hitam — Hitam pekat, Hitam normal, Hitam terang
- Hijau— Hijau pekat, Hijau normal, Hijau teranag
- Merah — Merah pekat, Merah normal, Merah terang
- Biru — Biru pekat, Biru normal, Biru terang
- Kuning — Kuning pekat, Kuning normal, Kuning terang
Dari sini kita mengetahui ada 3 perubahan warna mulai dari pekat, normal, terang.
Setelah itu beri nama dan hex code supaya lebih jelas seperti dibawah ini.
Kok Warna biru ada yang pekat dan terang ya?
Daftar warna (color palette) ini hanya sementara, masih bisa diubah sesuai kondisi. Apakah pada implemetasi nanti lebih pekat atau sedikit lebih terang ya tinggal diubah.
Daftar warna boleh diubah ngga?
Tentu bisa, karena UI Guideline ini sebagai dokumentasi yang bisa mengalami perubahan dari awal hingga akhir.
Misalkan, kamu ingin mengupdate aplikasi dengan menambahkan beberapa backround yang punya banyak warna yang unik dan eye catching. Kamu bisa meletakkannya di UI Guideline Color sebagai bahan percobaan dan bisa didiskusikan dengan desainer lainnya jika berkolaborasi.
Jadi, kalo belum ada kebutuhan warna lain. Berarti masih menggunakan warna yang ada di UI Guideline?
Exactly yes.
Typography
Segala aturan mengenai teks mulai dari jenis, ukuran, ketebalan akan dibahas disini.
Kita mulai dari membuat daftar penggunaan teks yang akan digunakan pada aplikasi.
Coba perhatikan judul dan teks paragraf dibawah ini, dari yang tertera pada UI Guideline dan implementasinya terlihat sama mulai dari jenis, ukuran, dan ketebalan teks.
Dari gambar diatas, kita bisa membuat UI Guideline 2 kategori yaitu teks untuk judul dan paragraf/body.
Jangan lupa untuk membuat prioritas dari aturan teks agar mudah jika menggunakannya kembali seperti
Header
- 25px
- 16px
Body
- 14px
- 12px
Ketebalan teks
- Bold
- Regular
- Light
Ketebalan teks ini juga bisa kita masukkan ke dalam UI Guideline, sehingga memberi informasi ketebalan font seperti apa yang bisa digunakan.
Setelah membuat UI Guideline typography, maka ketika kamu membuat desain suatu aplikasi gunakan UI Guideline nya pada setiap elemen.
Kalaupun memang dirasa perlu menambahkan aturan, lebih baik koordinasi dengan tim jika kamu berkolaborasi
Atau kalau kamu mengerjakan sendiri, pertimbangkan setiap elemen. ikalau perlu menambahkan, maka tambahkanlah.
Have a nice day!
Ghifari Nur Athoillah, Mahasiswa di Program Profesi CCIT-Fakultas Teknik Universitas Indonesia
Akses materi selanjutnya di:
