Penerapan Warna dan Tipografi Dasar

Gambaran besarnya dulu

Bayangin desainmu seperti sebuah warung makan. Warna itu ibarat cat dindingnya, kalau warna dindingnya acak-acakan, pengunjung langsung nggak nyaman. Font itu ibarat tulisan di papan menunya — kalau hurufnya susah dibaca, orang bingung mau pesan apa. Tugas 7 ini memastikan “warung desainmu” enak dipandang dan informasinya mudah ditangkap.

Bagian 1: Memasukkan Palet Warna ke Layout

Langkah 1: Buka palet dari Tugas 2

Kamu punya moodboard dari tugas sebelumnya. Di sana ada warna-warna yang sudah kamu pilih. Setiap warna punya kode hex, itu kode 6 digit yang selalu dimulai dengan tanda #, contohnya #1B4F72.

Hex ini sederhananya adalah “nomor KTP”-nya warna. Sama persis di mana pun software-nya, selama kode hexnya sama, warnanya sama.

Langkah 2: Masukkan hex ke software

Di CorelDRAW atau Adobe Illustrator:

Klik dua kali pada kotak warna (Fill/Color) di toolbar
Cari kolom bertuliskan “Hex” atau “#”
Ketik kode warnamu, misalnya 1B4F72 (tanpa tanda #)
Tekan Enter

Di Canva: klik objek → klik ikon warna → pilih “+ Add a color” → ketik kode hex-nya.

Langkah 3: Susun warna sesuai fungsinya

Gunakan aturan sederhana ini:

Warna utama → background besar. Misalnya biru tua #1B4F72 untuk area gelap.
Warna kontras → blok judul atau kotak aksen. Misalnya oranye #E67E22 di atas biru tua, kontras tinggi, mata langsung ke sana.
Warna netral → putih #FFFFFF untuk teks atau ruang kosong.

Jangan pakai lebih dari 2–3 warna berbeda. Desainer profesional pun membatasi diri di angka itu. Terlalu banyak warna justru terasa kacau, bukan meriah.

Bagian 2: Memilih Font

Konsep dasar: ada dua peran font

Bayangkan koran. Ada headline besar di atas, lalu teks artikel di bawahnya. Dua font, dua peran, tapi harus serasi.

Font judul (headline): tugasnya menarik perhatian dari jauh. Harus tebal, besar, dan berkarakter.

Pilihan yang bagus untuk pemula:

Montserrat Black / ExtraBold
Poppins Bold
Bebas Neue

Ukuran: minimal 48 pt. Semakin besar, semakin kuat kesan visualnya.

Font body text: tugasnya nyaman dibaca berlama-lama. Harus bersih dan nggak terlalu ornamental.

Pilihan yang terbukti nyaman:

Open Sans Regular
Lato Regular
Roboto Regular

Ukuran: 12–16 pt. Di bawah 12 pt biasanya sudah terlalu kecil untuk layar.

Kenapa tidak pakai satu font saja?

Boleh saja. Tapi kalau pakai satu font dengan variasi Bold dan Regular, sudah cukup menciptakan hierarki visual — yaitu urutan mana yang dibaca duluan. Judul mencolok, isi lebih kalem.

Bagian 3: Cek Kontras Warna

Ini langkah yang sering dilewat, padahal ini penentu apakah desainmu bisa dibaca atau tidak.

Aturannya simpel: teks dan background harus punya perbedaan gelap-terang yang cukup jauh.

Kombinasi aman:

Teks putih di atas background gelap (biru tua, hitam, ungu tua) ✓
Teks hitam di atas background terang (putih, krem, abu muda) ✓
Teks oranye di atas background putih ✓ (asal orangenya cukup gelap)

Kombinasi yang harus dihindari:

Teks kuning di atas putih → keduanya terang, mata tidak bisa membedakan dengan jelas
Teks biru tua di atas background hitam → keduanya gelap, “tenggelam”
Teks merah di atas hijau → kontrasnya ada, tapi menyiksa mata

Cara cek praktis: squint (coba lihat desainmu sambil memicingkan mata sedikit). Kalau teks masih terbaca samar-samar, kontrasnya sudah cukup. Kalau teks menghilang, berarti kontrasnya kurang.

Jebakan yang sering terjadi

Satu jebakan klasik siswa: mereka pilih warna yang “cantik” tapi lupa mengecek apakah teks tetap terbaca. Akibatnya teks biru ditaruh di atas background ungu — warnanya serasi di moodboard, tapi di layar jadinya blur dan susah dibaca.

Jebakan kedua: terlalu banyak jenis font dalam satu layout. Kalau sudah pakai Montserrat untuk judul dan Open Sans untuk body, stop. Jangan tambah Script atau Decorative lagi kecuali ada alasan yang kuat. Terlalu banyak font = terlihat tidak profesional.

Kuis singkat

Kamu punya background berwarna biru tua #1B4F72. Antara teks putih dan teks kuning, mana yang lebih tepat dipakai di atasnya — dan kenapa?
Apa perbedaan fungsi font judul dan font body text dalam sebuah layout desain?
Seorang temanmu membuat desain dengan 5 warna berbeda karena “biar cerah dan menarik.” Apa masalah yang mungkin muncul, dan apa saranmu?