Mengatur Komposisi Warna Yang Tepat Untuk Desain Aplikasi dan Web

Rizal Nur Shiddiq
Jul 3, 2019 · 5 min read
Image for post
Image for post
Photo by Cody Davis on Unsplash

Warna merupakan komponen utama dalam suatu desain. Tidak mungkin suatu desain dikatakan baik namun tidak diberikan sentuhan warna, maka akan menjadi desain yang kurang sempurna. Bahkan tidak diminati, meskipun desain itu memiliki kompleksitas yang tinggi.

Maka dari itu, penggunaan warna merupakan suatu kewajiban dan mengetahui cara menentukan komposisinya adalah hal yang baik untuk menunjang kebutuhan desain.

Bicara tentang warna, ada teori yang biasa disebut Teori Brewster yang dikemukakan pada tahun 1831. Disebutkan bahwa warna dibagi menjadi 4 jenis; yaitu warna primer, warna sekunder, warna tersier, dan warna netral.

  • Warna Primer, yaitu warna original/dasar yang bukan campuran warna-warna lain; seperti merah, kuning, dan biru.
  • Warna Sekunder, yaitu campuran dari warna-warna primer dengan proporsi 1:1. Seperti warna hijau (campuran kuning dan biru), warna orange (campuran merah dan kuning), dll.
  • Warna Tersier, yaitu warna campuran warna primer dan sekunder. Misal warna jingga cerah atau sedikit kekuningan, merupakan campuran warna jinga dan kuning.
  • Warna Netral, yaitu campuran dari ketiga warna dasar diatas dengan proporsi 1:1:1. Semakin pekat akan menuju warna hitam.

Karena warna adalah salah satu komponen yang penting dalam pembuatan desain. Dibutuhkan pemikiran yang cerdas dalam menentukan komposisi warna yang tepat demi mendapatkan desain yang epik dan profesional. Apabila sembarangan dalam pemilihannya, kemungkinan gagal menghasilkan desain terbaik sangatlah besar.

Image for post
Image for post
Instagram @lubosvolkov

Perhatikan penjelasan diatas. Tiap-tiap warna memiliki karakternya tersendiri. Terlepas dari benar atau tidaknya fakta ini, tapi fakta ini bisa sedikit membantu untuk memberikan warna apa untuk desain yang kita buat.

Hal Yang Harus Diperhatikan Desainer

Sebelum membuat desain diharapkan kita sudah membuat wifeframe yang final. Hal ini harus diperhatikan agar saat proses pemilihan warna untuk desain nanti kita lebih fokus dan tidak merubah-rubah rancangan lagi. Lalu, apa lagi saja yang harus diperhatikan?

Perhatikan audiens kita. Perlu dipikirkan untuk siapa target audiens/user yang akan menggunakan aplikasi/web kita. Bila target yang kita tuju adalah anak-anak, maka warna-warna yang cerah dan terang seperti merah muda, kuning, atau orange bisa dipilih. Sehingga warna tersebut bisa menarik perhatian anak-anak tersebut karena sifatnya yang ceria dan colorful. Untuk keperluan brand atau perusahaan resmi, maka pilihlah warna-warna yang tegas, tidak mencolok dan dinamis. Begitupun bila audiens kita adalah pria atau wanita dewasa, maka pilihlah warna yang menggambarkan suasana hati mereka. Perhatikan gambar dibawah.

Image for post
Image for post
Instagram @lubosvolkov

Berikan setidaknya dua sentuhan warna untuk setiap desain kita. Pemilihan satu warna cenderung monoton dan membuat audiens kita bosan. Kemungkinan audiens meninggalkan aplikasi kita nanti sangatlah tinggi.

Ada sebuah platform yang sering saya gunakan untuk menentukan kombinasi warna yang tepat. Bahkan selalu menjadi rujukan saya disetiap desain yang dibuat.

Flat UI Colors

Terdapat banyak pilihan paket warna yang bisa kita ambil gratis untuk desain kita. Paket warna tersebut dinamai dengan berbagai nama-nama negara di dunia, seperti Aussie (Australia), British (UK), Canadian (Canada), dll.

Misalkan kita ingin memilih desain warna orange yang halus dan tidak membuat mata sakit. Kita bisa pilih paket warna Canadian atau paket yang lain sesuai selera kita. Jika sudah memilih paket warna tersebut, diusahakan untuk tidak mengambil warna di paket yang lain. Pemilihan paket ini justru membantu kita untuk tidak membuang waktu mencari warna yang lain, maka gunakanlah semaksimal mungkin untuk mengkombinasikan warna.

Canva Color Pallete

Beda hal dengan fitur dari Canva ini. Selain ada lebih banyak pilihan kombinasi warna, kita bisa menentukan sendiri warna yang dipilih dan nantinya canva akan merekomendasikan warna yang tepat untuk kombinasi warna yang kita pilih.

Misalkan kita cari kombinasi warna yang tepat untuk warna merah dengan kode hexa #ee5253.

Image for post
Image for post
https://www.canva.com/colors/color-palettes/

Setalah kita cari mengisi form untuk mencari kombinasi warna merah #ee5253, Canva akan memberikan setidaknya akan memberikan dua pilihan kombinasi warna yang bisa kita pilih. Seperti di FlatUIColors tadi, paket kombinasi warna ini jangan kita campurkan dengan paket yang lain. Percayalah, komposisi ini adalah resep yang pas.

Image for post
Image for post

Baiknya kita lebih kurangnya memiliki pengetahuan tentang sifat komposisi warna yang meliputi value, hue, dan saturation.

  • Value, menunjukkan tingkat keterangan warna dengan skala hitam putih.
  • Hue, menunjukkan variasi warna cerah seperti merah, hijau, kuning, biru, dsb (warna pelangi).
  • Saturation, menunjukkan kekuatan atau intensitas warna. Semakin terang suatu warna maka semakin kuat saturasinya.

Hal Yang Harus Dihindari Desainer

Diantara hal yang harus diperhatikan tadi, tidak bisa dilepaskan juga ada beberapa hal yang seorang desainer harus dihindari agar tidak merusak desain yang telah dibuat.

Sekalipun kita menyukai suatu warna semisal biru, jangan pernah melibatkan emosi kita yang belebihan bahwa setiap desain yang kita buat harus berwarna biru. Dilain kasus mungkin bisa digunakan, akan tetapi dengan sedikit mengesampingkan ego kita, besar kemungkinannya desain itu lebih memiliki value yang tinggi karena mendesain aplikasi/web tersebut berdasarkan brand perusahaan bukan berdasarkan ego kita.

Menggunakan warna primer saja (Merah, Kuning, Biru) besar kemungkinan membuat desain kita terlihat monoton, kaku dan kurang menarik. Cobalah eksplorasi dengan menambahkan warna lain yang cocok guna melatih kreatifitas kita.

Terakhir, tapi paling penting. Tidak konsisten saat menggunakan warna bisa membuat desain kita terlihat seperti pasar. Terlalu ramai dan bagi sebagian orang membuat sakit mata. Usahakan bentuk guideline yang baik dengan cara konsisten dalam setiap pemilihan warna. Jika yang dipilih adalah warna Kuning dan Jingga untuk halaman home, maka jangan kita coba merubahnya dengan misal warna Hijau dan Hitam di halaman yang lain.

Semoga Bermanfaat :)

Terima kasih kepada:

  1. https://blog.porinto.com/tips-menentukan-komposisi-warna/
  2. https://flatuicolors.com
  3. https://www.canva.com/colors/color-palettes/

UX Orbit Design

UX Orbit Insight adalah media belajar, berbagi, dan berkolaborasi.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store