• Home
  • Berita
  • 10 Desain Website Layout Terbaik Untuk Tingkatkan UX

10 Desain Website Layout Terbaik Untuk Tingkatkan UX

Oleh Ratna Patria
No ratings yet.

“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!

Website layout
Sumber: Envato

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.

  1. 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.
  1. 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.
  1. 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.
  1. 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.

  1. 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.

  1. 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.

Website layout
Sumber: Envato

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.
  1. Layout F

Contoh layout website ini dibuat berdasarkan konsep membaca konten oleh sebagian besar pengguna web.

Pola F ditentukan berdasarkan kebiasaan pengguna yang melihat konten web mulai dari sudut kanan atas halaman, lalu bergerak secara horizontal, dan turun ke baris berikutnya.

Pola ini tidak hanya terjadi pada pengguna desktop, tetapi juga untuk pengguna perangkat seluler.

Website layout ini cocok untuk halaman yang perlu menyajikan banyak pilihan fitur web yang berbeda sehingga memungkinkan pengguna melihatnya dengan cepat.

Layout F berguna untuk halaman beranda atau halaman situs berita yang berisi hasil pencarian. Contohnya website e-commerce atau website portfolio.

Tips:

  • Sebaiknya letakkan konten yang paling penting di sisi kiri dan kanan halaman, tempat pengguna memulai dan mengakhiri pemindaian horizontal mereka.
  • Fokuskan perhatian pengguna pada elemen tertentu dengan memberikan efek visual yang lebih besar padanya. Misalnya, kamu dapat meng-highlight keyword dalam teks untuk memfokuskan perhatian pengguna.
  1. Layout Z (Zig-Zag)

Mirip dengan website layout bentuk F, layout Z juga meniru kebiasaan cara seseorang membaca sesuatu secara alami.

Pola membacanya mulai dari pojok kiri atas. Kamu bergerak dari kiri atas ke kanan atas yang membentuk garis horizontal.

Namun, langkah selanjutnya sedikit berbeda. Sebab alih-alih langsung turun seperti pada pola F, mata kamu beralih ke sisi kiri halaman, menciptakan garis diagonal.

Lalu terakhir, kamu memfokuskan mata kembali ke kanan halaman sehingga membentuk garis horizontal kedua.

Tips: Contoh layout website ini lebih cocok untuk situs dengan tujuan tunggal dan jumlah konten yang sedikit. Pola ini efektif untuk mengarahkan perhatian pengguna ke poin tertentu dengan menggunakan visual, teks, dan CTA.

Contoh Layout Website

Pada dasarnya, sebuah website tidak akan hanya menggunakan satu prinsip website layout dari daftar yang telah kita bahas bersama di atas.

Mereka bisa menggunakan 2-3 layout yang menurut mereka adalah layout terbaik untuk kontennya.

Nah, berikut ini kami juga akan bagikan contoh layout website yang bisa jadi referensi kamu dalam membuat website.

  1. 62 Management

Website portfolio milik sebuah management house ini punya website layout yang responsive dan minimalis dengan banyak whitespace.

Saat pertama kali mengakses websitenya, kamu hanya akan ditampilkan halaman web one-page dengan dua linked image utama pria dan wanita.

Ketika kamu menekan salah satu gambar, maka akan beralih ke halaman beranda.

Nah, disinilah kamu akan melihat penerapan beberapa contoh layout website yang menarik dan sederhana.

Pertama, layout Boxes pada beranda. Lalu ketika kamu menekan salah satu foto model, kamu akan melihat detail portofolio sang model lengkap dengan beberapa foto dan sidebar di sisi kiri.

Yap, sidebar tersebut menggunakan prinsip fixed sidebar untuk meletakkan submenu Portfolio, Polaroids, PDF, dan Instagram links.

  1. Dropbox

Layanan cloud storage populer Dropbox menawarkan user experience yang sederhana melalui layoutnya.

Sejak halaman landing page-nya, Dropbox menggunakan website layout split screen yang berpadu dengan layout Z.

Sebab, website ini meletakkan logo di sebelah kiri atas, CTA “Get started” di sisi kanan atas, dan CTA kedua yang mengarahkan pengguna untuk mengakses halaman lain.

Dan mereka memberikan sentuhan akhir pada landing page dengan animasi menarik.

  1. Culture.pl

Warna mencolok serta ilustrasi unik dan atraktif adalah daya tarik dari website Culture.pl. Mereka semua dikemas dalam contoh layout website utama asimetris.

Walaupun porsi layout untuk gambar lebih sedikit daripada tipografi, website ini tak kehilangan daya tariknya karena penggunaan warna merah yang mencolok.

Culture.pl menerapkan website layout tersebut ke semua halaman webnya.

  1. YouTube dan Pinterest

Kedua situs ini memang bertolak belakang dari segi konten yang disajikan.

Tapi keduanya punya kesamaan website layout yang malah menjadi daya tariknya, yaitu penggunaan layout cards grid.

Dengan gambar thumbnail dan deskripsi singkat, YouTube dan Pinterest menyajikan preview konten dengan cantik, rapi, dan atraktif.

Walaupun ukuran grid YouTube lebih konsisten daripada Pinterest, keduanya tetap memberi kesan penyajian konten yang menyeluruh.

  1. Apple

Contoh terakhir ini kami beri referensi dari website perusahaan teknologi raksasa asal US, Apple Inc.

Websitenya sangat menonjolkan featured image yang besar tanpa widget-widget mengganggu karena hanya ada link informasi dan judul yang malah semakin tampilan produk.

Setelah kami telusuri, Apple menggunakan contoh layout website featured website sebagai strategi penjualan produk dan brand awareness.

Dan sesuai dugaan, perhatian pengguna akan langsung tertuju pada sang produk.

Website layout
Sumber: Envato

Pilih Website Layout Sesuai Kebutuhan

Bagaimana, kira-kira adakah website layout yang bakal kamu pakai di website buatanmu?

Saran kami, pertimbangkan baik-baik mana contoh layout website yang paling efektif untuk penempatan segala konten, menu, dan widget website kamu.

Sebab, dengan menggunakan layout yang sesuai, sama saja kamu sudah memahami cara untuk mendapatkan perhatian user sekaligus meningkatkan experience mereka.

Tak masalah jika contoh layout website yang paling cocok adalah layout sederhana.

Yang terpenting adalah ketersampaian informasi dan membuat user betah untuk berlama-lama di website kamu.

Semoga beberapa referensi dari kami bisa menambah wawasan kamu seputar contoh layout website.

Jika ingin mendapatkan informasi tentang tips membuat website terbaik lainnya, kunjungi blog DomaiNesia saja ya!

Ratna Patria

Hi! Ratna is my name. I have been actively writing about light and fun things since college. I am an introverted, inquiring person, who loves reading. How about you?


Berlangganan Artikel

Dapatkan artikel, free ebook dan video
terbaru dari DomaiNesia

{{ errors.name }} {{ errors.email }}
Migrasi ke DomaiNesia

Pindah Ke DomaiNesia

Tertarik mendapatkan semua fitur layanan DomaiNesia? Dapatkan Diskon Migrasi 40% serta GRATIS biaya migrasi & setup

Ya, Migrasikan layanan Saya!