Tentunya jika Anda adalah seseorang yang bertekat di dunia desain, Anda tidak asing lagi dengan istilah web layout. Sederhananya, layout adalah tata letak. Jadi, dalam dunia desain, tata letak web diperlukan untuk membuat pengaturan antara teks dan gambar yang enak dipandang. Untuk membuat pengaturan ini diperlukan beberapa elemen, teks, gambar, bentuk, garis, spasi, dan lain lain. Selain elemen tersebut, layout juga terdiri dari beberapa bagian, mulai dari header, content, sidebar dan diakhiri dengan footer. Ingin mempelajari lebih lanjut tentang layout website ? Simak informasinya dalam artikel dibawah ini.
Apa itu Layout? Layout adalah susunan elemen desain dalam kotak media tertentu yang mendukung konsep atau pesan yang akan dibuat. Fungsi dan tujuan dari suatu keterampilan adalah untuk menyajikan berbagai elemen seperti teks dan gambar yang dapat berkomunikasi. Dengan cara ini, orang yang melihat pengaturan dapat dengan mudah memahami informasi yang diberikan. Ada beberapa hal yang perlu diperhatikan dalam merencanakan acara. Jika pembaca tidak membaca tata letak dengan baik, dapat dikatakan desain tata letak tidak efektif. Untuk meningkatkan tampilan sebuah website, maka harus mengandung beberapa elemen. Untuk pemahaman yang lebih baik, elemen berikut ada di Layout: - Teks (Text) - Gambar (Image) - Garis (Line) - Bentuk (Shape) - Ruang Putih (White Space)
Layout website sebaiknya memuat beberapa elemen mulai dari header, navigasi, sidebar hingga footer, selain elemen di atasnya. Berikut penjelasan singkat untuk membantu Anda memahami perbedaan antara elemen layout website: 1. Header Di header, desainer layout dapat mengisi area ini dengan logo situs, navigasi situs, ikon media sosial, dan menu pencarian. 2. Navigation Navigation/navigasi dapat diartikan sebagai rambu-rambu. Navigasi website dapat berupa menu-menu yang muncul di bagian atas halaman website hingga menu-menu pendukung lainnya yang biasanya terdapat di bagian bawah website. 3. Content/Body Lebih lanjut, ada unsur tentang content/body yang biasanya diisi dengan informasi produk, fitur produk, dan deskripsi produk yang sedang dijual. 4. Sidebar Elemen kedua adalah sidebar. Nyatanya, penyelenggara sudah berhenti menggunakan elemen ini. Ini karena sidebar hanya membuat tampilan situs menjadi kurang menarik. Namun, sidebar tetap digunakan di beberapa halaman artikel, yang nantinya akan diisi dengan informasi produk, produk terpopuler dan navigasi tambahan. 5. Footer Elemen terakhir adalah footer. Di footer, penyelenggara membaginya menjadi 2-4 bagian. Bagian pertama, yaitu logo dan deskripsi singkat tentang situs web. Bagian kedua, informasi kontak. Bagian ketiga penuh dengan ikon media sosial. Dan bagian keempat penuh dengan navigasi ekstra situs.
Seperti yang sudah dijelaskan sebelumnya, layout website berguna untuk memudahkan dalam memberikan informasi kepada pembaca. Namun, apakah Anda berniat membuat layout website lain? Di bawah ini adalah informasi yang lebih rinci, yaitu: - Memastikan bahwa pesan yang disampaikan dalam website dapat tersampaikan dengan benar kepada publik. - Jadikan situs lebih menarik. - Memfasilitasi tindakan audiens atau pengunjung situs web seperti yang diharapkan. - Mempermudah perbaikan ketika Anda menemukan kerusakan di situs. - Lebih sedikit kebingungan dalam membuat website. - Mengurangi pembuatan website agar lebih efisien dan cepat.
1. Melanie Duncan Layout Website pertama yang kami diskusikan adalah oleh Melanie Duncan. Jika Anda memiliki website bisnis, penjelasan ini akan sangat berguna. Pasalnya, website bisnis Melanie Duncan mampu menarik pengunjung dalam waktu singkat bahkan terbukti sukses. Rupanya, bukan tanpa alasan tata letak halaman ini menggunakan trik aturan 8 detik. Mungkin tidak banyak orang yang mengetahui strategi ini. Aturan 8 detik adalah trik untuk menarik perhatian pengunjung Anda hanya dalam 8 detik. Trik aturan 8 detik berkaitan dengan tata letak situs yang digunakan Melanie, yaitu header gambar pahlawan dan tata letak petak kartu. Kami akan membahasnya satu per satu. Gambar pahlawan memiliki gambar besar di header. Gambar harus meninggalkan kesan yang kuat, misalnya ekspresi wajah manusia. Tren desain situs web ini dapat dengan cepat memenangkan kepercayaan pengunjung. Bahkan, hasilnya bisa meningkat hingga 95%. Setelah kepercayaan pengunjung didapat, tampilan website berubah menjadi tata letak kartu. Template ini menampilkan informasi berupa peta interaktif. Melanie menggunakannya untuk menampilkan konten dan menambahkan sampul yang menakjubkan. Alhasil, pengunjung lebih tertarik untuk membukanya. Sebagai fitur lainnya, situs ini juga menyematkan halaman dengan sidebar media sosial dan tombol berlangganan. Didesain sebagai palang samping yang stabil, rangka ini tidak tenggelam bahkan saat digulung. Selain itu, pengunjung lebih cenderung berbagi konten dan berkonversi menjadi pelanggan. 2. Dropbox Tidak banyak perusahaan yang menggunakan hosting web seperti Dropbox. Nyatanya, desain ini efektif mendorong konversi. Untuk membuktikannya, Dropbox berhasil menarik lebih dari 500 juta pelanggan dan menghasilkan lebih dari satu miliar dolar setahun. Secara umum, Dropbox menggunakan tata letak variabel. apa itu Tata letak alternatif adalah pola di mana tata letak dibagi menjadi dua blok. Satu sisi memiliki gambar sementara sisi lain memiliki teks. Ya, seperti membuka buku dongeng. Dropbox khususnya melakukan pekerjaan yang cukup epik pada pengaturan alternatif. Situs ini menyambut pengunjung dengan layar dua sisi yang menyertakan tajuk dan formulir pemesanan. Konversi pun bisa mudah dan cepat dilakukan berkat layout ini. Sebab, pengunjung tak perlu repot-repot mengklik berbagai tombol. 3. HubSpot Apakah Anda ingin membuat informasi lengkap di situs web menjadi lebih menarik? Lihat situs web HubSpot. HubSpot menawarkan produk yang cukup banyak dan berhasil mengemas hal-hal yang kompleks menjadi sebuah website yang terlihat sederhana dan mudah dipahami. Pemilihan produk diatur dalam bentuk peta interaktif di mana ajakan bertindak mudah ditemukan. Untuk memperjelas informasi, HubSpot juga menggunakan tata letak variabel. Anda meletakkannya di halaman yang membutuhkan teks dengan media. Seperti video intro, daftar pencapaian, dan lainnya. Ini membuat informasi lebih menarik dan lebih mudah dicerna. Dengan layout website yang menarik, tak heran jika HubSpot mampu menghasilkan angka konversi yang luar biasa. Bahkan, website tersebut telah dikunjungi lebih dari 7 juta kali dan berhasil menarik sedikitnya 86.000 pelanggan. 4. Tico Website pemenang Penghargaan Desain Web ini memiliki layout yang agak unik. Tico menggabungkan aturan sepertiga dengan tata letak layar penuh. Apa-apaan itu? Aturan sepertiga adalah prinsip desain web yang membagi halaman menjadi tiga bagian. Menurut aturan ini, empat garis sayatan di tengah adalah area yang paling terpengaruh. Nah, seperti yang Anda lihat, Tico telah menempatkan tombol CTA dan header di bagian tengah website. Ini membuat orang fokus pada informasi, sehingga meningkatkan hasil. Selain aturan sepertiga, Tico memilih tata letak layar penuh untuk desain situs web. Tata letak layar penuh adalah desain di mana halaman situs web berisi semua informasi spesifik. Sehingga pengunjung dapat menemukan informasi yang lengkap tanpa harus scrolling lama. Lihat, Anda dapat dengan mudah mengetahui keunggulan produk Tico di satu halaman! Yang lebih menarik lagi adalah Tico menggunakan jumlah ruang kosong yang tepat untuk menjaga agar konten tetap segar di mata. 5. Grammarly Contoh tata letak situs berikutnya adalah Grammarly. Apa kesan pertama Anda saat melihat layout halaman ini? Anda mungkin langsung menyadari bahwa Grammarly menggunakan tata letak variabel. Tampilan mencakup pratinjau produk dalam format animasi bersama dengan lebih banyak informasi tentang manfaat Grammarly. Namun, ada satu elemen yang cukup menarik, yaitu tombol CTA yang terlihat bagus. Berbeda dengan contoh tata letak situs web sebelumnya, Grammarly hanya menawarkan tombol ajakan bertindak. Rupanya, ahli tata bahasa memahami hukum Hick dengan baik. Menurut Hukum Hicks, semakin banyak pilihan, semakin sulit untuk mengambil keputusan. Daripada membuat calon pelanggan gila dan akhirnya membatalkan acara, lebih baik fokus pada ajakan bertindak tertentu, bukan? Selain tata letak variabel, Grammarly juga menggunakan tata letak layar penuh. Struktur ini memungkinkan Grammarly menyediakan konten pendukung dengan cara terbaik. Selain itu, mereka juga memadukannya dengan white space. Kombinasi tata letak layar penuh dan ruang putih menjadikan situs web luas dan minimalis. Informasinya tertata rapi sehingga situs terlihat segar dan lebih mudah dipahami. Melakukan konversi tetap nyaman karena tombol CTA selalu tersedia di area header. Bukti bahwa Grammarly memiliki 6,9 juta pelanggan aktif. 6. Mailchimp Apa rahasia di balik kesuksesan Mailchimp dalam menumbuhkan lebih dari 11 juta pelanggan aktif? Mungkin salah satu jawabannya terletak pada desain website mereka yang menarik dan mudah diubah. Mailchimp mengintegrasikan berbagai jenis tata letak situs web, termasuk: Judul gambar pahlawan, layar penuh, dan tata letak yang berubah. Meski ada beberapa kombinasi, Mailchimp tetap berhasil menghadirkan tata letak situs yang sesuai dengan konteks. Untuk menyambut pengunjung, Mailchimp menggunakan header gambar pahlawan. Beginilah tampilan halaman yang eye-catching dan bisa menarik perhatian para pengunjung. Setelah itu, tata letak situs akan beralih antara tata letak alternatif dan tata letak layar penuh. Informasi tetap ditampilkan dengan jelas dalam tata letak variabel. Misalnya, setiap poin-poin dapat diperluas untuk informasi lebih lanjut. Alhasil, tata letak halaman tetap tampil minimalis tanpa kehilangan kemampuan untuk menyampaikan informasi penting. Anda juga dapat menemukan informasi selengkapnya tentang tata letak layar penuh. Game tata letak situs ini menciptakan nuansa dinamis, sehingga menjelajahi situs tidak akan membosankan. Pengalaman pengguna juga terasa baik. 7. Zendesk Host web berikutnya adalah Zendesk. Desain korporat penyedia perangkat lunak CRM ini menjadi inspirasi bagi Anda. Apalagi jika Anda memiliki website bisnis. Ini karena Zendesk menggunakan tata letak situs yang tepat untuk menarik konversi. Hal ini terlihat dari posisi tombol CTA pada website. Zendesk telah membuat tombol CTA di pojok kiri atas. Ini mengikuti prinsip F-layout, dimana area yang paling diperhatikan pengunjung website adalah pojok kiri atas. Ini memudahkan dan menarik pengunjung untuk membeli produk. Tidak hanya penempatan CTA yang tepat, Zendesk juga menawarkan tampilan yang menarik. Semua konten dikelompokkan dalam peta interaktif. Setiap kartu bertindak sebagai pintu, mengarahkan pengunjung ke halaman lain di situs. Meski menampilkan banyak informasi, mata pengunjung tidak mudah lelah. Ini karena Zendesk menggabungkan ruang dengan pilihan warna latar yang sederhana. Ini membuat situs terlihat luas namun minimalis. Informasinya juga lebih mudah dicerna.
Kesempatan lowongan magang terbaru di tahun 2024
Baca Selengkapnya..