10 Desain Website Layout Terbaik Untuk Tingkatkan UX

Ketika mendesain tampilan website, hal pertama yang harus kamu tentukan adalah website layout.

“Lho, kenapa bukan gambar, isi konten, atau warna yang harus direncanakan sedari awal?”

Memang benar, itu juga perlu kamu pertimbangkan sejak pertama kali memulai pembuatan website.

Tapi layout website ibaratnya seperti aspek terpenting dari yang paling penting dalam web designing.

Hal ini diperkuat dengan banyaknya desainer web percaya bahwa website layout ikut andil dalam menentukan seberapa puasnya pengalaman pengguna (UX) ketika menggunakan website.

Sejatinya setiap tahun pasti ada perubahan trend desain website.

Namun, jika ditelusuri lebih lanjut, sebenarnya ada beberapa jenis atau prinsip layout website yang pasti digunakan oleh banyak website.

Penasaran apa saja jenis-jenis beserta contoh layout website tersebut? Pastikan kamu membaca artikel ini sampai habis ya!

Prinsip Website Layout Populer

1. Single/One Column

Sesuai namanya, layout single column menyajikan konten utama dalam satu kolom vertikal.

Jenis layout ini mungkin yang paling sederhana dari contoh layout website lain karena paling mudah dinavigasi oleh pengguna.

Mereka cukup scroll ke bawah untuk melihat lebih banyak konten.

Meskipun sederhana, layout single column cukup populer di antara banyak pengembang website.

Website layout ini banyak ditemukan pada blog pribadi yang menggunakan prinsip desain minimalis, contohnya mikroblog Tumblr.

Tips: Karena layout single column sering digunakan untuk halaman long-scroll, ada baiknya menu navigasi web harus selalu terlihat. Saran kami, gunakan ‘sticky navigation’ agar pengguna bisa segera mengakses menu lain tanpa harus scroll balik ke bagian atas halaman web.

2. Split Screen

Website layout split screen (merujuk pada satu layar yang terbagi menjadi dua, baik vertikal maupun horizontal) sangat cocok untuk halaman yang memiliki dua konten utama yang sama pentingnya.

Ini memungkinkan web designer untuk menampilkan dua konten secara bersamaan untuk ketersampaian informasi yang utuh kepada pengguna.

Biasanya contoh layout website ini akan memadukan teks dan gambar yang saling sejajar sehingga tampilan web lebih rapi.

Tips:

• Desain split screen akan tidak berfungsi dengan efektif jika kamu terus menambahkan halaman konten. Jadi sebaiknya hindari memilih jenis layout web ini jika kamu harus menampilkan banyak informasi tekstual atau visual di bagian terpisah.
• Lalu kamu bisa pertimbangkan untuk menambahkan animasi UX yang berguna dalam menciptakan pengalaman kontrol web yang lebih dinamis.

3. Asimetris

Seperti konsep kesebangunan, layout asimetris adalah tidak samanya ukuran atau komposisi antara dua sisi layout.

Website layout ini merupakan teknik desain favorit sejak lama yang masih populer di kalangan web designer untuk pembuatan layout web.

Namun, masih banyak orang keliru antara prinsip asimetris dengan imbalance.

Padahal tujuan desain asimetris adalah untuk menciptakan keseimbangan ketika dua bagian web tidak mungkin menggunakan ukuran layout yang sama.

Dengan contoh layout website ini, kamu bisa menciptakan sifat dinamisme serta memfokuskan perhatian pengguna pada satu bagian web tertentu.

Jenis layout web ini cocok diterapkan untuk landing page dan website yang memiliki halaman web kurang dari 25 halaman.

Tips:

• Layout asimetris didasarkan pada prinsip bahwa objek dengan ukuran visual yang lebih besar akan menarik perhatian pengguna terlebih dahulu.
• Oleh karena itu, gunakan elemen dengan kontras warna yang tinggi untuk menambahkan kepadatan visual di bagian tertentu dari desain.
• Dan perlu kamu ingat, layout ini tidak bisa serta merta cocok untuk setiap bagian web. Menurut kami, layout asimetris efektif untuk website minimalis.

4. Cards Grid

Layout cards menjadi semakin populer berkat fleksibilitas dan responsifitasnya.

Dengan preview berukuran kecil (biasanya berupa gambar dan deskripsi singkat) membantu pengguna menemukan konten yang mereka sukai sekaligus membaca informasi detailnya dengan mengklik cards.

Desain grid bisa memiliki ukuran, jarak, jumlah kolom, dan gaya cards yang bervariasi berdasarkan ukuran layar.

Contoh layout website ini cocok untuk situs dengan banyak konten yang menampilkan banyak item dengan hierarki yang sama. Misalnya website berita, vlog, dan lain-lain.

Tips:

• Jadikan seluruh cards dapat diklik, bukan hanya bagian tertentu. Hal ini akan membuat interaksi pengguna dengan konten lebih nyaman karena mereka tidak perlu mengklik judul atau gambar cards dengan tepat untuk mengakses detail konten.
• Jika konten web kamu dengan website layout ini menggunakan gambar, pertimbangkan tampilannya di layar yang lebih kecil. Sebab, gambar yang terlalu kecil dapat menciptakan UX yang buruk.
• Perhatikan whitespace di antara konten gambar karena akan mempengaruhi cara pengguna untuk menggunakan web. Whitespace memungkinkan proses pengamatan konten lebih cepat, tetapi di sisi lain juga meningkatkan resiko pengguna mengabaikan beberapa konten.

5. Magazine

Magazine mungkin jadi website layout paling kompleks yang disebutkan dalam artikel ini.

Mirip dengan majalah cetak, majalah digital menggunakan grid multi column yang memungkinkan penggunanya membuat hierarki yang kompleks dan mengintegrasikan teks dan ilustrasi.

Web designer berusaha keras untuk menciptakan keselarasan visual untuk contoh layout website ini.

Mereka mencoba mempermudah mata untuk memindai bagian-bagian halaman web dengan cepat dan memungkinkan mata untuk berpindah secara alami dari satu blok ke blok lainnya.

Layout magazine adalah pilihan yang baik untuk website publikasi yang memiliki hierarki kompleks dengan konten dalam jumlah besar di satu halaman.

Tips: Layout web ini menekankan judul dan gambar yang mana ukuran judul/gambar berhubungan langsung dengan faktor fokusnya pengguna. Sehingga, pastikan elemen utama konten dibuat lebih menonjol agar menarik fokus pengguna dengan lebih cepat daripada yang kurang menonjol.

6. Boxes

Walaupun dari sekian contoh layout website di atas juga berdesain kotak, tapi beda halnya dengan layout Boxes.

Layout ini memiliki kotak header yang cukup besar dan beberapa kotak kecil untuk menampilkan konten web lainnya.

Jumlah kotak yang lebih kecil bisa berjumlah antara 2 sampai 5. Setiap kotak dapat menjadi link yang mengarah ke halaman konten yang lebih besar dan lebih kompleks.

Boxes adalah website layout yang cukup serbaguna untuk situs seperti portofolio individu dan untuk website perusahaan atau e-commerce.

Tips: Layout kotak yang besar dapat digunakan untuk memamerkan produk sementara kotak yang lebih kecil dapat menawarkan informasi lebih lanjut tentang produk.

7. Fixed Sidebar

Navigasi adalah bagian penting dari website apapun karena menjadi hal pertama yang dicari sebagian besar pengguna saat mereka ingin bernavigasi.

Bersamaan dengan navigasi horizontal sisi atas header, kamu juga bisa menerapkan fixed sidebar. Apa itu?

Fixed sidebar adalah contoh layout website yang terdiri dari kolom vertikal di bagian kiri atau kanan halaman web dengan posisi yang tidak bergerak.

Website layout ini selalu terlihat di samping halaman konten lainnya berubah saat pengguna scrolling halaman ke bawah.

Dengan layout ini, menu navigasi penting web lebih mudah untuk diakses.

Layout ini cocok untuk website yang memiliki jumlah pilihan navigasi yang relatif terbatas. Sehingga sebaiknya semua pilihan itu langsung terlihat saat pengguna memasuki halaman web.

Tips: Tak melulu memuat menu navigasi web, kamu bisa menambahkan fitur web lain seperti social media link, informasi kontak, dan lain-lain.

8. Featured Image

Salah satu website layout yang paling umum saat ini menyiratkan pengaturan featured image unggulan dari setiap halaman di website.

Kamu dapat menambahkan foto atau ilustrasi objek yang besar dan berani untuk menciptakan kesan pertama pengguna yang menakjubkan.

Gambar atau foto berfungsi untuk memusatkan perhatian pengguna ke titik fokus yang ingin di highlight pada suatu halaman.

Contoh layout website ini sangat bagus ketika kamu perlu mendemonstrasikan satu produk atau layanan dan memfokuskan seluruh perhatian pengguna padanya.

Tips:

• Pastikan unsur grafis cukup bagus untuk ditampilkan dengan jelas atau berkualitas tinggi dan menarik perhatian pengguna. Selain itu, gambar, foto, atau ilustrasi harus relevan dengan pesan yang ingin kamu sampaikan.
• Tambahkan unsur tipografi (teks) dalam gambar. Perhatikan ukuran, ketebalan jenis huruf, dan warna untuk memperkuat desain.