Desain Web Untuk Anak-Anak: Warna

Selamat datang di pelajaran ke sepuluh seri Desain Web Untuk Anak-Anak, semua tentang Warna

Dalam tutorial ini kita akan melompat ke dalam teori warna, cara yang berbeda menggunakan warna dalam CSS, arti warna tertentu, dan review bagaimana memilih warna yang sempurna untuk situs kita. Kita akan menyelesaikan dengan beberapa tips dalam menggunakan warna untuk web.

Jangan lupa mengajukan pertanyaan dalam komentar pada bagian bawah halaman ini!

Teori Warna

Teori Warna meliputi banyak hal, namun fokus utama adalah melihat bagaimana warna bertindak dengan yang lainnya dalam sebuah desain. Kita menyebut sekelompok warna yang dipilih untuk digunakan bersama sebagai Color Palette. Sebuah color palette akan memiliki warna-warna yang melengkapi satu sama lain dan memiliki kontras dan vibransi yang bagus. Kita akan membicarakan tentang maksud kata-kata ini nantinya.

Memilih warna yang benar dan mengetahui mengapa warna tertentu berkerja sementara yang lainnya tidak dapat menentukan apakah desain kita akan berkerja atau tidak. Pilihan warna yang jelek dapat membuat situs kita sulit digunakan, atau teks tidak mungkin untuk dibaca dan pengguna akan meninggalkan website kita.

Beberapa Terminologi

Sebelum kita melangkah terlalu jauh ke dalam tutorial mari kita bicarakan tentang beberapa terminologi dasar yang akan sering kita sebutkan. Kita akan menggunakan istilah ini untuk membantu kita mengerti lebih baik apa yang membuat tiap warna begitu unik.

Hue

Sebuah hue adalah (lebih atau kurang) sebuah warna objek. Ketika kita mengacu ke hal-hal seperti "merah" atau "kuning" kita sedang membicarakan hue mereka.

Saturasi

Saturasi warna mengacu pada seberapa tebal, atau kuatnya suatu warna. Sebuah saturasi yang rendah membuat sebuah warna tampak terbilas, sementara saturasi yang tinggi menghasilkan warna yang sangat tajam.

Brightness atau Lightness

Brightness mengacu pada terang atau gelapnya sebuah warna. Ini berlaku mulai dari hitam (tanpa kecerahan) ke putih (penuh kecerahan).

Lingkaran Warna

Lingkaran warna berdasarkan merah, kuning, dan biru dan cukup dikenal di antara seniman. Sebagai desainer, memahami bagaimana warna dibuat membantu kita mendapatkan ide yang lebih baik tentang warna apa yang saling melengkapi satu sama lain dan mengapa.

Lingkaran kiri pada mobil di bawah menunjukkan tiga warna primer. Dengan ketiga warna ini kita dapat membuat semua warna lainnya.

Lingkaran di kanan pada mobil di atas menunjukkan warna sekunder juga: warna yang dibuat dengan mencampurkan warna primer. Sebagai contoh, biru dan kuning membentuk hijau, sementara biru dan merah membentuk ungu.

Lingkaran warna di sebelah kiri pada mobil di bawah menunjukkan satu layer lagi: warna tersier. Itu adalah warna-warna yang dibuat dengan mencampurkan warna primer dan sekunder. Sebagai contoh, dengan mencampur biru dan ungu menghasilkan ungu kebiruan gelap.

Sistem Warna Web

Ada sejumlah sistem warna (cara untuk menjelaskan warna) namun hanya sistem tertentu yang cocok untuk web.

RGB

RGB berarti "Red Green Blue" dan menjelaskan bagaimana kita melihat warna pada layar elektronik. Ketiga warna ini dapat dikombinasikan untuk menghasilkan banyak warna lainnya. Ketiga nilai itu dibuat dalam daftar urut dan tiap rentang mulai dari 0 hingga 255.

1

body {

2

    background: rgb(138,138,226);

3

}

CSS di atas menghasilkan sebuah background kuning-oranye pada sebuah halaman. Di dalam bracket kamu dapat melihat variasi nilai merah, hijau dan biru.

Kita hanya menggunakan nilai hexadecimal sejauh ini dalam seri ini, namun kita dapat menggunakan sebuah warna dalam CSS pada banyak cara yang berbeda.

Kunjungi situs ini untuk mendapatkan daftar singkat nilai Hex dan RGB untuk 500 warna spesifik.

HSL

HSL berarti "Hue Saturation Lightness" dan nilainya dibuat dari tiga angka dalam urutan.

Kita dapat menyatakan kuning-oranye yang sama pada body halaman menggunakan nilai HSL bukannya nilai Hex atau RGB:

1

body {

2

    background: hsl(43,100%,57%);

3

}

Angka pertama di sini, 43, mewakili sudut pada sebuah lingkaran warna. Itu yang memberikan kita nilai hue. Merah adalah 0 atau 360 derajat, sementara hijau adalah 120 derajat dan biru adalah 240.

Warna kedua memberikan persentase saturasi warna, dimana 100% berarti saturasi utuh.

Nilai terakhir, lightness, menentukan seberapa terang atau gelap nilai hue. 100% berarti putih, 0% berarti hitam, dan yang di antaranya akan menjadi kombinasi antar keduanya.

Nilai apa yang kita gunakan untuk CSS semuanya tergantung pada kita, namun nilai HSL lebih langsung mudah ditebak dengan memilih sebuah nilai sudut bergerak berlawanan jarum jam dari merah (0) dan kemudian menambahkan persentase saturasi dan lightness yang kita inginkan.

Nama Warna

Ada sejumlah batasan warna yang mempunyai nama yang dapat digunakan dalam CSS, tidak ada angka yang diperlukan.

1

body {

2

    background: green;

3

}

Sebuah daftar lengkap nama warna ini dapat ditemukan di sini.

Catatan Singkat Pada Alat Konversi

Jika kita memiliki nilai Hex dan memerlukan nilai RGB atau HSL warna itu (atau sebaliknya!) ada beberapa alat yang bagus yang akan melakukan ini untuk kita, seperti rgb.to dan Colorrrs.

Arti Warna

Warna membawa banyak arti. Tergantung di negara mana kamu tinggal, sebuah warna tertentu dapat digunakan untuk mengartikan bahaya, cinta, kebahagiaan, atau kejahatan. Warna dapat membuat pengguna bereaksi dengan perasaan tertentu, jadi memiliki sebuah pemahaman tentang ini penting untuk mengkomunikasikan pesan kita kepada pengguna.

Lihat chart ini yang menunjukkan bagaimana warna yang berbeda berarti hal yang berbeda dalam berbagai kebudayaan.

Mari kita bahas secara singkat beberapa arti di belakang tiga warna primer: kuning, merah dan biru.

Kuning

Kuning menarik perhatian pengguna lebih dari warna apapun dan biasanya mewakili kebahagiaan dan cahaya mentari. Di sisi lain, kuning dapat juga berarti "perhatian", seperti yang ditampilkan pada banyak rambu lalu lintas.

Menggunakan kuning pada web dapat menjadi menarik mata, jadi lakukan dengan tidak menggunakan secara berlebihan dan pastikan kita hanya menyoroti informasi penting.

Merah

Tergantung pada negara mana kamu tinggal, merah dapat berarti apapun dari bahaya, hingga kemarahan, hingga energi, hingga cinta dan kebahagiaan. Apapun artinya itu, merah selalu digunakan untuk mewakili sebuah perasaan atau tindakan ekstrim.

Dalam desain web merah sering digunakan untuk mengkomunikasikan penghapusan atau error. Itu adalah warna yang tegas yang menarik perhatian pengguna sehingga itu dapat berkerja dengan baik sebagai warna aksen. Terlalu banyak merah pada sebuah website dapat melelahkan dan mungkin akan sulit untuk mencari tahu apa yang terpenting.

Biru

Biru mewakili baik ketenangan dan kesedihan untuk sebagian besar dan warna yang sangat populer pada web.

Perasaan yang diciptakan dengan menggunakan warna biru dalam desain akan sangat tergantung pada bayangan dan hue yang kita pilih. Sementara biru gelap mengkomunikasikan kekuatan dan dapat diandalkan, biru yang lebih cerah akan tampak lebih menyenangkan dan bersahabat.

Memilih Sebuah Color Palette

Kebanyakan situs akan memiliki seri warna yang berkerja untuk memberikan hierarki dan mengatur perasaan sebuah desain. Pemilihan warna kita dapat menjadi sama pentingnya dengan keputusan desain lainnya yang telah kita buat sejauh ini, sehingga kita perlu memiliki pandangan yang bagus tentang warna apa yang berkerja bersama, apakah kita mencapai kontras yang bagus atau tidak sepanjang halaman, dan jika warna membawa perasaan atau arti yang sama pada konten kita.

Berikut tampilan lainnya dari color palette utama yang digunakan sepanjang seri tutorial Kota Tuts+:

Warna yang lebih cerah digunakan sebagai background sementara warna yang lebih gelap digunakan untuk teks atau untuk menyoroti bagian tertentu.

Warna Komplementer & Kontras

Pada umumnya, warna yang ada sepanjang dari tiap-tiap pada lingkaran warna dinyatakan menarik mata. Ini adalah warna komplementer–ketika dikombinasikan mereka menghasilkan sebuah bayangan kelabu. Adalah mungkin bagi warna untuk berdekatan satu sama lain pada lingkaran warna untuk berkerja dengan baik bersama-sama, namun itu membutuhkan sedikit penyesuaian saturasi dan brightness untuk mendapatkan pasangan yang pas.

Kita juga menyentuh sedikit kontras dalam tutorial sebelumnya tentang dasar-dasar desain, namun mari kita lihat hal lainnya secara singkat.

Kontras yang sesuai mengurangi kelelahan mata dan membuat hirarki visual tampak jelas. Contoh terbaik untuk kontras yang bagus vs yang jelek dapat dilihat dengan membandingkan kombinasi tertentu warna background dan teks.

Gambar di atas menunjukkan kontras yang jelek di sisi kiri dengan kontras yang lebih baik di sisi kanan. Teks dengan kontras yang jelek sulit dibaca dan menyakitkan mata kita, membuat efek blur.

Peralatan Color Palette

Ada tools yang mendukung kita dengan daftar color palette cantik untuk dipilih, yang dapat menjadi penghemat waktu yang baik dan menyajikan inspirasi yang bagus.

Coolors

Coolors.co adalah salah satu cara termudah untuk menggunakan pemilih warna yang tersedia saat ini.

Itu mendukung kita dengan color palette cantik yang dapat kita kustomisasi dan ganti dengan menekan sebuah tombol spasi.

Adobe Color

Adobe Color adalah alat pemilih warna lainnya yang memanfaatkan lingkaran warna yang kita bicarakan sebelumnya.

Kita dapat membuat perubahan ke lingkaran warna, menentukan palette, dan kemudian membuat penyesuaian lebih lanjut untuk tiap warna individual.

Adobe Color juga mengijinkan kita menyimpan palette favorit dan menjelajah yang populer dan dipilih sebelumnya.

Tips Umum

Ketika memilih warna untuk web, dan menerapkannya ke elemen halaman, penting untuk mengingat beberapa hal untuk memastikan warna-warna ini meningkatkan pengalaman pengguna.

Kontras

Kontras begitu penting bahkan, ketika sedang ragu, lanjutkan dengan pilihan paling aman; bahkan jika itu tampak sedikit "membosankan"! Beberapa tugas terpenting yang kita miliki sebagai desainer adalah untuk memastikan sesuatunya berfungsi, mudah digunakan, dan mudah dibaca. Kontras yang jelek akan mencegah pengguna kita dari kemampuan membaca konten kita yang menakjubkan.

Jadi sementara oke-oke saja untuk menjelajah warna pilihan, pilihan ini harus tidak menjauhkan dari operasi keseluruhan situs atau membuyarkannya dari konten.

Jumlah Angka

Alat pemilih color palette, seperti Coolors, akan sering menyediakan kita lima warna. Lima warna membolehkan kita memiliki satu atau dua warna dominan dan sedikit warna dominan seperti tombol dan tautan.

Memiliki lebih dari lima warna yang berbeda menempatkan desain kita pada risiko tidak konsisten dan susah diikuti; walaupun begitu warna putih, hitam, dan abu-abu tidak dihitung di sini.

Pola Umum

Sangat penting untuk tidak merasa sakit dari penggunaan warna yang umumnya diterima oleh banyak orang. Misalnya, kebanyakan orang terbiasa dengan hijau berarti "tambahkan" dan merah berarti "hapus". Membalikkan ini pada website akan menjadi keputusan desain yang buruk karena bukan itu yang diharapkan dan mungkin akan menyulitkan pengguna.

Kesimpulan

Dalam tutorial ini kita telah mendiskusikan teori dan aturan warna dan bagaimana memilihnya dengan sesuai untuk digunakan pada web. Setiap warna membawa pesannya sendiri. Kita perlu memastikan pesan ini cocok dengan konten kita melalui pilihan color palette yang dipikirkan dengan hati-hati.

Berikutnya kita akan menyelesaikan seri kita dengan beberapa pemikiran akhir dan cara berbeda yang dalam membagikan kerja keras kita dengan teman dan keluarga secara online.

Sampai jumpa di sekitar kota!