Arah Konten Visual Yang Perlu Anda Ketahui
Itu arah konten visual adalah aspek yang kurang banyak dibahas, tetapi penting dari desain web konversi tinggi. Setiap pengunjung "menyerap" situs baru di halaman pertama - apakah mereka melakukannya secara sadar atau tidak.
Estetika memang memainkan peran, tetapi lebih tentang keseluruhan nuansa desain. Perasaan ini dapat dipengaruhi oleh spasi putih, tipografi, simetri, tetapi sebagian besar hubungan antara elemen halaman.
Desainer menginginkan pengunjung tetap di halaman dan terus bergulir dengan menarik perhatian mereka dan membuat mereka tertarik pada situs. Prinsip-prinsip desain harus selalu fokus berfungsi sebelum formulir. Ini berarti desain harus melengkapi konten, tidak mendorongnya sebagai renungan.
Dalam posting ini, saya ingin menunjukkan kepada Anda beberapa tips tentang bagaimana Anda bisa tingkatkan tata letak dan aliran konten visual Anda di situs Anda.
Fokus pada Komposisi
Setiap bagian situs web dibuat pada tata letak keseluruhan. Tata letak keseluruhan ini menciptakan komposisi yang mengikuti aturan teori Gestalt yang menyatakan itu keseluruhan selalu lebih besar dari jumlah bagian.
Masing-masing area dari suatu halaman bersatu membentuk keseluruhan. Elemen desain perlu dibangun a tarikan gravitasi pada konten; semua yang ada di halaman harus secara alami memandu pengunjung lebih jauh hingga mereka mencapai bagian bawah halaman.
Inilah sebabnya mengapa hubungan antara berbagai bagian konten (visual, teks, tombol, dll.) Sangat penting untuk dirancang.
Tujuan Anda seharusnya mendorong orang untuk menelusuri situs dari kecenderungan mereka sendiri. Ini lebih mudah diucapkan daripada dilakukan, tetapi Anda bisa belajar banyak dengan mempelajari contoh nyata.
Halaman beranda untuk Monkop adalah contoh hierarki visual yang bagus baik teks dan visual. Banyak ruang digunakan antara elemen, dan tipografi melengkapi ilustrasi vektor bermerek.
Saat Anda menggulir, Anda akan melihat blok halaman horisontal lurus dibagi dengan warna, batas dan gambar. Ini dibangun dengan pola desain dalam pikiran untuk menawarkan konsistensi di seluruh halaman.
Ke arah bawah, Anda akan menemukan perpecahan dua kolom dengan gambar di satu sisi, teks di sisi lain. Gambar juga bertukar sisi dalam pola kanan-kiri-kanan-kiri. Ini menarik perhatian, dan memecah monoton halaman khas saat masih menjaga aliran alami dalam konten.
SEBUAH estetika desain serupa dapat ditemukan di situs web Picjumbo, halaman arahan untuk addon foto untuk pengguna Photoshop dan Sketch.
Halaman beranda menempatkan fokus pada logo dan video pratinjau. Saat Anda menggulir, Anda akan melihat animasi khusus yang bergerak di seluruh halaman. Animasi ini sungguh menangkap perhatian, dan mendapatkan penonton tertarik untuk terus menggulir.
Secara keseluruhan, halaman terasa Buka dan mudah dijelajahi. Isinya dibagi menjadi blok horisontal dengan tipografi yang tajam dan ikon bersih.
Pertimbangkan cara berbagai elemen laman seimbang bersama, ruang antara elemen, kontras antara warna, dan bentuk yang berbeda. Semua hal ini berperan dalam komposisi keseluruhan. Setiap situs secara alami menarik bobot tertentu ke konten.
Tidak ada jawaban mutlak karena berbeda untuk setiap situs. Sebagai contoh, beberapa tautan navigasi terlihat lebih baik ketika besar dan besar. Yang lain lebih cocok saat mereka kecil dengan huruf besar.
Saya sarankan Anda mempelajari situs web lain di ceruk pasar Anda. Benar-benar menganalisis bagaimana mereka disatukan. Bahkan cobalah membangun kembali tata letak untuk melihat elemen mana yang akhirnya membuat desain "menyatu".
Jenis Desain Penting
Cara Anda mendesain tipografi Anda akan memengaruhi arah konten di situs Anda. Ini ada hubungannya dengan jenis hierarki dan gaya desain elemen halaman yang berbeda seperti paragraf, tajuk, daftar berpoin, kutipan, dan elemen tata letak khusus seperti kolom atau tabel.
Visual dapat mempengaruhi tata letak juga, jadi itu ide yang baik untuk mendesain konten dengan perkembangan alami. Tulis konten dengan cara itu mengalir ke bawah halaman, dan membuat orang membaca melalui setiap paragraf.
Alat terbaik yang Anda miliki adalah yang Anda miliki mata Anda untuk desain. Belajarlah untuk mengenali perbedaan dalam elemen tipografi, dan bagaimana mereka berhubungan dengan elemen halaman lainnya. Buat hubungan antara bagian halaman untuk membedakan area konten.
Beberapa hal yang mungkin Anda pertimbangkan:
- Ukuran teks
- Keluarga font
- Kontras warna
- Hubungan bagian halaman
- Tinggi garis dan margin paragraf
- Penspasian huruf dan huruf besar / kecil
Misalnya, lihat beranda Monitor Kampanye. Tautan navigasi teratas menggunakan semua huruf kecil dengan huruf kecil. Header lain di halaman ikuti desain semua topi ini sama yang menciptakan rasa keseragaman.
Header besar lainnya di situs adalah jauh lebih menonjol, dan mereka benar-benar melompat dari halaman. Hanya dengan melihat desain header yang khas, itu seharusnya mudah katakan perbedaannya antara header dan salinan tubuhnya yang dipasangkan.
Gaya desain tipografi pada Monitor Kampanye sangat bagus, dan mereka berbaur secara alami ke dalam tata letak. Dibutuhkan latihan untuk mencapai hasil seperti ini, tetapi semakin banyak Anda mencoba, akan semakin mudah.
Untuk mempelajari lebih lanjut, saya sangat merekomendasikan tautan berikut:
- Prinsip Desain: Berat Visual dan Arah
- Bekerja dengan Berat Visual dalam Desain Anda
- 19 Faktor Yang Memengaruhi Neraca Komposisi
Konten Panduan
Pahami itu berbagai jenis situs web memiliki metode yang berbeda untuk membimbing pengunjung melalui situs. Misalnya laman landas ingin memandu pengunjung tidbits informasi, ikon kecil, tangkapan layar, dan testimonial.
Situs lain seperti blog biasanya tidak membawa orang ke beranda sekaligus. Kebanyakan orang mendarat di halaman artikel, jadi tata letak posting blog dimaksudkan untuk sorot informasi utama, dan menarik orang lebih jauh ke dalam konten. Di sinilah copywriting berkualitas berperan karena Anda ingin pembaca menggantungkan setiap kata.
Perlu jejaring sosial dan aplikasi web pengalaman pengguna yang berkualitas, jadi itu topik yang sedikit berbeda, tetapi pertimbangkan bagaimana umpan Facebook dirancang mendorong gulir dan interaksi pengguna.
Metode desain yang Anda terapkan akan membuat orang tetap meramban situs berubah seiring waktu. Tetapi umumnya, tujuan Anda adalah untuk membimbing pengunjung dengan arah konten visual.
Mari kita lihat a halaman arahan dan a desain blog untuk melihat perbedaan.
Cactus adalah generator situs statis untuk OS X. Halaman beranda mereka mengikuti erat gaya desain Apple - banyak spasi putih dan font sans-serif yang tipis.
Konten disusun dalam kolom, blok, dan potongan teks dengan grafik sederhana. Estetika yang sama adalah umum dengan produk Apple, jadi pengguna Mac akan menikmati gaya desain ini.
Informasi tentang produk - termasuk fitur dan pengaturan - terdaftar tepat di halaman rumah. Halaman itu sendiri mendorong pengguliran melalui konten unik, ikon dasar, dan pola kolom bolak-balik blok konten kiri / kanan.
Tujuannya di sini adalah untuk memberikan informasi kepada pengguna yang ada, dan untuk dijual pengguna baru gagasan Cactus.
Sekarang bandingkan desain itu dengan halaman muka untuk The Next Web. Isinya jauh lebih sporadis di halaman rumah blog, karena ada banyak topik posting yang berbeda.
Rectangles membuat sistem grid yang merangkum banyak posting menjadi satu tata letak. Tujuannya di sini adalah untuk dapatkan pengguna membaca konten di tempat. Tidak masalah jika pengunjung mengunduh sesuatu, tetapi itu penting jika mereka tetaplah membaca sesuatu.
Cara agar orang membaca adalah dengan foto-foto bagus dan berita utama yang menarik. TNW melakukan pekerjaan dengan baik, dan tata letaknya dibangun untuk membuat orang menjelajah dengan thumbnail pos terkait di bilah samping dan area setelah konten.
Memandu pengunjung ke tindakan tertentu berbeda di setiap situs. Tetapi Anda dapat belajar banyak dengan mempelajari apa yang dilakukan situs sukses lainnya, dan belajar cara menyalin.
Percayai Mata Anda
Properti desain individual dapat dijelaskan secara analitis, tetapi implementasinya berubah untuk setiap situs. Gambar pahlawan dengan tautan "Gulir lebih jauh" tidak melakukan hal yang sama di semua situs web.
Belajar mendesain sangat banyak proses visual. Mata Anda untuk desain adalah aspek yang paling penting. Kamu butuh melihat sesuatu dengan benar untuk mengidentifikasi ini hierarki visual. Jika Anda dapat melihatnya di situs web lain maka Anda akan dapat mereplikasi di situs Anda sendiri.
Saran terbaik yang saya miliki adalah untuk percaya saja matamu. Buat daftar situs web favorit Anda, dan habiskan 5 menit meramban masing-masing situs. Tuliskan elemen favorit Anda di halaman, dan bagaimana mereka memengaruhi desain. Ini akan membantu Anda menginternalisasi konsep-konsep ini dari perspektif UI / UX, bukan perspektif pengguna.
Juga jangan takut untuk mencoba barang! Tidak ada yang pandai desain hanya dengan membaca artikel tentang desain. Ya, mereka membantu - mereka benar-benar dapat banyak membantu. Tapi kamu perlu untuk buat barang dari awal untuk mempelajari apa bekerja dan apa tidak.
Latih mata Anda dengan mempelajari tata letak situs web yang Anda sukai, dan membuatnya kembali. Seiring waktu, Anda akan membangun perpustakaan pola dalam pikiran Anda yang membuat mendesain situs baru jauh lebih mudah.
Membungkus
Semoga tips ini akan membantu Anda memulai dan memberi Anda peta jalan dasar untuk diikuti. Tidak mudah menjadi seorang desainer web, tetapi dunia membutuhkan bakat, dan tidak pernah lebih mudah untuk mengajarkan konsep dasar ini kepada diri Anda sendiri.
Belajar contoh situs web terbaik dengan elemen halaman yang Anda sukai. Melatih mata Anda mengenali hubungan, dan Anda akan dengan cepat mengembangkan keterampilan yang diperlukan untuk mengulangi hubungan-hubungan itu dalam pekerjaan Anda sendiri.
