Advertisement
  1. Web Design
  2. Color Theory
Webdesign

6 Panduan Warna Pemula “Yang Mengutamakan Keselamatan” untuk Web

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Web Design Theory.
Unity in Web Design

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Saya masih ingat dengan jelas salah satu kelas seni paling awal saya, ketika, sebagai anak kecil yang sangat bersemangat, saya disajikan dengan berbagai cat berwarna cerah. Saya ingat kegembiraan melihat warna primer bercampur menjadi warna sekunder untuk pertama kalinya, dan saya beralasan bahwa jika dua warna bisa membuat satu warna baru yang indah, semua warna bersama harus membuat sesuatu menjadi lebih baik! Sangat mengecewakan untuk menyadari bahwa tidak peduli bagaimana saya melakukannya, jika saya menggunakan semua warna yang saya inginkan, saya pasti akan berakhir dengan warna karsin yang hanya bisa disebut "BLECH".

Bertahun-tahun kemudian, sebagai desainer web pemula, saya mengalami proses yang sama lagi. Ketika saya belajar, saya jatuh ke dalam perangkap yang tak terelakkan untuk menggunakan terlalu banyak warna, atau menggabungkannya dengan cara yang salah, yang pada akhirnya hanya menghasilkan sesuatu yang sedikit "BLECH".

Saya mulai mencoba untuk belajar bagaimana membuat skema warna untuk web, dan saya menemukan banyak informasi menarik tentang teori warna. Saya membaca tentang hue, tint, shades, tone warna, kejenuhan dan kecerahan, serta analog, monokromatik, triad, pelengkap dan skema warna majemuk.

Palet warna dasar RGB

Namun tanpa kerangka praktis untuk memasukkan informasi itu ke dalam, saya menemukan bahwa pada awalnya, hal itu tidak membuat saya lebih dekat untuk menciptakan desain situs web dengan warna yang baik. Sebenarnya baru setelah saya mulai menciptakan skema warna yang solid melalui trial and error murni, semua teori warna yang telah saya baca mulai masuk akal.

Dalam prosesnya, saya mengambil beberapa "pedoman keselamatan" untuk skema warna situs web yang saya harap bisa saya ketahui di awal. Saat pertama kali memulai, teori warna yang lengkap belum tentu yang Anda butuhkan di awal. Seringkali Anda perlu memutar akal dengan sesuatu yang sedikit kurang teoritis, dan sedikit lebih "melukis dengan angka".

Dalam tutorial ini saya akan membagikan enam petunjuk pasti, "tidak bisa salah" yang bisa Anda ikuti untuk mendapatkan pemahaman mendasar tentang bekerja dengan warna dalam desain web. Ini bukan peraturan, karena Anda akan menciptakan banyak skema warna dalam karir Anda yang akan masuk ke arah yang sama sekali berbeda. Sebaliknya, mereka adalah titik awal, panduan keselamatan untuk bagaimana bertahan dari pertunjukan pertama Anda di dunia desain web tanpa pernah mengalami "BLECH".

1. Skema warna adalah kanvas, bukan lukisan

Salah satu prinsip paling mendasar dalam desain web adalah tidak peduli berapa banyak waktu yang Anda habiskan untuk menciptakan desain yang hebat, peran utamanya adalah pemain kedua yang menyokong bintang pertunjukan yang sesungguhnya; Isi konten. Skema warna Anda seharusnya tidak membuat desain situs "lebih mencolok" daripada konten yang disajikannya. Desain Anda harus berada di latar belakang, membantu mendorong konten situs ke latar depan.

Skema warna yang halus memungkinkan gambar menjadi titik fokus
Skema warna yang terlalu ramai mengalihkan perhatian dari gambar. Jangan tertawa, ini benar-benar terjadi di web liar.

Proses yang sangat umum dalam desain web adalah membuat desain itu sendiri dalam isolasi yang relatif, seringkali dalam perangkat lunak seperti Photoshop atau Sketch. Jika Anda tidak memiliki conton konten apa pun, mudah untuk menemukan desain yang mungkin terlihat bagus dengan sendirinya, dan mungkin juga disukai oleh klien dalam bentuk mockup, namun terlalu mengganggu pengunjung situs dalam praktik. Sebenarnya, proses perancangan web sangat terkait erat dengan konten yang membuat banyak desain web berkualitas tinggi namun kosong tanpa konten.

Ide bagus untuk memulai dengan meletakkan contoh jenis konten yang Anda harapkan muncul di situs, baik dalam perangkat lunak perancangan atau langsung ke kode, lalu merancang sekelilingnya. Hal ini terutama terjadi jika foto atau gambar dari gaya tertentu harus dilibatkan, sehingga Anda dapat memastikan desain Anda akan mengalir secara harmonis dengan mereka. Bayangkan bahwa konten situs adalah individu unik yang harus disesuaikan dengan setelan yang pas.

2. Mulai dengan Basis Warna Grayscale Sederhana

Ada sejumlah kombinasi warna yang tak terbatas yang dapat Anda pilih untuk latar belakang dan basis teks utama Anda. Namun, saran saya adalah memulai dengan menguasai yang paling mudah, dan itu putih dan / atau abu-abu terang di latar belakang beserta teks abu-abu gelap.

Jika Anda melihat berbagai pilihan situs web populer, template atau tema, bisa dipertaruhkan, sebagian besar dari mereka akan memiliki basis teks abu-abu gelap yang sama persis pada abu putih atau abu-abu terang, dan itu untuk alasan yang bagus. Dengan kombinasi ini, Anda hampir dijamin untuk memberikan kemudahan membaca bagi pengunjung, dan membiarkan teks dan konten berbasis gambar masuk ke latar depan.

Dengan beberapa contoh konten di tempatkan di layout grayscale sederhana, contohnya:

Secara umum Anda harus menghindari penggunaan warna jet black untuk teks karena abu-abu gelap sedikit lebih mudah dibaca. Rentang yang nyaman adalah dari # 333333 hingga # 666666.

Untuk warna latar belakang Anda, warna putih penuh #FFFFFF adalah taruhan teraman untuk latar belakang tepat di belakang teks teks utama manapun. Untuk elemen latar belakang lainnya, Anda bisa pergi dari #FFFFFF ke sekitar #CCCCCC.

Sekali lagi, ini bukan aturan warna yang harus Anda gunakan, hanya panduan yang Anda tahu bisa Anda mulai dengan aman.

3. Pilih hanya Satu Warna untuk disorot

Tempat yang paling umum untuk skema warna bisa salah adalah saat ada perselisihan beberapa warna berbeda. Semakin banyak warna yang Anda gunakan, semakin sulit untuk mengendalikan semuanya. Jadi untuk mulai, cukup tambahkan satu warna ekstra di atas dasar grayscale Anda yang akan digunakan untuk tujuan menyoroti hal-hal seperti tautan, beberapa judul, menu, tombol dan sebagainya. Warna sorot Anda bisa biru, hijau, merah atau apapun yang Anda suka.

Pilih warna sorot Anda dengan terlebih dahulu meletakkan kotak di atas dasar Anda sehingga Anda dapat mengukur bagaimana warna Anda terlihat dalam kaitannya dengan semua elemen. Lalu buka color picker Anda dan klik di tengah kuadran kanan atas peta warna.

Gerakkan slider bar ke atas dan ke bawah dan pilih warna yang menurut Anda akan bekerja dengan baik untuk disain Anda.

Pada titik ini Anda sekarang bekerja dengan tiga warna dasar; Latar belakang, teks dan warna sorotan. Anda bisa, dan sebaiknya, menggunakan lebih dari satu warna highlight di masa depan, tapi untuk saat ini menganggapnya seperti juggling. Anda sudah bekerja dengan tiga pin juggling, jadi merasa nyaman hanya dengan ketiganya, dan kemudian menambahkan lebih banyak ke rotasi saat Anda yakin.

Anda Baru Saja Mempelajari:

Anda baru saja belajar memilih "hue". Singkatnya, warna adalah warna dasar. Bila Anda memindahkan slider geser ke atas dan ke bawah, Anda akan melihat nilai "H" dalam perubahan pemilih warna Anda.

"H" berarti hue, dan begitu Anda memilih warna highlight Anda, nomor di kotak itu adalah hue.

4. Jika ragu, gunakan biru

Jika Anda ragu sama sekali memilih warna highlight yang akan digunakan, pilih warna biru. Serius. Biru sering merupakan warna yang paling fleksibel untuk digunakan dan sesuai dengan jumlah jenis situs yang paling tinggi. Warna seperti ungu dan kuning bisa sangat menyenangkan, tapi bisa juga cepat berubah norak jika digunakan dengan cara yang salah.

Di sisi lain Anda bisa melakukan apa saja dengan warna biru sebagai warna hightlight dan Anda tidak bisa terlalu salah. Jika Anda tidak yakin di mana harus mulai belajar atau warna apa yang digunakan dalam sebuah proyek, kembalilah ke warna biru. Biru tertentu yang Anda pilih bisa dari mana saja dari biru tua (hue 235) sampai ke aqua (hue 190) dan Anda berada di wilayah yang cukup aman.

Untuk tata letak contoh saya, saya telah memilih hue 205. Bila Anda telah memilih warna highlight Anda dan menambahkannya ke desain Anda di manapun Anda pikir itu diperlukan. Jika Anda menggunakan warna hightlight pada tombol atau area dengan teks di atasnya, ubah warna teks juga. Dalam kasus ini saya telah mengubah teks di atas area yang dihighlight menjadi putih.

5. Tambahkan Variasi pada Warna Highlight Anda

Setelah Anda memilih warna hightlight Anda, biarkan panel slider (hue) dari titik itu. Anda akan membutuhkan warna ekstra untuk desain Anda, tapi semuanya akan menjadi variasi dari satu warna highlight yang telah Anda pilih untuk menjaga agar tetap sederhana.

Untuk membuat variasi warna, tariklah pada area peta color picker.

Gunakan variasi warna jenis ini untuk hal-hal seperti:

Efek Hover

Borders

Subtler Text Over Highlight Color

Gradients

Efek Light dan Shadow

6. Jauhi Pojok Kanan Atas

Sudut kanan atas peta warna adalah bagian dengan warna oktan tinggi. Warna di pojok kanan atas seperti mobil balap Formula 1; Mereka bisa tampil luar biasa dan sangat memikat, tapi umumnya butuh banyak pengalaman untuk menggunakannya dengan baik. Tanpa pengalaman itu mereka bisa menyebabkan kecelakaan, jadi yang terbaik adalah berpikir sejenak pada warna yang lebih kencang.

Itulah sebabnya di bagian ketiga tutorial ini saya meminta Anda untuk mengklik peta warna di tengah pojok kanan atas sebelum memilih warna highlight Anda, untuk memastikan Anda memulai dengan warna yang relatif lembut.

Sebagai ilustrasi, perhatikan apa yang terjadi jika saya hanya mengubah hue desain kita sejauh ini, tanpa menyentuh peta warna.

Masih terlihat cantik kan? Namun jika saya menyeret peta warna ke pojok kanan atas, tiba-tiba tidak begitu bagus.

Aduh mataku !! Jika Anda ingin memastikan bahwa Anda tidak mencakar retina pengunjung Anda, ikuti panduan umum untuk mengurangi tone dengan menjauh dari sudut kanan atas peta warna.

Anda Baru Saja Mempelajari:

Dalam dua bagian terakhir Anda benar-benar belajar menerapkan beberapa aspek berbeda dari teori warna. Anda belajar bagaimana bekerja dengan: Saturasi dan Kecerahan

Saturasi dan Kecerahan

Bila Anda menyeret area peta color picker, Anda akan melihat nilai "S" dan "B" berubah, yang berarti "Saturasi" dan "Kecerahan".  Anda juga akan melihat nomor hue tetap sama. Jadi, Anda menciptakan variasi warna dengan mengubah saturasi dan kecerahan warna asli Anda.

Saturasi dan Tint

Saturasi adalah seberapa jelas warna Anda diekspresikan. Misalnya, pikirkan "Baju saya warnanya semakin jenuh dengan anggur merah tumpah". Pada saturasi color picker yang khas ditentukan oleh seberapa banyak putih dicampur dengan hue dasar Anda. Semakin putih, semakin jenuh.

Bila Anda menyeret ke kanan pada peta warna Anda mengurangi jumlah putih dan karenanya meningkatkan kejenuhan sehingga nilai "S" naik. Bila Anda menyeret ke kiri ke arah sudut putih semua, Anda akan mengurangi kejenuhan sehingga nilai "S" turun.

Saturasi pada peta color picker standar

Pencampuran warna putih ini dengan warna asli Anda disebut juga menciptakan "warna". Istilahnya berasal dari pencampuran cat, dimana cat putih dicampur dengan cat berwarna.

Kecerahan dan Bayangan

Kecerahan adalah berapa banyak warna hitam yang tercampur ke dalam warna Anda. Semakin hitam, semakin terang.

Bila Anda menyeret ke atas pada peta, Anda mengurangi jumlah warna hitam, tingkatkan kecerahan dan nilai "B" pada pemetik warna akan naik. Bila Anda menurunkannya, Anda akan meningkatkan nilai hitam dan nilai "B" naik.

Mencampur warna hitam dengan hue asli Anda juga disebut menciptakan "bayangan". Ini juga berasal dari pencampuran cat, dimana cat hitam dicampur dengan cat berwarna.

Tone

Bila Anda memadukan warna abu-abu ke warna Anda, ini disebut menciptakan "tone". Saat Anda keluar dari pojok kanan atas seperti yang kita lakukan di atas, Anda akan menurunkan saturasi dan kecerahan Anda yang menambahkan warna putih dan hitam (abu-abu), sehingga menciptakan tone. Jadi pada dasarnya kapan saja saturasi dan kecerahan Anda kurang dari 100%, itu tone.

Sekali lagi, istilah ini berasal dari pencampuran cat, dimana cat abu-abu dibuat dan kemudian dicampur dengan cat berwarna. Ini juga dimana frase untuk "tone things down" berasal. Keren ya

Skema Warna Monokrome

Skema warna "monokromatik" adalah di mana Anda mengambil hue dasar dan memperlebarnya dengan tint, bayangan dan tone. Anda hanya mempelajari apa arti semua istilah ini dalam situasi praktis. Jadi dengan memilih satu warna highlight dan menciptakan variasi di dalamnya, Anda benar-benar menciptakan skema warna monokromatik.

Apa Selanjutnya?

Terus berlatih skema warna monokromatik Anda pada basis grayscale sampai Anda merasa benar-benar percaya diri. Coba buat mereka dengan warna yang berbeda seperti warna highlight Anda, bereksperimenlah untuk melihat bagaimana cara mengubah setelan saturasi dan kecerahan yang dapat Anda gunakan.

Bila Anda merasa nyaman, lanjutkan untuk menambahkan satu warna highlight ekstra. Saya sarankan mencoba warna oranye dan biru dalam percobaan pertama Anda karena mereka cenderung menjadi duo yang paling mudah untuk diajak kerja sama. Lalu coba hijau dan biru, yang menurut pengalaman saya adalah yang termudah kedua. Kedua kombo ini cenderung menjadi hit dengan klien dan pelanggan.

Hal terbaik mutlak yang dapat Anda lakukan untuk mendorong pemahaman Anda tentang skema warna untuk web adalah dengan menginstall sebuah ekstensi  sampler warna seperti Colorzilla, dan menggunakannya untuk mulai memeriksa bagaimana perancang berpengalaman melakukannya. Saat Anda browsing di internet, ketika Anda melihat skema warna yang terlihat bagus, gunakan sampler warna dan lihatlah warna yang digunakan pada halaman. Untuk setiap warna yang Anda sampel, lihat tingkat saturasi dan kecerahan mana yang paling sesuai dengannya. Perhatikan juga warna mana yang bekerja dalam kombinasi dengan yang lain.

Jika ragu, Anda selalu dapat mengikuti panduan "keselamatan pertama" Anda dan Anda akan aman dari "BLECH" dari sini.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.