Tahapan Membuat Style Guidelines untuk Perancangan UI


Style guidelines merupakan bagian penting dalam desain 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.

Gambar blog.usejournal.com

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.

Gambar blog.usejournal.com

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.

Gambar blog.usejournal.com

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://www.huesnap.com/

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.

Gambar blog.usejournal.com

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.

https://fonts.google.com/specimen/Roboto?selection.family=Roboto

https://developer.apple.com/fonts/

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

Gambar blog.usejournal.com

Membuat Style Layer

Gambar blog.usejournal.com

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

Gambar blog.usejournal.com

5. Menentukan Ikon

Tipe Ikon

Ada beberapa tipe ikon diantaranya 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.

Gambar blog.usejournal.com

Generator Simbol Ikon

Untuk Anda pengguna Sketch bisa mencoba icon plugin untuk mengubah ikon menjadi simbol dan Anda dapat menambahkan warna pada ikon.

Gambar blog.usejournal.com

Sketch Icons Plugin

https://github.com/AMoreaux/Sketch-Icons

Sources

https://thenounproject.com/

https://www.flaticon.com/

https://iconmonstr.com/

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]

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.