Menggunakan Cara Manusia Memproses Informasi Visual dalam Desain Web

Merancang situs web dan antarmuka pengguna menjadi lebih mudah dalam beberapa tahun terakhir. Ada begitu banyak alat di luar sana yang dapat Anda gunakan yang membuatnya tidak ada gunanya untuk memulai dari awal ketika mengembangkan UI (lihat kompilasi UI baru kami). Tapi saya di sini bukan untuk berdebat tentang kematian desain web.

Alih-alih, apa yang akan saya lakukan adalah mencoba menjelaskan konsep-konsep dasar dan berbasis psikologi di balik kebanyakan alat desain visual (dari kit CSS paling dasar hingga tema premium paling canggih). Anda tidak hanya akan menggunakannya, tetapi juga memahaminya. Saya yakin ini juga akan memudahkan untuk memodifikasi yang sudah ada dengan sukses juga.

Mari kita lihat bagaimana pikiran dan tubuh manusia bekerja dalam hal memproses informasi visual dan bagaimana pengetahuan ini ditafsirkan dalam mendesain untuk web.

Prinsip Organisasi Perseptual

Menurut psikologi Gestalt, keseluruhannya berbeda dari jumlah bagian-bagiannya. Para pengikut aliran pemikiran ini mengklaim bahwa ada beberapa prinsip tentang bagaimana pikiran manusia berkelompok. Ini bukan hanya teori, ingatlah, tetapi fakta praktis aktual tentang pengorganisasian kelompok visual.

Di bawah ini Anda akan menemukan beberapa undang-undang dan penggunaan prinsip-prinsip ini lebih populer dan terkenal. Anda bahkan mungkin dapat menemukan beberapa ide baru untuk desain Anda berikutnya.

Hukum Kesamaan

Prinsip pertama menyatakan itu benda-benda kecil yang mirip dipersepsikan sebagai kelompok, daripada beberapa contoh dari objek kecil yang sama. Kesamaan mungkin didasarkan pada bentuk, warna, bayangan atau kualitas lainnya. Prinsip ini adalah dasar dari desain pola serta banyak desain logo geometris dan minimalis.

Misalnya, gambar ini ditampilkan sebagai logo lingkaran, bukan segitiga terpisah. Bentuk segitiga di bagian bawah elang membuat kita berpikir bahwa bentuknya juga merupakan bagian dari gambar.

Anda mungkin juga menggunakan undang-undang ini tanpa sadar saat membuat beberapa, kotak konten fitur berukuran sama untuk situs web Anda. Jika Anda ingin menunjukkan bahwa elemen konten tertentu memiliki kepentingan yang sama atau berbagi informasi serupa, buat bentuk tertentu hanya untuk tujuan itu. Dengan cara ini, pengguna Anda akan segera mengaitkan bentuk tertentu itu dengan bidang informasi tertentu.

Hukum Kedekatan

Menurut hukum ini benda yang lebih dekat satu sama lain dianggap dari kelompok yang sama. Kuadrat yang sama, ketika dibuat bersebelahan dalam kedekatan yang dekat dan teratur, menciptakan rasa pengelompokan.

Prinsip ini telah banyak digunakan di web akhir-akhir ini, terutama ketika bekerja dengannya loop konten, misalnya di blog dan bengkel web.

Anda dapat langsung mengelompokkan judul, gambar unggulan, metadata, dan kutipan secara bersamaan, bahkan tanpa batas atau latar belakang apa pun. Anda mungkin dapat membersihkan garis dan warna yang tidak perlu dari desain Anda untuk membuatnya lebih minimalis, namun masih sepenuhnya dapat dipahami.

Demi kenyamanan Anda, saya juga akan mengutip Wikipedia yang menyatakan:

Hukum Berwujud Bagus

Juga dikenal sebagai Hukum Pragnanz atau Good Gestalt, hukum ini menyatakan bahwa kita cenderung mengelompokkan benda-benda bersama-sama jika mereka membentuk pola yang sederhana, teratur dan teratur. Pikiran kita mencoba memisahkan bentuk-bentuk yang kompleks dan sulit dipersepsikan ke dalam banyak kelompok bentuk-bentuk yang hanya dapat dipahami; ini mengarah ke pentingnya keringkasan.

Ini juga salah satu kemungkinan alasan di balik kesuksesan desain berbasis grid dan ini membuat struktur web berbasis tabel dan bingkai (untungnya hal-hal dari zaman kegelapan) begitu populer.

Jika Anda mengingat prinsip ini, Anda mungkin tidak akan membuat situs web yang penuh dengan bentuk kompleks blok konten yang akan terhubung melalui undang-undang lain di atas. Tetap saja bisa kelompokkan objek Anda bersama-sama dengan cara yang menarik, misalnya dalam bentuk berlian atau layang-layang, karena itu masih dianggap sebagai bentuk tertib dan ringkas.

Teori warna, persepsi dan penggunaan

Visi warna dan persepsi warna adalah sebagian besar subyektif berdasarkan bagaimana otak pemirsa bereaksi untuk gelombang cahaya yang dipantulkan oleh objek atau bentuk berwarna. Aturannya adalah bahwa orang yang berbeda, bahkan tanpa gangguan penglihatan melihat objek yang sama dengan warna yang berbeda (Anda mungkin ingat gaun itu).

Sifat warna

Masih ada tiga sifat objektif warna; warna, nilai dan intensitas.

Warna adalah nama warna yang diberi label pada roda warna atau pelangi. Ada enam (atau dua belas, tergantung pada siapa Anda berbicara) warna dasar: merah, oranye, kuning, hijau, biru, dan ungu.

Kuning, biru, dan merah utama, oranye, hijau dan ungu sekunder rona; juga ada tersier rona yang merupakan campuran langsung dari dua rona primer dan sekunder (mis. kuning hijau atau merah violet).

Nilai adalah terang atau gelap warna, disebut sebagai bernilai tinggi untuk warna terang atau nilai rendah untuk warna gelap.

Intensitas mengacu kepada kecerahan atau redup dari warna; ini berarti bahwa warna dengan rona dan nilai yang sama masih dapat diredupkan atau dicerahkan dengan mengubah intensitas dan menciptakan keluaran warna yang berbeda..

Intensitas tertinggi dari setiap warna adalah rona yang ditunjukkan pada roda warna (lihat di bawah), sedangkan yang terendah adalah warna abu-abu.

Kontras warna

Merujuk pada hukum persamaan yang disebutkan di atas, pikiran para pengamat menciptakan kelompok-kelompok benda kecil yang mereka lihat berdasarkan sifat yang sama dan berbeda - sering berwarna.

Saat Anda memilih palet warna untuk situs web Anda, terutama jika Anda menggunakan pendekatan minimalis atau jika Anda mendesain area konten yang berat teks, mis. blog atau iklan, Anda harus Waspadai perbedaan warna yang berbeda yang mungkin membantu Anda menemukan nilai warna yang tepat untuk hasil terbaik.

Ada 7 kontras warna menurut Johannes Itten, meskipun saya hanya akan menyebutkan 3.

1. Kontras rona

Kuning, merah dan biru dengan intensitas penuh adalah kontras langsung dan jelas. Warna sekunder menghasilkan perbedaan yang tidak terlalu tajam, tetapi tetap berfungsi, seperti halnya warna tersier, meskipun keduanya tidak menghasilkan hasil yang luar biasa seperti dengan warna primer.

2. Kontras pelengkap

Dua warna kontras yang saling melengkapi jika ketika dicampur bersama mereka menciptakan abu-abu netral. Ini juga disebut pasangan aneh. Jika berdekatan, mereka meningkatkan kejelasan dan intensitas, sementara dicampur bersama mereka membatalkan satu sama lain. Setiap warna memiliki satu dan hanya satu pelengkap; pada roda warna, pasangan secara diagonal berlawanan satu sama lain.

3. Kontras terang-gelap

Jika Anda ingin bereksperimen dengan situs web satu warna, menggunakan nilai berbeda dari rona yang sama mungkin menghasilkan hasil yang luar biasa. Sering digunakan dalam desain web minimalis, Anda juga dapat menghasilkan hasil yang bagus berdasarkan kontras terang-gelap jika Anda ingin memberikan opsi warna tema kepada pengguna Anda. Kontras ini juga digunakan untuk desain skala abu-abu.

Jika Anda ingin mengejar 4 kontras warna yang tersisa, Anda dapat menemukannya di sini.

Membuat palet dan memeriksa kontras

Mengetahui teorinya itu hebat, menafsirkan gagasan Anda adalah hal yang sama sekali berbeda. Anda tidak perlu khawatir, web menyediakan dukungan hebat untuk kebutuhan juggling warna Anda. Ada banyak alat yang membantu Anda membuat pola warna khusus berdasarkan aturan kontras warna, mis. Paletton atau Adobe Kuler.

Untuk tujuan web, Anda mungkin ingin memeriksa kontras yang Anda pilih untuk digunakan di webAIM, di situs Jonathan Snook atau mengunduh contoh Penganalisis Kontras Warna oleh The Paciello Group di sini.

Kesimpulan

Ketika Anda mulai bekerja dengan tema baru atau mulai memodifikasi yang sudah ada, cobalah untuk memikirkan prinsip-prinsip persepsi untuk mengatur konten Anda dan ingat untuk mempertimbangkan aturan warna ketika memberikan desain Anda bentuk dan warna terakhir..

Catatan Editor: Posting tamu ini ditulis untuk Hongkiat.com oleh Marton Fekete. Marton adalah pengembang situs Hongaria yang baru-baru ini terhubung dengan WordPress. Dia adalah penggemar desain ulang dan penulis konten lepas yang suka bermain RPG di waktu luangnya.