Dalam membuat website, ada banyak hal yang harus diperhatikan termasuk header website. Hal ini sama pentingnya dengan elemen lain agar website berfungsi sebagaimana mestinya. Selain itu, kamu juga harus memastikan bahwa UI dan UX website dibuat dengan baik.
Oleh karena itu, pastikan kamu sudah tahu apa saja perbedaan UI design dan UX design. Lalu, apa yang harus dilakukan agar bisa membuat header website yang tepat? Hal paling utama adalah kamu harus benar-benar memahami apa itu header website dan mengapa komponen tersebut memiliki peran untuk bagi setiap website.
Setelah itu, kamu bisa mulai mencari inspirasi header untuk situs web yang sesuai dengan jenis situs web yang hendak kamu buat. Butuh ide dalam memilih header website? Coba baca artikel satu ini sampai selesai ya agar kamu bisa mendapatkan ide serta inspirasi sehingga bisa memilih header yang tepat.
Daftar Isi
Mengenal Apa Itu Header Website
Header website berada di posisi paling atas di setiap halaman website yang menyajikan tujuan penting adanya halaman tersebut. Posisi tersebut memungkinkan kamu meletakkan konten unggulan untuk menarik pengunjung agar membeli produk atau layanan yang ditawarkan di website.
Dengan adanya header, website akan lebih mudah dikenali terutama jika menggunakan logo brand dan warna. Biasanya header dapat diklik yang membawa pengunjung kembali ke homepage yang berfungsi sebagai tool navigasi pusat. Apa saja fitur yang biasanya terdapat pada header sebuah website?
Fitur pada header umumnya termasuk:
- Logo atau identitas
- Navigasi atau menu utama
- Judul halaman
- Search atau pencarian
- Call-to-action (CTA)
- Keranjang belanja atau situs e-commerce
- Login/logout
- Pilihan bahasa
Pentingnya Header Website
Header bisa berupa brand, konten, video, produk, atau call-to-action (CTA). Lalu, kenapa header begitu penting? Header sebuah website merupakan elemen kunci dari setiap situs web dan umumnya mengandung link ke beberapa halaman situs yang pelanggan ingin kunjungi sebelum melakukan pembelian.
Header menjadi hal pertama yang akan orang lihat saat mengakses sebuah website. Bagian tersebut seolah menjadi patokan website secara menyeluruh. Oleh karena itu, kamu harus memikirkan semuanya dengan baik mulai dari warna, gaya, hingga ukuran header website.
Ukuran header yang paling banyak digunakan dan paling populer adalah 1024×768 piksel. Akan tetapi, kamu juga bisa menggunakan header berukuran 1280px dan 1600px agar sesuai dengan beberapa layar monitor komputer atau perangkat lainnya.
Informasi di bagian header juga harus cukup jelas agar pelanggan terdorong untuk menjelajahi website lebih jauh. Selain penggunaan nama jelas serta logo, kamu juga bisa menjelaskan kepada pengunjung mengapa mereka harus memilih brand atau produk kamu dibandingkan kompetitor kamu.
Kamu juga bisa menyertakan keunggulan dari brand misalnya kualitas yang baik, harga terbaik, atau pengiriman gratis.
Inspirasi Desain Header Website
Membuat header website keren memang sebuah tantangan. Kamu mungkin tidak bisa menemukan ide yang sesuai dengan konsep atau design website yang sudah dibuat. Jika demikian, tidak ada salahnya untuk melihat beberapa contoh landing page atau bisa langsung mencari inspirasi desain header terbaik.
Berikut adalah beberapa inspirasi desain header website yang bisa kamu pertimbangkan sehingga bisa kemudian digunakan pada website yang sedang kamu bangun:
Header yang Berfokus pada Produk
Sebagai inspirasi untuk memilih header, kamu bisa melihat website Cropp, yaitu toko fashion online. Di website tersebut, kamu bisa melihat koleksi terbaru mereka yang ditempatkan di bagian header.
Header yang Berorientasi pada Personal Branding
Jika kamu ingin melakukan personal branding, blog travel Alex in Wanderland bisa menjadi inspirasi tepat. Di bagian header, pengunjung bisa melihat awal cerita “Five years and counting on the road…”. Ini bisa membuat pengunjung penasaran sehingga mereka tertarik untuk mengetahui ceritanya lebih lanjut.
Maskot Brand
Apabila header menjadi tempat untuk mengenalkan website kepada para pengunjung situs, akan lebih baik untuk memperkenalkan karakter yang akan selalu mereka lihat saat memilih brand kamu.
Kamu bisa menunjukkan brand maskot sehingga orang-orang akan bisa mengenali brand kamu saat melihat maskot tersebut seperti yang bisa kamu lihat di website Kellog’s.
Carousel Image Header
Inspirasi header website satu ini cocok untuk kamu yang ingin fokus memberikan informasi penting dari berbagai kategori. Carousel merupakan header yang akan menampilkan beberapa gambar secara bergantian. Akan tetapi, carousel image header tidak begitu bagus untuk performa SEO website.
Eye-catching Typography
Selanjutnya, kamu juga bisa menggunakan header tipografi yang menarik mata. Untuk mendapatkan inspirasi bagaimana membuat header tersebut, coba lihat website Slack, di mana kamu akan berfokus pada ukuran tulisan di bagian header.
Meskipun tidak ada hal spesial tentang tipografi, tetapi semuanya terlihat jelas. Terlebih dengan kombinasi ukuran pesan penting yang mampu menarik para pengunjung website.
Content-First Header
Selain media visual, kamu juga bisa menggunakan media berupa teks untuk ditampilkan di bagian header website. Content-first header menampilkan beberapa konten tanpa basa-basi. Contoh yang bisa kamu lihat adalah website Glamour di mana mereka membuat desain website yang unik.
Tampilan tersebut juga memungkinkan pengunjung untuk bisa menemukan berbagai konten di waktu yang sama. Header ini cocok untuk website berita atau blog karena tujuan pengguna mengakses website tersebut memang untuk mendapatkan informasi yang mereka cari atau butuhkan.
CTA Front-and-center
Setiap pemilik website tentu memiliki tujuan yang ingin dicapai. Nah, jika kamu ingin menunjukkan kepada pengunjung sesuatu yang bisa mereka beli atau download, mengapa tidak mencoba CTA front-and-center sebagai ide header untuk website milikmu?
Kamu bisa menggunakan header ini sementara atau selamanya untuk meng-highlight CTA seperti yang digunakan oleh blogger Everywhereist pada bukunya.
Vibrant Colors and Textures
Sebenarnya, kamu bisa menggunakan jasa pembuatan website murah agar tidak perlu repot memikirkan ide header untuk situs milikmu. Akan tetapi, jika ingin membuatnya sendiri dengan kemampuan yang dimiliki, kamu bisa mencoba header satu ini.
Penggunaan gradien, warna, dan layer dalam satu desain membuat header terlihat berwarna dan bertekstur. Dengan begitu, kamu tidak perlu menggunakannya pada CTA.
Jika masih belum punya gambaran akan seperti apa hasil dari penerapan vibrant colors and textures, kamu bisa menengok website Stripe.
CTA-focused Header
Ingin berfokus pada penggunaan Call-to-action atau CTA di bagian header website? Nah, kamu bisa menggunakan CTA-focused header yang bertujuan untuk mengundang pengguna melakukan tindakan untuk mendapatkan pengalaman yang mereka inginkan. Banyak website yang menggunakan header ini dan salah satunya adalah Blue Apron.
Alternating Header
Jika kamu merasa bahwa teks dan gambar akan lebih menarik untuk digunakan di bagian header website, mengapa tidak menggunakan keduanya? Untuk tujuan dan kebutuhan tersebut, kamu bisa menggunakan alternating header di mana layar akan dibelah menjadi dua. Satu sisi berisi teks dan sisi lainnya berisi gambar.
Dengan demikian, kamu bisa semakin memperkuat inti penjelasan yang disampaikan. Dengan menengok website Flyreel, kamu akan mendapatkan ide bagaimana alternating header akan terlihat menarik.
Header Animasi
Tidak ada salahnya membuat desain header homepage yang statis, terlebih jika kamu ingin berfokus pada video atau CTA. Akan tetapi, pastikan semuanya terlihat simpel sehingga pengunjung tidak merasa terganggu dan akan melakukan apa yang kamu mau.
Sebagai pemilik website yang ingin berbagai pesan menggunakan cara menarik, maka header animasi patut untuk dipertimbangkan. Disney menggunakan animasi kecil untuk membagikan beberapa pesan di tempat yang sama.
Website ini bisa kamu jadikan sebagai inspirasi sehingga tidak lagi bingung menentukan desain seperti apa yang cocok untuk header website milikmu.
Experimental Header
Ingin mencoba desain header experimental? Untuk menggunakan header ini, hindari penggunaan ide yang aneh dan tidak biasa. Kamu bisa fokus pada beberapa efek tak terduga dengan gerakan sederhana di bagian header.
Sebagai contoh, kamu bisa melihat header di website Teamgeek, di mana logo dan pesan di tengah halaman terlihat biasa saja. Namun, kamu kamu nantinya akan menyadari ada sesuatu yang menarik di dalamnya.
Video Backgrounds
Menentukan ide header situs memang tidak mudah, tetapi kamu bisa menggunakan imajinasi agar tahu apa yang ingin diletakkan di bagian header. Jika masih belum punya gambaran apapun, tidak ada salahnya untuk mencoba video backgrounds.
Ini adalah salah satu tren belakangan ini yang bagus untuk diterapkan di bagian header homepage.
Seperti penggunaan video background di website Brave People yang menunjukkan beberapa klip.
Sticky Header
Pengunjung akan lebih tertarik dengan tampilan header situs web yang tidak merepotkan mereka. Agar pengunjung dapat menjelajahi website dengan mudah, kamu bisa menggunakan sticky header.
Mereka dapat menemukan pilihan menu meski mereka scroll terlalu jauh. Apapun jenis website yang akan kamu kelola, header ini cocok untuk digunakan.
Belum pernah menggunakan header satu ini? Untuk mendapatkan gambaran akan seperti apa header terlihat saat pengguna mengunjung website kamu, coba lihat website Mailchimp.
Hidden Navigation (Hamberger Menu)
Hidden navigation menjadi solusi yang banyak digunakan untuk desain website. Menu hamburger adalah tiga garis di sisi bagian kiri atau kanan atas yang menampilkan menu lengkap saat pengunjung mengkliknya. Desainer biasanya menggunakannya apabila mereka harus berfokus pada layar utama.
Menu tersebut biasanya hanya digunakan untuk tampilan seluler agar header responsif. Tetapi, menu tersebut juga bisa kamu gunakan pada tampilan desktop yang memiliki menu tambahan atau informasi lain tentang website.
Kesimpulan
Dengan banyaknya inspirasi header website yang bisa kamu temukan, kamu tidak akan kehabisan ide sehingga akan mampu membuat tampilan header yang menarik. Selain itu, kamu juga bisa memengaruhi pengunjung untuk melakukan apa yang kamu harapkan, misalnya pembelian.
Apapun jenis website yang hendak kamu buat, keseluruhan tampilan website terutama di bagian header harus menarik, bukan? Apabila membutuhkan jasa pembuatan website profesional, jangan ragu untuk menghubungi Exabytes.
