How to Make UI Design Guideline
Здравствуйте!
Saat ini, banyak sekali designer yang membuat UI dengan visual yang sangat cantik, menarik perhatian dan mempunyai UX yang baik. Namun masih banyak desainer yang melupakan keefisienan dan kekonsistenan dari design mereka, seperti contohnya font size yang terlalu banyak dipakai atau font size yang sering kali berbeda disetiap halaman tapi dalam section yang sama, begitu juga dengan font family, type, spicing, color dll.
Tentu saja hal kecil seperti itu sangatlah penting untuk diperhatikan, sehingga akan membantu tim lain atau rekan kerja kita seperti designer atau developer dalam membuat atau mengembangkan sebuah produk.
Untuk membuat UI yang baik ini kita membutuhkan sebuah Design System yaitu kumpulan komponen yang dapat digunakan kembali, dipandu oleh standar yang jelas, yang dapat dirakit bersama untuk membangun sejumlah aplikasi. dengan adanya ini akan bisa menuntun kita membuat design dan mempermudah dalam merancang dan mengembangkan produk yang efisien, konsisten dan scalable.
Design Library
Design Library adalah kumpulan desain atau komponen yang dijadikan pedoman atau patokan untuk merancang sistem tersebut. Jadi bisa dikatakan Design Library ini adalah salah satu bagian dari Design System.
Sebelum membuat design library akan sangat baik jika kita mempelajari hal paling dasar atau struktur terkecil dari sebuah design yang sebut dengan Design Tokens.
“Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates.” source: spectrum.adobe.com
Kita akan membagi design tokens menjadi 3 bagian yang penting.
1. Typography
Hal yang harus diperhatikan dalam typografi adalah pemilihan jenis huruf, skala typografi (classic typographic scale) dan Line spacing/Line height.
Untuk designer yang belum bisa menentukan Line spacing/Line height bisa mengunjungi website ini: https://www.thegoodlineheight.com/
2. Spacing
Untuk menentukan spacing yang baik harus dilihat terlebih dahulu dari platform yang akan kita gunakan (Android, iOS atau web)
Sebagai contoh jika kita ingin membuat design untuk android, kita bisa menggunakan Material Design, spacing disini menggunakan kelipatan 8: 8px/16px/24px/32px/40px/48px/56px dan seterusnya untuk spacing antar elemen. jadi akan mempermudah designer dan developer untuk merancang produk nantinya.
3. Color
Hal yang penting dari warna disini adalah harus menyesuaikan dengan brand value, setelah itu baru memastikan warna yang digunakan harus kontras.
Ini sangat penting karna jika warna yang dipilih atau penggabungan warna antara typography dan background tidak cocok atau tidak sesuai maka akan sangat membuat tampilan UI kita terlihat buruk.
Untuk menentukan kontas yang baik dan memenuhi standar bisa mengikuti panduan dari Web Content Accessibility Guidelines (WCAG).
Setelah kita menentukan Design Tokens untuk digunakan, maka selanjutnya desain token tersebut bisa kita implementasikan kedalam design library kita. Disini kita akan menggunakan metode Atomic Design untuk merancang Design Library ini.
Apa itu Atomic Design?
Atomic Desain dibuat oleh Brad Frost, konsep ini pertama kali dirilis pada tahun 2016 lalu. Atomic design adalah salah satu metodelogi yang dapat digunakan untuk mempercepat proses pembuatan modular desain, dari yang paling terkecil hingga menjadi bagian yang lebih besar dan kompleks.
Ada lima struktur atau tingkatan berbeda dalam atomic design yaitu :
Atoms, Molecules, Organisms, Templates, Pages
1. Atoms
Atom merupakan elemen yang paling dasar dan menjadi bagian yang paling kecil dalam UI. Dalam pembangunan web elemen-elemen kecil, atau modulnya disebut atom. atau bisa dibilang gabungan dari design tokens menjadi sebuah atom. Contoh kategori atom antara lain adalah Warna, Typografi, Iconografi, Form, dan Button.
2. Molecules
Mengkombinasikan beberapa atoms menjadi molecules, Molekul memberikan fungsi dari atom. Bisa dilihat pada gambar diatas molekul ini terdiri dari beberapa atom/modul dasar yaitu: form, icon dan typografi. Dengan menyatukan tiap atom ini, makan terciptalah form “search” yang dapat berfungsi.
3. Organisms
Organisms adalah gabungan dari molekul yang disatukan dan membentuk bagian yang cukup kompleks dari suatu tampilan. Bagian ini disebut juga segmen. Contohnya adalah “Header”, organisme header ini terdari dari molekul menu, search, button dan lainnya.
Templates
Template terdiri dari beberapa organisme yang disatukan bersama dan membuat sebuah Halaman/Pages. Pada tahap ini kita dapat melihat desain mulai terbentuk dan bagaimana layout bergerak namun template disini masih bersifat dummy.
Pages
Tahapan terakhir dari atomic desain adalah Laman/Pages. Template yang disatukan dengan konten aslinya atau sudah diberi konten yang sebenarnya disebut Pages. Halaman ini adalah berada pada level High Fidelity. Pages adalah template yang berisikan final aset seperti video, image, konten dan dengan terisinya konten, kita dapat mereview dan melakukan Quality Checking apabila dibutuhkan. Selain itu dengan mengetes dan mereview Halaman yang telah dibuat akan membuat kita mengetahui apakah desain sistem yang kita buat sudah efektif atau belum.
Setelah kita memahami Atomic Design, kita bisa tahu bahwa atomic design ini memberikan metodologi yang jelas untuk menyusun sebuah Design Library yang nantinya akan menjadi sebuah Design System.
Keuntungan yang diperoleh dari penerapan metode ini juga sangat membantu dari segi designer dan developer yaitu akan mempermudah membuat komponen-komponen lain kedepannya, tentu saja ini akan menjadi lebih efisien dan konsisten nantinya, dan juga dengan menggunakan pendekatan ini akan sangat mudah di reusable atau digunakan kembali komponen-komponen yang sudah kita buat sebelumnya.
Sekian tulisan dari saya yang bisa saya bagikan, saya sudah menggunakan metode ini dan banyak hal baik yang saya rasakan, Silahkan berikan pertanyaan, masukan dan tambahan pada bagian response di bawah.
Design is a never ending process, you just run out of time.
Make sure you keep learning and improving your work.
Terima kasih telah meluangkan waktu untuk membaca! Спасибо!
До встречи!
Rizal Л Фикри
