Skip to main content

Desain Web - Layout

Sumber : 99designs.com >

Tata letak situs web yang bagus merupakan hal utama yang akan dilihat oleh pengguna/pengunjung. Artinya, jika perancang telah melakukan pekerjaan dengan benar, pengguna akan menemukan spesifikasi produk, keranjang belanja, penawaran promosi, dsbnya - tanpa harus susah payah mencarinya. 

Lagi pula, lebih banyak waktu yang dihabiskan untuk mencari tahu cara menggunakan situs web berarti lebih sedikit perhatian yang diberikan pada konten yang sebenarnya.

Desain tata letak situs web adalah keseimbangan tentang estetika dengan kepraktisan. Situs pasti terlihat bagus, tetapi yang lebih penting, situs itu harus memberi gambaran tentang pengguna tentang situs web dengan seefisien mungkin.

Pengguna memiliki sedikit kesabaran untuk halaman web yang sulit, itulah sebabnya mengapa rasio pentalan tertinggi terjadi dalam sepuluh detik pertama  setelah mengunjungi situs web. 

Benar, tata letak situs web yang baik tidak akan selalu membuat pengunjung tetap tinggal (terutama jika kontennya kurang memuaskan), tetapi tentu saja hal tersebut tidak ingin menjadi alasan pengunjung pergi.

Untuk memastikan situs web yang tidak membuat pengunjung tidak akan terpental, kami telah menyusun panduan ini untuk dasar-dasar desain tata letak situs web. Kami akan menjelaskan dasar-dasar apa yang harus dicapai oleh desain yang baik, teknik utama untuk tata letak situs web yang efektif, dan jenis tata letak situs web yang paling umum.

Tujuan dari tata letak situs web

Sederhana kedengarannya, satu-satunya tujuan tata letak situs web adalah untuk mendukung tujuan situs web, apakah itu konversi, kesadaran merek, hiburan, atau tujuan lain. Tetapi tujuan situs web melalui konten, dan desain tata letak menjelaskan cara menambahkan konten itu secara efektif. Dengan itu, berikut adalah beberapa fungsi umum yang dapat dilayani oleh tata letak situs web:

  • Tampilan informasi : Tata letak situs web yang baik mengatur informasi sehingga cocok satu sama lain dalam urutan yang jelas, mudah dipindai, memberi bobot pada elemen yang paling penting dan membuat alat pengguna intuitif untuk ditemukan dan digunakan.
Ilustrasi animasi yang menampilkan grafik dan data di situs web
Tata letak situs web harus diarahkan ke tujuan yang ditentukan. Desain oleh  Adam Muflihun.

  • Keterlibatan pengguna:  Tata letak situs web yang baik membuat halaman menarik secara visual, mengarahkan mata pengguna ke tempat tujuan, dan mendorong pengunjung untuk terus menavigasi situs.
  • Branding: Tata letak situs web yang baik juga berperan dalam branding, menggunakan spasi, penyelarasan, dan skala dengan cara yang konsisten dengan merek perusahaan .

Sasaran tingkat tinggi inilah yang mendorong desain tata letak situs web, tetapi sebelum kita melihat tata letak situs web tertentu, mari kita bahas cara mewujudkan sasaran ini secara lebih rinci.

Proses desain tata letak situs web

Proses pemetaan tata letak situs web harus terjadi pada tahap awal  pembuatan situs web —yaitu, beberapa saat setelah menetapkan strategi situs web tetapi sebelum terjun ke program grafis untuk membuat antarmuka.

Tata letak situs web divisualisasikan melalui gambar rangka, yang merupakan peta kerangka dasar yang menunjukkan bagaimana konten akan cocok satu sama lain. Penting untuk membedakan wireframing dari desain web, yang merupakan keseluruhan proses pembuatan grafis front-end dan visual lainnya untuk halaman web. Desain tata letak situs web adalah bagian besar dari desain web, dan itu dimulai dengan wireframing. Idealnya, desain visual harus mengikuti tata letak wireframe sehingga elemen grafis berdasarkan strategi, bukan pada preferensi sesaat.

Tangkapan layar prototipe wireframe untuk halaman pencarian
Sebuah wireframe barebone untuk halaman Pencarian Desainer 99designs 

 

Berikut adalah langkah-langkah untuk membuat tata letak situs web:

  1. Identifikasi semua area konten.  Wireframes biasanya mewakili konten dengan kotak dan persegi panjang sederhana, baik gambar atau blok teks. Penting untuk mengetahui sebelumnya berapa banyak konten yang miliki dan ukuran perkiraan setiap bagian (atau jumlah kata) sehingga dapat menyesuaikan elemen dengan akurat.
  2. Buat serangkaian gambar rangka dan prototipe.  Tata letak bisa sesederhana gambar pena-dan-kertas, tetapi ada juga banyak program (seperti  Whimsical ) yang didedikasikan untuk merampingkan proses. Karena gambar rangka tidak dimaksudkan sebagai karya seni yang mendetail, dapat membuat beberapa gambar sekaligus. Bahkan jika jatuh cinta dengan ide pertama , harus merancang lebih banyak gambar rangka untuk memperluas imajinasi dan memberi diri pilihan. Tanpa grafis mewah untuk mengalihkan perhatian , bebas untuk fokus pada pengalaman pengguna dan menjelajahi pengaturan mana yang paling intuitif bagi mereka. Pastikan untuk memperhitungkan semua ukuran layar—disarankan agar memulai dengan tata letak untuk perangkat seluler dan membangun dari sana.
lihat juga prinsip-prinsip desain pengalaman pengguna
  1. Uji, kumpulkan umpan balik, dan ulangi.  Setelah memiliki beberapa opsi, pastikan mengumpulkan umpan balik dari kolega . Aplikasi seperti  Invision  dan  Figma  memungkinkan membuat prototipe interaktif sehingga dapat dengan mudah menguji tombol dan navigasi tanpa membuat halaman web yang sebenarnya. Memiliki pengguna uji coba merekam layar sendiri saat mereka menavigasi prototipe dapat mengungkapkan hambatan UX. Setelah memiliki beberapa catatan, kembali ke langkah kedua dan ulangi sampai sempurna.

Meskipun ini adalah langkah-langkah literal untuk membuat tata letak situs web, mungkin sulit untuk mengetahui apa yang membuat tata letak efektif atau tidak ketika baru memulai. Di bagian selanjutnya, kita akan membahas teknik khusus yang dapat gunakan untuk memandu keputusan desain .

Teknik utama untuk tata letak situs web yang efektif

Desain tata letak situs web adalah praktik berusia puluhan tahun, yang berarti bahwa sejumlah konvensi dan prinsip desain telah ditetapkan selama bertahun-tahun untuk memandu desainer dalam kerajinan mereka. Berikut ini adalah beberapa teknik yang paling membantu:

Hirarki visual

Hirarki visual adalah cara menata  enam elemen desain untuk kontras yang lebih tinggi guna menekankan bagian konten tertentu di atas yang lain. Untuk tujuan ini, bagian terpenting dari tata letak adalah yang perlu segera diidentifikasi oleh pengguna, tergantung pada tujuan halaman. Ini biasanya mencakup tajuk utama, proposisi nilai, ajakan bertindak, dan alat pengguna seperti navigasi.

Desain web hitam-putih untuk produk medis
Tata letak situs web ini menciptakan hierarki visual menggunakan skema hitam-putih sederhana, skala, dan pilihan font untuk menarik perhatian ke berbagai landmark penting di halaman. Desain oleh  Shivom

Hirarki visual dapat terwujud dalam beberapa cara, seperti  pilihan font  (ukuran, berat, dan bahkan pasangan font yang berbeda  ), menyelaraskan elemen penting lebih tinggi pada halaman atau menggunakan warna pelengkap untuk membuat elemen menonjol.

Lihat panduan prinsip hierarki visual

Pola membaca

Pola membaca menggambarkan cara paling umum pengguna memindai halaman dan digambarkan dalam garis arah (vektor, untuk kutu buku matematika di luar sana). 

Karena penelitian menunjukkan bahwa 79% pengunjung situs hanya membaca sepintas halaman, penting untuk membuat pemindaian semudah mungkin. Merancang tata letak dengan pola membaca tertentu dalam pikiran adalah salah satu cara yang efektif untuk melakukan ini.

Desain situs web pink untuk produk cat kuku
Tata letak situs web ini mengatur elemen dalam formasi zig-zag halus untuk mendukung pembacaan pola Z. Desain oleh  JPSDesign

Memasukkan pola membaca ke dalam tata letak melibatkan penempatan elemen secara strategis di sepanjang garis pandang pemirsa. Pola yang paling umum untuk dipertimbangkan adalah pola Z (vektor zig-zag; berguna untuk tata letak dengan banyak gambar) dan pola F (vektor baris demi baris; berguna untuk tata letak yang padat teks).

Lihat panduan pola membaca dalam desain web>>

Paro atas atau bawah / Above or below the fold

Dalam desain web, "the fold/lipatan" adalah garis di mana halaman web terpotong karena batasan ukuran layar. Konten yang terlihat saat halaman dimuat disebut "paro atas" dan konten yang mengharuskan pengguna menggulir ke bawah untuk membukanya "paro bawah".

Desain situs web untuk real estate tepi pantai
Tata letak situs web ini gambar di bagian bawah layar (“fold”) untuk menarik pengunjung agar menggulir ke bawah. Desain oleh  Mike Barnes

 

Dalam hal desain tata letak situs web, konten yang paling penting dan/atau persuasif (seperti proposisi nilai dan CTA) harus ditempatkan dengan aman di paro atas sehingga pengguna tidak perlu mencarinya. Ruang ini  diperkirakan berukuran 1000 x 600 piksel untuk sebagian besar dimensi layar . Dengan demikian, desainer juga dapat menggunakan flip untuk grafik dan tampilan yang menarik untuk mendorong pengguna menggulir ke bawah, melanjutkan keterlibatan mereka dengan web.

Sistem Grid

Sistem grid adalah tata letak yang didasarkan pada pengukuran dan pedoman yang kaku. Kisi terdiri dari kolom (ruang yang ditentukan untuk penempatan konten) dan talang (ruang kosong di antara kolom).

image-1636404446083.png

Meskipun sistem grid berasal dari majalah cetak dan surat kabar, mereka ada di mana-mana dalam desain web untuk urutan matematis dan konsistensi yang mereka buat dalam menghadapi konten volume tinggi. Pada saat yang sama, desainer juga perlu mewaspadai monoton dalam desain grid, dan harus menggunakan kendala ini untuk membuat pengaturan yang tidak terduga dalam grid.

Lihat panduan sejarah dan sumber daya ini untuk desain groomer>>

Ruang putih

Ruang putih, atau disebut ruang negatif, hanyalah area desain tanpa konten apa pun—yaitu, ruang kosong. Meskipun mudah untuk diabaikan dan sering tergoda untuk diisi dengan konten, ruang putih dapat menjadi aset terpenting dalam tata letak situs web.

Desain situs web minimalis dengan banyak ruang kosong untuk merek pendidikan coding
Tata letak situs web ini menarik perhatian dengan ruang putih yang efektif. Desain oleh  masiko

menampilkan cara sebaris teks pada halaman yang kosong akan menarik perhatian jauh lebih efektif daripada halaman yang penuh dengan konten. Ruang putih yang luas menciptakan penekanan yang sama membuat komposisi terasa tidak terlalu menakutkan untuk dibaca. Tidak seperti halaman cetak, tidak ada batasan berapa lama halaman web dapat dibuat, memberikan desainer lebih banyak kebebasan untuk menjadi strategi dan murah hati dengan ruang putih.

Lihat 10 cara ini untuk menggunakan ruang lebih efektif>>

Jenis umum tata letak situs web

Tata letak situs web lebih jarang dibuat dari awal; pada kenyataannya, sering disarankan bahwa mereka tidak. sebagian besar situs web modern didasarkan pada skema tata letak umum, digunakan berulang kali dengan variasi kecil di seluruh internet.

Meskipun beberapa tingkat orisinalitas penting desain apa pun, situs web untuk segera digunakan dan digunakan. Jadi, ketika pengguna terbiasa dengan jenis desain tata letak tertentu selama bertahun-tahun, masuk akal bagi desainer untuk tetap menggunakannya. Ingatlah bahwa pada akhirnya, tata letak harus, dan semakin sedikit waktu yang dihabiskan pengguna untuk mempelajari tata letak baru, semakin banyak waktu yang mereka dedikasikan untuk benar-benar menggunakan situs. Selain itu, berikut adalah beberapa tata letak situs web yang paling umum:

Tata letak kolom tunggal

Tata letak kolom tunggal adalah tata letak di mana konten disusun secara berurutan dalam satu kolom, sering kali dalam peratan tengah.

Tata letak situs web satu kolom hitam-putih untuk merek pemasaran digital
Desain tata letak situs web kolom tunggal oleh  Hiroshy

Banyak tata letak halaman web dimulai di sini, mengingat bahwa desain yang mengutamakan seluler adalah pendekatan yang sudah lama pasti dan situs web seluler sering kali disusun dalam satu kolom karena batasan ukuran. Tata letak ini paling berguna untuk halaman Arahan atau konten berbasis umpan, seperti media sosial dan situs blog, karena mengurangi jumlah elemen halaman dan mendorong pengguliran.

Tata letak dua kolom

Tata letak dua kolom, dalam pengaturan layar secara terpisah, menampilkan konten secara bersamaan.

Desain tata letak situs web dua kolom fotografi yang berwarna-warni untuk merek lingkungan
Desain tata letak situs web dua kolom oleh  DesignExcellence

Ini berguna untuk berbeda misalnya dikotomi antara dua elemen (audiens yang di situs web pakaian, gaya layanan/sesudah, atau opsi ganda untuk penetapan harga,). Ini juga berguna untuk menyeimbangkan dengan keseimbangan sambil secara halus membaca pola Z.

Tata letak multikolom

Tata letak multikolom sering disebut tata letak koran atau majalah. Ini mengakomodasi konten situs yang berat dalam halaman yang sama.

Tata letak situs web multikolom desain datar untuk pengguna dasbor
Desain tata letak situs web multikolom oleh  BeeDee.

Biasanya menggunakan kisi-kisi untuk memperbaiki dan hierarki, memberikan ruang kolom yang lebih luas ke elemen yang lebih penting seperti konten isi elemen yang kurang penting seperti navigasi menu, bilah sisi, atau iklan yang menerima ruang yang kurang proporsional. Ini berguna untuk halaman beranda perusahaan, situs dengan banyak gambar atau video, publikasi online, dasbor pengguna, dan situs belanja—yaitu, situs web dengan banyak konten dan kategori untuk mengarahkan pengguna.

Tata letak asimetris

Tata letak asimetris adalah tempat elemen disusun dalam skala dan kedekatan yang tidak sama—dalam istilah yang lebih sederhana secara  simetris. Tetapi merupakan kebalikan dari sistem berbasis grid, asimetri tidak berarti melibatkan

Desain tata letak situs web asimetris modern untuk merek keuangan
Desain tata letak situs web asimetris oleh  Ian Douglas

Keseimbangan sangat penting dalam desain apa pun, dan tata letak asimetris hanya mencapai ini dengan cara yang tidak terduga, seperti memasang skala visual besar di satu sisi dengan banyak elemen di sisi lain. Ini berguna untuk meningkatkan penekanan dengan melebih-lebihkan beberapa elemen (baik melalui ukuran literal, pewarnaan, atau penempatan) di atas yang lain. Ini juga dapat mendukung pola membaca yang disesuaikan (berlawanan dengan yang umum disebutkan sebelumnya).

Merek yang mampu menjadi tidak konvensional dalam pendekatan desain mereka akan menganggap gaya tata ini ideal—yaitu situs web yang berhubungan dengan seni, memiliki audiens yang suka bertualang, atau ingin menonjolkan produk yang inovatif atau mengganggu.