Cara Memilih Palet Warna dan Pasangan Font yang Sempurna

Dampak situs web adalah tentang representasi visual suatu merek dan budaya perusahaannya. Selain komposisi, pasangan warna dan font secara tidak sadar memengaruhi kesan pengguna terhadap situs dan produk atau layanan Anda. Dalam desain situs web, hierarki visual menekankan pentingnya bagian-bagian tertentu dengan memanfaatkan ukuran font, berat, gaya, dan warna untuk menarik perhatian pada elemen tertentu. Hal ini pada akhirnya memengaruhi pengalaman dan keterlibatan pengguna. Tujuannya adalah untuk mendapatkan keseimbangan kombinasi warna dan pasangan font yang tepat.

Mewakili Merek

Apa merek Anda? Apa yang diwakilinya? Apa kepribadiannya? Siapa audiens target Anda? Tipe orang seperti apa yang membeli produk atau layanan Anda? Prinsip desain utama Anda akan membantu menjawab pertanyaan-pertanyaan ini.

Minimalis, Maksimalis, atau “Tepat”?

Biasanya melihat antarmuka yang sangat bersih dan minimalis yang hanya berisi logo perusahaan dan beberapa teks, memberikan tampilan rapi dan bersih yang memancarkan kecanggihan. Apple melakukan yang terbaik dengan bereksperimen dengan berbagai tipografi dan tata letak.

Biasanya, skema warna yang sangat sederhana dicampur dengan abu-abu, putih, dan area ruang negatif yang luas. Namun jika Anda menjual banyak barang, memaksimalkan tampilan layar akan bekerja lebih baik—eBay dan Amazon.com adalah contoh yang bagus. Palet warna situs webnya sederhana, tetapi warna dominan berasal dari produknya.

Musiman

Nuansa biru dan putih di musim dingin, kuning dan hijau di musim semi, merah dan hijau di musim panas, serta oranye, kuning, dan merah di musim gugur cocok untuk produk musiman seperti produk fesyen dan desainer, namun mungkin tidak cocok untuk produk non-musiman .

Papan Suasana Hati

Papan suasana hati untuk setiap kampanye atau rencana situs web memungkinkan visualisasi instan dari gaya atau konsep yang Anda inginkan. Seseorang dapat memilih dan mengubah elemen secara interaktif untuk menguji ide serta kombinasi warna dan font dengan cepat.

Situs Membaca

Situs membaca seperti koran, situs menulis, blog, dan lain-lain sangat banyak teksnya. Sebagian besar browser menyediakan mode membaca “mode zen”, jadi pertimbangkan ini juga – pilih hanya dua hingga tiga font atau satu jenis font. Gabungkan gambar dan elemen desain untuk memecah bagian teks yang panjang.

Memilih Palet Warna yang Sempurna

Warna menyampaikan lebih dari sekedar keindahan dan gaya—warna juga membangkitkan respons emosional dari audiens Anda; ingat bahwa simbolisme warna bersifat universal di seluruh budaya. Warna hanyalah salah satu aspek desain yang patut dipertimbangkan, dan ada banyak palet warna yang menarik untuk situs web.

Selain desain situs web, prinsip warna ini dapat diterapkan pada kustomisasi produk, seperti saat pelanggan membuat kaos sendiri. Mengizinkan mereka memilih dari beragam warna akan meningkatkan pengalaman personalisasi dan menyelaraskan dengan preferensi gaya masing-masing.

Skema warna (Kombinasi Palet Warna)

Skema warna menggabungkan beberapa warna dari satu atau lebih palet warna untuk memenuhi beberapa tujuan desain yang menyampaikan gaya, suasana hati, atau pesan visual tertentu. Beberapa contohnya adalah sebagai berikut:

• Skema Warna Monokromatik (satu warna) – memvariasikan rona, rona, corak, dan corak. Warna netral seperti putih, abu-abu, atau hitam memperluas palet, memberikan nuansa terang dan gelap agar tidak terlihat datar.
• Skema Warna Netral (warna putih akromatik, abu-abu, dan hitam dipadukan dengan warna mendekati netral seperti krem, cokelat, putih pudar, dll.). Warna desaturasi menyampaikan estetika netral, klasik, dan cocok dipadukan dengan warna mencolok.
• Skema Warna Komplementer (berlawanan dengan roda warna) – yang populer adalah biru dan oranye, merah dan hijau, serta kuning dan ungu.
• Skema Warna Analog (kelompok tiga warna yang bersebelahan dalam roda warna) – Rona dasar dan dua rona tetangganya selaras dengan baik, seperti rona merah, merah jambu, dan oranye yang menyampaikan tema matahari terbit atau terbenam.
• Skema Warna Triadik (tiga warna terletak pada jarak yang sama satu sama lain pada roda warna) – Contohnya adalah biru, merah, dan kuning sebagai satu set dan ungu, hijau, dan oranye sebagai set lainnya. Pastikan untuk memanfaatkan rona dan kurangi saturasi untuk menghindari bentrokan warna.

Ada beberapa alat online untuk membuat palet warna, dan Coolors adalah salah satu situs gratis yang populer. Ini dapat membantu menghasilkan palet warna dengan cepat dan akurat.

Sumber: Coolors.co, 2023

Merancang untuk Buta Warna

Sekitar 300 juta orang di seluruh dunia menderita buta warna (kebanyakan merah-hijau). Ini adalah basis pelanggan potensial yang sangat besar yang mungkin tidak dapat melihat beberapa atau sebagian besar elemen situs web Anda. Empat bentuk utama buta warna merah-hijau adalah:

• Protanopia : Nuansa merah tidak terlihat dan dianggap hitam; warna dipandang sebagai nuansa biru atau emas. Coklat tua disalahartikan dengan corak gelap warna lain seperti merah, oranye, atau hijau.
• Deuteranopia : Warna hijau tidak terlihat; biru dan emas biasanya terlihat. Nuansa merah dan hijau dianggap bergantian. Nuansa kuning dan hijau cerah terlihat sama.
• Protanomali : Merah tampak abu-abu tua; semua warna merah kurang cerah.
• Ulangan : Lihat sebagian besar warna biru, kuning, dan umumnya warna kalem.

Jenis lainnya antara lain buta warna biru-kuning. Untungnya, beberapa alat online dapat membantu Anda merancang tema yang aman dan menyesuaikan palet warna Anda.

Alat aksesibilitas Adobe Color memungkinkan Anda menyeret penggeser untuk mendapatkan nilai warna yang benar. Anda juga dapat menarik dan melepas tema Anda ke situs web untuk memeriksa skema palet Anda saat ini.

Teknik Pemasangan Font

Seperti yang diajarkan di banyak program gelar desain grafis online, empat prinsip dasar tipografi adalah kontras, ruang, hierarki, dan ukuran. Tujuan utamanya adalah menyeimbangkan keterbacaan dengan gaya dalam desain Anda. Berikut beberapa ide utama untuk memasangkan font yang dapat Anda coba:

• Bermain-main dengan bobot font yang ringan, teratur, dan tebal (font yang sama).
• Gabungkan berbagai jenis font dan tipografi.
• Memasukkan kerning atau spasi setiap huruf dalam sebuah kata, frasa, atau kalimat.
• Gunakan huruf kapital yang huruf pertama teks utamanya berukuran besar, sering kali diberi gaya, dan terbuka untuk desain apa pun. Ini adalah metode klasik yang digunakan dalam buku-buku lama.
• Estetika font harus seimbang dengan desain keseluruhan.
• Jadikan beberapa area font unik atau terlihat unik untuk menyampaikan kegembiraan atau kebaruan, namun tetap sederhana jika diperlukan kesederhanaan!
• Gabungkan font CJK – skrip Cina, Jepang, dan Korea untuk menambah kesan. Konsultasikan dengan penutur asli tentang nuansa terjemahan yang halus.
• Gunakan jenis huruf sekunder ketika jenis huruf utama tidak memiliki gaya atau dampak yang diinginkan.

Beberapa contohnya adalah sebagai berikut:

• Abril Fatface dan Poppins
• Alegreya (Berani dan Reguler)
• Barlow Kental dan Montserrat
• Burung Kormoran Garamond dan Proza Libre
• Tampilan DM Serif dan DM Sans
• Epilog dan Siapa Saja, oleh Perusahaan Tipe Etcetera

• IBM Plex Sans Terkondensasi dan IBM Plex Sans
• Karla dan Inconsolata
• Karla dan Merriweather
• Libre Baskerville (Tebal dan Reguler)
• Libre Baskerville dan Sumber Sans Pro
• Lobster Dua dan Aksara Kaushan, menurut Tipe Impallari
• Montserrat dan Hind
• Nunito dan PT Sans
• Nunito Sans (Tebal dan Reguler)
• Oswald dan Sumber Sans Pro

• Oswald dan Sumber Serif Pro
• Tampilan Playfair dan Lato
• Tampilan Playfair dan Sumber Sans Pro
• Quattrocento dan Lora
• Quattrocento dan Quattrocento Sans
• Pasir Hisap (Tebal dan Biasa)
• Roboto Kental dan Roboto
• Stint Ultra Diperluas dan Pontano Sans
• Ultra dan PT Serif
• Bekerja Sans dan Merriweather
• Yeseva One dan Josefin Sans

Alat untuk Memasangkan Font

1. Google Fonts adalah situs yang wajib dikunjungi untuk mendapatkan ide umum dalam memilih pasangan font. Semua font adalah sumber terbuka dan gratis untuk digunakan.
2. FontPair memungkinkan Anda melihat pasangan font interaktif dan font apa pun dari Googe Fonts, yang gratis untuk digunakan.

Kembangkan Font Anda

Mengapa tidak membuat font Anda saja? Apple berubah dari Helvetica Neue ke font yang mereka buat sendiri bernama San Francisco, yang bekerja dengan baik untuk mereka. Alat online gratis adalah Birdfont sumber terbuka – buat dan uji font Anda!

Warna dan Font Hilang!

Teknik di atas hanya bersifat sekunder setelah pesan dan UX. Desainnya bergantung pada umpan balik dan bersifat berulang—dengan pengujian A/B pada sampel kecil pengguna dan pelanggan, diperkirakan akan ada beberapa perubahan desain. Gunakan imajinasi Anda dan ciptakan jalan!