Pertama ada batu tablet, Papirus gulungan dan kertas. Kemudian datang layar komputer dan tablet elektronik. Sebagai teknologi untuk menampilkan halaman berkembang, tetap pekerjaan perancang untuk mengatur konten dengan jelas. Tapi apa cara terbaik? Singkatnya, hirarki visual.

Berikut adalah definisi dari hirarki visual: hirarki visual adalah susunan elemen grafis dalam desain dalam urutan pentingnya setiap elemen. Bobot visual mendefinisikan pentingnya elemen dalam hirarki Desain, berkomunikasi dengan mata pemirsa apa yang harus difokuskan dan dalam urutan apa.

Ini pertanyaan yang semakin penting, karena kerangka kerja responsif memaksa desainer untuk berpikir tentang banyak halaman yang berbeda sekaligus. Dihadapkan dengan teks padat dan rentang perhatian yang pendek, desainer mengembangkan 6 prinsip untuk memandu mata pembaca untuk informasi yang paling penting.

Ini 6 prinsip hirarki visual akan membantu Anda merancang segala sesuatu dari brosur untuk aplikasi, menjamin pengalaman membaca yang positif bagi pengguna akhir.

1. Pola Membaca

Semua budaya membaca dari atas ke bawah dan sebagian besar budaya membaca dari kiri ke kanan. Tapi sementara pengetahuan itu penting untuk desain halaman, perancang tahu tugasnya jauh lebih kompleks.

Penelitian terbaru menunjukkan bahwa pertama orang memindai halaman untuk mendapatkan rasa Apakah mereka tertarik, sebelum melakukan membacanya. Pola pemindaian cenderung mengambil salah satu dari dua bentuk, “F” dan “Z,” dan Anda dapat mengambil keuntungan dari ini dalam desain Anda.

Pola F

Pola F berlaku untuk tradisional, halaman teks-berat seperti artikel atau posting blog. Seorang pembaca memindai sisi kiri halaman, mencari kata kunci yang menarik dalam judul kiri-selaras atau kalimat topik awal, kemudian berhenti dan membaca (ke kanan) ketika ia datang ke sesuatu yang menarik. Hasilnya terlihat seperti F (atau E, atau sesuatu yang bahkan lebih horizontal Bar; tapi “F” istilah telah terjebak).

Bagaimana Anda dapat memanfaatkan ini? Menyelaraskan informasi penting Anda kiri dan membuat penggunaan pendek, judul tebal, poin peluru dan lain seperti perhatian-grabbers untuk memecah blok paragraf.

Pola Z

Pola Z berlaku untuk jenis halaman lain, seperti iklan atau situs web, di mana informasi tidak selalu disajikan dalam paragraf blok. Mata pembaca pertama scan di bagian atas halaman, di mana informasi penting mungkin akan ditemukan, kemudian tunas ke sudut yang berlawanan pada diagonal dan melakukan hal yang sama di bagian bawah halaman.

Web Designer umumnya membangun halaman mereka untuk menyesuaikan diri secara eksplisit untuk perilaku ini, menempatkan informasi yang paling penting di sudut dan berorientasi informasi penting lainnya di sepanjang Bar atas dan bawah dan menghubungkan diagonal.

Dalam desain di bawah ini untuk 2010 membangun konferensi, elemen penting termasuk logo (kiri atas), “Daftar sekarang” tombol (kanan atas), dan daftar pembicara (di bagian bawah), yang semuanya secara strategis ditempatkan di bintik-noda manis dari Z-pola.

2. Ukuran itu Penting

Yang satu ini cukup sederhana: orang membaca hal yang lebih besar terlebih dahulu. Jika mata Anda pergi ke “kinerja” sebelum “retak” di bawah iklan untuk teater Young Vic, maka Anda harus menghubungi psikolog persepsi segera: Anda mungkin dapat membuat beberapa uang yang baik selama pengujian sebagai anomali langka.

Yang menarik adalah bahwa kecenderungan ini sebenarnya cukup kuat untuk menimpa aturan top-down. Pada gambar di atas, “retak” menimpa “waktu untuk bertindak” karena itu lebih besar dan ke kiri (jadi aturan kiri-ke-kanan meminjamkan tangan).

Tetapi pada halaman di bawah ini dari laporan tahunan: kampanye hak asasi manusia 2012 (dirancang oleh Column Five media), kita membaca besar-Print “berjuang untuk kesetaraan pada kampanye Trail” sebelum teks langsung di atasnya, “pemilu 2012.”

“Pemilu 2012” adalah tingkat tertinggi urutan informasi: ia memberitahu kita topik umum bahwa informasi di bawah ini jatuh di bawah. Tapi perancang memutuskan bahwa judul artikel itu lebih menarik bagi pembaca dan ukurannya dibesarkan supaya dibaca pertama kali.

3. Ruang dan Tekstur

Cara lain menarik perhatian adalah untuk memberikan konten ruang yang cukup untuk bernapas. Jika ada ruang negatif yang substansial yang tertinggal di sekitar tombol, atau garis di blok teks secara luas dilacak, elemen ini akan lebih mudah terlihat oleh pembaca.

Seperti yang Anda lihat pada gambar di bawah ini (bagian dari situs DrawtoClick), jarak dapat menjadi alternatif yang elegan atau tambahan untuk penggunaan ukuran. Di sini, titik penjualan, “Notre Agence Vous accompagne…”, adalah dalam font yang sangat kecil, tetapi dikelilingi oleh kelebihan dari ruang putih yang sinyal pentingnya. Di bawah ini, frase “Le kompensasi,” “Le réaliser” dan “Le partager” menerima penekanan ekstra dengan menjadi kotak off dari ruang sekitarnya.

Ketika orang berbicara tentang “tekstur” sehubungan dengan hirarki visual, mereka tidak mengacu pada efek tekstur bergambar. Sebaliknya, semacam ini “tekstur” mengacu pada pengaturan keseluruhan atau pola ruang, teks dan detail lainnya pada halaman. Contoh ini oleh Bright Pink menggambarkan konsep dengan baik:

Pada gambar pertama, kata “olahraga” lebih tinggi dalam hirarki daripada “Bulutangkis” karena lebih tinggi, lebih besar dan lebih berani. Dalam gambar kedua, dua kata adalah tentang setara, berkat persegi panjang hitam yang menyoroti “Bulutangkis” dan set ke ruang sendiri.

Pada gambar ketiga, coretan latar belakang mengganggu ruang “olahraga” tetapi bukan “bulu tangkis”, dan akibatnya menghasilkan pembalikan di mana “Bulutangkis” tertinggi dalam hirarki. Perkembangan seperti itu sulit untuk memprediksi, jadi desainer sering kapur itu sampai dengan rasa holistik “tekstur.”

4. Tipografi Berat dan Pasangan

Pilihan typeface sangat penting untuk membangun hirarki visual. Di antara atribut paling penting dari typeface adalah bobot-lebar goresan yang membentuk huruf-hurufnya-dan gayanya, seperti serif dan sans serif. Modifikasi lain seperti italicization juga dapat memainkan peran.

Perlu dicatat bagaimana jenis huruf mempengaruhi urutan hirarki kata di bawah desain web untuk The Tea Factory: “teh yang sempurna untuk membuat Anda tetap hangat” adalah titik fokus, tetapi perbedaan dalam jenis berat dan italicization, selain penempatan kata, menghasilkan lebih dinamis, kurang linear, pengalaman membaca. “Lihat pilihan kami,” ajakan untuk bertindak, lebih kuat ditekankan daripada teks di atasnya karena ukuran dan jarak.

Dalam beberapa kasus, tujuannya adalah untuk menyajikan berbagai informasi yang sama mendesak. Mengatur itu semua dengan ukuran dan berat yang sama akan mencapai kesetaraan, tetapi juga akan membuatnya monoton. Membedakan tipografi adalah salah satu cara untuk menghindarinya, seperti pada sampul majalah trendi di bawah ini.

Di sini, lima teaser di sekitar pinggiran halaman semuanya sama pada hirarki, namun mencapai variasi dengan mengubah antara dua tipografi yang dipasangkan dengan baik-satu serif Mid-Weight, yang lainnya adalah sans serif ringan namun tinggi.

5. Warna dan Tint

Ini yang lainnya: warna cerah menonjol dari warna diredam atau grayscale, sementara tint lebih ringan muncul lebih “jauh” dan dengan demikian jatuh lebih rendah pada hirarki daripada yang lebih kaya, yang lebih gelap. Situs web untuk di mana mereka di kontras stabilo kuning dan warna penerangan terhadap grid hitam-dan-putih untuk efek mencolok:

Situs web Guggenheim menggunakan warna untuk menonjolkan informasi penting seperti pilihan lokasi, daftar pameran yang saat ini sedang dilihat, dan link ke pameran khusus.

Situs web untuk Museum Whitney, di sisi lain, membentuk hirarki dalam satu jenis huruf, bobot dan nada (hitam) dengan menggunakan warna (yang mengacu pada penambahan warna putih ke nada dasar, membuatnya lebih ringan). “Cory Arcangel pada budaya pop” jelas di bawah “New on Whitney Stories” pada hirarki visual, bukan hanya karena ditempatkan lebih rendah tetapi karena warna yang lebih ringan, sehingga kurang mencolok untuk mata terhadap latar belakang putih.

Warna sangat penting dalam desain aplikasi seluler, di mana ukuran layar yang kecil membatasi kemampuan Anda untuk menggunakan strategi lain seperti diferensiasi ukuran dan jarak yang luas. Pada aplikasi Grainger Industrial Supply, tombol “lanjutkan ke checkout” berwarna merah, sehingga menonjol dari halaman mana pun yang muncul. The “Persempit hasil pencarian Anda” Bar, dengan kontras, adalah Grey, membuatnya kurang lebih setara pada hirarki dengan elemen lain seperti bar pencarian dan produk link.

6. Arah

Tata letak halaman biasanya dirancang sesuai dengan grid garis vertikal dan horisontal, baik oleh Konvensi dan karena ini adalah format yang paling mudah dibaca. Dalam sistem tersebut, sebuah cara baru untuk membangun hirarki muncul: Break grid.

Teks yang diatur pada kurva atau diagonal akan secara otomatis berdiri keluar terhadap sekitar grid-teks terkunci, mengambil tengah panggung. Ini telah lama menjadi strategi yang efektif dalam iklan seperti di bawah halte bus poster oleh Frost Design.

sumber: 99designs.com