9 Contoh Tata Letak Situs Web Terbaik dan Kapan Menggunakannya

Diterbitkan: 2020-12-04

Peran tata letak situs web dalam memengaruhi kualitas desain jelas bagi setiap desainer profesional. Pola dan struktur situs web adalah hal pertama yang kami pikirkan pada tahap awal proses desain kami. Setelah mengidentifikasi tujuan situs kami dan elemen yang harus disertakan, desain tata letak halaman secara efektif memulai tahap pertama meletakkan ide di atas kertas.

Hanya setelah Anda memutuskan anatomi situs web Anda dan bagaimana memetakan konten Anda sesuai dengan itu, Anda kemudian dapat membangun gambar rangka lo-fi dan menjelajahi apa yang terbaik untuk apa yang ingin Anda capai.

Apakah ini beranda yang sangat visual yang akan bekerja paling baik untuk strategi konten Anda, dalam bentuk tata letak media layar penuh? Atau apakah lebih masuk akal untuk mendistribusikan hierarki informasi dalam format yang lebih merata, menggunakan tata letak layar terpisah untuk menampilkan beberapa bagian konten dengan signifikansi bersama?

Inilah tepatnya yang akan kami jelajahi, dengan melihat sembilan contoh desain tata letak situs web pilihan kami yang paling sering digunakan oleh desainer profesional.

Mengevaluasi contoh-contoh ini akan membantu kami memahami peran yang diberikan oleh setiap jenis tata letak dalam membangun konten situs web yang mengaktualisasikan tujuan desain kami. Pada akhirnya, mengetahui kapan dan bagaimana memanfaatkan tata letak yang tepat untuk situs kami — akan melengkapi dan memberdayakan kami untuk membangun strategi desain yang lebih kuat dan membuat situs web yang bahkan lebih indah.

Gunakan Kisi Situs Web untuk Membangun Tata Letak Halaman Anda

Daftar isi

  • Apa itu Tata Letak Situs Web?
  • Apa yang Harus Disertakan Setiap Tata Letak Situs Web​
  • 9 Tata Letak Situs Web Paling Efektif
  • 1. Tata Letak Kolom Tunggal: iPad Terkenal di Dunia
  • 2. Tata Letak Dua Kolom: Earmark
  • 3. Tata Letak Tiga Kotak: KatchMe
  • 4. Tata Letak Layar Terpisah: Bose
  • 5. Tata Letak Asimetris: Perut Bawah
  • 6. Bilah Sisi Tetap: Restoran Arbor
  • 7. Tata Letak Media Layar Penuh: Opera & Balet Nasional Belanda
  • 8. Tata Letak Kotak: Malika Favorit
  • 9. Tata Letak Kotak: TSX Broadway
  • Siap, Setel, Bangun

Apa itu Tata Letak Situs Web?

Tata letak situs web adalah kerangka kerja yang mendefinisikan struktur situs web. Tata letak menempatkan elemen-elemen kunci dari bagian depan dan tengah situs web, dan menyediakan jalur navigasi yang jelas bagi pengguna. Tata letak situs web adalah elemen penting yang menentukan apakah situs akan berhasil atau gagal.

Tujuan tata letak situs web adalah untuk meningkatkan keterlibatan pengguna, membuat halaman web menarik secara visual, dan mengatur konten situs sehingga cocok satu sama lain dalam urutan yang jelas

Apa yang Harus Disertakan Setiap Tata Letak Situs Web

Meskipun kita tentu melihat keindahan dalam banyaknya tata letak yang dapat dipilih dalam desain web profesional, ada juga komponen penting yang harus disertakan oleh setiap jenis tata letak, bahkan jika disertakan dengan cara yang tidak konvensional. Seperti yang kita ketahui dari hukum Jakob, salah satu prinsip paling mendasar dalam desain web, adalah bahwa tata letak antarmuka dan alur navigasi harus memiliki keunikan yang menarik, namun diimbangi dengan keakraban yang logis dan intuitif bagi pengguna.

Pada dasarnya, apa yang tidak boleh kita lupakan ketika merencanakan tata letak halaman kita adalah memasukkan:

  • Header situs web , yang harus selalu menangkap elemen navigasi paling sederhana yang menyampaikan struktur dasar situs web Anda dan cara menemukan apa yang Anda cari
  • Badan halaman, artinya bagian inti dari halaman web Anda, seperti konten visual, pesan utama, dan sebagainya.
  • Menu navigasinya, entah itu berupa sidebar, hamburger menu, sub-header, mega menu, scroll-triggered, sticky atau fixed menu, dan mungkin lainnya.
  • Footer situs web, tidak peduli seberapa pendek atau tinggi, footer umumnya berisi tautan saluran sosial, pemberitahuan hak cipta dan tautan kebijakan privasi, dan item opsional lainnya, seperti duplikat konten menu header Anda, ajakan bertindak, seperti "berlangganan", "hubungi kami", atau bahkan formulir pengiriman.

Dan sekarang, untuk inspirasi desain web yang kami tunggu-tunggu, beberapa contoh favorit kami dari tata letak situs web yang paling umum digunakan.

Lihat Cara Mengoptimalkan Tata Letak Situs Web Anda Dengan Elementor