Design System Guideline untuk Dokumentasi Produk
Branding sangat penting dalam perancangan sebuah UI (user interface), terutama jika kita ingin mengunakan UI sebagai tambahan daya tarik suatu produk dan meningkatkan brand awareness. UI design merupakan suatu proses pembuatan interface pada perangkat lunak yang berfokus pada tampilan atau style. Untuk membuat UI design yang baik, ada beberapa hal yang perlu diperhatikan, salah satunya adalah konsistensi. Bagaimana menjaga konsistensi dalam tampilan antarmuka suatu aplikasi?
Apa Itu Design Guideline?
Design guideline adalah sebuah panduan yang berisi elemen UI, seperti komponen, warna, tipografi, dan lain sebagainya, untuk mendesain sebuah UI. Design guideline memiliki beberapa kegunaan, seperti membuat standarisasi tampilan aplikasi, mempertahankan konsistensi, serta sebagai pedoman bagi tim developer untuk menyusun layout aplikasi. Hal ini memungkinkan seorang desainer untuk mendesain dalam waktu singkat.
Design Guideline pada Proyek
Dalam pengembangan aplikasi Document Builder, kami (kelompok A8) menggunakan Figma sebagai design tool kami karena Figma merupakan salah satu design tool interaktif yang menyediakan fitur kolaboratif tim.
Sebagai desainer, saya membuat halaman khusus pada Figma dengan nama Component untuk menyimpan design guideline milik aplikasi Document Builder yang terdiri dari warna, tipografi, icon, serta seluruh reusable komponen. Contoh tampilan halaman tambahan dapat dilihat seperti gambar di bawah.
Warna
Untuk panduan warna, kami menggunakan warna yang dikembangkan dari logo Fakultas Hukum, Universitas Indonesia karena FH UI merupakan target pengguna produk kami kelak. Logo dari FH UI dapat dilihat pada gambar di bawah.
Design guideline kami mencakup warna default untuk:
Primary Color dan variannya.
Primary color merupakan warna yang paling sering ditampilkan di layar dan komponen aplikasi. Kami memilih warna merah karena FH UI sangat dikenal dengan warna merah nya yang terlihat dari warna logo atau makara. Dengan itu, warna merah disini dapat dijadikan branding utama dalam aplikasi.
Secondary Colors dan variannya.
Secondary color memberikan lebih banyak cara untuk aksen dan membedakan produk kami. Memiliki secondary color merupakan hal yang opsional dan harus diterapkan hemat untuk aksen bagian tertentu dari UI. Pada awalnya, kami hanya mengambil warna kuning sebagai secondary color, namun karena warna tersebut tidak terlalu umum dalam penggunaan warna “submit button” maka kami mengambil warna biru juga sebagai complementary color warna merah agar lebih merepresentasikan “submit button”.
Warna UI tambahan, seperti warna untuk latar belakang, error, dan tipografi.
Warna hitam digunakan terutama untuk headings dan body text. Sedangkan, warna putih digunakan untuk latar belakang layar dan negative space.
Berikut adalah warna-warna yang digunakan dalam pengembangan aplikasi Document Builder.
Tipografi
Selanjutnya untuk tipografi, kami mengambil panduan tipografi yang dimiliki Google Material Design yang dibuat pada tahun 2014. Berikut merupakan contoh Type Scale yang kami implementasikan pada pengembangan Document Builder. Type Scale ini menggunakan jenis huruf Roboto untuk semua headlines, subtitles, body, dan caption, menciptakan pengalaman tipografi yang kohesif. Hierarki dikomunikasikan melalui perbedaan bobot font (Light, Medium, Regular), ukuran, jarak huruf, dan huruf besar-kecil.
Headlines
Headlines merentang dari rentang 1 hingga 6. Headlines adalah teks terbesar di layar, disediakan untuk teks pendek atau penting.
Subtitles
Subtitles memiliki ukurang yang lebih kecil dari Headlines. Mereka biasanya dicadangkan untuk teks medium-emphasis yang panjangnya lebih pendek. Tipografi serif atau sans serif bekerja dengan baik untuk subtitles.
Body
Body hadir dalam rentang 1–2, dan biasanya digunakan untuk penulisan bentuk panjang karena berfungsi dengan baik untuk teks berukuran kecil. Untuk bagian teks yang lebih panjang, jenis huruf serif atau sans serif direkomendasikan.
Caption dan Overline
Teks caption dan overline (teks dengan garis di atasnya) adalah ukuran font terkecil. Mereka digunakan untuk menjelaskan keterangan dari sebuah gambar atau untuk memperkenalkan judul.
Button
Teks button adalah sebuah “call to action” atau ajakan untuk bertindak menggunakan berbagai jenis button (seperti text, outlined, dan contained buttons) dan dalam tabs, dialogs, dan cards. Pada Document Builder, berbeda dengan yang disampaikan oleh Google Material Design, kami tidak menggunakan jenis teks yang seluruh nya uppercase dalam tombol melainkan jenis teks title case biasa.
Icon dan Komponen
Sama seperti tipografi, icon dan komponen yang dimiliki aplikasi Document Builder juga diambil dari Google Material Design untuk melakukan penghematan waktu dalam mendesain icon dan komponen yang dibutuhkan. Google Material Design menyediakan berbagai jenis icon yang kamu pikirkan dan komponen yang sudah jelas dengan penjelasannya.
Selain itu, alasan kami menggunakan Google Material Design adalah untuk mempercepat dan mempermudah proses pengembangan web menggunakan komponen-komponen yang sudah tersedia dari React Material Design.
Komponen
Komponen Material adalah blok bangunan interaktif untuk membuat UI pengguna. Komponen-komponen tersebut dapat dilihat pada halaman ini.
Icon
Material icons adalah icon yang sederhana dan dibuat dengan indah untuk common actions dan item. Banyak cara penggunaan icon Google Material Design tersebut, salah satunya dengan mengunjungi halaman ini. Untuk pengembangan desain Document Builder, kami menggunakan plugin yang disediakan oleh Figma sendiri untuk mengakses icon-icon tersebut. Berikut merupakan tampilan plugin Material Design Icons di Figma.
Design guideline merupakan sebuah panduan yang didasarkan oleh kognisi manusia, atau hasil studi empiris atau kumpulan dari studi tertentu. Beberapa guidelines mungkin bertentangan, misalnya dalam konteks desain, desain berbeda untuk target user yang lebih tua dan user yang lebih muda. Karena alasan tersebut, design guideline tidak dapat digeneralisasikan.
