Saturday, November 27, 2021
spot_imgspot_imgspot_imgspot_img

HomeVisual Design7 Tips Untuk Mengatur Warna untuk Desain UI Kamu

7 Tips Untuk Mengatur Warna untuk Desain UI Kamu

Warna penting. Warna adalah salah satu blok bangunan terpenting dari antarmuka apa pun (bersama dengan tipografi dan ruang). Mereka memiliki efek luar biasa pada persepsi keseluruhan produk digital.

WARNA ADALAH BAGIAN PENTING DARI BAHASA DESAIN VISUAL YANG ANDA GUNAKAN UNTUK BERKOMUNIKASI DENGAN PEMAKAI

Sangat penting untuk menyusun warna. Jika Anda tidak menyusun warna, Anda dapat merasa kewalahan dengan berapa banyak warna yang Anda gunakan pada saat Anda mencapai akhir proyek desain.

Image for post

Sistem warna dalam Desain Material

Membangun sistem warna yang konsisten – mengurangi jumlah warna yang digunakan, dan menghilangkan duplikat yang tidak perlu sepertinya adalah hal yang tepat untuk dilakukan. Tetapi bagaimana cara mencapai tujuan ini?

Berikut adalah tujuh tips praktis untuk penataan warna dalam proyek desain baru:

1. Melakukan inventaris antarmuka

Menggunakan terlalu banyak warna di UI adalah salah satu masalah paling umum bagi banyak desainer UI. Dan akar penyebab masalah ini adalah cara warna diatur. Bagi banyak tim, organisasi warna kacau-balau. Dan untuk memperkenalkan pendekatan yang lebih baik untuk bekerja dengan warna, direkomendasikan untuk memulai dengan inventaris antarmuka. Inventaris antarmuka adalah prosedur mengategorikan komponen yang menyusun aplikasi atau situs web Anda. Inventaris antarmuka akan menunjukkan berapa banyak warna yang Anda gunakan dalam produk Anda.

Jika Anda bekerja di situs web, gunakan alat seperti Statistik CSS untuk melihat berapa banyak warna unik yang Anda miliki di lembar gaya Anda.

Image for post
Medium memiliki 76 warna unik

Jika Anda membuat inventaris di Sketch, gunakan plugin Sketch-Style-Inventory untuk menggabungkan semua warna. Anda akan dapat menggabungkan gaya serupa.

Image for post

Inventarisasi Gaya untuk Sketsa

Untuk produk yang sudah ada, disarankan juga untuk memeriksa berapa kali setiap warna benar-benar digunakan dalam kode. Dengan melakukan itu, Anda akan melihat bahwa beberapa warna digunakan di banyak tempat berbeda, sementara yang lain hanya digunakan sekali. Wawasan yang Anda dapatkan akan membantu Anda mengatur palet Anda.

2. Biarkan warna merek menjadi dasar skema warna Anda

Jika Anda bekerja untuk merek mapan, kemungkinan besar merek tersebut memiliki palet warna yang mapan. Merupakan ide bagus untuk mengintegrasikan warna merek dalam UI produk Anda.

Cobalah untuk menggunakan warna merek utama untuk sebagian besar “chrome” pada aplikasi

Coba gunakan warna merek untuk elemen UI yang membuat struktur desain Anda – header, footer, menu, dll.

Image for post

Slack menggunakan warna mereknya untuk sidebar

Jika warna merek Anda berfungsi baik untuk latar belakang terang maupun gelap, Anda dapat menggunakannya sebagai warna tata letak untuk desain Anda.

3. Tentukan warna dasar
Bangun kulit putih dan hitam Anda

Ketika datang untuk memilih putih dan hitam, selalu lebih baik untuk tidak memilih versi warna ekstrim. Putih tidak harus putih absolut (#FFFFFF). Mirip dengan itu, hitam tidak harus hitam mutlak.

Tergantung pada seberapa ketat Anda ingin dengan palet warna Anda, Anda mungkin ingin memasukkan serangkaian warna (warna dicampur dengan putih) dan nuansa (warna dicampur dengan hitam). Tetapi berhati-hatilah! Memiliki terlalu banyak warna dan nuansa dapat membuat prosedur pemilihan warna lebih sulit bagi para desainer.

Temukan warna netral kontras rendah

Warna netral kontras rendah buruk untuk elemen yang membutuhkan pembacaan tetapi sangat baik untuk elemen seperti bidang input. Hal utama yang perlu diingat ketika mendesain elemen-elemen tersebut adalah membuatnya dapat dibedakan dari UI lainnya. Bidang input tidak perlu terlalu menonjol sehingga warna netral kontras rendah dapat membantu Anda membuat wadah UI yang sempurna.

Image for post

Instagram menggunakan abu-abu kontras rendah untuk bilah pencariannya
Batasi jumlah warna primer

Warna primer adalah warna yang paling sering ditampilkan di layar dan komponen aplikasi Anda. Skema warna tidak dapat memiliki banyak warna primer. Idealnya, Anda harus memiliki sejumlah kecil warna primer yang disetujui (1-3 primer yang mewakili merek Anda) dan warna aksen yang cukup.

4. Tentukan warna interaktif

Warna interaktif adalah warna yang kami gunakan untuk elemen interaktif – tombol, tautan, dan kontrol UI lainnya yang dapat diklik atau disentuh pengguna.

Batasi jumlah total warna interaktif

Jika memungkinkan, coba gunakan hanya satu warna sebagai warna interaktif utama Anda. Dengan melakukan itu, Anda akan membantu pengguna Anda menghafal warna ini.

Anda dapat membuat versi interaktif warna yang lebih terang dan gelap. Nuansa warna dapat membantu Anda menyampaikan status berbeda untuk elemen UI Anda – misalnya, keadaan ditekan / hover.

Image for post

Menggunakan versi berbeda dengan warna yang sama untuk menentukan status tombol yang berbeda
Berusaha keras untuk konsistensi

Mirip dengan tipografi dan spasi putih, warna dapat menjadi alat penolong yang bermanfaat bagi pengguna Anda. Pengguna akan tahu peran elemen UI hanya dengan melihatnya. Sebaiknya gunakan warna yang sama untuk tautan dan tombol. Dengan melakukan itu, Anda membantu pengguna Anda mengenali elemen-elemen interaktif.

Image for post

Warna teal (# 03DAC5) digunakan untuk menunjukkan elemen interaktif. Gambar dengan Desain Material
5. Tentukan warna-warna denotif

Warna denotif adalah warna yang berarti sesuatu. Anda harus memiliki warna untuk negara seperti kesalahan, peringatan, dan kesuksesan.

Warna status kesalahan

Merah biasanya digunakan untuk menunjukkan status kesalahan. Jika salah satu warna merek Anda berwarna merah, lebih baik untuk menghindari penggunaan warna yang sama persis untuk pesan kesalahan. Mengapa? Karena dengan melakukan itu, Anda membuat pengguna mengaitkan warna merek Anda dengan masalah.

Warna keadaan sukses

Kami biasanya menggunakan warna hijau untuk menunjukkan status keberhasilan. Jika salah satu warna merek Anda berwarna hijau, tidak apa-apa menggunakannya untuk keadaan sukses. Pengguna akan mengaitkan warna merek Anda dengan hasil positif.

Image for post
Evernote menggunakan warna mereknya untuk keadaan sukses
Batasi jumlah warna denotif

Mode gelap dengan cepat menjadi bagian penting dari UI modern. Desainer sering membuat dua versi UI — terang dan gelap.

Image for post
Mode gelap di Whatsapp UI. Gambar oleh The Verge

Dan ketika Anda memilih warna untuk kesalahan dan untuk kesuksesan, pastikan bahwa warna yang Anda pilih berfungsi baik untuk latar belakang kontras rendah dan tinggi. Dengan melakukan itu, Anda akan terhindar dari situasi ketika Anda perlu memilih dua warna berbeda – satu untuk mode biasa dan satu lagi untuk mode gelap.

Image for post

Warna status dinonaktifkan

Keadaan cacat secara tradisional berwarna abu-abu. Biasanya, desainer menggunakan warna opacity rendah untuk itu. Satu momen penting yang harus Anda ingat ketika memilih warna negara yang dinonaktifkan – pastikan warnanya memiliki cukup kontras, sehingga dapat dibaca oleh pengguna Anda.

WCAG MEMBUTUHKAN KONTRAS “SETIDAKNYA 4,5: 1” UNTUK PRESENTASI VISUAL TEKS DAN GAMBAR TEKS

Image for post

6. Hapus konvensi penamaan

Jika Anda menyimpan warna dalam sistem desain, pastikan untuk memberi nama yang jelas untuk setiap warna yang Anda gunakan. Nama warna harus mudah dipahami dan diingat. Baik perancang maupun pengembang harus dapat dengan mudah merujuk ke warna tertentu yang ditentukan dalam sistem.

Cobalah untuk menghindari penggunaan gradasi kata sifat (lightBlue, darkBlue); gunakan nama fungsional sebagai gantinya – nama yang menggambarkan warna berdasarkan tempat di UI.

Image for post

Nama warna dalam Sistem Desain Karbon
6. Aksesibilitas

Buat palet warna yang dapat diakses sehingga orang yang buta warna dapat menggunakan produk Anda.

AKSESIBILITAS ADALAH BAGIAN PENTING DARI DESAIN PRODUK

Memeriksa kontras warna

Ada berbagai jenis kontras warna yang dapat Anda gunakan untuk memastikan palet warna Anda berfungsi untuk semua orang yang akan menggunakan produk Anda.

7. Uji palet Anda

Sangat mudah untuk memilih skema warna saat Anda mengerjakan produk baru. Tetapi jauh lebih sulit untuk memperkenalkan perubahan dalam skema warna produk yang ada. Dalam beberapa kasus, mengubah warna yang ada tidak akan menimbulkan masalah, dalam kasus lain, Anda dapat merusak seluruh UI. Itu sebabnya palet warna yang Anda buat dan terapkan untuk UI harus diuji dengan cermat.

Yakinkan bahwa warna-warna yang Anda pilih akan bekerja secara harmonis bersama.

Meskipun dimungkinkan untuk menggunakan alat regresi visual untuk tujuan itu, Anda dapat mencapai hasil yang lebih baik dengan melakukan pengujian manual.

Image for post

Pengujian regresi visual menggunakan BackstopJS

sumber:uxplanet.org

 

RELATED ARTICLES
- Advertisment -

Most Popular

Recent Comments