Style guidelines merupakan bagian penting dalam desain UI yang dapat digunakan sebagai panduan dalam merancang sebuah user interface (UI). Selain itu, Anda akan lebih konsisten ketika mendesain suatu proyek secara keseluruhan seperti elemen UI, warna, tipografi, ikon, dan lain-lain. Berikut langkah-langkah dalam membuat suatu style guidelines.
1. Menetapkan Warna
Pertama, Anda perlu menetapkan warna agar Anda dapat memiliki arah yang tepat untuk menciptakan suatu branding. Ada 3 bagian dalam menetapkan warna yaitu warna Primer, Sekunder dan Aksen.
Warna Primer:
Warna primer atau warna utama adalah warna yang paling sering ditampilkan di semua layar dan elemen aplikasi.
Warna Sekunder:
Warna sekunder digunakan untuk aksi mikro seperti slider, navigasi, progress bar, link atau tautan, dan mungkin Anda dapat menggunakan warna ini untuk heading.
Anda dapat mencoba tautan di bawah untuk menentukan warna sekunder. http://mcg.mbitson.com/
Warna Aksen:
Warna aksen dapat digunakan sebagai warna penanda error, sukses, peringatan, atau informasi. Jika Anda tidak memiliki warna sekunder, Anda dapat menggunakan warna aksen untuk warna penanda tombol, tautan, warna teks.
Contoh:
- Merah menandakan kesalahan (error, wrong)
- Kuning menandakan peringatan (alert, warning, caution)
- Hijau menandakan berhasil (success, right, safe)
- Biru menandakan informasi.
2. Menetapkan Warna Gradien
Kini, warna gradien menjadi bagian dari desain. Anda bisa mengkombinasi warna primer dan sekunder atau mencoba untuk memberikan beberapa arah dalam gradien seperti diagonal.
Untuk menentukan warna gradien, Anda bisa mencoba tautan di bawah ini.
https://uigradients.com/#SeaWeed
https://www.materialui.co/colors
3. Membuat Simbol Warna
Dengan membuat simbol warna, Anda akan lebih konsisten untuk memberi warna ketika proses mendesain.
4. Menetapkan Tipografi
Elemen tipografi yang sangat penting dalam desain UI yaitu font, ukuran font, dan warna. Berikut ada 3 tahapan untuk menetapkan tipografi.
Memilih Font Family
Anda dapat menggunakan font google atau menggunakan font default seperti Roboto dan SF Display pro jika Anda mendesain untuk proyek berbasis Android atau iOS.
Memilih Font Weight
Font weight adalah pengaturan bobot pada font untuk menentukan tingkat ketebalan. Ada dua cara untuk menentukan font weight dalam desain dan coding.
- Dalam Desain: font weight yang digunakan berupa istilah seperti Tipis (Light), Regular, Medium, tebal (Bold), Hitam (Black).
- Dalam Coding: font weight yang digunakan berupa angka numerik seperti 300, 400, 700, 900
Membuat Style Layer
Setelah memilih font dan font weight, berikutnya adalah membuat style layer. Jika Anda pengguna Sketch, Anda bisa mencoba plugin styles generator untuk membuat style layer.
https://github.com/lucaorio/sketch-styles-generator
5. Menentukan Ikon
Tipe Ikon
Ada beberapa tipe ikon di antaranya adalah flat, outline, filled, dan masih banyak lagi.
Mengelompokkan Ikon
Hal ini bersifat opsional, Anda boleh melakukannya atau tidak. Mengelompokkan ikon ini bertujuan untuk memudahkan Anda untuk mendesain lebih efisien.
Generator Simbol Ikon
Untuk Anda pengguna Sketch bisa mencoba icon plugin untuk mengubah ikon menjadi simbol dan Anda dapat menambahkan warna pada ikon.
Sketch Icons Plugin
Sources
Reference
Rehman, Faizur. 2018. Creating Styleguides - the what, how and why behind it. [Online] Available at :https://blog.usejournal.com/creating-styleguides-the-what-how-and-why-behind-it-7b61dbf560eb [Accessed July 6, 2018]