Arah Kandungan Visual Yang Anda Perlu Tahu
The arah visual kandungan adalah aspek yang kurang dibincangkan, tetapi aspek penting dalam reka bentuk web yang bertukar tinggi. Setiap pelawat "menaikkan" laman web baru pada beban halaman pertama - sama ada mereka melakukannya secara sedar atau tidak.
Estetika memainkan peranan, tetapi lebih lanjut mengenai rasa keseluruhan reka bentuk. Perasaan ini boleh dipengaruhi oleh ruang putih, tipografi, simetri, tetapi kebanyakannya hubungan antara elemen halaman.
Pereka mahu pengunjung ke tinggal di halaman dan teruskan menatal dengan menangkap perhatian mereka dan menjaga mereka berminat di laman web ini. Prinsip reka bentuk harus sentiasa fokus pada fungsi sebelum borang. Ini bermakna reka bentuk sepatutnya melengkapkan kandungan, tidak mendorongnya sebagai satu perasan.
Dalam jawatan ini, saya ingin menunjukkan kepada anda beberapa petua tentang cara anda boleh meningkatkan susun atur dan aliran kandungan visual anda di laman anda.
Fokus pada Komposisi
Setiap satu laman web membina apabila susun atur keseluruhan. Susunatur keseluruhan ini mewujudkan komposisi yang mengikuti peraturan teori Gestalt yang menyatakan itu keseluruhannya sentiasa lebih besar daripada jumlah bahagian.
Bidang individu pada halaman bersatu untuk membentuk keseluruhan. Elemen reka bentuk perlu membina tarikan graviti pada kandungan; segala-galanya di laman harus secara semula jadi membimbing pelawat ke bawah sehingga mereka mencapai bahagian bawah halaman.
Inilah sebabnya mengapa hubungan antara bahagian kandungan yang berlainan (visual, teks, butang, dan lain-lain) sangat penting untuk mereka bentuk.
Matlamat anda sepatutnya menggalakkan orang ramai untuk melayari laman web ini dari kecenderungan mereka sendiri. Ia lebih mudah dikatakan daripada dilakukan, tetapi anda boleh belajar dengan banyak mengkaji contoh sebenar.
Halaman rumah untuk Monkop adalah contoh hebat hierarki visual dengan kedua-dua teks dan visual. Banyak ruang digunakan di antara elemen, dan tipografi melengkapi ilustrasi vektor berjenama.
Seperti yang anda tatal, anda akan perasan blok halaman mendatar lurus dibahagikan dengan warna, sempadan dan grafik. Ini dibina dengan corak reka bentuk dalam fikiran menawarkan konsistensi sepanjang halaman.
Ke arah bawah, anda akan dapati perpecahan dua lajur dengan imej di satu sisi, teks di sisi yang lain. Imej-imej itu juga bertukar belah dalam corak kanan kiri-kanan-kiri. Ini menarik perhatian, dan memecahkan monotoni halaman biasa semasa masih ada mengekalkan aliran semula jadi dalam kandungan.
A estetik reka bentuk yang serupa boleh didapati di laman web Picjumbo, halaman arahan untuk addon foto untuk pengguna Photoshop dan Sketch.
Halaman rumah meletakkan fokus pada logo dan video pratonton. Seperti yang anda tatal, anda akan melihat animasi tersuai yang bergerak di seluruh halaman. Animasi ini benar-benar menangkap perhatian, dan mendapat penonton berminat untuk terus menatal.
Secara keseluruhan, halaman terasa buka dan mudah dilayari. Kandungannya dibahagikan kepada blok melintang dengan tipografi tajam dan ikon bersih.
Pertimbangkan cara elemen halaman berbeza baki bersama-sama, ruang antara elemen, kontras antara warna, dan bentuk yang berbeza. Semua perkara ini memainkan peranan dalam komposisi keseluruhan. Setiap laman web secara semula jadi menarik berat tertentu ke kandungan.
Tidak ada jawapan mutlak kerana ia berbeza untuk setiap laman web. Sebagai contoh, beberapa pautan navigasi kelihatan lebih baik apabila mereka besar dan besar. Lain-lain sesuai dengan baik apabila mereka kecil dengan huruf besar.
Saya cadangkan anda mempelajari laman web lain di niche anda. Benar-benar menganalisis bagaimana ia disatukan. Malah cuba letak semula susun atur untuk melihat unsur-unsur yang akhirnya membuat reka bentuk "bersatu".
Jenis Perkara Reka Bentuk
Cara anda bentuk tipografi anda akan menjejaskan hala kandungan di laman anda. Ini mempunyai kaitan dengan hierarki jenis dan gaya reka bentuk unsur halaman yang berbeza seperti perenggan, tajuk, senarai bullet, sebut harga, dan unsur susun atur khas seperti lajur atau jadual.
Visual boleh menjejaskan susun atur juga, jadi ia adalah idea yang baik untuk mereka bentuk kandungan dengan perkembangan semula jadi. Tulis kandungan dengan cara itu mengalir ke halaman, dan membuat orang membaca melalui setiap perenggan.
Alat yang paling hebat yang ada pada anda adalah mata anda untuk reka bentuk. Belajar untuk mengenali perbezaan dalam unsur-unsur percetakan, dan bagaimana ia berkaitan dengan elemen halaman lain. Buat hubungan antara bahagian halaman untuk membezakan kawasan kandungan.
Beberapa perkara yang anda mungkin pertimbangkan:
- Saiz teks
- Keluarga fon
- Sebaliknya warna
- Hubungan bahagian halaman
- Ketinggian garis dan margin perenggan
- Ruang huruf dan huruf kecil / huruf
Sebagai contoh, lihat laman utama Monitor Kempen. Pautan navigasi atas menggunakan semua topi dengan huruf kecil. Tajuk lain pada halaman ikuti semua reka bentuk topi yang sama yang mana mewujudkan rasa keseragaman.
Tajuk lain yang lebih besar di laman web ini lebih menonjol, dan mereka benar-benar melompat dari halaman. Hanya dengan melihat reka bentuk header biasa, ia harus mudah nyatakan perbezaan antara tajuk dan salinan badan pasangannya.
Gaya reka bentuk percetakan pada Monitor Kempen sangat menarik, dan mereka campuran secara alami ke dalam tata letak. Ia mengambil amalan untuk mencapai keputusan seperti ini, tetapi semakin banyak anda cuba, semakin mudah.
Untuk mempelajari lebih lanjut, saya sangat mengesyorkan pautan berikut:
- Prinsip Rekabentuk: Berat Visual Dan Arah
- Bekerja dengan Berat Visual dalam Reka Bentuk Anda
- 19 Faktor-Faktor Yang Mempengaruhi Keseimbangan Komposisi
Kandungan Panduan
Memahami itu pelbagai jenis laman web mempunyai kaedah yang berbeza untuk membimbing pelawat melalui laman web ini. Sebagai contoh, halaman arahan mahu membimbing pengunjung berita maklumat, ikon kecil, tangkapan skrin, dan testimoni.
Laman-laman lain seperti blog biasanya tidak membawa orang ke laman utama sekaligus. Kebanyakan orang tanah di halaman artikel, jadi susunatur pos blog dimaksudkan untuk sorot tajuk utama, dan menarik orang terus ke dalam kandungan. Di sinilah copywriting yang berkualiti dimainkan kerana anda mahu pembaca menggantung setiap perkataan.
Rangkaian sosial dan aplikasi web perlu pengalaman pengguna yang berkualiti, jadi itu topik yang sedikit berbeza, tetapi pertimbangkan bagaimana suapan Facebook direka untuk menggalakkan menatal dan interaksi pengguna.
Kaedah reka bentuk yang anda gunakan untuk memastikan orang melayari laman web akan berubah mengikut masa. Tetapi secara amnya, matlamat anda adalah untuk membimbing pelawat dengan arah kandungan visual.
Mari kita lihat a halaman arahan dan a reka bentuk blog untuk melihat perbezaan.
Cactus adalah penjana tapak statik untuk OS X. Halaman rumah mereka berikut gaya reka bentuk Apple - banyak ruang kosong dan fon sans-serif nipis.
Kandungan diatur dalam lajur, blok, dan potongan teks dengan grafik mudah. Estetika yang sama ini biasa dengan produk Apple, jadi pengguna Mac akan menikmati gaya reka bentuk ini.
Maklumat mengenai produk - termasuk ciri dan persediaan - disenaraikan di halaman utama. Halaman itu sendiri menggalakkan menatal melalui kandungan yang unik, ikon asas, dan corak lajur baki blok kandungan kiri / kanan.
Matlamat di sini adalah untuk memberi maklumat kepada pengguna sedia ada, dan untuk menjual pengguna baru idea Cactus.
Kini bandingkan reka bentuk ke laman utama untuk The Next Web. Kandungannya lebih sporadis di halaman rumah blog, kerana ada banyak topik tulisan yang berbeza.
Rectangles mencipta sistem grid yang merangkumi pelbagai jawatan ke dalam susun atur tunggal. Matlamat di sini adalah untuk dapatkan pengguna membaca kandungan di laman web ini. Tidak masalah jika pengunjung memuat apa-apa, tetapi perkara itu penting berpegang teguh untuk membaca sesuatu.
Cara untuk mendapatkan orang membaca adalah dengan gambar hebat dan tajuk utama yang menarik. TNW melakukan tugas yang hebat ini, dan tata letak mereka dibina untuk memastikan orang melayari dengan lakaran kecil yang berkaitan dalam bar sisi dan selepas kandungan.
Pelawat membimbing kepada tindakan tertentu berbeza di setiap laman web. Tetapi anda boleh belajar banyak dengan mengkaji apa yang berjaya laman web lain, dan belajar bagaimana untuk menyalin.
Percayalah Mata Anda
Ciri-ciri reka bentuk individu boleh diterangkan secara analitikal, tetapi perubahan pelaksanaan untuk setiap tapak. Imej pahlawan dengan pautan "Skrol lagi" tidak melakukan perkara yang sama di semua laman web.
Pembelajaran untuk reka bentuk adalah sangat a proses visual. Mata anda untuk reka bentuk adalah aspek yang paling penting. Anda perlu lihat perkara dengan betul untuk mengenal pasti ini hierarki visual. Jika anda dapat melihatnya di laman web lain maka anda akan dapat meniru di tapak anda sendiri.
Nasihat terbaik yang saya miliki adalah hanya percayakan mata anda. Buat senarai laman web kegemaran anda, dan belanjakan 5 minit setiap satu. Tulis elemen kegemaran anda pada halaman, dan bagaimana ia mempengaruhi reka bentuk. Ini akan membantu anda mendalami konsep ini dari perspektif UI / UX, bukan perspektif pengguna.
Juga jangan takut untuk mencuba perkara! Tidak ada yang baik pada reka bentuk hanya dengan membaca rencana mengenai reka bentuk. Ya, mereka membantu - mereka sebenarnya boleh membantu banyak. Tetapi anda keperluan kepada buat barangan dari awal untuk belajar apa kerja-kerja dan apa tidak.
Melatih matlamat anda dengan mempelajari tata letak tapak web yang anda suka, dan buat semula. Dari masa ke masa, anda akan membina sebuah perpustakaan corak di dalam minda anda yang membuat reka bentuk laman web baru lebih mudah.
Mengakhiri
Mudah-mudahan tip-tip ini akan membantu anda memulakan dan memberikan hala tuju asas untuk diikuti. Ia tidak mudah menjadi seorang pereka web, tetapi dunia memerlukan bakat, dan tidak pernah lebih mudah untuk mengajarkan diri anda konsep-konsep asas ini.
Kajian contoh terbaik laman web dengan elemen halaman yang anda nikmati. Melatih mata anda untuk mengenali hubungan, dan anda akan cepat membangunkan kemahiran yang diperlukan meniru hubungan tersebut dalam kerja anda sendiri.
