Tahapan Membuat Style Guidelines untuk Perancangan UI

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.

SG01
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.

SG02
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.

SG03
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.

SG04
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.

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
SG05
Gambar blog.usejournal.com

Membuat Style Layer

SG06
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

SG07
Gambar blog.usejournal.com

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.

SG08
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.

SG09
Gambar blog.usejournal.com

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]

Roziq Bahtiar

Roziq Bahtiar

Saya seorang insinyur perangkat lunak, pengusaha, dan blogger teknologi. Saya merancang dan mengembangkan perangkat lunak untuk berbagai platform. Saya telah membuat situs web dan aplikasi Android yang memiliki UI dan UX yang bagus

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *