Ini Dia Cara Terbaik Membuat Palet Warna untuk UI Produk Kamu

Tahukah Anda bahwa hanya dibutuhkan 90 detik bagi pengguna untuk membuat penilaian tentang produk digital? Menariknya bagi kita sebagai desainer, sebagian besar penilaian ini didasarkan pada warna .

Selanjutnyaa, saya akan memberikan beberapa tips tentang cara menemukan warna yang bekerja sama, bagaimana Anda bisa mengujinya , dan akhirnya beberapa alat yang berguna .

Memilih palet warna untuk aplikasi Anda dapat dianggap sebagai bagian terpenting dari desain visual aplikasi, yang sangat memengaruhi persepsi pengguna tentang kualitas produk. Tapi, memilihnya tidak harus terlalu rumit. Saat saya mendesain antarmuka baru, pertimbangan utama untuk palet warna adalah: demografi pengguna, di mana dan bagaimana produk akan digunakan, dan pedoman branding perusahaan.

Saya akan menggunakan aplikasi yang saya rancang baru-baru ini, Doctoroo , sebagai contoh untuk menunjukkan berbagai langkah yang saya ambil dan mengapa. Doctoroo adalah aplikasi medis untuk Android yang memungkinkan pengguna memesan panggilan video dan mengatur janji temu dengan dokter.

Langkah pertama

Biasanya, saya mulai dengan membuat beberapa kata sifat yang menggambarkan produk dan nilai-nilai merek yang ingin saya gambarkan. Ini tidak pernah benar-benar bermain langsung ke dalam pilihan warna, tetapi berfungsi sebagai pedoman.

Untuk Doctoroo, saya datang dengan:

  • Andal
  • Stabil
  • Profesional
  • Segar
  • Modern

Untuk menghasilkan daftar Anda sendiri, tanyakan pada diri Anda: apakah produk perlu dianggap ramah? Kuat? Profesional? Canggih? Futuristik? atau mungkin lebih membumi? Jika Anda buntu, pikirkan tentang untuk siapa produk ini dirancang dan apa yang ingin Anda pikirkan atau katakan ketika mereka menggunakan versi yang sudah jadi.

Langkah kedua saya adalah menghasilkan warna primer – yang lainnya didasarkan pada ini.

Berlawanan dengan apa yang dikatakan oleh banyak sumber daya desain (dan apa yang saya pikirkan sejak lama), kebanyakan warna tidak membangkitkan emosi yang sangat spesifik. Sebagai gantinya, selera pribadi, pengalaman hidup, pertimbangan budaya, dan sejumlah faktor lainnya memengaruhi cara seseorang memandang suatu warna. Hampir tidak ada artinya mengatakan “merah berarti gairah”, atau bahwa warna apa pun diterjemahkan ke emosi tertentu (belum lagi pernyataan semacam ini hampir tidak memiliki bukti ilmiah yang mendukungnya).

Saat memilih warna primer, lebih penting untuk mempertimbangkan bagaimana audiens Anda akan bereaksi terhadap pilihan warna daripada warna itu sendiri. Saya memilih warna biru untuk Doctoroo sebagian besar karena itulah yang diharapkan pengguna dari aplikasi medis.

Anda seharusnya tidak menggunakan terlalu banyak warna – tetap berpegang pada sejumlah kecil yang bisa dilihat rata-rata orang dengan sekali pandang. Saya cenderung menggunakan palet yang sangat terbatas – satu atau dua warna primer yang bekerja bersama dengan baik, mungkin satu warna lagi untuk aksen, dan kemudian berbagai nuansa abu-abu yang lebih halus.

Ingat, produk akan menggunakan berbagai metode untuk menyampaikan informasi dan hierarki (ukuran, tata letak / posisi, font, kedekatan, dll.), Yang warnanya hanya satu.

Saturasi warna

Semakin jenuh (intens) warna, semakin menarik perhatian. Saya cenderung menggunakan warna yang kurang jenuh ketika saya ingin pengguna fokus pada tugas yang rumit atau pemikiran yang intensif, dan warna yang lebih kuat ketika mereka memiliki satu fungsi utama untuk diselesaikan.

Palet warna

Layar di sebelah kiri menggunakan satu warna jenuh karena hanya ada satu fungsi (pemesanan janji temu), sedangkan layar di sebelah kanan dirancang untuk dokter yang harus dapat melihat melalui alergi pasien dan riwayat kunjungan, itulah sebabnya saya menggunakan sebagian besar warna desaturated.

Diagram ini menjelaskan persepsi umum warna tergantung pada saturasi dan kecerahannya:

Diagram Warna

Saya tidak pernah menggunakan dua warna yang sangat jenuh bersama – ini sering hanya membuat mata orang lelah. Karena itu, saya selalu mencoba untuk memasukkan sedikit saturasi dalam warna abu-abu saya – warna skala abu-abu murni tidak ada di alam, dan tampaknya tidak alami bagi pengguna (walaupun jika itu yang Anda lakukan bukan masalah).

Untuk Doctoroo, saya memilih warna kuning yang kontras yang cerah dan jenuh untuk memberikan perasaan yang lebih bersahabat pada aplikasi. Sisa dari warna yang saya pilih adalah variasi desaturated dari warna biru primer, cara mudah untuk menghasilkan warna yang serasi dan memberikan produk koherensi tonal yang kuat.

Palet UI Tonal Coherence

Membuat Palet

Ada sejumlah cara tradisional untuk menemukan warna yang bekerja sama, tetapi yang selalu bekerja paling baik bagi saya adalah:

  • Berdekatan (pilih warna dasar dan pilih warna di sebelahnya)
  • Triad (gambar segitiga sama sisi di atas roda warna)
  • Shades (pilih warna dasar dan beberapa versi dengan saturasi berbeda)

Saya biasanya menemukan saya perlu menyesuaikan sedikit warna karena warna yang cocok secara matematis sempurna sering terlihat sangat buruk.

Alat Warna
Memilih warna yang serasi: triad, tonal, dan berdekatan.

Mirip dengan musisi yang menguji musik mereka pada sistem suara yang berbeda, coba desain Anda di berbagai perangkat dan layar untuk melihat apakah warna bekerja pada mereka semua, terutama di seluruh sistem operasi yang berbeda. Anda mungkin menemukan bahwa warna yang terlihat terbaik pada satu perangkat tidak terlihat begitu bagus di monitor yang berbeda atau komputer dengan kalibrasi warna yang berbeda.

Alat

Sayangnya saya masih belum menemukan pemilih palet warna yang sempurna. Favorit saya dulu adalah pemilih Kuler lama di Photoshop. Ada versi web sekarang, tetapi tidak ada kemudahan penggunaan plugin lama. Anda mungkin ingin mempertimbangkan alat-alat seperti  Paletton , tapi saya tidak suka antarmuka dan tidak menggunakannya sendiri.

The  pedoman desain materi adalah referensi besar untuk menerapkan warna untuk interface, meskipun banyak itu adalah akal sehat. Anda dapat menggunakan materialpalette.com untuk palet gaya-bahan dasar untuk aplikasi android.

Colourlovers.com adalah situs yang telah saya gunakan selama sekitar 12 tahun sekarang. Ini memiliki banyak pilihan warna dan palet yang dibuat pengguna, beberapa di antaranya sebenarnya cukup bagus. Coolor juga tampaknya menghasilkan palet yang bagus, tetapi saya tidak yakin bagaimana algoritma pemilihan warna mereka bekerja.

Warna dribbble juga baik untuk mendapatkan inspirasi – cukup pilih warna umum dan temukan palet yang berfungsi.

sumber: awwwards.com

Latest articles

12.6k Followers
Follow

Related articles