7 Aturan untuk Skema Warna Situs Web

Warna adalah hal pertama yang diperhatikan orang saat mengunjungi situs Anda, dan skema warna Anda dapat memberi pengaruh besar pada gaya dan konsistensi. Pelajari cara memilih palet warna yang tepat, dan kerjakan ke dalam sistem desain situs Anda.
Seperti yang dapat dikatakan oleh desainer berpengalaman dari semua latar belakang, skema warna membutuhkan banyak pemikiran dan pertimbangan dalam alur kerja desain pembuat web. Karena besarnya cakupan topik ini, ada banyak praktik terbaik yang harus dikuasai untuk menciptakan skema warna yang sempurna. Setelah memahami pentingnya skema warna dalam proses desain situs web, kami akan menjadi lebih siap untuk pengambilan keputusan terkait desain di masa depan dan karier kami sebagai pembuat web.

Dalam hal pencitraan merek, khususnya, skema warna hampir selalu merupakan komponen kunci dalam sistem desain atau panduan gaya merek , yang merupakan seperangkat pedoman yang menentukan kepribadian merek, pesan merek, aset visual, dan aset konten. Branding, seperti yang kita ketahui, adalah salah satu komponen terpenting dalam proses desain website. Karenanya, palet warna yang ditentukan dan dibuat dengan cermat akan memperkuat identitas merek kita sehingga situs web kita dan kontennya menjadi aset merek profesional yang dipoles.

Ada banyak praktik terbaik dan “aturan” yang, jika diberlakukan oleh pembuat web, akan memaksimalkan potensi keterampilan desain web mereka dan mewakili prestise dan kompetensi mereka sebagai desainer web. Saatnya untuk mempelajari dan memahami betapa berharganya skema warna situs web dalam desain situs web dan aturan yang dapat Anda ikuti untuk menjadikan milik Anda yang terbaik.

Apa Itu Skema Warna?

Skema warna situs web adalah kumpulan warna yang dipilih desainer untuk desain situs web mereka. Juga dikenal sebagai palet warna, skema warna dapat menyertakan warna sesedikit atau sebanyak yang diinginkan oleh desainer. Setiap warna dapat digunakan untuk berbagai elemen di seluruh situs web, yang berarti warna yang sama dapat digunakan untuk berbagai jenis komponen.

Meskipun demikian, palet warna umumnya dibagi menjadi dua set warna: primer dan sekunder. Warna primer pada umumnya adalah warna yang lebih dominan di situs, memperhitungkan warna latar belakang, warna logo, warna menu, dll., Dan warna sekunder sering digunakan sebagai warna aksen, di antara kasus penggunaan lainnya. Sangat sering, Anda juga akan melihat bahwa palet warna akan menyertakan beberapa corak dengan warna yang sama, yang memberikan situs web perasaan yang bervariasi namun konsisten di seluruh desainnya.

Konsistensi sebenarnya merupakan salah satu nilai fundamental dalam membuat skema warna untuk website Anda. Karena kepribadian merek sangat penting untuk situs web dan bisnis yang sukses, memiliki palet warna yang konsisten memperkuat identitas merek Anda, karena penggunaan warna dan gaya yang berulang akan menciptakan asosiasi antara merek dan audiens Anda.

Mengapa Skema Warna Penting?

Mereka Menunjukkan Identitas Visual Anda

Pilihan skema warna penting Anda menjadi identitas visual Anda, dan begitulah merek Anda akan beresonansi di benak pengunjung dan calon pelanggan Anda, atau dikenal sebagai pengenalan merek. Bentuk identitas visual ini terwujud menjadi media komunikasi antara Anda dan audiens target Anda, karena persona pengguna yang berbeda akan ditarik ke berbagai jenis palet warna. Skema warna juga memvisualisasikan pesan merek Anda, itulah sebabnya skema warna memengaruhi sebagian besar pengalaman pengguna Anda.

Mereka Membuat Kesan Pertama

Sebagai pembuat web, kita tahu bahwa sementara kita merancang (dan mendesain ulang) situs web kita di belakang pikiran kita, kita sering berpikir, bahkan jika secara tidak sadar, “kesan pertama seperti apa desain ini terhadap pengunjung saya?”. Itulah salah satu hal utama skema warna situs web: kesan pertama. Hal ini terbukti karena dalam satu survei yang dilakukan pada tahun 2018, 94% responden mengatakan bahwa kesan pertama mereka terhadap sebuah situs terkait dengan desain.

Mereka Menciptakan Koneksi Emosional

Akhirnya, meski Anda tidak menyadarinya pada awalnya, palet warna yang berbeda memicu emosi dan asosiasi yang berbeda di mata yang melihatnya. Bergantung pada bagaimana Anda ingin berkomunikasi dengan audiens dan pengunjung, pilihan warna Anda akan memainkan peran yang kuat dalam dinamika “percakapan” Anda dan dalam membentuk suara dan nada Anda. Topik psikologi warna adalah dunianya sendiri, yang akan segera kita diskusikan.

7 Aturan untuk Membuat Skema Warna Situs Web

1. Mengenal Roda Warna

Gambar diambil dari: tubikstudio.com

Dasar-dasar teori warna dimulai dengan memahami tiga kelompok yang termasuk dalam roda warna: primer, sekunder, dan tersier. Warna primer, merah, biru, dan kuning, adalah warna dasar roda warna, dan semua warna lainnya berasal dari ketiganya. Berikutnya, warna sekunder. Warna sekunder adalah apa yang Anda dapatkan saat Anda mencampurkan salah satu dari tiga warna primer, atau dikenal sebagai oranye, hijau, dan ungu. Terakhir, ada warna tersier, juga disebut sebagai “warna tengah”. Inilah yang Anda dapatkan jika Anda menggabungkan warna primer dan warna sekunder. Contohnya adalah merah-oranye, kuning-hijau, atau biru-ungu. 

Memahami hubungan antar warna tidak berhenti sampai di sini. Tapi sekarang setelah kita menyadari bagaimana warna terbentuk, kita bisa mendefinisikan bagaimana mereka “berinteraksi” satu sama lain, atau dengan kata lain, bagaimana mereka bekerja sama, dan bagaimana kita membangun kombinasi warna kita sendiri. 

Ironisnya, meskipun jenis hubungan antara warna pada roda warna termasuk dalam “kategori” hubungan konkret, ada juga banyak pilihan tentang bagaimana warna-warna ini dapat digabungkan satu sama lain, dan di sanalah jenis kombinasi warna berperan.

2. Pahami Kombinasi Warna

Gambar diambil dari: 99designs.com

Sama seperti setiap warna memiliki kepribadian dan makna tersendiri, hal yang sama juga berlaku untuk hubungan antara setiap warna. Saat Anda memilih kombinasi warna, Anda sering menyampaikan pesan atau konsep tertentu kepada pengunjung situs web Anda, tergantung pada bagaimana kombinasi “kepribadian” warna tersebut.

Jika, misalnya, jika Anda memilih skema warna pelengkap yang mencakup merah dan biru, merah, yang mewakili urgensi dan kekuatan, dan biru, yang mewakili kedamaian dan kesetiaan, hasil akhir Anda adalah perpaduan atmosfer yang kuat, kesetiaan dan stabilitas yang akan datang.

Alternatifnya, jika Anda memilih dua atau lebih warna yang menghasilkan keseimbangan yang harmonis daripada kontras, Anda menciptakan getaran yang sama sekali berbeda. Terserah Anda sebagai desainer web untuk memutuskan jenis kombinasi warna mana yang lebih cocok untuk situs web Anda.

Analog: Warna Berdampingan

Skema warna analogi terdiri dari tiga warna yang bersebelahan langsung pada roda warna 12-spoke. Desainer web sering memilih palet warna analog saat ingin membuat situs web yang modern namun canggih. Misalnya, skema warna analog yang terdiri dari merah, oranye merah, dan oranye muda akan menekankan hubungan dinamis antara merah dan oranye terang.

Pelengkap: Lawan Menarik

Contoh warna pelengkap adalah merah dan hijau, biru dan kuning, biru dan oranye, merah dan biru, dan banyak lagi. Persamaan yang dimiliki pasangan ini adalah bahwa keduanya berlawanan satu sama lain, dan Anda dapat mengidentifikasinya dengan mencari dua warna yang berseberangan langsung pada roda warna. Dalam praktiknya, pentingnya kombinasi warna primer dalam desain web adalah karena terdapat kontras yang tajam di antara keduanya, kombinasi warna tersebut dapat membuat satu warna, terutama warna aksen, menonjol.

Dalam konteks desain situs web, penggunaan warna pelengkap memiliki nilai yang tinggi untuk elemen seperti tombol atau menu navigasi . Jika tujuan Anda adalah agar pengunjung melihat tombol dan mengkliknya, menggunakan skema warna pelengkap sebagai warna aksen untuk teks dan latar belakangnya, kemungkinan besar akan menarik perhatian pengguna karena kontras dan perbedaan yang mencolok di antara keduanya.

Demikian pula, mendesain tombol dengan warna font yang kontras dengan warna latar belakang tombol akan membuat teks tombol lebih mudah dilihat. Hal ini sering kali dapat menghasilkan tingkat konversi dan kemampuan klik yang lebih tinggi, dan hal yang sama berlaku untuk menu navigasi dan item menu.

Triadic: Spasi Merata

Dianggap sebagai jenis skema warna yang paling dasar, skema warna triadik didefinisikan sebagai tiga warna yang terletak 120 derajat satu sama lain pada roda warna. Dalam beberapa hal, skema triadic dapat dianggap yang paling fleksibel dari tiga jenis kombinasi, karena ada banyak arah yang dapat Anda masuki untuk mengukur 120 derajat. Berbeda dengan analogi, yang dibatasi pada tiga warna yang agak mirip, atau warna pelengkap, yang hanya dapat berupa warna-warna kontras. Triadic dapat dilihat sebagai campuran keduanya, karena skema warna triadic dapat menggabungkan warna analog dan komplementer, dan ada (bahkan) lebih banyak ruang untuk kreativitas. Seperti yang Anda lihat, opsi kombinasi warna yang dapat dibuat oleh desainer web benar-benar tidak terbatas.

3. Pertimbangkan Psikologi Warna

Gambar diambil dari: usertesting.com

Dunia psikologi warna dibangun di atas gagasan bahwa warna tertentu memicu perasaan dan emosi tertentu, yang memicu tindakan tertentu. Jika Anda belum menemukan psikologi warna sampai sekarang, Anda siap untuk penemuan intelektual sejati.

Psikologi warna menyarankan bahwa memilih skema warna situs web Anda berdasarkan pengalaman emosional yang ingin Anda berikan kepada pengguna tidak hanya akan memengaruhi kepribadian merek Anda, tetapi juga akan memicu reaksi pengunjung tertentu berdasarkan lingkungan emosional yang Anda buat.

Setelah kami memahami apa yang diwakili oleh setiap warna, memilih palet warna yang paling sesuai untuk situs web kami menjadi sangat intuitif. Misalnya, jika Anda membangun situs web untuk bisnis spa Anda, masuk akal untuk menggunakan warna yang mewakili alam dan penyembuhan, seperti hijau, dan mungkin biru, yang melambangkan kedamaian dan kepercayaan.

Dengan begitu banyak pilihan palet warna yang ada di dalam roda warna, menggunakan psikologi warna sebagai prinsip panduan saat memilih skema warna memungkinkan Anda membuat keputusan desain yang lebih tepat, dan memfokuskan tema dan gaya Anda dengan cara yang sesuai dengan industri dan persona bisnis Anda. .

4. Tangani Hirarki Visual

Sebagai pembuat web, berinvestasi dalam hierarki visual adalah langkah alami dalam alur kerja desain kami. Tahun lalu, blog Shutterstock menerbitkan sebuah artikel yang berjudul “6 Aturan Hierarki Visual yang Akan Membantu Anda Mendesain Lebih Baik”. Aturan ini, jelas mereka, didasarkan pada tujuan menyeluruh untuk mengatur komponen desain berdasarkan kepentingan, yang “memandu pemirsa melalui desain dan memastikan pesannya jelas dan ringkas”.

Dari enam aturan mereka, aturan pertama dan terpenting Shutterstock berkaitan dengan skema warna situs web, dan mereka menyatakan aturan ini sebagai: “Buat Titik Fokus dengan Warna”. Apa yang dapat kami pahami dari ini adalah bahwa ketika Anda menangani hierarki visual situs web Anda, palet warna Anda adalah salah satu pilihan desain paling mendasar untuk dipertimbangkan. Ini berlaku untuk warna yang Anda pilih untuk teks Anda, warna tombol Anda, latar belakang Anda, dan sebagainya.

Menurut pola pikir ini, ketika Anda memiliki teks pahlawan, dan kemudian deskripsi di bawahnya, pilihan warna font Anda sangat penting, begitu pula pilihan warna latar belakang Anda. Pada gambar di atas, misalnya, akan lebih mudah untuk membedakan antara heading dan subheading jika diberi dua warna berbeda. Dengan cara ini, teks yang lebih “penting” berwarna gelap, dan teks “kurang penting” berwarna kontras dan lebih terang. Mata mengarah pada h1 sebelum subjudul, hanya karena ia jauh lebih menonjol, dan mudah untuk melihatnya dalam cahayanya sendiri. Pada visual kedua, kedua elemen teks memiliki warna yang sama, sehingga mata secara naluriah melihatnya sebagai satu kesatuan, dan lebih lambat untuk memisahkannya menjadi dua entitas yang berbeda.

Prinsip desain dari palet warna sebagai penentu diajukan Popper terkait hirarki visual untuk hampir setiap komponen visual dalam sebuah situs web. Ini berlaku untuk warna teks, seperti yang kami jelaskan, tetapi juga untuk warna latar belakang dan warna tombol. Menekankan pentingnya tombol tertentu sering kali dapat dicapai dengan memilih warna tombol yang paling mungkin menarik perhatian pengguna, dan pada akhirnya menghasilkan rasio klik-tayang yang lebih tinggi.

Hasilkan gaya CSS untuk radius batas, font, transformasi, latar belakang, kotak, dan bayangan teks dengan generator kode CSS online.

5. Fokus pada Item yg Membuat Pengunjung Bertindak, Terutama Tombol Ajakan

Penampilan bukanlah segalanya. Yang kami maksud dengan ini adalah ya, palet warna yang menarik secara visual adalah salah satu faktor fundamental dalam desain web papan atas. Karena itu, cara palet warna Anda memengaruhi pengalaman pengguna Anda sama pentingnya. Bila Anda ingin pengunjung situs web Anda mengambil tindakan tertentu saat menjelajahi situs Anda, warna yang Anda pilih dapat memainkan peran yang sangat dominan.

Contoh di atas dari IC Creative mengilustrasikan dampak tombol berwarna cerah di depan hamparan latar belakang gelap terhadap aktivitas pengguna Anda. Hamparan hitam memungkinkan teks putih jernih dan tombol oranye terang menonjol tanpa bentrok dengan foto latar belakang. Pada saat yang sama, transparansi dalam hamparan masih memungkinkan orang-orang di latar belakang gambar terlihat secara halus.

Ini adalah bukti visual bahwa memilih dua atau lebih warna yang memiliki kontras yang kuat di antara keduanya, seperti hitam dan oranye terang, merupakan pilihan skema warna yang andal. Sebagai alternatif, Anda juga dapat memilih beberapa corak warna dan menerapkannya ke sekelompok elemen, yang dapat menyampaikan bahwa elemen tersebut memang terkait satu sama lain, namun beberapa lebih “penting” daripada yang lain.

6. Ingatlah Desain Responsif

Terpenting dalam desain responsif adalah aturan praktis untuk setiap pencipta web. Tetapi apa yang mungkin kurang intuitif tentang cara membuat situs web Anda responsif, adalah bahwa daya tanggap melampaui ukuran dan tata letak situs Anda. Pilihan palet warna juga merupakan kontributor kuat tentang tampilan situs web di seluler.

Faktanya, mengingat ponsel yang responsif saat membuat palet warna sering kali akan membuat proses desain Anda jauh lebih mudah. Dengan cara ini, Anda dapat menjamin bahwa elemen teks Anda sama-sama terbaca terlepas dari ukuran layarnya, dan bahwa ikon dan tombol juga terlihat sama di seluler seperti di desktop.

Mengingat ukuran layar seluler yang lebih kecil daripada tampilan desktop, Anda mungkin perlu menggunakan lebih sedikit warna untuk seluler daripada yang Anda lakukan untuk desktop. Antarmuka yang lebih kecil mungkin terlihat berlebihan jika memiliki terlalu banyak warna, namun ruang tambahan yang Anda miliki di desktop dapat menangani lebih banyak warna tanpa terlihat terlalu sibuk.

Di sinilah situs web Slack menjadi contoh sempurna dalam memilih warna primer untuk palet warna berdasarkan daya tanggap. Pilihan warna ungu tebal mereka menarik dan terlihat di layar mana pun. Cukup keras untuk membuat layar kecil (seluler) menyenangkan dan menarik, namun cukup gelap sehingga pada tampilan desktop tidak akan “terlalu banyak”.

Cara lain yang berguna untuk memastikan bahwa Anda tidak memiliki terlalu banyak warna pada UI seluler Anda, namun masih mendapatkan hierarki visual dan keunikan, adalah dengan menambahkan beberapa corak satu warna ke skema warna Anda. Kesamaan antara corak warna cukup mirip sehingga mereka akan membuat antarmuka seluler terlihat bersih dan kohesif, namun cukup berbeda untuk menjaga situs web Anda tetap interaktif dan menarik.

7. Gunakan Warna Netral

Meski mungkin kurang menarik, warna netral adalah kebutuhan untuk skema warna yang dibuat dengan benar Meskipun Anda hanya menggunakannya untuk elemen teks, setiap palet warna profesional harus menyertakan warna netral. Betapapun indahnya warna-warna non-netral, pengunjung situs web akan, pada satu titik atau lainnya, membutuhkan “istirahat” dari rangsangan visual, terutama ketika mencoba memproses informasi kualitatif melalui teks.

Dalam contoh di atas, meskipun situs web dang memiliki skema warna oranye, hijau dan coklat yang kaya dan berwarna-warni, penggunaan putih yang sederhana tetap diperlukan. Menggunakan warna putih adalah hal yang membuat teks ajakan bertindak mereka terlihat (“beli sekarang”), yang membuat ikon navigasi dan menu mereka terlihat rapi dan terlihat, dan yang membuat logo mereka menonjol di antara citra yang gelap dan mendetail.