Design Guideline pada Lapor!
Design Guideline merupakan serangkaian rekomendasi terhadap praktik-praktik yang baik dalam sebuah desain. Design Guideline digunakan untuk memberikan instruksi yang jelas kepada designers dan developers dalam merancang dengan prinsip-prinsip tertentu, seperti intuitiveness, learnbability, efficiency, dan consistency.
Sebuah design guideline biasanya berada di antara principle of design (cth. “an interface should be easy to use”) dan standard / aturan untuk mengimplementasikannya (cth. “background: white; font-color: black; font-size: 20px”). Dalam kasus ini, design guideline membantu designers untuk memahami bagaimana cara mengimplementasi suatu prinsip, tanpa membatasi kreatifitas dalam mendesain.
Apa saja yang dibutuhkan dalam pembuatan Design Guideline?
- Software untuk membuat desain / mockup
- Ukuran + Warna (color palette)Canvas
- Ukuran + Warna + Font Teks
- Jarak antar elemen
- Ukuran + Penggunaan Icons
- dsb
Apa saja yang perlu dipertimbangkan dalam merancang Design Guideline?
Dalam merancang design guideline, diperlukan beberapa referensi yang dianggap sebagai best practice. Referensi-referensi dapat dilihat pada halaman web yang telah banyak digunakan oleh masyarakat (cth. Design Guideline Google, Microsoft, dll).
Contoh:
Setelah memiliki peralatan dan referensi untuk membuat Design Guideline, sekarang waktunya kita menuju tahap pembuatan Design Guideline!
Pertama, Menetapkan Warna
Anda perlu menetapkan warna agar Anda dapat memiliki arah yang tepat untuk menciptakan suatu branding. Terdapat 3 bagian warna yang harus ditetapkan, yaitu warna primer, warna sekunder, dan warna aksen. Warna primer atau warna utama adalah warna yang paling sering ditampilkan di semua layar dan elemen aplikasi. Warna sekunder digunakan untuk aksi mikro seperti slider, navigasi, progress bar, link atau tautan, dan mungkin Anda dapat menggunakan warna ini untuk heading. 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.
Pada LAPOR!, warna primer yang kami gunakan adalah warna merah kejinggaan (#FF5254) yang diikuti dengan warna sekunder adalah shades dari warna primer tersebut dan warna aksen mengikuti warna tombol pada umumnya (hijau untuk melanjutkan / sukses, merah untuk membatalkan / error)
Kedua, Menetapkan Warna Gradien (opsional)
Kini, warna gradien menjadi bagian dari desain. Anda bisa mengkombinasi warna primer dan sekunder atau mencoba untuk memberikan beberapa arah dalam gradien seperti diagonal. Tahapan ini dapat dilewati apabila Anda merasa warna primer dan sekunder sudah cukup dalam pembuatan tampilan Anda.
Ketiga, Membuat Simbol Warna
Dengan membuat simbol warna, Anda akan lebih konsisten untuk memberi warna ketika proses mendesain.
Keempat, Menetapkan Tipografi
Elemen tipografi yang sangat penting dalam desain UI yaitu font, ukuran font, dan warna. Terdapat 3 tahapan untuk menentukan 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. Untuk info terkait font family yang tersedia, dapat dilihat pada fonts.google.com (website google) ataupun website website lainnya.
- 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) dan dalam coding, font weight yang digunakan berupa angka numerik seperti 300, 400, 700, 900
- Membuat Style Layer
Style layer merupakan text style yang digunakan dalam pembagian penulisan, seperti tulisan untuk judul, tulisan untuk subjudul, tulisan untuk teks biasa, tulisan untuk sub-sub judul, dsb.
Kelima, menentukan ikon
Ada beberapa tipe ikon diantaranya adalah flat, outline, filled, dan masih banyak lagi. Terdapat beberapa referensi penyedia ikon yang dapat digunakan, salah satunya material.io (apabila tidak ingin membuat ikon dari scratch)
Dengan menjalankan kelima tahap tersebut, maka Anda telah berhasil membuat Design Guideline. (YAYY!)
Pembuatan Design Guideline pada LAPOR!
Implementasi halaman web kami berdasarkan Design Guidelines yang telah kami buat:
Sekian dari saya mengenai Design Guidelines, terima kasih telah membaca!
