Memikirkan layout yang baik ketika membuat website, kadang menjadi pekerjaan yang paling rumit. Harapannya sih tampilan website bisa jadi estetik seperti yang lain demi menarik perhatian pengunjung.
Tapi, prakteknya kita seringkali bingung nih dengan layout yang sudah dibuat. Bahkan, meski sudah menggunakan template sekalipun, kita masih merasa tidak puas karena rasanya ada yang kurang pas.
Apakah Anda merasakan hal yang sama juga? Memilih layout yang paling tepat untuk website, sebetulnya bukan hanya soal tampilan yang menarik.
Tapi, layout yang tepat akan membuat pengunjung nyaman saat menjelajahi website Anda. Yang jika dimaksimalkan, ini bisa berujung pada konversi, lho.
Nah, dalam artikel ini, kami akan membantu Anda untuk menemukan layout yang paling tepat untuk website Anda. Yuk, simak selengkapnya dalam penjelasan berikut ini!
Rekomendasi Layout Website yang Baik untuk Anda
Dalam mendesain suatu website, user experience harus diutamakan. Layout sendiri masuk dalam lingkup desain website, yang artinya user experience juga harus diutamakan.
Untuk memberikan user experience yang baik, ada 5 aturan atau prinsip dasar dalam layout website yang harus Anda ikuti, yaitu:
- Menyusun hierarki di sekitar konten yang paling penting dalam website untuk mengarahkan user menuju ke konten utamanya.
- Perhatikan keseimbangan setiap elemen dalam layout website Anda.
- Gunakan grid saat membuat layout supaya semua elemen berada dalam proporsi yang tepat.
- Berikan ruang yang cukup antara tiap elemen, jangan terlalu besar dan jangan terlalu kecil.
- Jumlah elemen ganjil lebih bisa mengarahkan user pada elemen utama yang berada di tengah.
Nah, berdasarkan kelima prinsip dasar tersebut, kami sudah merangkum berbagai macam layout website yang bisa Anda gunakan.
1. Full-Screen Photo
Menggunakan foto sebagai background dalam ukuran full-screen bisa menjadi pilihan layout yang menarik. Layout ini bisa Anda gunakan sebagai keseluruhan background halaman maupun hanya di bagian atas website.
Anda bisa menambahkan menu navigasi dengan atau tanpa transparent header, teks dan tombol call-to-action seperti biasa. Namun, tentu dalam jumlah dan ukuran yang proporsional seperti berikut ini, ya.
Jika ditambah dengan kualitas gambar yang tinggi, layout ini akan memukau para pengunjung begitu memasuki website Anda.
Layout dengan foto full-screen ini akan sangat cocok untuk website toko online maupun bisnis yang menawarkan jasa profesional.
2. Hero Section
Sebetulnya, hero section ini sama seperti full-screen photo, keduanya sama-sama menggunakan gambar yang besar pada halaman utama website.
Namun, yang berbeda dari layout yang satu ini adalah hero section hanya untuk di bagian banner website yang berada di bagian atas halaman utama.
Nah, hero section ini merupakan jenis layout yang digunakan oleh kebanyakan website. Anda bisa meletakkan menu di bagian atas gambar.
Lalu, untuk headline, teks pendukung, ikon dan tombol call-to-action bisa Anda letakkan setelah atau dalam banner tersebut.
Baca juga: 7+ Kesalahan dalam Desain Website yang Merusak SEO
3. Card-Based
Sesuai namanya, tipe layout yang satu ini akan menampilkan beragam konten dalam halaman utama website Anda dalam bentuk card atau boxes.
Tipe layout yang satu ini akan membuat tampilan website menjadi lebih rapi karena adanya jarak antar tiap kartu konten.
Sehingga, ini membuat pengunjung jadi lebih mudah menemukan konten yang mereka inginkan. Dengan tampilannya yang rapi ini, tipe card-based menjadi layout website yang baik untuk Anda yang ingin membuat blog.
Atau jika Anda memiliki website e-commerce, tipe layout yang satu ini juga cocok untuk menampilkan produk-produk yang Anda jual.
Baca juga: 4+ CMS Toko Online Terbaik dan Paling Banyak Digunakan di 2023
4. Alternating
Dengan menggunakan alternating column, Anda bisa mengkombinasikan antara teks dan gambar dengan proporsi yang seimbang.
Ini bisa Anda gunakan, baik di seluruh halaman maupun hanya pada banner di bagian atas website. Jika ingin mengaplikasikannya pada keseluruhan halaman, Anda bisa membuat setiap teks dan gambar dalam pola yang berbeda-beda.
Misalnya dalam banner pertama, Anda bisa membuat posisi gambar di sebelah kanan menumpuk kolom teks di sebelah kiri seperti gambar berikut.
Tipe layout alternating ini akan sangat cocok untuk Anda yang memiliki single page website dengan beragam konten. Jadi, pengunjung tidak akan bosan untuk melihat pola yang sama berulang kali.
5. Featured Image
Anda mungkin sudah familiar dengan tipe layout yang satu ini, yaitu featured image. Tipe layout featured image sendiri merupakan kombinasi teks dengan gambar yang besar.
Biasanya, layout featured image ini digunakan dengan pola gambar besar di bagian tengah atas atau bisa juga di samping judul serta body text.
Anda bisa menggunakan layout featured image ini dalam konten website Anda. Misalnya seperti di bagian About, History dan sebagainya.
Selain itu, featured image merupakan tipe layout yang baik untuk konten di dalam blog, yang mungkin sudah sering Anda lihat.
6. Split-Screen
Split-screen seringkali menjadi pilihan banyak website untuk membuat tampilan yang lebih modern dan tentunya memukau.
Layout split-screen akan membagi halaman website Anda menjadi dua bagian. Namun, kedua bagian atau kolom ini akan diisi dengan konten dan warna yang berbeda.
Dua kolom ini bisa Anda isi dengan konten penawaran serta form yang tentunya dilengkapi dengan tombol call-to-action.
Dengan efek tampilan yang modern, layout ini merupakan pilihan yang baik untuk segala jenis website, baik itu blog, bisnis sampai e-commerce.
7. Interaktif
Bila Anda ingin membuat pengunjung sangat terkesan begitu mereka masuk ke website Anda, cobalah menggunakan layout yang interaktif.
Anda tidak harus membuat animasi yang rumit, se-simple background yang bisa dicoret oleh pengunjung pun tidak masalah.
Yang penting, biarkan pengunjung bisa bereksperimen di website Anda seperti drag-and-drop elemen yang ada di background.
Jenis layout yang interaktif ini akan sangat baik untuk website portofolio para designer maupun developer. Atau jika Anda ingin menggunakan ini untuk website bisnis juga bisa, selama “permainan” yang Anda berikan masih relevan nih dengan produk yang Anda tawarkan.
8. Boxes
Boxes merupakan tipe layout yang menampilkan elemen dalam box pada halaman website. Jenis layout yang satu ini memiliki tipikal yang mirip dengan card-based.
Bedanya, boxes biasanya hadir dalam satu bentuk dan ukuran saja. Sedangkan, ukuran dan bentuk card-based biasanya menyesuaikan dengan panjang konten yang ditampilkan.
Nah, karena boxes hadir dalam bentuk yang seragam dan jarak antar elemennya, ini membuat tampilan website menjadi lebih rapi dan juga elegan.
Boxes menjadi tipe layout yang baik nih untuk website e-commerce yang menampilkan berbagai produk atau bisa juga sebagai image gallery. Selain itu, di dalam tiap gambar ini, Anda bisa menambahkan sedikit caption atau link untuk menjelaskan konten tersebut.
9. Z & F Pattern
Terakhir, ada tipe Z dan F pattern yang merupakan layout yang baik untuk website. Seperti namanya, tipe layout yang satu ini menggunakan pola seperti huruf Z dan F.
Z-pattern sendiri merupakan tipe layout yang mengarahkan pengunjung pada tiap elemen secara zig-zag. Misalnya dari atas Anda sudah diarahkan ke form di sebelah kanan, lalu turun ke bawah konten dimulai dari sebelah kiri dan seterusnya.
Sedangkan, F-pattern sendiri menempatkan semua konten berada di sebelah kiri. Sehingga, Anda akan membaca konten tersebut dari arah kiri ke kanan.
Sudah Menemukan Layout yang Baik untuk Website Anda?
Memiliki layout yang baik untuk website memang sangat penting jika ingin pengunjung betah dan membuat konversi untuk Anda.
Nah, dari semua layout yang sudah kami bagikan, Anda bisa memilih mana yang tepat sesuai dengan tipe website Anda. Contohnya seperti layout boxes untuk website perhiasan.
Jika sudah menemukan layout yang paling tepat, Anda bisa segera mengimplementasikannya pada website Anda.
Buat Anda yang belum memiliki website, tidak masalah, kok. Anda bisa konsultasikan layout yang Anda inginkan secara gratis dan bikin website di Bikin.Website.
Konsultasikan Layout Website Anda, Gratis!
Kalau begitu, semoga rekomendasi dari kami ini bisa mencerahkan Anda, ya! Selamat membuat website!