(0275) 2974 127
Header website adalah bagian navigasi website yang selalu berada di atas halaman website. Header memainkan peran penting dalam keseluruhan desain web Anda dalam hal kualitas dan identitas merek. Desainer web juga secara khusus merancang desain header untuk pengembangan web apa pun. Menurut Google, header website membantu pengguna menentukan kualitas sebuah website hanya dalam 0,5 detik, baik dari ukuran header website, penggunaan gambar, maupun interaktivitas dari header itu sendiri.
Jadi jika Anda menyegarkan atau memperbarui tampilan dan nuansa situs web Anda, kami sarankan untuk memperhatikan tips dan contoh berikut untuk membuat header terbaik untuk situs web Anda.
Header website adalah bagian atas website. Header berfungsi sebagai area utama yang memberikan informasi penting kepada pengunjung website Anda. Berikut adalah beberapa elemen umum yang disertakan dalam header website.
Logo perusahaan atau merek Anda adalah salah satu elemen utama header Anda. Ini membantu mengidentifikasi situs web Anda dan membangun merek Anda.
Menu navigasi, disebut juga menu utama, biasanya berisi link ke halaman utama website Anda, seperti: Contoh: halaman beranda, informasi perusahaan, produk atau layanan, blog, informasi kontak, dll. Menu ini memungkinkan pengunjung dengan mudah menjelajahi berbagai bagian situs web Anda.
Beberapa situs web memiliki gambar latar belakang besar atau slider gambar di bagian atas header untuk menampilkan pesan visual atau promosi tertentu.
Tombol aksi, seperti “Beli Sekarang”, “Daftar”, dan “Hubungi Kami”, sering kali ditempatkan di header untuk meminta pengunjung mengambil tindakan tertentu.
Beberapa situs web menampilkan informasi kontak penting di header, seperti alamat email, nomor telepon, atau link ke halaman kontak.
Situs web besar sering kali memiliki kolom pencarian di headernya untuk membantu pengunjung menemukan konten yang mereka cari.
Ketika sebuah website mengharuskan pengguna untuk login, link login atau registrasi biasanya ditempatkan di header.
Tautan ke profil media sosial situs web juga sering ditempatkan di header, memungkinkan pengunjung untuk mengikuti dan berinteraksi dengan situs web di platform media sosial.
Beberapa website mungkin menyertakan teks deskriptif pendek atau slogan yang merangkum tujuan atau nilai situs web.
Pada dasarnya adalah header website detail yang biasanya digunakan oleh para web designer sebagai patokan ukuran header terbaik untuk tampilan dan nuansa website mereka. Ada daftarnya di bawah ini.
Maka pertanyaan berdasarkan tabel tersebut adalah: “Berapa ukuran header yang harus saya gunakan untuk website saya?” Sebenarnya, tidak ada jawaban yang jelas untuk pertanyaan ini. Itu semua tergantung pada konsep dasar desain website secara keseluruhan dan elemen apa saja yang harus dimasukkan dalam header.
Faktanya, desainer web sering kali kesulitan memastikan efektivitas setiap ukuran layar. Hal ini karena dua layar berukuran sama belum tentu memiliki resolusi yang sama. Tapi mungkin bisa dikatakan bahwa banyak desainer web sekarang memiliki standar atau paten untuk menggunakan ukuran header situs web 1024 x 768 piksel.
Saat pengguna mengunjungi situs web Anda, hal pertama apa yang Anda ingin mereka lihat di header? Kalimat? Gambar? Atau keduanya sekaligus?
Setiap ukuran header website harus memiliki keduanya, periksa situs Baianat ini. Seperti yang Anda lihat di header, sebagian besar konten yang disorot berasal dari halaman teks. Tapi ini lebih dari sekedar teks.
Kami menggunakan font yang jelas dan mudah dibaca untuk memastikan bahwa persepsi pengguna kami pada pandangan pertama, tujuan Baianat, tidak terganggu. Selain itu, jika header situs web Anda sangat besar, Anda harus menggunakan tipografi tebal dan elemen imajinatif untuk menarik perhatian pengguna.
Pernahkah Anda mendengar teori pola manusia saat membaca website? Pada tahun 2006, Nielsen Norman Group pertama kali merumuskan teori pola membaca berbentuk F. Maksudnya itu apa?
Jadi, agar seseorang mulai menganalisis dan membaca visual website Anda, mereka mulai dari pojok kiri atas layar dan berpindah ke sisi kanan layar. Jika Anda tertarik dengan tampilan di atas, cukup scroll terus websitenya dan baca konten websitenya dari kiri ke kanan, seperti halnya Anda membaca buku pada umumnya.
Teori pola ini berlaku untuk semua ukuran header situs web. Karena header yang menarik perhatian terdiri dari tiga elemen:
Pengguna lebih mudah mengingat gambar merek dimana logo tersebut ditempatkan. Alih-alih logo ditempatkan di tengah atau kanan header website, melainkan ditempatkan di sisi kiri header website.
Namun, jika merek Anda memiliki logo bulat, kami sarankan untuk menempatkannya di tengah layar. Efeknya masih lebih rendah dibandingkan logo sebelah kiri.
Terlalu banyak menu di header dapat membingungkan dan mengalihkan perhatian pengguna website. Oleh karena itu, jika memungkinkan, buatlah menu di header yang dapat menampilkan seluruh konten website Anda.
Jika menu Anda (satu topik) menjelaskan banyak konten, Anda dapat membuat menu drop-down (banyak topik). Secara opsional, tambahkan juga efek hover untuk memandu pengguna saat mereka menjelajahi situs web Anda.
Elemen call to action atau lebih dikenal dengan singkatan CTA adalah sejenis tombol interaktif yang dirancang untuk mendorong pengguna situs web mengunjungi halaman web penting. Elemen ini biasanya digunakan oleh desainer web untuk menginstruksikan pengguna situs web untuk membeli halaman, kontak, dll.
Kunjungi situs Slack, yang menerapkan prinsip hierarki visual ini dengan indah dan sempurna. Logo di sebelah kiri, navigasi bervariasi namun sangat jelas, dan elemen CTA berukuran proporsional ditempatkan dalam bentuk dan ukuran yang benar untuk header situs web.
Selain itu, interface yang digunakan Slack memiliki desain yang bersih dengan elemen desain yang menarik seperti gambar yang disorot, font sans-serif yang keren, dan pemilihan warna netral yang membantu menekankan konten utama situs web Anda.
Bilah navigasi bar persistent (tetap), atau lebih dikenal dengan sticky header, adalah desain navigasi header yang “menempel” di bagian atas layar situs web Anda. Header jenis ini muncul setiap kali Anda menelusuri situs web.
Sticky header sangat bagus untuk situs web e-commerce agar keranjang belanja tetap terlihat, sehingga memberikan kontrol lebih besar kepada pengguna. Namun, hal ini tidak menghalangi semua jenis situs web untuk menerapkan sticky header, selama header situs web tersebut tidak terlalu besar. Anda biasanya dapat menggunakan plugin atau pembuat Elementor yang tersedia untuk WordPress dan platform pembuatan web lainnya.
Tips ini berguna bagi siapa saja yang menggunakan ukuran header website, seperti landing page. Gambar di header harus menyampaikan informasi secara langsung tentang tujuan bisnis Anda.
Misalnya, jika bisnis Anda adalah layanan pesan-antar makanan, rancang tampilan pertama situs web Anda dengan gambar kurir yang mengantarkan bahan makanan, misalnya. Dengan demikian, setelah mengunjungi website Anda, kemungkinan besar pengunjung website Anda ingin membeli sesuatu melalui layanan yang Anda tawarkan. Untuk membuat gambar header terlihat lebih menarik, gunakan:
Foto adalah senjata ampuh bagi desainer web untuk menyampaikan kisah, membangkitkan emosi, dan memotivasi pengguna untuk terus menggunakan situs web Anda. Tips untuk website yang menggunakan gambar menarik, cobalah desain header yang lebih transparan untuk menampilkan gambar dengan tetap mempertahankan menu utama situs.
Anda dapat menemukan contohnya di halaman beranda Mockplus. Mereka memiliki header website yang cukup besar dengan gambar foto agak transparan yang berfungsi sebagai background CTA dan heading website.
Apakah Anda memiliki banyak foto untuk mewakili bisnis Anda tetapi tidak tahu harus memilih yang mana untuk header website Anda? Jangan khawatir, cobalah membuat slideshow gambar yang disebut carousel.
Cara ini sangat efektif bila ingin menampilkan banyak gambar satu demi satu untuk menarik perhatian pengguna.
Gambar header tidak harus berupa gambar sebenarnya. Anda dapat membuat dan menggunakan ilustrasi apa pun sesuai dengan kreativitas Anda dan tentunya sesuai dengan tema website Anda. Website yang menggunakan prinsip carousel selain ilustrasi adalah website McDonald’s.
Ukuran header situs web yang sama dapat mencakup sorotan berbagai layanan bisnis yang disajikan melalui ilustrasi gambar dan CTA. Namun, sebaiknya hindari penggunaan terlalu banyak gambar di carousel, karena ini akan memengaruhi kinerja pemuatan halaman situs web Anda.
Sebelum mendesain header Anda, pertimbangkan gaya keseluruhan dan tujuan utama website Anda. Untuk situs web promosi pengenalan produk, desain header dapat menyertakan tautan ke bagian yang memiliki tujuan utama promosi produk.
Anda kemudian dapat menggabungkannya dengan gambar pahlawan besar di layar pertama untuk menampilkan produk Anda secara efektif. Kemungkinan penggunaan konten pesan di header situs web dengan ukuran berapa pun meliputi:
Jika Anda masih belum tahu cara mendaftar, coba kunjungi website WPS Office. Saat Anda membuka situs web, Anda akan melihat desain header dengan gambar pahlawan bergambar dinamis yang mewakili ruang kerja WPS Anda. Mereka juga menambahkan animasi pada ilustrasi mereka untuk membuat website terlihat hidup sejak kesan pertama.
Sorotan tajuk di sini. Gambar menghilang saat Anda menggulir halaman situs. Namun, teks dan CTA mengalir ke header. Ukuran header website lebih minimalis dengan desain sticky header. Sangat menarik bukan?
Selain gambar, Anda juga dapat menambahkan video dan animasi ke header berukuran besar. Hal ini dikarenakan video yang berisi objek bergerak cenderung lebih menarik perhatian dibandingkan gambar diam.
Faktanya, menambahkan video ke header Anda adalah strategi pemasaran situs web yang paling efisien. Banyak situs web menggunakan ini untuk memikat audiens sambil mempresentasikan perusahaan atau produk mereka dengan cara terbaik.
Kunjungi situs web Freelancer. Mereka membuat video header yang menjelaskan kelebihan dan manfaat menggunakan layanan mereka. Ingin sesuatu yang lebih menarik dan hidup dari video? Coba gunakan animasi pada header situs web berukuran sedang hingga besar.
Animasi dapat membuat header website Anda terlihat lebih keren dan modern. Selain itu, animasi membuat situs web Anda lebih interaktif dan membuat pengguna Anda merasa lebih terlibat. Contoh keren dapat ditemukan di website desain produk The Cool Club. Sesuai dengan namanya, website ini keren banget. Header animasinya sangat interaktif sehingga pengguna akan senang bereksperimen dengan animasinya. Lalu arahkan kursor ke beberapa menu di header dan Anda akan melihat animasi hover yang unik.
Header dengan CTA sebagai fokus utama paling baik ditampilkan dengan menambahkan elemen CTA seperti “Masuk”, “Daftar”, dan “Kontak”. Menempatkan elemen CTA dalam ukuran header situs web tertentu adalah peluang besar dalam strategi bisnis Anda untuk memberikan layanan yang Anda tawarkan.
Perhatikan contoh di atas. Jika Anda ingin membuat header yang menonjolkan CTA Anda, sebaiknya gunakan latar belakang sederhana tanpa teks atau gambar yang mencolok. Hal ini memastikan bahwa elemen CTA tidak “kalah” dengan konten di sekitarnya, sehingga pengguna dapat lebih fokus pada CTA. Selain itu, tombol CTA harus berisi teks yang dapat dipahami pengguna dan selaras dengan sasaran bisnis Anda.
Menjaga header Anda tetap bagus dan rapi akan membantu pengguna website Anda merasa bahwa Anda tidak membebani mereka dengan penawaran yang mungkin belum tentu mereka gunakan. Header website Anda terlihat sangat sederhana, namun Anda bisa berkreasi dengan bentuk dan ukurannya.
Kunjungi situs web Victoria Spicer. Berdasarkan desain ini, “sederhana” di sini mengacu pada desain yang bersih dengan sedikit elemen yang mengganggu, warna yang tenang, dan font minimalis.
Sederhananya, hidden navigation adalah penggunaan hamburger menu yang biasanya kecil di header situs Anda. Banyak desainer web menggunakan navigasi tersembunyi sebagai solusi ketika mereka perlu fokus pada layar utama. Hamburger menu membuat tampilan header lebih minimalis dan terkesan praktis karena tidak mencantumkan menu secara horizontal (vertikal) seperti kebanyakan website.
Untuk informasi lebih lanjut, silakan kunjungi website Majalah Woven. Woven menggunakan navigasi tersembunyi, sehingga seluruh situs terlihat sederhana dan bersih. Hanya elemen inti yang ditampilkan di header, seperti CTA dan tentu saja hamburger menu. Situs ini juga menggunakan gambar hero berukuran besar untuk menarik perhatian pengguna.
Tips ini akan memperbaiki tampilan website yang tidak menginginkan header situs terlalu besar namun memiliki jumlah menu utama yang banyak. Ini memungkinkan Anda mendapatkan hasil maksimal dari layanan situs web Anda meskipun desain headernya sederhana.
Dengan kata lain, header website ibarat ajakan untuk melampirkan informasi dasar tentang website secara keseluruhan. Ini memungkinkan pengguna memahami apa yang ditawarkan situs web Anda dalam hitungan detik.
Berdasarkan petunjuk dalam artikel ini, desainer web dapat membuat ukuran header situs web yang berbeda secara mandiri. Misalnya, Anda mungkin ingin membuat header besar untuk halaman beranda dan header lebih kecil untuk halaman lainnya. Namun, harap dicatat lagi bahwa desain header halaman menu lainnya adalah versi sederhana dari header halaman beranda.
Diskusikan semua ide desain website dengan rekan Anda untuk hasil yang lebih baik. Mari bekerja dengan semangat!
Keberadaan framework PHP dilatarbelakangi oleh data dari W3Tech yang menunjukkan bahwa lebih dari 80% website…
Hallo Sobat! Saat ini perkembangan website semakin hari semakin meningkat. Mulai dari kebutuhan bisnis, akademik,…
Industri digital saat ini semakin berkembang dari waktu ke waktu, baik itu digital audio maupun…
Sebelum membeli sebuah website, sebaiknya cek dulu umur domainnya. Itu karena usia domain ternyata bisa…
Setelah kamu membuat website, pastinya kamu juga harus mengelolanya. Pengelolaan ini dilakukan untuk mencegah terjadinya…
Ingin membuat blog dengan cepat dan mudah? Blogspot menjadi platform pilihan. Dicap sebagai Blogger, layanan…