Tata letak situs web Anda dapat menentukan keberhasilannya. Dapatkan desain yang salah dan orang-orang akan bingung dan disorientasi, menghancurkan pengalaman pengguna. Mereka cenderung kehilangan konten penting atau gagal melihat ajakan untuk bertindak.

Tetapi pentingnya tata letak Anda lebih jauh. Desain harus sesuai dengan konten situs Anda. Dengan tata letak yang tepat, konten Anda dapat bersinar, tetapi dengan konten yang salah dapat menjadi ramai, sulit dibaca dan tidak menginspirasi.

Pada akhirnya semua situs memiliki sistem kisi yang berada di bawah desain situs web. Kolom dan baris ini menyediakan pesanan untuk konten Anda dan membimbing mata pengguna di sekitar halaman. Dalam kisi-kisi ini, Anda dapat membuat sejumlah besar pendekatan yang berbeda. Setiap situs web memiliki kisi dasar yang mendasari perancang telah membangun tata letak.

Namun, ketika memilih desain tata letak yang tepat untuk situs Anda, ada beberapa titik awal umum yang dapat Anda gunakan untuk memulai.

Perlu dikatakan bahwa Anda tidak perlu berpegang teguh pada satu pendekatan. Anda dapat dengan mudah menggabungkan beberapa tata letak di situs Anda atau bahkan pada satu halaman seperti halaman arahan .

Yang mengatakan, mari kita lihat opsi tata letak paling umum yang tersedia untuk Anda.

Kita mulai dengan pola tata letak yang paling mudah dari semua, kolom tunggal.

1. Tata Letak Kolom Tunggal

Meskipun tata letak yang paling rumit yang akan Anda temukan, itu telah tumbuh secara signifikan dalam popularitas sejak pertumbuhan web seluler. Itu karena situs web dapat menggunakan desain yang sama pada perangkat seluler, tablet, dan desktop, sehingga mengurangi waktu pengembangan.

Selain itu, tata letak satu kolom berfungsi dengan baik untuk menciptakan pengalaman membaca yang hebat karena memfokuskan pengguna pada konten tanpa gangguan di kedua sisi. Itulah sebabnya situs blogging Medium mengadopsinya untuk semua artikel mereka.

Akhirnya, ketika dikombinasikan dengan citra, tata letak kolom tunggal dapat membuat dampak yang kuat karena memungkinkan Anda untuk menampilkan gambar sebesar mungkin. The Ocean Resort adalah contoh yang bagus dari tindakan ini.

Dengan mempertimbangkan faktor-faktor ini, pertimbangkan untuk menggunakan tata letak kolom tunggal jika Anda ingin orang-orang menghabiskan banyak waktu membaca di situs Anda atau jika Anda memiliki citra yang membutuhkan ruang untuk bersinar.

Karena kesederhanaannya, ada beberapa tantangan di sekitar tata letak kolom tunggal. Namun, Anda perlu mempertimbangkan aliran informasi dengan cermat. Pesanan apa yang dibutuhkan pengguna untuk melihat konten Anda?

Misalnya, akan sangat membantu untuk memberi pengguna ringkasan tentang apa yang dicakup halaman di atas untuk menarik mereka dan menawarkan ajakan bertindak yang jelas menjelang akhir.

Juga, pikirkan tentang bagaimana Anda dapat membuat pengguna menggulir ke bawah halaman. Tata letak kolom tunggal cenderung lebih panjang, dan tidak selalu jelas bagi pengguna bahwa ada lebih banyak konten di bawah flip. Indikator visual, seperti panah dapat membantu.

Jika tata letak kolom tunggal tampak sedikit membatasi, tetapi Anda masih memiliki banyak konten untuk dikomunikasikan, pertimbangkan untuk mengadopsi desain yang berfokus pada konten.

2. Tata Letak Berfokus Konten

Desainer web sering menggunakan tata letak fokus konten di situs berita atau blog , dan biasanya memiliki kolom utama untuk konten dan satu atau lebih kolom samping untuk informasi tambahan.

Keuntungan dari tata letak ini adalah dapat membantu Anda mengelola panjang garis konten pusat dengan memvariasikan lebar kolom samping. Itu penting karena jika panjang baris teks terlalu panjang atau pendek, itu menjadi lebih sulit untuk dibaca , sehingga mengurangi pemahaman dan retensi informasi.

Namun, jika dilakukan dengan benar, tata letak yang berfokus pada konten sangat ideal untuk situs web apa pun yang berpusat pada salinan. Rahasianya adalah memecah konten dalam tata letak ini menjadi potongan-potongan kecil yang mudah dicerna.

Misalnya, di blog saya , Anda akan menemukan bahwa pos rata-rata saya diselingi oleh judul, daftar, citra, dan tarik keluar kutipan. Ini semua adalah teknik untuk membantu pengguna memindai artikel, menemukan bagian-bagian yang menarik.

Pertimbangan yang cermat juga perlu diberikan pada kolom samping. Sangat penting bahwa perancang web menempatkan konten yang tepat di kolom ini dan bahwa mereka secara visual memiliki bobot yang benar.

Masalahnya adalah bahwa pengguna berharap untuk menemukan konten sekunder di kolom samping dan karenanya memberi mereka lebih sedikit perhatian. Oleh karena itu, jika Anda berencana untuk memasukkan sesuatu seperti ajakan untuk bertindak dalam kolom samping, itu harus cukup kuat untuk menarik perhatian.

Misalnya, perhatikan bagaimana Smashing Magazine menggunakan ilustrasi warna-warni kucing untuk menarik perhatian pada formulir pendaftaran buletin mereka di kolom kanan.

Bukan berarti tata letak fokus konten sesuai untuk setiap halaman situs Anda. Situs web sering memasangkan tata letak ini dengan desain bergaya majalah.

3. Tata Letak Majalah

Seperti namanya, pendekatan tata letak ini digunakan secara luas di majalah atau situs berita untuk menunjukkan sejumlah besar cerita yang berbeda.

Terinspirasi oleh tata letak cetak, mereka memungkinkan kombinasi berita utama dan citra untuk memperkenalkan cerita. Itu bisa menjadi cara yang menarik untuk menyampaikan apa yang pada dasarnya adalah daftar tautan.

Ini juga merupakan tata letak yang sangat baik untuk menyoroti konten yang secara teratur berubah. Itulah sebabnya situs berita seperti The Washington Post sangat menyukainya.

Namun, tata letaknya bukan tanpa kekurangannya. Tata letak majalah dapat menjadi tantangan untuk membuat responsif, sering kali memerlukan perubahan lengkap dalam desain untuk perangkat layar yang lebih kecil.

Gaya tata letak situs web ini juga bisa agak luar biasa, dengan sejumlah besar gambar dan berita utama berteriak untuk perhatian.

Cara paling efektif untuk mengatasi masalah ini adalah menciptakan hierarki visual yang jelas. Dengan kata lain, buat beberapa ‘cerita’ lebih besar dari yang lain.

Misalnya, perhatikan bagaimana situs web Vogue memusatkan perhatian pada gambar sebelah kiri dengan menjadikannya jauh lebih besar. Mereka secara efektif memberi tahu pengguna ke mana harus mencari pertama.

Ini juga membantu bahwa sisa antarmuka pengguna mudah, dengan tipografi bersih dan bilah navigasi sederhana. Jika Anda akan menggunakan tata letak majalah, Anda harus bekerja keras untuk menjaga hal-hal sederhana.

Kelemahan potensial lain dari tata letak majalah adalah bahwa ia dapat terlihat ‘kotak’ karena kisi-kisi yang melandasinya begitu terlihat. Namun, Anda dapat mengurangi itu dengan mengambil inspirasi dari jenis tata letak kami berikutnya.

4. Layout Tata Letak Kotak

Tata letak yang tampaknya memecah grid yang mendasarinya dapat secara visual jauh lebih menarik daripada pendekatan yang lebih tradisional. Mereka juga sangat baik untuk menarik elemen layar tertentu yang keluar dari kolom biasa.

Ambil, misalnya, situs web Festival Arles VR . Perhatikan bagaimana mereka menarik perhatian Anda ke bilah navigasi mereka dengan membuatnya tumpang tindih dua kolom.

Penggunaan praktis lain dari tata letak pemecah kisi adalah menggunakannya untuk menindih teks pada gambar sedemikian rupa untuk menarik perhatian pada salinan. Ketika sebuah halaman web benar-benar menutupi teks pada suatu gambar, sering kali halaman tersebut dapat hilang. Namun, seperti yang dapat Anda lihat dari contoh di bawah ini , jika teks tumpang tindih sebagian gambar, itu lebih menonjol.

Kelemahan dari tata letak pemecah grid adalah sulit untuk mendapatkan yang benar, terutama ketika situs web harus responsif. Sebenarnya, sebagian besar desain pemecah kisi-kisi bukanlah hal semacam itu. Masih ada kisi di bawahnya, dan semua elemen layar masuk ke dalamnya. Hanya saja kisi-kisi itu jauh lebih kompleks sehingga tidak begitu jelas. Itu membuat mereka sulit untuk dirancang.

Kompleksitas bawaan mereka adalah mengapa Anda cenderung melihatnya digunakan oleh perusahaan yang dipimpin oleh desain seperti agensi desain atau merek fesyen. Mereka menunjukkan tingkat kecanggihan desain yang menarik bagi audiens tertentu.

Jika tata letak pemecah grid terasa terlalu rumit untuk situasi Anda, tetapi Anda masih ingin melakukan sesuatu yang lebih inovatif dan tidak biasa, pertimbangkan desain layar penuh.

5. Tata Letak Layar Penuh

Layout layar penuh, seperti namanya, pas pada satu layar tanpa perlu pengguna untuk menggulir. Itu membuat mereka ideal untuk bercerita atau presentasi.

Ambil, misalnya, Spesies dalam Potongan . Pengalaman presentasi yang kaya dan interaktif ini menceritakan tentang 30 spesies yang terlibat.

Seperti yang Anda lihat, tata letak layar penuh adalah yang terbaik jika disertai dengan citra yang kuat. Itu menjadikannya pilihan yang bagus untuk situs web yang kaya akan fotografi, ilustrasi, atau video.

Bukan berarti Anda harus tetap berpegang pada pendekatan layar tunggal dengan ketat. Pada pandangan pertama, situs web Roux at Parliament Square tampak seperti situs web layar penuh dalam arti yang sama dengan Spesies dalam Potongan. Citra mereka yang cantik memenuhi seluruh area pandang.

Namun, adalah mungkin untuk menavigasi lebih jauh ke bawah halaman untuk melihat konten tambahan. Sayangnya, itu menyoroti satu kelemahan potensial dengan pendekatan tata letak ini. Pengguna tidak selalu menyadari bahwa mereka dapat menggulir sehingga dapat kehilangan konten yang berharga.

Anda juga perlu mempertimbangkan bagaimana tata letak akan beradaptasi pada berbagai ukuran. Misalnya, apakah pendekatan layar penuh berfungsi pada perangkat seluler? Juga, akankah gambar dipangkas saat ukuran layar berubah atau menyusut? Anda dapat dengan cepat menemukan titik fokus gambar dipangkas dari area yang dapat dilihat dengan ukuran lebih kecil.

Yang mengatakan, jika Anda memiliki gambar yang menakjubkan untuk dipamerkan, Anda akan kesulitan untuk menemukan desain tata letak yang lebih baik. Tetapi, jika Anda ingin opsi untuk menambahkan deskripsi dan panggilan untuk bertindak di samping gambar-gambar itu, Anda mungkin ingin mempertimbangkan tata letak bergantian.

6. Tata Letak Bergantian

Pola tata letak bolak-balik adalah salah satu yang paling umum ditemukan di web. Anda akan menemukan itu terdiri dari serangkaian blok konten, yang masing-masing memiliki tata letak dua kolom. Blok biasanya terdiri dari gambar di satu sisi dan teks di sisi lain.

Namanya adalah bahwa gambar berganti sisi. Jadi blok pertama akan memiliki konten di sebelah kiri dan gambar di sebelah kanan, sedangkan blok berikutnya membalikkan tata letak itu.

Ini adalah pendekatan tata letak yang sangat disukai ketika menjelaskan fitur atau manfaat suatu produk. Misalnya, produk perangkat lunak seperti Webydo akan menggunakan gambar untuk menunjukkan fitur dan kemudian salinannya untuk menjelaskan cara kerjanya atau manfaat yang diberikannya.

Bukan berarti blok konten ini terbatas pada gambar dan teks. Terkadang situs mengganti gambar dengan video. Sama halnya, sisi konten elemen dapat mencakup segala sesuatu mulai dari ikon hingga testimonial atau ajakan bertindak.

Misalnya, Convertkit menyertakan kesaksian dan ajakan untuk bertindak bersama teks mereka di setiap blok konten.

Bagian dari alasan bolak blok begitu umum adalah bahwa mereka adalah pendekatan tata letak yang sederhana dengan beberapa kekurangan. Jika Anda perlu mengomunikasikan beberapa poin penjualan, ini hampir selalu merupakan opsi tata letak yang andal.

Tentu saja, persyaratan Anda mungkin berbeda, jadi opsi lain untuk dipertimbangkan adalah tata letak berbasis kartu.

7. Tata Letak Berbasis Kartu

Tata letak halaman berbasis kartu adalah pendekatan tata letak umum lainnya yang akan Anda lihat di seluruh web.

Layout berbasis kartu adalah cara terbaik untuk memberi orang serangkaian pilihan bagi pengguna untuk memilih, memberikan kepada mereka informasi yang cukup tentang setiap pilihan untuk membuat keputusan.

Itu membuat mereka pilihan populer untuk halaman daftar produk situs eCommerce. Ini memungkinkan situs web untuk menampilkan gambar produk, deskripsi, dan harga. Anda bahkan dapat menambahkan fungsionalitas seperti “simpan untuk nanti” seperti yang Anda lihat dari situs web Asos .

Namun, Anda akan menemukan situs web menggunakan tata letak berbasis kartu dalam situasi apa pun di mana pengguna harus memilih dari daftar. Misalnya, penggunaan tipikal lainnya adalah menampilkan daftar artikel di blog atau situs berita.

Tata letak berbasis kartu memungkinkan Anda menampilkan gambar cerita, judul, dan deskripsi, serta detail tambahan tentang pos yang ingin Anda sertakan. Blog awwwards adalah contoh luar biasa dari penggunaan semacam ini dalam tindakan.

Yang terbaik dari semuanya, tata letak berbasis kartu bekerja dengan baik secara responsif, dengan jumlah kartu berturut-turut berkurang secara perlahan saat lebar yang tersedia turun.

Namun, ada beberapa kelemahan kecil pada pendekatan ini. Pertama, kartu berfungsi paling baik saat Anda memasukkan gambar. Itu berarti jika Anda kesulitan menemukan foto yang cocok untuk setiap item daftar Anda, Anda mungkin lebih baik dengan desain yang berbeda.

Masalah kecil lainnya adalah dengan jumlah konten yang bervariasi. Jika satu kartu memiliki lebih banyak konten daripada yang lain, itu dapat meninggalkan ruang putih di dalam kartu atau di antara setiap baris.

Salah satu cara untuk mengurangi masalah ini adalah tidak mencoba dan menyimpan kartu pada baris yang sama, seperti yang ditunjukkan pada contoh di bawah ini.

Namun demikian, ini adalah masalah kecil, yang menjelaskan adopsi luas pendekatan tata letak ini.

Desain lain yang sama-sama populer adalah tata letak gambar pahlawan.

8. Tata Letak Pahlawan

Tata letak pahlawan diberi nama setelah gambar pahlawan, gambar besar dengan hamparan teks yang mendominasi homepage di banyak situs web. Apple memanfaatkan gambar pahlawan klasik.

Apa yang membuat gambar pahlawan begitu lazim adalah mereka memungkinkan Anda untuk mengatur proposisi nilai Anda dengan cara yang berdampak langsung di titik masuk situs web Anda.

Seperti yang dapat Anda lihat dari situs web Pixave dan Apple di atas, biasanya terdiri dari gambar latar belakang besar, judul atau tali pengikat, dan deskripsi. Layout pahlawan juga sering datang dengan ajakan untuk bertindak.

Jika Anda perlu menjelaskan dengan jelas apa yang Anda tawarkan di beranda atau halaman arahan Anda dengan cara yang akan menarik perhatian, maka gambar pahlawan bisa menjadi cara untuk pergi. Namun, itu mungkin sejauh penggunaannya.

Kadang-kadang Anda akan melihat tata letak pahlawan yang digunakan pada halaman berikutnya. Namun, dalam kebanyakan kasus, gambar pahlawan hanya menarik perhatian dari konten yang lebih berharga. Jadi gunakan dengan hati-hati.

Selain itu, ada sedikit kelemahan dari menggunakan tata letak pahlawan. Ya, mereka biasa, tetapi pengguna akrab dengan mereka, dan mereka efektif.

Opsi tata letak yang jauh kurang umum adalah tata letak layar terbagi.

9. Split Layout Layar

Seperti tata letak layar penuh, layar terpisah adalah cara yang bagus untuk menarik perhatian ketika pengguna pertama kali tiba di situs web Anda seperti yang dapat Anda lihat dari beranda perusahaan desain web di bawah ini.

Apa yang membuat contoh di atas sangat efektif adalah ada alasan yang jelas untuk tata letak layar terbagi. Situs web ini menjelaskan bahwa ada dua sisi dalam bisnis mereka – desain dan pengembangan.

Contoh serupa adalah ketika Anda ingin memberi pengguna pilihan biner yang jelas. Layar terbagi sangat masuk akal dalam situasi itu karena membagi layar secara merata antara dua opsi.

Sebagai contoh, agen model 62 Manajemen menggunakan layar terpisah untuk mendorong pengguna mengidentifikasi apakah mereka mencari model pria atau wanita.

Sayangnya di luar jumlah aplikasi yang terbatas ini, ada sedikit alasan untuk mengadopsi desain layar terbagi. Ini adalah opsi tata letak yang relatif terbatas, dan ada banyak skenario yang tidak sesuai. Namun, dalam kasus-kasus di mana itu, sejauh ini merupakan pilihan terbaik.

Pilihan serupa yang akan memberikan fleksibilitas sedikit lebih adalah tata letak asimetris.

10. Tata Letak Asimetris

Sementara tata letak layar terbagi memaksa pemisahan yang sama di tengah-tengah viewport, desain asimetris memungkinkan Anda untuk membagi layar sesuai keinginan Anda.

Keuntungan dari tata letak ini daripada layar terbagi adalah memungkinkan penambahan penekanan pada sisi tertentu dari halaman. Semakin banyak real estat yang dimiliki suatu pihak, semakin banyak fokus yang Anda berikan padanya. Itu, pada gilirannya, memungkinkan Anda untuk mengidentifikasi konten primer dan sekunder.

Dengan premis kolom primer dan sekunder tersedia, Anda dapat menggunakan pendekatan ini dalam berbagai cara. Misalnya, Félix Lesouef menggunakan metode di situsnya untuk membagi antara konten dan navigasi.

Sebaliknya, situs web Nourish Eats menggunakan kolom kedua untuk memungkinkan Anda melihat bagian selanjutnya dari situs webnya.

Dalam banyak hal, tata letak asimetris adalah pilihan yang sangat baik. Ini fleksibel, relatif mudah diimplementasikan dan kurang digunakan. Ini adalah cara yang nyaman untuk membuat situs web Anda terlihat berbeda tanpa sakit kepala dari beberapa pilihan lain.

Cara Memilih Layout

Dengan membaca artikel ini, Anda telah mengambil langkah pertama dalam memilih tata letak yang tepat untuk situs Anda. Anda telah mempelajari opsi apa yang tersedia untuk Anda.

Selanjutnya, Anda perlu mengetahui opsi mana yang mungkin sesuai untuk situs Anda. Salah satu cara untuk melakukan ini adalah dengan melihat pesaing Anda. Namun, saya sarankan tidak berhenti di situ. Bahayanya adalah Anda akan menyalinnya, dan itu akan selalu menempatkan Anda selangkah di belakang.

Alih-alih, lihat situs di sektor lain yang memiliki jenis konten yang terkait dengan milik Anda. Jika Anda memiliki situs web brosur yang ditujukan untuk pemirsa B2B , lihat situs serupa lainnya. Sama halnya, jika Anda memiliki situs eCommerce, lihat eCommerce di sektor lain.

Dari sana, bekerja sama dengan desainer Anda untuk bereksperimen dengan beberapa pendekatan berbeda. Buat mereka untuk memetakan beberapa ide berdasarkan tata letak yang berbeda dan lihat apa yang paling sesuai dengan konten Anda.

Jika Anda menemukan diri Anda tidak dapat membuat keputusan atau kurang percaya diri ke arah yang benar, cobalah menempatkan opsi di depan beberapa pengguna dan dapatkan reaksi mereka. Jangan hanya bertanya kepada mereka mana yang mereka sukai, tanyakan juga apakah mereka melihat konten penting atau mengerti tentang apa perusahaan itu.

Sebenarnya, Anda mungkin akan menemukan dan memilih dari pendekatan tata letak yang berbeda untuk berbagai bagian situs web Anda, dan itu tidak masalah. Karena ketika datang ke tata letak situs web, menggunakan yang tepat pada waktu yang tepat sangat penting.

sumber: websitesetup.org