01 07
Apa itu Visual Flow?
Aliran visual membawa mata pemirsa melalui dokumen sedemikian rupa sehingga semua elemen penting mendapat ketenaran, dan tidak ada yang menghalangi visi atau menyebabkan pemirsa kehilangan kepekaan pada bagian tersebut. Menggunakan elemen aliran yang jelas seperti panah atau angka adalah cara paling umum yang digunakan desainer Web untuk mengalir, tetapi ada jenis elemen lain yang dapat digunakan dan salah digunakan untuk mengarahkan pembaca Anda untuk bergerak di sepanjang jalur tertentu. Langkah-langkah dalam tutorial ini akan menunjukkan kepada Anda contoh aliran yang baik dan buruk dan membantu Anda mempelajari kosakata aliran visual dalam desain.
Aliran visual dapat dicapai dengan banyak cara:
- Panah
- Gambar berurutan atau elemen teks
- Perspektif
- Gradien
- Perubahan ukuran
- Kurva
- Gerak dalam gambar
- Wajah - terutama mata
Gambar berikut akan menunjukkan kepada Anda beberapa kesalahan umum dalam aliran di halaman Web dan cara memperbaikinya.
02 07
Teks Barat Mengalir dari Kiri ke Kanan
Jika Anda dibesarkan dengan membaca bahasa Barat, Anda terbiasa berpikir bahwa teks harus berpindah dari kiri ke kanan. Jadi, ketika mata bergerak melintasi garis teks, ia bergerak dari kiri ke kanan.
Dalam gambar di atas, air terjun mengalir ke kanan ke kiri, dan teks mengalir ke air terjun. Karena kita semua tahu bahwa air terjun jatuh, ada putuskan ke arah aliran air dengan aliran teks. Mata pemirsa bergerak ke arah yang salah untuk membaca teks.
03 07
Teks Anda Harus Mengalir dengan Gambar
Dalam hal ini, gambar telah dibalik sehingga teks mengalir ke arah yang sama dengan air. Semua elemen mengarahkan mata pemirsa ke bawah dengan aliran air dan aliran teks.
04 07
Kiri ke Kanan Setingkat Cepat
Kuda dalam foto ini berjalan dari kanan ke kiri, tetapi teksnya berbahasa Inggris dan dari kiri ke kanan. Dampak visual dari balap kuda satu arah memperlambat laju seluruh dokumen karena arahnya berbeda dari teks.
Dalam budaya Barat, karena bahasa kita bergerak dari kiri ke kanan, kita telah mengasosiasikan arah visual dari kiri ke kanan sebagai maju dan cepat, sementara kanan ke kiri lebih mundur dan lambat. Ketika Anda membuat tata letak dengan konotasi kecepatan, Anda harus mengingat ini - dan menjaga gambar Anda bergerak ke arah yang sama dengan teks.
05 07
Jangan Paksa Mata Pemirsa untuk Memperlambat
Ketika kuda dan teks keduanya menuju ke arah yang sama, kecepatan yang tersirat meningkat.
06 07
Tonton Mata di Foto Web
Banyak situs web dengan foto yang membuat kesalahan ini - mereka menempatkan foto seseorang di halaman, dan orang tersebut melihat jauh dari konten. Ini bahkan dapat dilihat di situs Web Desain About.com dalam desain lama.
Seperti yang Anda lihat, foto saya ditempatkan di samping beberapa teks. Tapi saya melihat jauh dari teks itu, saya hampir membalikkan punggung saya. Jika Anda melihat bahasa tubuh di antara dua orang dalam suatu kelompok, akan mudah untuk berasumsi bahwa saya tidak menyukai orang yang berada di sebelah saya (dalam hal ini blok teks).
Banyak studi pelacakan mata menunjukkan bahwa orang melihat wajah di halaman web. Dan penelitian terkait telah menunjukkan bahwa ketika melihat gambar, orang kemudian secara tidak sadar akan mengikuti mata untuk melihat apa yang dilihat gambar. Jika foto di situs Anda terlihat di tepi peramban, di sanalah pelanggan Anda akan melihat, lalu menekan tombol kembali.
07 07
Mata di Foto Apapun Harus Menghadapi Konten
Dalam desain baru untuk About.com, foto sedikit lebih baik. Sekarang mata saya melihat lebih ke depan, dan ada sedikit petunjuk bahwa saya melihat ke kiri saya - di mana teks itu berada.
Foto yang lebih baik untuk posisi itu adalah foto di mana bahu saya juga miring ke arah teks. Tapi ini adalah solusi yang jauh lebih baik daripada foto pertama. Dan, untuk situasi di mana gambar akan berada di sebelah kanan konten serta kiri, ini bisa menjadi kompromi yang baik.
Ingat juga, bahwa ketika gambar wajah orang banyak menarik perhatian, hal yang sama berlaku untuk foto-foto hewan. Sebagai contoh, dalam tata letak contoh ini, saya memiliki anjing-anjing saya yang melihat ke kiri, tetapi gambarnya benar. Jadi mereka mencari dari halaman. Tata letak ini akan diperbaiki jika saya mengubah orientasi anjing sehingga mereka melihat ke tengah layar.