Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Begini Caranya membuat Desain UI yang Konsisten, dengan Style Guidelines!

- Advertisement -
- Advertisement -
- Advertisement -

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

Semoga artikel ini membantu untuk karyamu berikutnya!

Sumber: techarea.co.id

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles