Panduan desain UI terbaik

Isi

• 01. Pilih tipografi Anda
• 02. Pilih palet yang tepat
• 03. Gaya tautan dan tombol
• 04. Buat komponen Anda
• 05. Mendokumentasikan dan berkolaborasi

Apa desain antarmuka pengguna? Pertanyaan yang lebih baik adalah, apa yang sebenarnya masuk ke dalam desain antarmuka pengguna? Estetika? Kegunaan? Aksesibilitas? Mereka semua? Bagaimana semua faktor ini bersatu untuk memungkinkan pengalaman pengguna yang optimal dan mana yang harus didahulukan?

Aksesibilitas harus selalu diutamakan, meletakkan dasar untuk kegunaan yang optimal (menggunakan pembuat situs web teratas akan membantu di sini). Dan kemudian, ketika UI dapat diakses dan digunakan, itu seharusnya sudah terlihat cukup baik dalam hal estetika (alat desain UI akan membantu di sini). Kemudian, untuk memastikan desain Anda berfungsi di semua level, Anda harus mengujinya secara menyeluruh, yang dapat Anda lakukan dengan pilihan alat pengujian pengguna terbaik kami. Mari kita lihat lebih dekat elemen dasar dari sebagian besar desain dan apa yang dapat dilakukan untuk memastikan konsistensi visual.

01. Pilih tipografi Anda

Tipografi yang bagus (seperti banyak aspek desain) bermuara pada aksesibilitas. Desain visual tentu saja menambah pengalaman pengguna secara keseluruhan, tetapi pada akhirnya, pengguna berinteraksi dengan UI, bukan melihatnya sebagai seni. Huruf yang terbaca menghasilkan kejelasan dan kata-kata yang dapat dibaca yang membantu pengguna mencerna konten secara efisien. Keduanya lebih penting daripada estetika visual apa pun.

Namun, tipografi yang dirancang dengan baik masih bisa memuaskan secara estetika. Helvetica hitam-putih (atau font yang serupa) bisa menjadi keindahan hanya setelah beberapa peningkatan tipografi sederhana. Dengan penyempurnaan, yang kami maksud adalah mengubah ukuran font, tinggi baris, spasi huruf, dan sebagainya - bukan font atau warna teks.

Tipografi 'Cantik' sebenarnya jelek jika tidak terbaca karena frustrasi selalu mengalahkan estetika. Desain hebat itu seimbang dan harmonis.

Seperti banyak aspek desain UI, menyempurnakan visual untuk menyeimbangkan aksesibilitas dan estetika bukanlah tantangannya. Tantangannya adalah menjaga konsistensi di seluruh desain. Konsistensi membentuk hierarki yang jelas antara elemen dengan berbagai kepentingan, yang pada gilirannya membantu pengguna memahami UI lebih cepat dan bahkan mencerna konten dengan lebih efisien.

Dalam hal keterbacaan dan keterbacaan, ukuran font minimum yang dapat diterima sebagaimana ditentukan oleh Pedoman Aksesibilitas Konten Web WCAG 2.0 adalah 18pt (atau 14pt tebal). Ukuran font terbaik untuk digunakan sangat bergantung pada font itu sendiri, tetapi penting untuk memperhatikan hierarki visual dan bagaimana ukuran dasar ini membedakan dirinya dari ringkasan dan tajuk (mis. h1>, h2>, h3>).

Dengan alat desain UI pilihan Anda (kami akan menggunakan InVision Studio), buat rangkaian lapisan teks (T) lalu sesuaikan semua ukuran untuk berkorelasi dengan template berikut:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Dengan InVision Studio (dan semua alat desain UI lainnya), ini dilakukan dengan menyesuaikan gaya menggunakan panel Inspektur di sisi kanan.

Selanjutnya pilih font Anda, tetapi hati-hati karena apa yang mungkin Anda perhatikan dengan beberapa font adalah 18px itu p> dan 22px h3> tidak terlihat jauh berbeda. Kami memiliki dua pilihan: menyesuaikan ukuran font atau mempertimbangkan font yang berbeda untuk tajuk. Pilih yang terakhir jika Anda mengantisipasi bahwa desain Anda akan banyak teks.

Ingatlah bahwa:

• Desain UI visual sering kali merupakan pendekatan firasat
• Tidak ada yang diputuskan; semuanya bisa berubah

Tinggi garis

Ketinggian baris yang optimal memastikan bahwa baris teks memiliki jarak yang cukup di antara mereka untuk mencapai tingkat keterbacaan yang layak. Ini menjadi semakin dikenal sebagai 'standar'; Alat Audit Mercusuar Google bahkan menyarankannya sebagai pemeriksaan manual (atau bahkan sebuah bendera jika teks berisi tautan yang mungkin terlalu berdekatan karena ketinggian garis yang kurang optimal).

Sekali lagi, WCAG membantu kita dengan yang satu ini, menyatakan bahwa tinggi garis harus 1,5x ukuran font. Jadi, dalam alat desain UI Anda di bawah 'Garis' (atau serupa), cukup kalikan ukuran font dengan - setidaknya - 1,5. Sebagai contoh, jika teks isi adalah 18px, maka tinggi baris akan menjadi 27px (18 * 1.5 - Anda juga dapat menjalankan operasi matematika secara langsung di Inspector). Namun, sekali lagi, berhati-hatilah - jika 1.6x terasa lebih pas, gunakan 1.6x. Ingatlah bahwa font yang berbeda akan menghasilkan hasil yang berbeda.

Terlalu dini untuk berpikir tentang penggunaan data nyata dalam desain kita, tetapi paling tidak, kita masih harus menggunakan data yang agak realistis (bahkan lorem ipsum). InVision Studio memiliki aplikasi data asli asli untuk membantu kami melihat seperti apa tipografi kami sebenarnya.

Spasi paragraf

Penspasian paragraf bukanlah gaya yang bisa kita deklarasikan menggunakan InVision Studio's Inspector. Sebagai gantinya, kita perlu menyelaraskan lapisan secara manual menggunakan Smart Guides (⌥). Mirip dengan tinggi garis, pengganda ajaibnya adalah 2x (dua kali lipat ukuran font). Sebagai contoh, jika ukuran font 18px, maka harus ada setidaknya spasi 36px sebelum mengarah ke blok teks berikutnya. Jarak huruf setidaknya harus 0,12.

Namun, kami tidak perlu mengkhawatirkan hal ini sampai kami mulai membuat komponen.

Gaya bersama

Jika alat desain UI Anda mendukungnya (InVision Studio belum), pertimbangkan untuk mengubah gaya tipografi ini menjadi 'Gaya Bersama' untuk membuatnya dapat digunakan kembali dengan cepat sambil memastikan konsistensi visual. Ini biasanya dilakukan melalui Inspektur.

02. Pilih palet yang tepat

Memilih warna yang sempurna untuk desain Anda jauh melampaui estetika: ini dapat menginformasikan seluruh hierarki situs Anda.

Dalam hal desain UI, warna biasanya menjadi salah satu hal pertama yang kami nikmati, tetapi kami diajari bahwa mendalami desain visual adalah hal yang buruk. Ini memang benar, namun dalam hal konsistensi visual, warna harus menjadi perhatian utama karena memainkan peran lain.

Warna dalam desain UI bisa sangat efektif, tetapi karena beberapa pengguna (sebenarnya banyak) menderita berbagai jenis disabilitas visual, warna ini tidak selalu dapat diandalkan. Namun demikian, ini tidak selalu tentang warna spesifik yang digunakan, melainkan jenis warnanya. Ini mungkin tidak benar dalam hal pencitraan merek karena warna digunakan untuk dampak emosional dalam hal ini, tetapi dalam desain UI, warna juga digunakan untuk mengomunikasikan maksud, makna, dan, tentu saja, hierarki visual.

01. Telanjang
Plugin Stark kompatibel dengan Sketch dan Adobe XD dan membantu Anda memeriksa kontras warna dan mensimulasikan buta warna langsung dari kanvas. Dukungan untuk Figma dan InVision Studio segera hadir.
02.Warna
Warna adalah sekumpulan 90 kombinasi warna yang memiliki jumlah kontras warna yang sesuai untuk memenuhi Pedoman WCAG 2.0 - beberapa di antaranya bahkan berhasil memenuhi standar AAA.
03. Proyek A11y
Proyek A11y adalah pusat besar untuk semua hal terkait aksesibilitas. Ini mencakup sumber daya, alat, tip, tutorial dan dibuat oleh pembuat plugin Stark dan menerima dana dari InVision.

Ketiga jenis warna tersebut

Warna memiliki makna, jadi penting untuk tidak memiliki terlalu banyak warna. Terlalu banyak arti menghasilkan lebih banyak hal yang harus dipahami dan diingat pengguna - belum lagi lebih banyak kombinasi warna yang perlu kita khawatirkan. Secara umum, ini akan menjadi format yang direkomendasikan:

• Warna ajakan bertindak (juga warna merek utama)
• Warna gelap netral (lebih baik untuk elemen UI atau mode gelap)
• Untuk semua hal di atas, variasi yang sedikit lebih terang dan lebih gelap

Ini memungkinkan yang berikut:

• Mode gelap akan mudah dicapai
• Warna CTA kami tidak akan pernah bertentangan dengan warna lain
• Dalam skenario apa pun, kami akan dapat menekankan dan tidak menekankan

Siapkan palet Anda

Dengan alat desain UI pilihan Anda, buat satu artboard yang cukup besar (ketuk A) untuk setiap warna (bernama 'Merek', 'Netral / Terang' dan 'Netral / Gelap'). Kemudian, di setiap artboard, buat persegi panjang tambahan yang lebih kecil yang menampilkan variasi warna yang lebih gelap dan lebih terang dan juga warna lain itu sendiri.

Kami akan mempertimbangkan sedikit lebih terang dan lebih gelap karena masing-masing 10 persen ekstra putih dan 10 persen ekstra hitam. Setelah selesai, tampilkan salinan gaya tipografi di setiap artboard. Warna lapisan teks ini harus cahaya netral, kecuali pada artboard cahaya netral di mana mereka harus gelap netral.

Kontras

Selanjutnya kita perlu memeriksa warna kita untuk kontras warna yang optimal. Ada berbagai alat yang dapat melakukan ini, misalnya plugin Stark untuk Sketch dan Adobe XD atau Kontras untuk macOS - namun, solusi online seperti Pemeriksa Kontras atau Pemeriksa Kontras Warna sudah cukup.

Periksa kontras warna untuk setiap kombinasi dan sesuaikan warnanya. Jika Anda tidak yakin warna apa yang akan digunakan, coba gunakan rekomendasi Color Safe.

03. Gaya tautan dan tombol

Ukuran

Tombol dan tautan, seperti tipografi, harus memiliki beberapa variasi. Bagaimanapun, tidak semua tindakan memiliki tingkat kepentingan yang sama dan, seperti yang telah kita bahas sebelumnya, warna adalah metode komunikasi yang tidak dapat diandalkan, sehingga tidak dapat menjadi metode utama untuk memengaruhi hierarki visual. Kita juga perlu mempermainkan ukuran.

Tes kemampuan visual adalah tes kegunaan yang digunakan untuk menentukan apakah target ketuk tampak dapat diklik. Sinkronkan desain dari Studio ke Freehand (⌘⇧F), kirim URL yang dihasilkan ke penguji dan minta mereka melingkari elemen yang mereka yakini dapat diklik.

Pengguna non-InVision Studio juga dapat menggunakan Freehand, tetapi pengguna InVision Studio dapat meluncurkan desain mereka ke Freehand dengan mulus dari InVision Studio, yang merupakan cara tercepat dan paling efisien untuk mendapatkan umpan balik visual dari pengguna.

Secara umum, kami menyarankan teks tombol dideklarasikan sebagai 18px (sama dengan teks isi) tetapi tombol itu sendiri memiliki tiga variasi ukuran:

• Normal: Tinggi 44px (sudut membulat: 5px)
• Besar: Tinggi 54px (sudut membulat: 10px)
• Ekstra besar: Tinggi 64px (sudut membulat: 15px)

Hal ini memungkinkan kami untuk membuat tombol tertentu tampak lebih penting tanpa bergantung pada warna dan juga tombol bersarang (misalnya, menggunakan tombol di dalam bidang formulir yang terlihat minimal).

Kedalaman

Terlepas dari apakah target ketuk adalah tombol atau bidang formulir, bayangan harus digunakan untuk meningkatkan kedalaman dan oleh karena itu menyarankan interaktivitas. Gaya bayangan tunggal untuk semua varian tombol dan bidang formulir bisa digunakan.

Interaktivitas

Setiap jenis tombol membutuhkan variasi untuk menunjukkan status hover-nya. Ini menjelaskan kepada pengguna bahwa apa yang mereka coba lakukan benar-benar baik-baik saja dan memastikan bahwa mereka melanjutkan tanpa penundaan.

Ini sebenarnya adalah salah satu aspek yang lebih kompleks dalam menjaga konsistensi visual karena warna sering kali menjadi gaya yang disukai untuk berubah dalam hal menciptakan keadaan. Untungnya, perubahan status ini bisa jadi relatif tidak kentara, jadi tidak masalah untuk mengubah warna menjadi variasi yang sedikit lebih terang atau lebih gelap - itulah gunanya. Ini juga berlaku untuk tautan.

Memutuskan untuk tidak melakukannya akan menyebabkan kita menggunakan warna yang sudah memiliki arti penting, mengakibatkan pengguna menjadi bingung, atau memutuskan untuk menggunakan warna lain. Memutuskan untuk menggunakan warna sekunder sama sekali tidak masalah tetapi itu harus disimpan untuk visual pemasaran daripada elemen UI. Lebih sedikit lebih banyak (dan lebih mudah).

Ingatlah untuk mengulangi langkah ini untuk setiap artboard. Jangan menyertakan tombol CTA bermerek pada artboard merek - nanti kita akan membahas apa yang terjadi jika kombinasi tertentu tidak berfungsi.

04. Buat komponen Anda

Komponen sangat menghemat waktu dan semua alat desain UI menawarkan fitur ini (misalnya di Sketch, disebut Simbol). Di Studio kita dapat membuat komponen dengan memilih semua lapisan yang akan membentuk komponen dan menggunakan ⌘K jalan pintas.

Menggunakan komponen

Wireframe sangat berguna, tidak hanya untuk mendesain UI dengan kegunaan tinggi tetapi juga untuk mencari tahu apa yang dibutuhkan UI kami dalam jangka panjang. Ini seperti pemeriksaan masa depan.

Ini tidak berarti bahwa kita perlu merancang banyak komponen atau bersiap untuk skenario apa pun yang mungkin, tetapi itu berarti bahwa kita perlu menerapkan sikap 'Bagaimana jika?'.

Misalnya, jika wireframe kita memanggil komponen 3x1 tetapi kita tahu bahwa isinya tidak diatur dalam batu, sedikit perenungan mungkin membuat kita bertanya-tanya: 'Bagaimana jika komponen ini akhirnya menjadi 4x1?'. Aturan praktisnya adalah: desain hanya untuk kebutuhan pengguna yang sudah ada tetapi mencoba membuat solusi yang relatif fleksibel. Jika tidak, kita akan berakhir dengan 'hutang desain' yang sangat berantakan di kemudian hari.

Sekarang kita dapat menggunakan kembali komponen ini dengan menyeretnya ke kanvas dari Libraries> Document di sisi kiri, meskipun perlu diingat bahwa alur kerja ini mungkin berbeda bergantung pada alat UI Anda.

Metode pembuatan panduan gaya ini (dan akhirnya membuat desain itu sendiri) berfungsi sangat baik dengan tata letak berbasis modular / kartu, meskipun 'area umum' seperti header, footer, dan navigasi juga merupakan kandidat yang tepat untuk sebuah komponen.

Seperti yang telah kita lakukan dengan gaya tipografi, warna dan tombol kita, kita harus ingat untuk mengatur komponen kita dengan hati-hati.

Memanfaatkan aturan kami

Sebelumnya kami telah membuat pernyataan tentang tidak menggunakan tombol CTA bermerek di atas warna merek, karena tombol CTA bermerek jelas perlu menonjol di antara yang lainnya. Jadi, bagaimana cara kita membuat komponen bermerek sambil tetap dapat menggunakan tombol CTA bermerek? Lagi pula, jika kita menggunakan tombol gelap netral untuk, katakanlah, tombol navigasi atau hanya tombol yang kurang penting, itu bukan pilihan, bukan?

Baik. Jadi ini akan menjadi peluang yang ideal untuk membuat komponen - khususnya, kombinasi tajuk + teks + tombol. Perhatikan bagaimana saya membuat latar belakang kartu dengan cahaya netral untuk mengaktifkan penggunaan tombol bermerek. Demikian pula, bidang formulir cahaya netral (bidang formulir biasanya berwarna putih karena model mental yang secara historis identik dengan formulir kertas) tidak tampak luar biasa pada latar belakang cahaya netral sehingga hanya dapat digunakan pada latar belakang gelap netral - baik secara langsung atau di dalam. komponen gelap netral. Inilah cara kami membuat desain kami fleksibel sambil mematuhi aturan kami dan menjaga konsistensi.

Tes stres

Idealnya, cara tercepat dan paling efektif untuk memastikan ketahanan dalam desain kami adalah dengan mengujinya. Menguji desain berarti menjadi kejam. Misalkan kita memiliki navigasi dengan jumlah X item navigasi karena itu adalah persyaratannya; untuk benar-benar memastikan fleksibilitas, coba ubah persyaratan ini dengan menambahkan lebih banyak item navigasi atau, untuk benar-benar menggunakan kunci pas, coba juga menambahkan item navigasi dengan hierarki visual yang lebih tinggi daripada yang lain. Apakah aturan ukuran, tipografi, dan warna kami memungkinkan hal seperti ini? Atau untuk menawarkan kegunaan yang optimal, apakah kita membutuhkan aturan lain?

Ingatlah bahwa ada perbedaan antara menambahkan aturan dan membengkokkan aturan. Lebih banyak kasus edge berarti lebih sedikit konsistensi, jadi sebagian besar waktu lebih baik demi kegunaan untuk hanya memikirkan kembali komponennya.

05. Mendokumentasikan dan berkolaborasi

Bagaimana cara membuat file desain kita lebih mudah digunakan baik untuk diri kita sendiri maupun desainer lain yang mungkin menggunakan file desain kita? Nah, menyimpannya dengan aman di penyimpanan awan bersama yang andal itu penting, seperti yang akan Anda ketahui.

Warna

Langkah pertama adalah menyimpan semua warna ke contoh 'Warna Dokumen' jika kita belum melakukannya - ini akan membuatnya lebih mudah diakses ketika kita perlu menerapkannya dalam desain kita.Untuk melakukannya, buka widget pemilih warna dari Inspektur, pilih 'Warna Dokumen' dari tarik-turun, lalu klik ikon + untuk menambahkan warna ke contoh. Ini bekerja dengan cara yang sama di sebagian besar alat UI.

Perpustakaan Bersama

Selanjutnya, kita perlu mengubah dokumen kita - lengkap dengan gaya tipografi, warna, tombol, area umum, dan komponen dasar - menjadi pustaka bersama.

Pada dasarnya ini berarti bahwa setiap elemen harus menjadi komponen, meskipun hanya terdiri dari satu lapisan. Klik tombol + ‌ di sisi kiri bilah samping Perpustakaan, lalu impor dokumen ini ke dalam dokumen baru. Benar: dokumen kami sekarang menjadi pustaka dan siap digunakan untuk mendesain UI dengan konsistensi yang terjamin.

InVision Studio agak terbatas dalam arti belum disinkronkan dengan alat Manajer Sistem Desain resmi InVision tetapi cukup mudah untuk menyimpan perpustakaan di Dropbox untuk digunakan dan diperbarui oleh desainer lain dari waktu ke waktu. Ketika perubahan dibuat (secara lokal atau jarak jauh), setiap file Studio yang menggunakan perpustakaan (sekali lagi, secara lokal atau jarak jauh) akan menanyakan apakah Anda ingin memperbarui warna dan komponen. Beginilah cara perpustakaan desain dikelola di seluruh tim.

Saat merancang antarmuka pengguna yang konsisten secara visual, gunakan kembali semuanya. Desain tombol, lalu gunakan tombol untuk membuat komponen tombol, lalu gunakan
komponen tombol untuk membuat komponen lain seperti peringatan dan dialog.

Hanya saja, jangan membuat komponen yang tidak diperlukan. Ingat, membangun perpustakaan adalah upaya kolaboratif yang berkelanjutan. Itu tidak harus diselesaikan sekaligus, diselesaikan oleh Anda sendiri atau diselesaikan selamanya. Itu hanya harus menyampaikan bahasa.

Desain dalam skala besar

Saat desain berkembang, mengelolanya menjadi lebih sulit. Ada berbagai penyesuaian yang mungkin ingin kami lakukan agar tetap efisien dan dapat dipelihara, terutama karena DSM InVision belum berfungsi dengan Studio.

Misalnya, kami mungkin ingin menggunakan lapisan teks untuk memberi anotasi pada perpustakaan kami sebagai sarana untuk menjelaskan kasus penggunaan berbagai elemen. Untuk gaya tipografi, kita bahkan bisa mengedit teks agar lebih deskriptif (misalnya "h1> / 1.3 / 44px"). Ini mengatakan itu h1>s harus 44px dan memiliki tinggi garis 1,3.

Desain Handoff

Alat handoff desain menampilkan berbagai gaya yang digunakan oleh setiap elemen dalam desain sehingga pengembang dapat membangun aplikasi atau situs web. Alat ini mencakup ikhtisar gaya dan juga salinan contoh 'warna dokumen'. Pengembang bahkan dapat menyalin gaya ini sebagai kode, yang sangat bagus jika Anda memutuskan untuk membuat dokumentasi desain tertulis dan Anda ingin menyertakan representasi cuplikan kode dari komponen tersebut.

Jika Anda khawatir tentang pemecahan masalah dan pengelolaan situs web, memastikan Anda mendapatkan layanan hosting web yang tepat akan membantu, tetapi untuk sistem desain Anda, alat handoff desain InVision, Inspect, adalah hal yang dapat digunakan. Untuk menggunakannya, kami mengklik tombol / ikon 'Publikasikan ke InVision' di InVision Studio, buka URL yang dihasilkan, lalu ketuk untuk beralih ke Mode Pemeriksaan. Sangat nyaman.

Konten ini awalnya muncul di majalah net.