Analisis dan penerapan prinsip "kontras" dalam desain web

Desain web terdiri dari banyak elemen yang berbeda, dan elemen-elemen ini memiliki kepentingan yang berbeda-beda. Beberapa elemen harus sangat menonjol, beberapa elemen terkait satu sama lain, dan elemen lainnya tidak memiliki korelasi sama sekali. Yang lebih sulit adalah bagaimana menyampaikan hubungan antar elemen secara visual secara efektif. Di sinilah prinsip kontras berperan.

Kontras adalah perbedaan antara dua elemen atau lebih. Melalui kontras, desainer dapat menciptakan ketertarikan visual sekaligus mengarahkan perhatian pengguna. Bayangkan jika semua elemen pada halaman terlihat sama, maka konten akan terasa tidak teratur, tidak ada “aliran (penglihatan)”, tidak ada struktur yang jelas, dan sulit untuk dipahami dan diterima. Oleh karena itu, kontras merupakan bagian penting dari desain web.

Pada artikel ini, kita akan melihat cara mendesain halaman web yang lebih baik melalui prinsip kontras warna, ukuran, dan perataan.

kontras warna

Ketika kebanyakan orang mendengar kata “kontras”, hal pertama yang mereka pikirkan adalah warna. Meskipun prinsip kontras lebih dari sekedar warna, warna dapat membantu pengguna mengidentifikasi berbagai elemen pada halaman.

Umumnya, halaman menyertakan header, area konten, dan footer. Kemudian kita perlu membedakan dengan jelas ketiga bagian berbeda ini secara visual. Cara yang baik untuk melakukannya adalah dengan menggunakan warna latar belakang yang berbeda.

Situs web churchmedia adalah contoh yang bagus. Gunakan warna latar belakang yang lebih gelap untuk header dan footer, dan putih untuk area konten. Melalui perbedaan ini, konten dapat disorot dengan jelas dan pentingnya hal tersebut ditunjukkan. Jika kita melihat lebih dalam, terdapat juga kontras warna latar belakang yang berbeda di area konten: biru muda digunakan untuk bagian “case”. Karena kontrasnya dengan bagian konten lainnya sangat kecil, berarti kedua bagian tersebut berkaitan.

Portofolio Phil Renaud Situs web ini menggunakan tata letak yang unik dan skema warna yang sangat indah. Situs web ini didesain dengan warna coklat secara keseluruhan, dan dia menggunakan warna kuning keemasan untuk meningkatkan kontras antara area navigasi vertikal dan area lainnya.

Warna juga dapat digunakan untuk menciptakan kontras antar teks. Di Billy Tamplin, warna berbeda digunakan untuk judul, subjudul, dan paragraf artikel untuk membedakan setiap bagian secara wajar dan membentuk struktur visual, yang pada akhirnya mencapai hasil yang baik. Sebagai antarmuka blog, penting untuk membuat kontras antara judul artikel dan konten utama. Dengan cara ini, saat pengguna menggulir halaman, mereka dapat melihat dengan jelas di mana artikel dimulai dan diakhiri.

perbandingan ukuran

Cara lain untuk membedakan desain halaman adalah dengan menggunakan ukuran berbeda untuk elemen berbeda. Dengan kata lain, buat beberapa konten lebih besar dari yang lain.

Ketika warna tidak dapat diandalkan, penting untuk menciptakan kontras melalui ukuran. Taksi hadir dalam beberapa warna dan memiliki banyak berita di halamannya. Oleh karena itu, untuk menetapkan struktur tata letak tiga kolom, desainer menggunakan lebar yang jauh lebih besar di kolom tengah—dua kali lebih besar dari kolom kiri dan kanan. Biarkan pengguna melihat sekilas bahwa kolom tengah adalah bagian halaman yang paling penting.

Sama seperti judul yang dapat menggunakan warna untuk menciptakan kontras, demikian pula ukurannya. Judul adalah cara terbaik untuk membangun struktur visual dalam konten situs web. Situs web Imaginaria Creative menggunakan judul besar untuk menarik perhatian pengguna dan mempertahankannya sehingga mereka akan membaca lebih banyak paragraf kecil di bawah.

Perbandingan keselarasan

Penyelarasan yang baik memainkan peran besar dalam desain web berkualitas tinggi. Segala sesuatunya secara umum terlihat dan terasa lebih baik ketika berbaris. Oleh karena itu, saya merasa bahwa menggunakan perataan yang berbeda untuk menciptakan kontras lebih sulit dan harus digunakan dengan lebih hemat. Tapi ini bisa sangat efektif jika dilakukan dengan benar.

LegiStyles menggunakan spasi putih besar di sebelah kiri blok konten di bawah judul. Ditambah dengan ukuran judul yang besar, menciptakan efek kontras yang bagus. Jika Anda ingin menggunakan perataan yang berbeda, pastikan untuk memperbesar skala yang berbeda ini, jika tidak maka akan terlihat seperti kesalahan desain yang buruk.

Blok teks besar yang berada di tengah adalah tipografi yang dilarang. Karena akan membuat teks sulit dibaca. Namun, coba gabungkan paragraf teks rata kiri dengan judul rata tengah. Ini adalah cara hebat lainnya untuk menciptakan kontras menggunakan perataan berbeda. Dikombinasikan dengan font serif yang bagus, Anda juga bisa mendapatkan efek yang indah.

Simon Collison menggunakan judul rata tengah dan teks rata kiri di setiap blok konten. Walaupun teks judulnya tidak jauh lebih besar dari teks paragraf, namun perbedaannya sudah terlihat.

List Apart adalah contoh bagus lainnya dari judul tengah dengan paragraf rata kiri.

Lakukan itu

Belajar menciptakan kontras yang tepat dalam desain Anda sama seperti mempelajari prinsip-prinsip desain lainnya – dibutuhkan latihan. Luangkan waktu untuk mempelajari karya desainer hebat dan lihat bagaimana mereka menggunakan kontras. Ingat, kontras itu “berbeda”. Jika dua elemen sangat berbeda sifatnya, pastikan keduanya berbeda secara visual.

Teks asli bahasa Inggris: Prinsip Kontras dalam Desain Web