Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Simak Beberapa Panduan Gaya UI untuk UX yang Lebih Baik

- Advertisement -
- Advertisement -
- Advertisement -

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

Sayangnya, ketika pekerja mulai membangun Cadillac bajakannya, ia menemukan bahwa banyak bagian yang tidak kompatibel karena fitur desain utama telah berubah selama bertahun-tahun. Dengan sedikit kecerdikan, mobil kustom ini bersatu, tetapi ini adalah kecelakaan yang tidak sedap dipandang yang menginspirasi cemoohan ke mana pun ia pergi.

Bagian belakang terlihat agak lucu juga.
Tapi kami menyatukannya dan ketika kami berhasil melewati
Yah, saat itulah kami menyadari bahwa kami hanya memiliki satu sirip ekor.

Contoh desain produk yang buruk karena kurangnya panduan gaya UI
Sama seperti Cadillac khusus Johnny Cash, produk digital tanpa Panduan Gaya UI rentan terhadap bagian yang tidak cocok dan desain yang terputus-putus.

Desainer dan pengembang pengalaman digital saat ini menghadapi tantangan yang sama. Berlalunya waktu adalah musuh yang tangguh yang mampu mendatangkan malapetaka pada 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 di perempat, bukan bertahun-tahun.

Jika tim bisnis atau desain tidak memiliki catatan bersama yang mendokumentasikan tampilan dan rasa 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 membawa kohesi ke antarmuka dan pengalaman pengguna produk digital. Pada intinya, mereka:

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

Sebelum kita melihat lebih dekat bagaimana menyusun 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. Usaha 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 dimasukkan.

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

Skema Tipografi

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

Tipografi saat membuat panduan gaya ui
Bagian ‘Tipografi’ dari Panduan Gaya UI Firefox memberikan instruksi terperinci untuk membuat teks yang dapat dibaca dengan hierarki desain yang jelas.

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 untuk digunakan ketika keadaan khusus muncul.

Tata Letak Responsif

Ketika produk digital dirancang di sekitar sistem grid responsif , Panduan Gaya UI harus mengatasi tata letak antarmuka di seluruh ukuran layar. Ini berarti termasuk catatan dan contoh untuk spasi, bantalan, dan penempatan. Juga bermanfaat untuk menunjukkan overlay sistem kisi produk terkait dengan berbagai ukuran layar.

Tujuan besar di sini adalah menyediakan konteks yang cukup untuk mencegah perlunya desain layar satu kali. 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. Daftar warna dan nilainya (HEX, UIColor) adalah awal yang baik, tetapi pasangan khusus dan contoh penggunaan juga harus diberikan.

Dokumen panduan gaya UX dan UI
Selain palet warna besar yang mencakup serangkaian warna sekunder yang lebih terang, IBM Style Guide IBM menunjukkan cara menerapkan skema spesifik (seperti contoh triadik ini) ke produk-produknya.

Jika Panduan Gaya UI mereferensikan serangkaian pedoman identitas merek , periksa untuk melihat apakah ada skema sekunder warna aksen yang lebih terang. Jika tidak, buat dokumen Anda sendiri dan. Pilihan nilai abu-abu juga berguna.

Tombol

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

Komponen UI Tambahan Yang Mungkin Dibutuhkan

  • Ikonografi
  • Tip dan popover alat
  • Modals
  • Elemen bentuk
  • Tabel Data
  • Menu navigasi
  • Grafik dan visualisasi data
  • Tab
  • Sakelar hidup-mati
  • Dialog
  • Daftar kisi konten
  • Daftar vertikal
  • Bilah alat
  • Pemetik tanggal dan waktu
  • Memuat indikator
  • Kotak centang
  • Lansiran
  • Menu tarik-turun
  • Bilah geser
  • Steppers
  • Pagination

Atur dan Kontekstualkan 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 referensi, navigasi, dan implementasi.

Daftar Isi

Daftar isi yang terorganisasi 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 yang tidak terduga lebih mudah untuk diselesaikan.

Sebagai contoh:

“Pada intinya, produk kami adalah tentang menampilkan gambar arsitektur terbaik dari seluruh dunia. Karena itu, tata letak antarmuka kami memprioritaskan gambar besar dan heboh di atas teks. Kapan pun memungkinkan, jadikan gambar sebagai titik fokus produk kami. “

Petunjuk Penempatan dan Pemosisian

Penempatan dan pemosisian sering dicakup dalam bagian ‘Tata Letak Responsif’. Bergantung pada kerumitan produk digital, instruksi dapat terdiri dari “aturan praktis” umum atau cukup terperinci.

Penempatan dan pemosisian panduan gaya UI
Di sini, Atlassian menjelaskan jarak antara baris teks dan tombol.

Lakukan dan Larangan

Seringkali, akan sangat membantu untuk menjabarkan dengan jelas garis besar desain dan larangan. Misalnya:

  • “ Do menggunakan versi wordmark putih logo perusahaan kami di footer antarmuka.”
  • ” Jangan gunakan versi warna alternatif dari tanda kata perusahaan kami di latar belakang hitam.”
Prinsip-prinsip desain antarmuka pengguna untuk disertakan saat membuat panduan gaya ui
Dalam Panduan Gaya UI Apple , Do’s and Don’ts dijelaskan dengan jelas dengan ilustrasi dan catatan konteks.

Do’s dan Don’ts mencegah debat dan menghemat waktu desain dan pengembangan, tetapi sebaiknya selalu berikan catatan konteks seperti ini:

“Daftar Larangan dan Larangan Mencakup berbagai keputusan desain penting, tetapi tidak memperhitungkan setiap kemungkinan penyalahgunaan elemen desain produk kami. Dengan pemikiran 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

Pedoman identitas merek biasanya merupakan dokumen statis, tetapi Panduan Gaya UI menyertakan elemen langsung yang berfungsi seperti pada produk akhir — artinya tombol berperilaku seperti tombol, menu dropdown benar-benar turun, dan animasi dianimasikan.

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

Buat Panduan Gaya UI Mudah Diakses untuk Tim Desain

Sekarang kami memahami cara membuat panduan gaya dan komponen serta fitur yang termasuk dalam Panduan Gaya UI, kami mengalihkan perhatian kami untuk berbagi dan berkomunikasi. Lebih khusus, apa saja pilihan untuk perumahan Panduan Gaya UI?

Secara tradisional, Panduan Gaya UI telah ada sebagai halaman web. Ini memberi para perancang dan pengembang akses yang mudah dan memungkinkan elemen-elemen desain berfungsi sebagaimana adanya 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 sedang berlangsung.

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

Figma

“Buat sistem desain dengan komponen UI tertaut yang dapat digunakan oleh seluruh tim. Dapatkan pembaruan saat perubahan dilakukan ke komponen bersama ”

Tahap

“Perpustakaan seperti seharusnya: Warna, Properti, & Elemen … bahkan waktu transisi – semuanya dalam komponen sekarang. Edit di tempat — semuanya adalah master. Timpa apa pun yang tidak Anda butuhkan, misalnya. “

Perpustakaan pola UI
Phase adalah alat desain digital terbaru yang menjanjikan alur kerja intuitif dan pustaka komponen.

InVision

“Semua komponen merek dan UX — termasuk dokumentasi penggunaan — dikelola di satu tempat. Perubahan menyinkronkan 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 sajikan iterasi desain di Galeri. Kemudian gunakan Mode Inspeksi untuk mengakses dokumentasi pengembang. “

Panduan Gaya UI Harus Mudah Digunakan

Saat menyusun 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 membutuhkan tata letak layar yang bersih dan rapi. Setiap layar harus ditata dengan baik, berlabel jelas, dan sangat mudah dibaca. Tidak ada manfaatnya membebani layar dengan informasi visual, jadi usahakan pengaturan yang minimal dan luas.

Panduan gaya hidup UX
Desain Bahan, Panduan Gaya UI Google , dikemas dengan informasi tetapi mudah dicerna berkat tata letak yang sederhana dan tidak berantakan.

Instruksi Singkat

Buat instruksi singkat dan manis. Hindari paragraf yang panjang, dan gunakan poin-poin . Jika memungkinkan, tunjukkan dengan visual dari kata-kata.

Skenario Penggunaan Informatif

Ingin tahu kapan harus menggunakan gaya slider ini? ‘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 jalan yang benar ke depan.

Pedoman desain UI dalam panduan gaya UI
Salesforce mendukung skenario penggunaan ‘Data Entry’ mereka dengan grafik sederhana.

Riwayat Versi yang Relevan

Produk digital sering diperbarui. Karena tim produk ingin memperbaiki setiap detail antarmuka terakhir, penting untuk terus mencatat bagaimana komponen desain telah berevolusi. Gunakan kebijaksanaan di sini — untuk bisnis yang lebih kecil dan tim produk, mempertahankan perpustakaan yang lengkap tentang sejarah versi mungkin tidak praktis.

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

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

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

Membuat panduan gaya UI, orang dapat menggunakan potongan kode
MailChimp dan merek besar lainnya memimpin revolusi desain produk dengan sistem bahasa desain mereka.

Pada saat yang sama, desain bukan hanya diperuntukkan bagi perusahaan besar. Beragam tim produk dan proyek digital akan diuntungkan oleh Panduan Gaya UI yang dibangun dengan baik, tetapi sumber daya (keuangan, waktu, dan bakat) berbeda dari satu bisnis ke bisnis lainnya.

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

sumber: toptal.com

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles