Membuat Panduan Gaya UI untuk UX yang Lebih Baik

Dengarkan versi audio dari artikel ini

Pastikan Desain Produk dan Pengalaman Pengguna yang Kohesif

Pada tahun 1976, Johnny Cash merilis One Piece at a Time , sebuah lagu yang menceritakan kisah seorang pekerja mobil Detroit yang menghabiskan dua puluh tahun mengumpulkan suku cadang Cadillac yang dicuri dari jalur perakitan.

Sayangnya, ketika pekerja mulai membangun Cadillac bajakan, ia menemukan bahwa banyak bagian yang tidak kompatibel karena fitur desain utama telah berubah selama bertahun-tahun. Dengan sedikit kecerdikan, mobil kustom datang bersama-sama, tapi itu adalah campuran tak sedap dipandang yang mengilhami ejekan di mana pun ia pergi.

Bagian belakangnya juga terlihat agak lucu
Tapi kami menyatukannya dan ketika kami berhasil melewatinya
Nah, saat itulah kami menyadari bahwa kami hanya memiliki satu sirip ekor.

Desainer dan pengembang pengalaman digital saat ini menghadapi tantangan serupa. Perjalanan waktu merupakan musuh tangguh yang mampu mendatangkan malapetaka bagi kelangsungan produk digital. Seiring waktu, anggota tim datang dan pergi, tren berkembang, dan fitur berubah. Selain itu, langkah cepat lanskap digital modern kita berarti bahwa inovasi produk terjadi dalam hitungan kuartal, bukan tahun.

Jika tim bisnis atau desain tidak memiliki catatan bersama yang mendokumentasikan tampilan dan nuansa produk yang diinginkan, inkonsistensi visual dan pengalaman akan muncul, pengguna akan menjadi frustrasi, dan reputasi merek akan terpukul.

Panduan Gaya UI adalah alat desain dan pengembangan yang menyatukan antarmuka dan pengalaman pengguna produk digital. Pada intinya, mereka:

• Catat semua elemen desain dan interaksi yang terjadi dalam suatu produk
• Buat daftar komponen UI penting seperti tombol, tipografi, warna, menu navigasi, dll.
• Dokumentasikan komponen UX penting seperti status hover, isian dropdown, animasi, dll.
• Berisi elemen langsung dan cuplikan kode untuk referensi dan penggunaan pengembang

Sebelum kita melihat lebih dekat cara merakit Panduan Gaya UI tingkat ahli, penting untuk dipahami bahwa tidak ada pendekatan satu ukuran untuk semua. Nilai panduan gaya melampaui merek besar dengan tim produk besar. Bisnis menengah hingga kecil yang mencari pengalaman digital yang konsisten juga mendapat manfaat ketika Panduan Gaya UI dibuat khusus untuk kebutuhan spesifik mereka.

Sertakan Komponen Desain Penting Ini dalam Panduan Gaya UI

Desainer yang akrab dengan pedoman identitas merek seharusnya tidak memiliki masalah transisi ke Panduan Gaya UI karena ada banyak tumpang tindih dengan banyak komponen desain penting yang harus disertakan.

Kiat Pro: Hanya mendokumentasikan komponen desain yang relevan. Informasi asing membuat Panduan Gaya UI membengkak dan sulit digunakan.

Skema Tipografi

Tipografi adalah salah satu elemen desain antarmuka yang paling umum, jadi tidak cukup hanya mencantumkan nama tipografi yang digunakan dalam suatu produk. Instruksi yang jelas harus diberikan untuk Judul, Subtitel, Judul (H1, H2, H3), Teks Isi, dan Teks.

Selain itu, ukuran font harus disediakan, bobot ditunjukkan, dan gaya ditentukan. Ketinggian garis dan kerning juga diperlukan, dan merupakan ide bagus untuk memilih font masuk yang akan digunakan saat keadaan khusus muncul.

Tata Letak Responsif

Saat produk digital dirancang di seputar sistem kisi responsif, Panduan Gaya UI harus membahas tata letak antarmuka di seluruh ukuran layar. Ini berarti termasuk catatan dan contoh untuk spasi, padding, dan penempatan. Ini juga membantu untuk menunjukkan overlay sistem grid produk dalam kaitannya dengan ukuran layar yang berbeda.

Tujuan besar di sini adalah menyediakan konteks yang cukup untuk mencegah kebutuhan akan desain layar sekali pakai. Seiring waktu, ini menambah dan merusak kohesi produk digital.

Palet warna

Salah satu cara tercepat untuk merusak antarmuka adalah penggunaan warna yang tidak konsisten, sehingga kombinasi warna perlu didefinisikan dengan jelas. Mencantumkan warna dan nilainya (HEX, UIColor) adalah awal yang baik, tetapi pasangan khusus dan contoh penggunaan juga harus diberikan.

Jika Panduan Gaya UI merujuk pada sekumpulan pedoman identitas merek, periksa untuk melihat apakah skema sekunder warna aksen yang lebih terang tersedia. Jika tidak, buat sendiri dan dokumen. Pilihan nilai abu-abu juga berguna.

tombol

Hampir setiap antarmuka menyertakan tombol, jadi luangkan waktu untuk mendokumentasikan ukuran, gaya, warna, penempatan, spasi, dan elemen tipografinya. Jika berbagai tombol digunakan dalam konteks yang berbeda, jelaskan juga.

Komponen UI Tambahan Yang Mungkin Dibutuhkan

• Ikonografi
• Tooltip dan popover
• Modal
• Elemen bentuk
• Tabel Data
• Menu navigasi
• Grafik dan visualisasi data
• tab
• Sakelar hidup-mati
• Dialog
• Daftar kisi konten
• Daftar vertikal
• Toolbar
• Pemilih tanggal dan waktu
• Memuat indikator
• kotak centang
• Peringatan
• Menu tarik-turun
• Penggeser
• Stepper
• paginasi

Mengatur dan Mengkontekstualisasikan Instruksi Desain

Selain komponen UI yang harus dimiliki, ada sejumlah fitur praktis yang membuat Panduan Gaya UI lebih mudah bagi bisnis dan tim desain untuk dirujuk, dinavigasi, dan diimplementasikan.

Daftar isi

Daftar isi yang terorganisir dengan baik dan ditandai dengan jelas adalah cara sederhana untuk membantu semua orang dengan cepat menemukan apa yang ada di dalam dokumen.

Catatan Konteks

Tidak mungkin untuk memprediksi setiap keputusan desain bermasalah yang mungkin muncul selama masa pakai produk, jadi mengartikulasikan alasan desain di balik komponen UI yang sering digunakan dapat membuat skenario tak terduga lebih mudah diselesaikan.

Sebagai contoh:

“Pada intinya, produk kami adalah tentang menampilkan gambar arsitektur terbaik dari seluruh dunia. Karena alasan itu, tata letak antarmuka kami memprioritaskan gambar besar dan heboh daripada teks. Jika memungkinkan, jadikan gambar sebagai titik fokus produk kami.”

Jarak dan Petunjuk Pemosisian

Spasi dan pemosisian sering dibahas di bagian 'Tata Letak Responsif'. Bergantung pada kerumitan produk digital, instruksi dapat terdiri dari "aturan praktis" umum atau cukup terperinci.

Yang harus dan yang tidak boleh dilakukan

Seringkali, akan sangat membantu untuk secara jelas menguraikan desain yang harus dan yang tidak boleh dilakukan. Contohnya:

• “ Gunakan versi tanda kata putih dari logo perusahaan kami di footer antarmuka.”
• “ Jangan gunakan versi warna alternatif dari tanda kata perusahaan kami pada latar belakang hitam.”

Anjuran dan Larangan mencegah perdebatan dan menghemat waktu desain dan pengembangan, tetapi sebaiknya berikan catatan konteks seperti ini:

“Daftar Anjuran dan Larangan ini mencakup berbagai keputusan desain penting, tetapi tidak memperhitungkan setiap kemungkinan penyalahgunaan elemen desain produk kami. Dengan mengingat hal ini, gunakan penilaian terbaik ketika ketidakpastian muncul, dan buat pilihan yang secara akurat mencerminkan keseluruhan tampilan dan nuansa produk kami.”

Elemen Langsung dan Cuplikan Kode

Panduan identitas merek biasanya berupa dokumen statis, tetapi Panduan Gaya UI menyertakan elemen langsung yang beroperasi seperti pada produk akhir—artinya tombol berperilaku seperti tombol, menu tarik-turun sebenarnya turun, dan animasi dianimasikan.

Cuplikan kode memungkinkan pengembang untuk dengan cepat menyalin dan menempelkan kode elemen langsung ke back-end produk.

Jadikan Panduan Gaya UI Mudah Diakses untuk Tim Desain

Sekarang setelah kami memahami cara membuat panduan gaya dan komponen serta fitur yang disertakan dalam Panduan Gaya UI, kami mengalihkan perhatian kami ke berbagi dan komunikasi. Lebih khusus lagi, apa saja opsi untuk menampung Panduan Gaya UI?

Secara tradisional, Panduan Gaya UI telah ada sebagai halaman web. Ini memberi desainer dan pengembang akses mudah dan memungkinkan elemen desain berfungsi seperti yang akan mereka lakukan dalam produk.

Baru-baru ini, beberapa platform berbasis cloud telah muncul, memungkinkan tim untuk merancang, membuat prototipe, dan menguji produk secara kolaboratif. Platform yang sama ini juga mampu menampung Panduan Gaya UI dan memungkinkan anggota tim untuk bertukar umpan balik dan ide yang berkelanjutan.

Mari kita lihat bagaimana beberapa platform ini menjelaskan pendekatan mereka terhadap Panduan Gaya UI.

gambar

“Buat sistem desain dengan komponen UI tertaut yang dapat digunakan seluruh tim. Dapatkan pembaruan saat ada perubahan pada komponen yang dibagikan”

Fase

“Perpustakaan bagaimana seharusnya: Warna, Properti, & Elemen…bahkan waktu transisi — semuanya ada dalam komponen sekarang. Edit di tempat—semuanya adalah master. Ganti apa pun yang tidak Anda butuhkan, per-instance.”

InVision

“Semua komponen merek dan UX—termasuk dokumentasi penggunaan—dikelola di satu tempat. Perubahan disinkronkan ke seluruh tim, dan desainer dapat beralih ke versi terbaru atau mengembalikan pembaruan kapan saja.”

Material.io

“Buat tema Material Anda sendiri dan buat perpustakaan simbol bermerek dengan menerapkan perubahan gaya pada warna, bentuk, dan tipografi. Bagikan, unggah, dan presentasikan iterasi desain di Galeri. Kemudian gunakan Inspect Mode untuk mengakses dokumentasi developer.”

Panduan Gaya UI Harus Mudah Digunakan

Saat merakit Panduan Gaya UI, komunikasi tidak dapat diterima begitu saja. Tim produk terdiri dari orang-orang dari berbagai disiplin ilmu, latar belakang budaya, dan pengalaman profesional. Gunakan prinsip-prinsip ini untuk memastikan kejelasan dan kemudahan penggunaan.

Tata Letak Sederhana

Panduan Gaya UI memerlukan tata letak layar yang bersih dan rapi. Setiap layar harus diatur dengan baik, diberi label dengan jelas, dan sangat mudah dibaca. Tidak ada gunanya membebani layar dengan informasi visual, jadi bidik pengaturan yang minimal dan luas.

Instruksi Singkat

Jaga agar instruksi tetap singkat dan manis. Hindari paragraf yang panjang, dan gunakan poin-poin. Jika memungkinkan, tunjukkan dengan visual di atas kata-kata.

Skenario Penggunaan Informatif

Ingin tahu kapan harus menggunakan gaya penggeser ini di atas yang itu? 'Gunakan skenario' menyelesaikan kebingungan semacam ini. Sekali lagi, visual lebih kuat daripada kata-kata di sini, jadi berikan contoh yang dengan jelas menunjukkan skenario dan jalur yang tepat ke depan.

Riwayat Versi yang Relevan

Produk digital sering diperbarui. Saat tim produk berupaya menyempurnakan setiap detail antarmuka terakhir, penting untuk menyimpan catatan berkelanjutan tentang bagaimana komponen desain telah berevolusi. Gunakan kebijaksanaan di sini—untuk bisnis yang lebih kecil dan tim produk, mempertahankan pustaka riwayat versi yang ekstensif mungkin tidak praktis.

Panduan Gaya UI Adalah Sumber Daya Berharga dan Alat Desain yang Kuat

Tim desain dan pengembangan kontemporer menghargai efisiensi dan kolaborasi multidisiplin—seperti yang dibuktikan oleh sistem bahasa desain yang dipuji oleh merek besar seperti MailChimp, Google, dan Salesforce.

Sistem bahasa desain memungkinkan beragam tim yang mengerjakan produk digital canggih untuk berkomunikasi menggunakan bahasa visual standar. Panduan Gaya UI dijalin ke dalam struktur sistem bahasa desain dan berfungsi sebagai alat yang dapat diandalkan untuk iterasi cepat dan pengalaman digital yang konsisten.

Pada saat yang sama, desain bukanlah pengejaran yang hanya diperuntukkan bagi perusahaan besar. Beragam tim produk dan proyek digital dapat memperoleh manfaat dari Panduan Gaya UI yang dibangun dengan baik, tetapi sumber daya (keuangan, waktu, dan bakat) bervariasi dari bisnis ke bisnis.

Karena alasan ini, Panduan Gaya UI paling berguna saat disesuaikan dengan kebutuhan bisnis individu dan tim desain. Tujuan tertinggi dari setiap Panduan Gaya UI adalah keseimbangan kejelasan dan kepraktisan yang mengarah pada pengalaman pengguna yang menyenangkan secara konsisten.

Bacaan lebih lanjut di Blog Desain Toptal:

• Gaya Jenis Huruf untuk Desain Web dan Cetak
• Desain Responsif – Praktik Terbaik dan Pertimbangan
• Mengapa Startup Membutuhkan Styleguide
• Kegunaan Ikon dan Praktik Terbaik Desain
• Gunakan Inspirasi Anda – Panduan untuk Papan Suasana Hati