Header situs web seringkali merupakan hal pertama yang dilihat pengguna. Itu dapat membuat atau menghancurkan pengalaman pengguna, merek Anda, dan banyak lagi!

Untuk membantu mempertahankan pengguna dan membuat mereka terus bergerak melalui desain, Anda perlu membuat header situs web yang memukau. Dan tidak hanya di beranda. Di setiap halaman desain. (Ingat, sejumlah besar pengguna tidak pergi ke beranda Anda terlebih dahulu.) Begini caranya.

1. Gunakan Gambar yang Memukau

Gambar yang bagus selalu membuat kesan pertama yang luar biasa. Baik Anda memilih foto, video, animasi, atau elemen “seni” lainnya, setiap tajuk akan mengarah dengan citra yang ingin dilihat pengguna.

Gambar header lebih dari sekadar gambar cantik. Ini adalah pintu gerbang ke semua konten pada halaman itu, dan mungkin bahkan lebih dalam konten dalam desain.

Gambar saja merupakan titik awal yang bagus, tetapi Anda harus memasangkannya dengan elemen lain untuk benar-benar memanfaatkan konten. Elemen lain yang mungkin muncul di header termasuk:

• Teks atau judul
• Logo atau pengenal merek
• Tombol atau ajakan bertindak
• Elemen navigasi
• Cari

Pilih gambar yang tajam, resolusi tinggi dan memberikan banyak kontras untuk elemen lain seperti teks atau tombol. Orang-orang suka melihat wajah, jadi pertimbangkan untuk menunjukkan kepada orang-orang yang menggunakan atau berinteraksi dengan produk atau layanan Anda jika memungkinkan. Ingin memamerkan proyek portofolio terbaru Anda? Gunakan template mockup untuk membuatnya lebih menarik dan menarik.

2. Memasukkan Elemen Navigasi

Tidak ada alasan Anda harus menganggap header dan navigasi sebagai elemen yang terpisah; mereka sering merupakan bagian dari konsep visual yang sama. Apakah Anda menyukai navigasi menu lengkap atau sesuatu yang muncul dari ikon hamburger, elemen navigasi harus menjadi bagian dari rencana desain header.

Dan saat Anda berpikir tentang header dan nav, pertimbangkan pola navigasi yang lengket juga. Sekalipun pengguna menjauh dari tajuk utama – yang bisa menjadi kecil seperti bilah navigasi atau sebesar tampilan layar penuh – mereka dapat dengan cepat menjelajahi desain situs.

Elemen navigasi di header akan melakukan hal lain yang mungkin tidak Anda harapkan. Karena ini sering berupa potongan teks atau ikon yang lebih kecil, ini dapat membantu membangun hierarki di dalam tajuk, memperlihatkan kepada pengguna cara berinteraksi dengan desain.

3. Buat Pesan Khusus

Memunculkan gambar yang bagus di tajuk saja tidak cukup. Apa yang dikatakan?

Pertimbangkan bagaimana pesan tajuk berkomunikasi dengan pengguna.

• Apakah ini memberi tahu mereka apa yang harus dilakukan atau apa yang diharapkan dari konten pada halaman?
• Apakah semua elemen mengkomunikasikan pesan tunggal dan terpadu yang mudah dipahami?
• Apakah itu membuat pengguna tahu tindakan apa yang harus dilakukan pada halaman atau ke mana harus mengklik selanjutnya?

Pastikan untuk menggabungkan beberapa elemen untuk membuat efek keseluruhan dengan satu pesan.

4. Coba Tipografi yang Kebesaran

Tipografi yang terlalu besar adalah cara yang bagus untuk menambah penekanan pada header. Sekalipun kata-katanya adalah pengidentifikasi lokasi yang sederhana, menggunakan huruf tebal dapat membantu menarik perhatian ke atas layar sebelum pengguna mulai membaca informasi lainnya.

Meskipun penempatan tipografi dapat bervariasi, cobalah tetap menggunakan dua penempatan dasar untuk tipografi di header.

• Opsi beranda dengan lebih banyak tipografi atau huruf yang lebih dramatis atau jenis yang berbeda dari pada halaman lain.
• Semua opsi halaman lainnya dengan kerangka tipe sederhana yang konsisten pada semua halaman interior.

5. Pertimbangkan Pola Bacaan

Membaca di situs web cenderung mengikuti tiga pola gerakan mata yang berbeda, menurut penelitian oleh Nielsen Norman Group. Dan semua pola baca tersebut kemudian disesuaikan untuk memperhitungkan tugas yang menjadi fokus pengguna pada saat membaca, yang secara sederhana adalah pengelompokan bagian terkait dalam aliran visual .

Kedua studi tentang bagaimana pengguna melihat dan mencerna konten itu penting karena mereka dapat membantu Anda memahami bagaimana dan di mana menempatkan elemen dalam desain dan khususnya di header.

Awalnya, pikirkan tentang pola dasar:

• F-Pattern: Pengguna membaca di bagian atas, kemudian setengah melintasi halaman dan akhirnya secara vertikal di sisi kiri dalam bentuk F.
• Diagram Gutenberg: Ada empat zona aktif untuk membaca, dimulai dengan dua perhentian horizontal di bagian atas dari kiri ke kanan, kemudian dari kanan atas ke kiri bawah dan melintasi bawah. (Bentuk bentuk az.)
• Z-Pattern: Mata bergerak bolak-balik dari kiri ke kanan dan kembali dari atas ke bawah desain membentuk beberapa z-pattern.

Tempatkan elemen – terutama elemen kunci – di zona terpanas di pola bacaan umum untuk kemungkinan interaksi pengguna yang terkuat. Kemudian pikirkan di mana pengguna kemungkinan besar akan melihat berikutnya – untuk tindakan yang terkait dengan konten yang baru saja dicerna.

6. Sertakan Elemen yang Dapat Diklik

Apakah gambar tajuk situs web Anda interaktif? Apakah itu termasuk elemen yang dapat diklik (atau disadap) untuk mendorong keterlibatan pengguna?

Header dapat menjadi lokasi yang sempurna untuk tombol ajakan bertindak atau tindakan sederhana seperti formulir pengumpulan alamat email. Jangan berlebihan dengan elemen untuk diklik karena bisa menghilangkan pesan keseluruhan, tetapi elemen satu tindakan sederhana bisa efektif dalam bidang desain ini.

Tidak yakin elemen apa yang harus dimasukkan tajuk? Pertimbangkan tindakan yang diinginkan yang konsisten di seluruh desain dengan tombol yang selalu tersedia (seperti navigasi). Tombol keranjang belanja, akses informasi akun atau tombol hubungi kami adalah opsi bagus untuk dipertimbangkan.

7. Gunakan Layer Sederhana

Bagaimana Anda menarik semua elemen yang disebutkan di atas (atau kelompok kecil dari mereka bersama-sama) di header? Caranya adalah layering sederhana. Header terbaik – header yang memukau pengguna – terlihat sederhana. Ini mengikuti aturan teori desain dan menggunakan satu elemen dominan untuk memikat pengguna dan mendukung teknik desain untuk membantu mereka memenuhi tujuan yang dapat ditindaklanjuti.

Melayer objek adalah salah satu cara untuk mencapai ini.

Tidak hanya lapisan sederhana akan membantu Anda membuat ruang yang berbeda untuk setiap elemen, tetapi juga akan memberikan fokus visual bagi pengguna. Mereka akan tahu harus mulai dari mana dengan desain dan elemen apa yang pantas mendapatkan perhatian mereka dan elemen apa yang bisa digulirkan.

Itu tidak selalu berhasil dengan usaha pertama. Beberapa revisi dan pengujian seringkali diperlukan untuk membuat grup elemen yang bekerja bersama secara efektif dan membuat kagum pengguna di bagian atas halaman.

Kesimpulan

Meskipun membuat tajuk beranda adalah sesuatu yang sering berada di garis depan proses desain, mengerjakan tajuk untuk halaman interior sering hilang dalam proses tersebut. Konten pada halaman “dalam” bisa sama pentingnya dengan beranda karena banyak pengguna akan masuk ke desain situs web Anda berkat pencarian, bukan dari mengetikkan URL dan mengikuti tautan navigasi seperti yang dibayangkan oleh tim desain.

Pikirkan tentang kedua jenis header secara independen dan bersama-sama untuk mencapai harmoni desain, kesatuan, dan visual yang memukau pengguna saat mereka mendarat di halaman.

sumber: designshack.net