Tentang UI Guideline — #1: Intro

Dwinawan
Dwinawan
Jul 31 · 5 min read

Pada artikel kali ini akan membahas mengenai UI Guideline.

Artikel akan dibagi menjadi 5 bagian.

Bagian 1 — Pengenalan

  1. Tampilan UI Guideline
  2. Apa sih UI Guideline itu?
  3. Mengapa harus menggunakan UI Guideline?
  4. Apa keuntungan menggunakan UI Guideline?
  5. Kapan harus membuat UI Guideline?

Bagian 2 — Membuat Guideline

  1. Bagaimana membuat UI Guideline?
  2. Membuat UI Guideline untuk Warna
  3. Membuat UI Guideline untuk Typography

Bagian 3— Membuat Guideline

  1. Membuat UI Guideline untuk Margin

Bagian 4— Membuat Guideline

  1. Membuat UI Guideline untuk Shadow
  2. Membuat UI Kit untuk komponen yang sering digunakan

Bagian 5— Implementasi Guideline di Sketch

  1. Membuat Text Styles
  2. Membuat Symbol
  3. Membuat Color Pallete

Langsung saja kita mulai…


Tampilan UI Guideline

Mari kita lihat dulu beberapa UI Guideline yang ada di internet



Jadi apa itu UI Guideline?

Sebuah dokumen yang berisi aturan aturan dalam mendesain suatu produk digital. Aturan aturan tersebut diantaranya:


Mengapa harus menggunakan UI Guideline?

Alasan yang paling utama adalah menjaga konsistensi elemen elemen dari sebuah produk digital.

UI Guideline bisa dikatakan sebagai Single Source of Truth atau sebuah pedoman.

Jika seorang designer menemukan beberapa design yang tidak konsisten, designer tersebut bisa membuka UI Guideline untuk mencari tahu mana yang benar.

Contohnya:
Andi sedang memeriksa hasil design dari team nya. Saat itu mereka sedang mendesain alur pembelian barang. Di halaman pertama, Andi melihat tombolnya berwarna hijau. Di halaman kedua, Andi melihat tombol nya berwarna orange.

Karena mengalami hal tersebut, Andi lantas membuka UI Guideline dan mencari tahu bagaimana bentuk, ukuran dan warna tombol yang harus digunakan.


Apa keuntungan menggunakan UI Guideline?

1. Konsistensi di semua halaman sebuah produk digital bisa terjaga

Bayangkan jika kamu menggunakan sebuah app untuk mencari tiket pesawat. Pada halaman awal, tombol pencarian nya berwarna hijau. Lalu pada halaman berikutnya tombol pemesanan nya berwarna orange. Bingung enggak?

Dengan ada nya UI Guideline, hal ini tidak akan terjadi.

Konsistensi cukup penting dalam sebuah produk digital. Karena dengan konsistensi, user akan lebih mudah untuk mengenali sebuah elemen.

Contohnya… jika dari awal tombol pencarian nya atau tombol utama nya berwarna hijau, maka di halaman halaman selanjut nya user tinggal mencari sebuah tombol berwarna hijau untuk melanjutkan proses nya.

Contoh konsistensi dalam penggunaan sebuah tombol

Membuat user mudah mengenali mana elemen tombol untuk melanjutkan proses

— — — — — — — — — —

2. Workflow atau kinerja menjadi lebih cepat

Tidak perlu lagi memikirkan…

“Eh tombol untuk CTA bentuknya gimana ya tadi?”

“Tombol Cancel baiknya seperti apa ya?”

“Tombol di pop-up seperti apa ya bagusnya?”

Semua nya sudah terdokumentasikan secara jelas, sehingga cukup mengikuti aturan nya saja.

Contoh Guideline sebuah tombol yang bisa mempercepat kinerja seorang designer.

— — — — — — — — — —

3. Designer bisa lebih fokus ke pembuatan solusi

Karena semua elemen sudah terdokumentasi, maka tidak perlu lagi untuk memikirkan…

“Bentuk dropdown nya seperti apa ya?”

“Dropdown nya bagus dikasih border atau enggak ya?”

“Tinggi dropdown nya seberapa ya? , apakah mau setinggi tombol utama?”

Karena hal hal tersebut sudah terdokumentasikan, designer bisa fokus ke hal hal yang lebih penting seperti:

Tanpa perlu memikirkan detail kecil seperti ukuran teks dan tinggi button

Contoh Guideline untuk elemen dropdown

— — — — — — — — — —

4. Membantu Developer dalam implementasi design ke dalam bentuk code

Dengan ada nya guideline, maka design sebuah produk digital akan menjadi konsisten, hal ini akan berdampak juga pada developer. Mereka akan lebih mudah mengimplementasi design dari designer.

Contohnya… Karena tombol utama nya sudah terdapat UI Guideline nya mulai dari warna nya, bentuknya, ukuran teks nya, maka developer bisa membuat sebuah class untuk tombol utama tersebut.

Dan jika developer tersebut sedang mendevelop halaman lain yang terdapat tombol utama nya, mereka tidak perlu mengukur tinggi tombol tersebut, dan mencari tahu warna nya apa. Mereka cukup menggunakan class yang telah mereka buat sebelumnya.

Contoh sebuah class untuk tombol


Kapan harus membuat UI Guideline?

Ini sangat bergantung pada kondisi masing masing.

Ada perusahaan yang membuat UI Guideline dari awal untuk memastikan proses design sebuah aplikasi berjalan lancar dan elemen nya konsisten.

Ada perusahaan yang ngejar cepet, pokoknya jadi dulu aja. Jika ada yang enggak konsisten enggak apa apa. Bikin guideline nya bisa nanti nanti saja

Menurut saya pribadi, kita harus mulai untuk membuat UI Guideline jika…

1. Terdapat banyak sekali halaman pada sebuah produk digital tersebut baik web maupun app.

Sehingga jika kita sedang mendesain halaman pengisian form, kita tidak perlu mencari cari halaman lain yang memiliki design form hanya untuk mencari tahu bentuk form seperti apa. Kita cukup membuka guideline untuk mencari tahu bentuk form nya.

2. Banyak designer yang mengerjakan design sebuah produk digital

Bayangkan jika ada 4 designer yang mengerjakan sebuah produk digital. Sebutlah Andi, Budi, Toni dan Ria. Andi membuat design tombol utama warna hijau. Lalu Budi karena suka Manchester United bikin design tombol utama warna merah, Toni dan Ria punya warna favorit sendiri, sehingga mereka memberi warna tombol utama sesuai warna favorit mereka. Repot kan?

Dengan ada nya guideline, bentuk tombol utama, warna pada tombol utama, ukuran teks pada tombol utama akan tetap sama di semua halaman walaupun yang mengerjakan nya ada 4 designer.


Berlanjut ke artikel selanjutnya

Bagian 2 — Membuat Guideline

  1. Bagaimana membuat UI Guideline?
  2. Membuat UI Guideline untuk Warna
  3. Membuat UI Guideline untuk Typography

Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar and Insight Design • UI Designer • Story Teller • Love to create design exploration @ dribbble.com/dwinawan

Insight

Insight

UI, UX, Bisnis Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade