Contoh Beranda: 7 Ide Inspiratif untuk Proyek Desain Web Anda Berikutnya

Desain beranda itu penting. Bagaimanapun, ini adalah kesan pertama pelanggan terhadap Anda, dan sebagian besar konsumen cenderung membentuk opini tentang Anda dan perusahaan Anda dalam tiga detik pertama setelah membuka beranda Anda.

Beranda Anda juga memiliki tanggung jawab untuk menarik lalu lintas situs web Anda. Daripada memperlakukannya seperti halaman arahan yang dibuat berdasarkan satu tindakan, halaman beranda harus dirancang untuk mendukung semua lalu lintas dari berbagai audiens dan asal.

Artinya, beranda Anda perlu menarik lalu lintas, mengedukasi pengunjung, dan mengundang konversi. Tidak ada tekanan, bukan?

Meskipun melakukan hal yang benar itu sangat penting, banyak bisnis kesulitan mendesain beranda mereka dengan benar. Halaman beranda yang dirancang dengan baik memerlukan lebih dari sekadar tampilan – halaman beranda juga harus memiliki konten yang memiliki tujuan dan memberikan titik awal bagi perjalanan pengunjung melalui situs Anda. Itu sebabnya beranda dalam daftar ini tidak hanya terkenal karena desainnya, namun juga karena kreativitas dan potensi konversinya.

Di bawah ini adalah beberapa desain beranda terbaik yang pernah kami lihat di web, dikategorikan berdasarkan desain atau teknik pengoptimalan yang membuatnya sangat aspiratif.

1. Identitas Yang Jelas

Jika Anda adalah merek atau perusahaan terkenal, Anda mungkin tidak perlu menjelaskan siapa Anda dan apa yang Anda lakukan. Namun, kecuali Anda adalah Coca-Cola atau Apple, misalnya, bisnis Anda tetap perlu memperjelas siapa Anda sehingga setiap pengunjung mengetahui bahwa mereka berada di tempat yang tepat.

Meskipun Anda mempunyai kewajiban untuk menyatakan siapa diri Anda, Anda tetap bisa menyelesaikannya dengan cara yang cerdas dan menarik. Untuk itu lihat contoh pertama kami di bawah ini, JENIS jajanan:

Mengapa Kami Menyukainya:

• Kami langsung mengetahui apa itu perusahaan: gambar produk unggulan memberi tahu kami bahwa KIND adalah bar sarapan (dan banyak lagi).
• Tagline KIND Snacks benar-benar brilian. Dengan bahasa yang mudah dan jelas, pesan tersebut langsung bergema dan membuat kita ingin membaca sendiri label snack bar tersebut.
• Warna-warna berani menghasilkan kontras, membuat kata-kata dan gambar menonjol di halaman. Ditambah lagi, pewarnaannya sesuai dengan kemasan yang Anda lihat pada produk KIND di toko.
• Kita tidak perlu tahu kapan KIND Snacks didirikan dan misinya segera: itu disimpan untuk tautan navigasi.

2. Navigasi yang Mudah

Hal ini membawa kita ke tip desain terinspirasi berikutnya: Pengguna harus mengetahui cara menjelajahi halaman Anda. Navigasi yang dirancang dengan baik menunjukkan legitimasi, kredibilitas, dan otoritas. Semua pelanggan mengharapkan navigasi yang mudah, atau mereka akan mengklik halaman Anda dengan cepat.

Berikan jalur yang jelas ke halaman yang mereka perlukan langsung dari beranda. Jadikan menu navigasi terlihat di bagian atas halaman, dan atur link dalam struktur hierarki. Poin bonus untuk menulis salinan yang cerdas namun jelas untuk setiap tautan navigasi Anda. Sebagai contoh, ambil Slim & Husky's Pizza yang menggiurkan.

Mengapa Kami Menyukainya:

• Navigasi menu kanan atas sangat mudah ditemukan. Ajakan bertindak yang sederhana dan langsung ada di setiap tautan navigasi yang dapat diklik.
• Font dan warnanya sesuai dengan branding. Slogannya yang besar menarik perhatian Anda ke kanan, dengan tautan navigasi, dengan gaya yang sama, berada tepat di atas.
• Lapisan dua opsi navigasi yang sederhana namun cerdas membantu pengguna berkeliling dengan mudah. Klik yang lebih umum, seperti menu, pemesanan, dan lokasi, adalah yang pertama kali diklik. Item yang kurang umum namun tetap penting seperti acara dan media berukuran lebih kecil dan ringan. Kami pasti akan mempertimbangkan untuk memesan pizza dari mereka!

3. Gambar Halaman Penuh

Karena 65% orang adalah pembelajar visual, menggunakan gambar satu halaman penuh adalah salah satu cara untuk memikat audiens Anda. Namun, jangan hanya menempelkan gambar lama hanya karena terlihat trendi. Pastikan untuk menggunakan gambar yang secara jelas menunjukkan atau mendukung apa yang Anda tawarkan dan tentang bisnis Anda.

Gunakan gambar yang menangkap emosi, mendorong tindakan, dan secara visual menceritakan kisah yang ingin Anda sampaikan. Saat menggunakan gambar, gambar berkualitas tinggi dengan ukuran file yang diperkecil (alat seperti TinyPNG dapat membantu) dapat digunakan untuk menambahkan teks alternatif ke gambar agar dapat diakses oleh mereka yang menggunakan pembaca layar.

Untuk contoh gambar yang sangat efektif, lihatlah Ruth's Chris Steak House:

Mengapa Kami Menyukainya:

• Gambar tersebut langsung membuat kita menginginkan produk tersebut. Tidak ada tulisan di dunia ini yang bisa terjual dengan gambar yang menggiurkan.
• Jika orang yang mengeklik tautan ini tidak yakin apa itu Ruth's Chris Steak House hanya dengan membaca namanya saja, gambar ini pasti menjawab pertanyaan itu.
• Gambar ini juga pasti akan menarik basis pelanggan mereka. Gambar yang dipasangkan dengan judul menciptakan kesan otoritas dan kualitas.
• Gambar memiliki jumlah kontras dan fokus yang tepat untuk tagline dan penempatan tombol “Pilih Restoran Lokal Anda”, dengan ruang yang cukup di bagian atas untuk bilah navigasi yang jelas. Ingatlah untuk memilih gambar yang menawan namun tetap memberikan ruang negatif yang cukup untuk navigasi teks.

4. Ajakan Bertindak yang Ditempatkan dengan Baik

Semua situs web ingin pengunjung mengambil tindakan setelah mengunjungi situs mereka. Ajakan bertindak (CTA) tidak selalu merupakan dorongan penjualan langsung, namun dapat mengarahkan pelanggan ke saluran penjualan.

Saat mendesain beranda, CTA harus ditempatkan secara logis dengan tombol lain yang diperlukan. Bisa berupa “Pesan Sekarang” atau “Uji Coba Gratis” atau “Pelajari Lebih Lanjut.” CTA yang sederhana namun efektif memberi tahu mereka apa yang harus dilakukan selanjutnya sehingga mereka tidak kewalahan atau tersesat. CTA juga harus mencolok secara visual, idealnya dalam warna yang kontras dengan halaman beranda Anda lainnya sehingga menonjol.

Lihat saja tombol CTA hijau FreshBooks di bawah ini:

Mengapa Kami Menyukainya:

• Ada banyak penggunaan kontras dan posisi dengan CTA. Meskipun palet warna utama adalah biru, aksen hijau menghasilkan warna tombol yang bagus. Menambahkan bahwa pengguna dapat “Mencobanya Gratis” pasti akan mendapatkan lebih banyak klik juga.
• Ada rasa urgensi – hitungan mundur – tepat di samping CTA. Ini adalah hal yang perlu dilihat pengguna agar tertarik dengan produk dan penawaran.
• Meskipun terdapat judul informasional, halaman tersebut sebagian besar berfokus untuk membuat pengguna mengeklik tombol tersebut dan menerima tawaran.

5. Utamakan Manfaat

Penting untuk tidak hanya menjelaskan apa yang Anda lakukan tetapi juga mengapa orang-orang di situs Anda harus peduli dengan apa yang Anda lakukan. Prospek ingin mengetahui keuntungan membeli dari Anda karena itulah yang akan memaksa mereka untuk bertahan. Jaga agar salinannya ringan dan mudah dibaca, dan ucapkan dalam bahasa pelanggan Anda. Untuk perusahaan yang menjual keuntungan di muka, belajarlah dari Evernote:

Mengapa Kami Menyukainya:

• Manfaatnya sangat jelas: “Jaga pekerjaan Anda, atur hidup Anda.” Jalur mata kemudian mengarahkan Anda ke ajakan bertindak, “Mulai dengan gratis.”
• Ini berfungsi dengan baik dalam mencantumkan manfaat di beranda dengan font sederhana dan warna yang tidak mengganggu. Ini juga menangkap esensi produk dalam salinan yang mudah dipahami.
• Beranda ini memanfaatkan ruang kosong dan sorotan hijau dan putih khasnya untuk menonjolkan jalur konversi.

6. Minimalis

Minimalis adalah gaya desain web klasik. Pikirkan efek yang ramping dan canggih di beranda. Lebih sedikit kepadatan, lebih banyak ruang untuk bernapas. Sebuah pertanyaan yang sulit, dengan semua yang perlu dicapai oleh beranda Anda. Namun, jika pengguna dapat membaca dengan jelas dan menemukan informasi dengan cepat, maka itu lebih penting daripada gambar atau video mencolok yang tidak dapat dimuat.

Pertimbangkan untuk mengganti pesan halus atau gambar stok dengan tombol CTA yang ringan dan sederhana serta menghilangkan gangguan di sekitarnya. Untuk situs yang selalu ramping dan minimalis, kami beralih ke Medium:

Mengapa Kami Menyukainya:

• Spasi putih yang luas di beranda ini membuat segala sesuatu di sekitarnya terlihat jelas. Pada halaman ini, tujuannya adalah untuk membuat pengguna mengunduh aplikasi Medium, sehingga halaman dirancang berdasarkan fitur tersebut. Bagian lain dari situs ini masih ada dalam tautan navigasi, tetapi di sini, para pengembang tahu apa tujuan mereka saat itu.
• Beranda menggunakan font sederhana agar sesuai dengan tema minimalis. Semburan warna hijau menjadi lebih efektif.
• Penggunaan bukti sosial yang bagus untuk membuat pengunjung mulai mengklik. Bagian “Populer di Medium” dan “Pilihan Staf” memberi tahu pengguna di mana menemukan konten berkualitas tinggi.

7. Gunakan Video

Jika Anda menghabiskan waktu di media sosial, Anda pasti tahu ada video di setiap sudut. Desain web juga merangkul tren video dengan halaman yang memutar gulungan atau video pendek langsung di halaman beranda. Hal ini memungkinkan pembelajaran tentang perusahaan Anda menjadi aktivitas pasif di mana pengguna cukup duduk santai dan melihat tentang produk Anda dalam presentasi video singkat. Tapi itu harus menarik atau menarik, atau pengguna tidak akan bertahan lama.

Jika Anda berpikir untuk menggunakan video di beranda, pastikan Anda memiliki tujuan dan rencana yang kuat. Pikirkan tentang waktu muat dan bagaimana video meningkatkan tujuan di balik situs Anda. Apakah produk atau perusahaan Anda adalah sesuatu yang harus dilihat pengguna sebelum melangkah lebih jauh?

Sebagai contoh, lihat Film A24:

Mengapa Kami Menyukainya:

• Hal ini tentu saja menjawab pertanyaan mengenai kebutuhan: sebuah perusahaan film tentu saja merupakan perusahaan yang tepat untuk menampilkan video satu halaman penuh di berandanya.
• Melihat bahwa video tersebut adalah cuplikan untuk proyek film yang akan datang, video tersebut langsung memberi tahu pengguna apa estetika dan produknya. Ini hanyalah sesuatu yang harus Anda lihat bergerak untuk memahami sepenuhnya.
• Di bagian atas beranda, A24 menawarkan tombol navigasi sederhana untuk mengetahui cara mempelajari lebih lanjut atau cara menghubungi. Ia mengetahui bahwa pengguna situs ini kemungkinan besar ingin mempelajari tentang studio film dan kemudian ingin menghubungi seseorang untuk informasi lebih lanjut, sehingga menemukannya menjadi lebih mudah. Semua itu dengan video lengkap sebagai tambahan!

Merasa Terinspirasi untuk Beranda Anda Berikutnya

Beranda Anda seperti jabat tangan. Ini perlu memberikan kesan pertama dan mendorong pengguna untuk terus mencari tahu lebih lanjut. Sebelum mereka memutuskan untuk menjadi pelanggan, mereka akan meninjau beranda Anda untuk mendapatkan gambaran tentang apa yang Anda jual, mengapa hal itu penting bagi mereka, dan bagaimana mereka bisa mendapatkan keuntungan dari apa yang Anda tawarkan.

Beranda yang cemerlang harus mencakup setidaknya beberapa, jika tidak semua, elemen yang disebutkan di atas. Mudah-mudahan dengan melihat contoh-contoh ini dan alasan kerjanya, Anda akan terinspirasi untuk mencoba desain beranda yang paling mengkomunikasikan siapa Anda. Kemudian, Anda dapat kembali membuat beranda menakjubkan untuk dilihat semua orang!

Jika Anda mencari alat untuk membantu, lihat Kadence Blocks. Anda dapat membuat situs web yang indah dan cepat tanpa pengetahuan coding. Beranda Anda akan terlihat bagus di perangkat dan browser apa pun, ditambah lagi Anda dapat menyesuaikannya dengan mudah. Cobalah demo langsung untuk memeriksanya sendiri!