Saat membangun website, komponen layout jadi hal paling penting yang harus secara matang. Karena, tampilan website sangat bergantung pada layout yang diterapkan. Hal ini juga mempengaruhi kesan pengunjung saat berselancar di situs Anda.
Namun beberapa orang, justru mengaku pusing saat menentukan layout, meskipun sudah menggunakan template. Ada saja sesuatu yang kurang, untuk itu penting sekali mengetahui cara memilih layout yang pas untuk website Anda.
Prinsip Memilih Layout untuk Website
Untuk memberikan tampilan prima pada website Anda, ada beberapa prinsip pemilihan layout yang patut diaplikasikan. Gunanya untuk meningkatkan user experience. Apa saja lima aturan atau prinsip dasar tersebut? Berikut ini daftarnya, diantaranya:
- Keseimbangan pada setiap elemen layout website
- Menyusun tingkatan di sekitar konten yang dinilai paling penting dalam situs guna mengarahkan pengguna agar bisa beralih ke konten utama
- Manfaatkan grid untuk membuat layout agar proporsi yang dihasilkan sesuai
- Pada setiap elemen, berikan jarak agar tidak terlalu rapat
- Penggunaan elemen ganjil bisa mengarahkan pengguna untuk menuju elemen utama yang berada di tengah
Karena layout ini termasuk dalam design website, itu berarti Anda harus mengutamakan user experience. Sehingga tahapan ini penting dan tidak boleh Anda lewatkan begitu saja.
Daftar Layout Website Paling Recomended
Setelah mengetahui lima prinsip dasar menyusun layout untuk website, berikut ini beberapa rekomendasi yang bisa Anda aplikasikan di situs Anda:
1. Full-Screen Photo
Pilihan pertama yakni full screen foto yang bisa aplikasikan menjadi background website. Jadi cara penerapannya yakni menggunakan satu foto dengan ukuran full screen yang bisa Anda gunakan pada keseluruhan background halaman ataupun bagian atas website saja.
Untuk melengkapinya agar semakin menarik, Anda bisa menyematkan navigasi menggunakan transparan header ataupun tidak, juga memberikan tombol CTA maupun teks. kualitas gambar juga harus diutamakan, pastikan beresolusi tinggi agar pengunjung yang berselancar di website Anda semakin tertarik.
Layout dengan konsep full screen foto ini banyak digunakan pada toko online ataupun perusahaan yang menawarkan jasa. Dinilai lebih interaktif, serta informasi yang disampaikan juga tepat sasaran.
2. Split-Screen
Layout website dengan konsep split-Screen juga bisa jadi pilihan, nih! Hasil modern dan memukau tentunya, nah website Anda akan dibagi menjadi dua bagian dan dilengkapi warna yang berbeda.
Kolom tersebut bisa Anda isi dengan konten apapun baik itu penawaran, dan juga dilengkapi tombol CTA Udahkan pengunjung yang ingin bertransaksi.
Tampilannya yang sederhana, modern, layout split-Screen sangat cocok untuk berbagai macam website, baik itu e-commerce, blog pribadi, hingga situs bisnis.
3. Hero Section
Berikutnya, ada rekomendasi layout hero section yang pada pengaplikasiannya juga menggunakan foto atau gambar berukuran besar dan disematkan pada halaman utama website.
Namun, konsep hero section ini hanya disematkan pada bagian benar website atau bagian atas halaman utama website. Penggunaannya sangat populer dan banyak diaplikasikan oleh website populer saat ini.
Komponen lain seperti teks pendukung, headline, serta tombol call to action pun bisa Anda sematkan dalam Binar atau setelah hero section ini.
4. Card Based
Rekomendasi layout untuk website selanjutnya yakni card based. Sesuai dengan namanya, pengaplikasian layout ini memungkinkan Anda menaruh beberapa konten dalam halaman utama website yang diletakkan dalam box ataupun card.
Tampilan website menggunakan card based ini terlihat lebih rapi, karena terdapat sekat pada setiap konten. Pengunjung pun akan lebih mudah mendapatkan konten yang dicarinya. Cocok untuk para pemula yang masih bingung cara mendesain blog atau website seperti apa.
Para online shop yang ingin membuat toko online pun cocok menggunakan layout tipe card based ini. pasalnya, Anda bisa muda mau koordinir produk produk yang dijual secara lebih teratur dan rapi.
5. Alternating
Masih belum puas dengan konsep laut website di atas? Jangan khawatir, mungkin Anda akan suka dengan alternating column, Yang memungkinkan penggunanya untuk mengkombinasikan gambar dan teks.
Pengaplikasiannya pun bisa diletakkan pada banner halaman utama Website, ataupun keseluruhan halaman situs Anda. Sedikit catatan, jika menggunakan layout ini pada keseluruhan halaman sebaiknya gunakan pola atau gambar yang berbeda pada setiap teks.
Gunanya, agar pembaca tidak bingung saat mencerna informasi yang disajikan pada situs Anda. Tampilan juga lebih rapi apabila website Anda termasuk single page dengan banyak konten yang ingin ditampilkan.
6. Featured Image
Rekomendasi selanjutnya adalah Featured image, dengan pengaplikasian yang mengkombinasikan gambar berukuran besar dengan teks.
Tipe ini biasanya digunakan dengan cara meletakkan gambar besar di bagian tengah disertai body teks. Pengaplikasiannya bisa Anda terapkan di bagian History, About, dan lain sebagainya.
7. Boxes
Sama seperti namanya, layout boxes memiliki pola yang mana menampilkan konten dalam sebuah box. Umumnya, tipe ini hadir dalam satu ukuran dan bentuk saja, saudara nya Anda tidak bisa menyesuaikan dengan panjang ataupun besaran konten yang dimasukkan.
Penggunaan layout semacam ini membuat website Anda lebih elegan dan rapi karena jarak antar elemen nya teratur. Sangat cocok untuk diterapkan pada website e-commerce, apalagi untuk katalog berbagai produk.
8. Z&F Pattern
Berikutnya ada konsep layout Z & F pattern sesuai dengan namanya, website yang menerapkan layout ini memiliki bentuk menyerupai kedua huruf tersebut.
Z-pattern, biasanya berisikan tombol agar pengunjung lebih mudah beralih ke forum disebelah kanan, menuju ke bawah, kiri dan kanan, dan arah konten lainnya. Biasanya tiap elemen nya dibuat seperti zig-zag.
Sedangkan untuk F-pattern, biasanya memungkinkan pengunjung membaca informasi dari sebuah situs dari arah kiri ke kanan. Jadi semua konten berada di sebelah kiri.
Demikianlah beberapa informasi terkait cara memilih layout yang baik untuk website, serta beberapa rekomendasi pilihan desain yang bisa Anda aplikasikan. Semoga informasi di atas bermanfaat!
