Layout Adalah: Arti, Prinsip, Jenis & Contohnya di Website

Coba bandingkan halaman depan koran dengan layar beranda aplikasi di HP Anda. Keduanya memuat banyak informasi sekaligus: judul, foto, angka, dan tombol. Meski begitu, mata Anda hampir tidak pernah bingung harus mulai dari mana. Yang menuntun mata itu bukan isi tulisannya, melainkan cara isi tersebut diletakkan.

Susunan inilah yang disebut layout. Layout adalah pengaturan letak teks, gambar, dan ruang kosong di sebuah bidang sehingga pesan terbaca dalam urutan yang benar. Artikel ini membahas apa itu layout, fungsi, elemen, prinsip, dan jenisnya, sampai layout website beserta langkah membuatnya.

Layout Adalah Tata Letak: Arti Kata dan Pengertiannya

Layout adalah tata letak, yaitu cara elemen visual seperti teks, gambar, garis, dan ruang kosong diatur posisinya di dalam satu bidang. Bidang itu bisa berupa halaman buku, poster, slide presentasi, layar aplikasi, atau halaman website. Tujuannya satu: isi tersampaikan dengan urutan dan penekanan yang tepat.

Padanan resminya dalam bahasa Indonesia adalah tata letak. Menurut KBBI, tata letak adalah "pengaturan, penempatan, dan penataan unsur grafika pada halaman atau seluruh barang cetakan supaya yang disajikan kelihatan menarik dan mudah dibaca". Definisi itu lahir dari dunia percetakan, tetapi pengertian layout yang sama berlaku untuk layar.

Kata layout sendiri berasal dari bahasa Inggris. Bentuk dua kata, lay out, adalah kata kerja yang berarti menata, menghamparkan, atau merancang susunan sesuatu. Bentuk satu kata, layout, adalah kata benda yang berarti hasil penataan tersebut. Jadi, layout artinya susunan, sedangkan lay out adalah kegiatan menyusunnya.

Perlu diperhatikan bahwa layout bukan desain secara keseluruhan. Desain mencakup pilihan warna, jenis huruf, gaya ilustrasi, dan pesan yang ingin disampaikan. Layout adalah bagian yang mengatur di mana semua itu ditempatkan dan seberapa besar ruangnya. Poster dengan warna dan foto yang bagus tetap gagal kalau pembacanya tidak tahu mana judulnya.

Fungsi dan Tujuan Layout: Mengatur Apa yang Dilihat Lebih Dulu

Fungsi utama sekaligus tujuan layout adalah menentukan urutan baca. Pembaca tidak membaca halaman kata demi kata sejak pojok kiri atas. Mereka memindai lebih dulu, lalu berhenti di bagian yang terlihat penting. Layout yang baik memastikan bagian penting itu memang yang tertangkap mata pertama kali.

Riset eyetracking (pelacakan gerak mata) Nielsen Norman Group yang dimulai pada 2006 menemukan pola F di halaman yang padat teks. Pembaca menyapu baris atas secara mendatar, menyapu baris kedua yang lebih pendek, lalu turun menyusuri sisi kiri. Akibatnya, kata-kata di awal judul dan awal paragraf mendapat perhatian paling banyak.

Halaman yang minim teks, seperti poster atau bagian pembuka website, lebih cocok disusun mengikuti pola Z. Mata bergerak dari kiri atas ke kanan atas, menyilang ke kiri bawah, lalu berakhir di kanan bawah. Pola ini sejalan dengan diagram Gutenberg dari tipografer Edmund Arnold, yang menjadikan kiri atas titik masuk dan kanan bawah titik akhir. Itulah alasan tombol pendaftaran lazim diletakkan di kanan bawah.

Dari cara mata bekerja tersebut, layout digunakan untuk empat hal berikut:

1. Membangun hierarki informasi: pembaca langsung tahu mana judul, mana isi pendukung, dan mana keterangan kecil.
2. Menjaga keterbacaan: jarak baris, lebar kolom, dan ruang kosong menentukan apakah teks nyaman dibaca lebih dari satu menit.
3. Mempercepat pencarian informasi: bagian yang posisinya konsisten, seperti menu di atas atau harga di bawah foto produk, ditemukan tanpa perlu dicari.
4. Membangun kepercayaan: halaman yang tertata terlihat dikelola dengan serius, sedangkan halaman berantakan membuat pembaca ragu pada isinya.

Elemen-Elemen Layout: Isi dan Pengatur Ruang

Elemen layout bisa dibagi menjadi dua kelompok, yaitu elemen yang membawa isi dan elemen yang mengatur ruang. Pembagian ini menunjukkan bahwa ruang kosong juga elemen yang disusun, bukan sisa tempat.

Elemen pembawa isi:

1. Teks: judul, subjudul, paragraf, keterangan gambar, dan label tombol. Ukuran dan ketebalan huruf menentukan urutan pentingnya.
2. Gambar: foto, ilustrasi, ikon, grafik, atau logo. Gambar paling cepat menarik mata, sehingga posisinya menentukan titik masuk halaman.

Elemen pengatur ruang:

1. Ruang kosong (whitespace): jarak antarelemen dan margin di tepi bidang. Di website, sebagian ruang ini diatur lewat padding dan margin CSS.
2. Garis dan bidang warna: pemisah antarbagian, kotak latar, atau kartu yang mengelompokkan isi.
3. Grid: kerangka kolom dan baris yang tidak terlihat pembaca, tetapi menjadi patokan peletakan semua elemen lain.

Grid sengaja dimasukkan ke daftar ini karena dialah yang membuat elemen lain tampak rapi. Tanpa grid, selisih beberapa piksel antarbagian membuat halaman terasa janggal meski pembaca tidak bisa menunjuk penyebabnya.

Prinsip Layout Design yang Membuat Halaman Mudah Dibaca

Layout design adalah proses merancang tata letak berdasarkan prinsip tertentu, bukan berdasarkan selera semata. Kita pakai contoh poster seminar kampus berisi judul acara, nama pembicara, foto, tanggal, lokasi, dan cara mendaftar.

1. Hierarki: judul acara dibuat paling besar, tanggal dan pembicara di tingkat kedua, lokasi dan kontak di tingkat ketiga. Kalau semua dibuat besar, tidak ada yang terlihat penting.
2. Kedekatan (proximity): tanggal, jam, dan lokasi diletakkan berdekatan karena ketiganya menjawab pertanyaan "kapan dan di mana". Menurut Nielsen Norman Group, elemen yang berdekatan dipersepsi sebagai satu kelompok, bahkan bisa mengalahkan kemiripan warna atau bentuk.
3. Perataan (alignment): semua teks disejajarkan pada satu garis tepi, misalnya rata kiri. Mata lebih mudah mengikuti tepi yang lurus daripada teks yang posisinya berpindah-pindah.
4. Keseimbangan: foto pembicara yang besar di kiri diimbangi blok teks di kanan. Susunan tidak harus simetris; susunan asimetris dengan bobot visual setara justru terasa lebih hidup.
5. Konsistensi lewat grid: jarak antarbagian memakai ukuran yang sama, dan lebar tiap blok mengikuti kolom grid yang sama.

Pemakaian grid secara sistematis dirumuskan desainer Swiss Josef Müller-Brockmann dalam buku Grid Systems in Graphic Design (1981). Di website, grid yang paling umum memakai 12 kolom. Angka 12 praktis karena habis dibagi 2, 3, 4, dan 6. Satu grid yang sama bisa menampung susunan dua, tiga, empat, atau enam kolom yang sama lebar.

Jenis Layout dalam Desain Grafis

Dalam desain grafis, jenis atau macam-macam layout biasanya dibedakan dari elemen yang paling dominan. Buku Layout: Dasar & Penerapannya karya Surianto Rustan (Gramedia) merangkum jenis-jenis ini dan masih dipakai sebagai bahan ajar. Tabel berikut mengelompokkan yang paling sering ditemui menurut apa yang ditonjolkan.

Jenis layout	Yang ditonjolkan	Cocok untuk
Picture window	Satu foto besar, teks sedikit	Sampul majalah, iklan produk
Silhouette	Objek tanpa latar, teks mengikuti bentuknya	Iklan fashion
Frame	Bingkai yang mengelilingi isi	Undangan, kartu ucapan
Copy heavy	Teks panjang, gambar pendukung	Brosur informasi
Big type	Huruf berukuran sangat besar	Poster acara, kutipan
Alphabet inspired	Huruf atau angka disusun jadi gambar	Poster tipografi
Mondrian	Bidang persegi beragam ukuran	Katalog, dashboard
Multipanel	Beberapa panel gambar	Katalog produk
Circus	Banyak elemen tanpa pola tetap	Poster diskon

Untuk pemula, picture window dan copy heavy adalah dua titik awal paling aman. Hierarki keduanya jelas: satu dominan gambar, satu dominan teks. Sebaliknya, jenis circus paling sulit dikendalikan, karena tanpa pengalaman hasilnya mudah terbaca berantakan, bukan meriah.

Layout Website: Kerangka yang Dipakai Hampir Semua Situs

Layout website adalah susunan bagian-bagian halaman website di layar browser. Berbeda dengan poster, halaman web bisa digulir, diklik, dan dibuka di layar berukuran apa pun. Karena itu layout web tidak hanya urusan tampilan, tetapi juga urusan navigasi.

Kerangka halaman di hampir semua situs serupa. HTML5 bahkan menyediakan tag khusus untuk tiap bagiannya:

1. Header <header>: bagian atas berisi logo dan identitas situs.
2. Navigasi <nav>: menu menuju halaman lain, biasanya di dalam header atau di samping.
3. Konten utama <main>: isi yang dicari pembaca, misalnya artikel atau daftar produk.
4. Sidebar <aside>: informasi pendukung seperti artikel terkait atau kategori.
5. Footer <footer>: bagian bawah berisi kontak, tautan kebijakan, dan hak cipta.

Tag bermakna seperti ini membantu browser dan mesin pencari memahami peran tiap bagian. Pembahasan tag tersebut kami uraikan di artikel tentang HTML dan struktur dokumennya.

Tanpa pengaturan apa pun, browser menyusun elemen dari atas ke bawah sesuai urutan kode. Susunan bawaan ini disebut normal flow. Untuk memindahkan sidebar ke samping atau membagi konten menjadi beberapa kolom, developer memakai CSS. Alat utamanya Flexbox untuk susunan satu arah dan Grid untuk susunan baris dan kolom, yang cara kerjanya kami uraikan di artikel CSS adalah.

Fixed, Fluid, Adaptive, dan Responsive: Menyesuaikan Ukuran Layar

Satu halaman web bisa dibuka di HP selebar 360 piksel dan di monitor selebar 1920 piksel. Empat pendekatan layout web menghadapi perbedaan ini dengan untung-rugi masing-masing.

1. Fixed layout: lebar halaman dikunci dalam piksel, misalnya 960 px. Tampilannya sama di semua komputer, tetapi di HP pembaca harus menggeser ke samping atau memperbesar layar.
2. Fluid layout: lebar kolom memakai persen sehingga mengikuti lebar jendela. Di layar sempit tidak perlu menggeser, tetapi di layar sangat lebar baris teks menjadi terlalu panjang.
3. Adaptive layout: developer menyiapkan beberapa layout tetap untuk beberapa ukuran layar, lalu memilih yang paling cocok. Hasilnya presisi, tetapi tiap versi harus dirawat terpisah.
4. Responsive layout: satu layout lentur yang mengubah susunannya pada lebar layar tertentu. Pendekatan ini kini menjadi standar.

Istilah responsive web design diperkenalkan Ethan Marcotte lewat artikel di A List Apart pada 25 Mei 2010. Ia menyebut tiga bahannya: grid yang lentur (fluid grid), gambar yang ikut menyesuaikan ukuran (flexible images), dan media query. Media query adalah aturan CSS yang hanya aktif pada ukuran layar tertentu.

Titik perubahan susunan itu disebut breakpoint. Bootstrap, framework CSS yang populer, memakai breakpoint 576, 768, 992, 1200, dan 1400 piksel. Material Design dari Google membaginya lebih sederhana dalam satuan dp (density-independent pixel). Lebar di bawah 600 dp untuk ponsel. Rentang 600 sampai 839 dp untuk tablet posisi tegak dan ponsel lipat, sedangkan 840 dp ke atas untuk layar yang lebih lebar.

Ada dua alasan praktis kenapa layout responsif tidak lagi opsional. Pertama, Google mengindeks halaman berdasarkan versi mobile-nya (mobile-first indexing) dan meminta isi versi mobile setara dengan versi desktop. Kedua, pedoman aksesibilitas WCAG (Web Content Accessibility Guidelines) 2.2 menetapkan konten harus terbaca tanpa menggeser ke dua arah pada lebar 320 piksel CSS. Lebar itu setara halaman 1280 piksel yang diperbesar 400% oleh pembaca berpenglihatan lemah.

Arti Layout di Word, Aplikasi Android, dan Bidang Lain

Di bidang lain pun, layout selalu berarti susunan atau tata letak. Yang berbeda hanya benda yang disusun.

1. Microsoft Word: page layout adalah pengaturan tata letak halaman dokumen. Fitur yang terdapat di menu Layout antara lain Margins, Orientation, Size, Columns, dan Breaks. Orientation memilih halaman Portrait (tegak) atau Landscape (mendatar). Di Word 2007 sampai 2013 menu ini bernama Page Layout. Adapun Print Layout adalah mode tampilan yang memperlihatkan halaman seperti hasil cetak, berguna saat merapikan makalah atau skripsi.
2. Microsoft PowerPoint (PPT): layout slide adalah susunan kotak isian (placeholder) untuk judul, teks, gambar, atau grafik pada satu slide. Layout slide bisa diganti lewat tab Home tanpa menata ulang isinya satu per satu.
3. Aplikasi Android: layout adalah struktur antarmuka satu layar aplikasi. Dokumentasi Android menyusunnya dari View, yaitu elemen yang terlihat seperti tombol, dan ViewGroup, yaitu wadah yang mengatur posisi View. Contohnya ConstraintLayout dan LinearLayout yang dipakai di Android Studio.
4. Keyboard: layout keyboard adalah susunan tombol huruf, misalnya QWERTY yang namanya diambil dari enam huruf pertama baris atas. Sebutan keyboard 60%, 65%, atau 75% merujuk pada ukuran papan yang membuang sebagian tombol, seperti blok angka di kanan.
5. Rumah dan ruangan: layout rumah adalah penataan ruang, perabot, dan jalur gerak di dalam bangunan. Gambar kerjanya sering disebut layout plan.
6. Peta: layout peta adalah halaman cetak yang menyusun peta bersama judul, legenda, skala, dan arah utara. Di aplikasi QGIS, halaman ini dibuat lewat fitur Print Layout.
7. Layout kerja dan pabrik: dalam manajemen operasi, layout adalah tata letak fasilitas agar alur kerja efisien. Heizer dan Render membaginya menjadi tujuh jenis: kantor, ritel, gudang, posisi tetap, berorientasi proses, sel kerja, dan berorientasi produk.
8. Penerbitan: layouter adalah orang yang menata naskah yang sudah disunting menjadi halaman siap cetak.

Kesalahan Layout dan Hal yang Perlu Anda Pertimbangkan

Layout yang tampak rapi saat dirancang belum tentu nyaman saat dipakai. Beberapa masalah berikut sering muncul, terutama pada website yang disusun tanpa diuji di banyak layar.

1. Rapi di laptop, rusak di HP: kolom yang pas di layar 1366 piksel bisa saling menimpa di layar 360 piksel. Kesalahan ini baru terlihat kalau halaman benar-benar dicoba di layar sempit.
2. Ruang kosong berlebihan: gambar pembuka setinggi satu layar penuh mendorong isi utama keluar dari pandangan pertama. Di HP, pembaca bisa harus menggulir dua kali sebelum menemukan informasi yang dicari.
3. Elemen bergeser saat dimuat: gambar atau iklan tanpa ukuran tetap membuat teks melompat ketika halaman selesai dimuat. Google mengukurnya sebagai Cumulative Layout Shift, dengan nilai baik 0,1 atau kurang.
4. Grid terlalu kaku: grid yang dirancang untuk judul pendek bisa berantakan saat judul produk ternyata tiga baris. Rancang layout dengan isi terpanjang, bukan isi contoh.
5. Template membuat situs seragam: template mempercepat pembuatan, tetapi ribuan situs lain mungkin memakai susunan yang sama. Ubah setidaknya hierarki dan gambar pembuka agar identitas Anda tetap terlihat.

Selain itu, layout responsif punya biaya tersendiri. Setiap perubahan desain perlu diuji di beberapa ukuran layar, dan waktu pengujian itu harus masuk hitungan sejak awal proyek.

Cara Membuat Layout untuk Pemula, Lengkap dengan Contoh

Langkah berikut berlaku untuk poster maupun halaman web. Sebagai contoh layout, kita menyusun halaman profil usaha kue rumahan bernama Dapur Bu Rina. Tujuan halamannya satu: pembaca memesan lewat WhatsApp.

Langkah #1: Tentukan Satu Pesan Utama

Tulis satu kalimat yang harus ditangkap pembaca dalam lima detik pertama. Untuk Dapur Bu Rina, kalimatnya "Kue ulang tahun custom, pesan tiga hari sebelumnya". Kalimat inilah yang nanti mendapat posisi dan ukuran paling menonjol.

Langkah #2: Kumpulkan Isi Sebelum Menggambar

Siapkan semua teks dan foto yang sungguhan, bukan teks contoh. Isi nyata menunjukkan panjang judul, jumlah produk, dan foto yang tersedia.

Langkah #3: Buat Sketsa Kasar (Wireframe)

Gambar kotak-kotak di kertas atau di Figma untuk menandai posisi tiap bagian, tanpa warna dan tanpa foto. Sketsa kasar ini disebut wireframe. Untuk contoh kita, urutannya dari atas: logo dan menu, pesan utama dengan satu foto kue, tiga kartu produk, testimoni, lalu tombol WhatsApp dan alamat.

Langkah #4: Pasang Grid dan Aturan Jarak

Pakai grid 12 kolom untuk desktop dan satu kolom untuk HP. Tiga kartu produk masing-masing mengambil 4 kolom di desktop, lalu bertumpuk ke bawah di HP. Tetapkan jarak dengan kelipatan 8 piksel, misalnya 8, 16, 24, dan 48, mengikuti baseline grid (kisi patokan jarak) 8 dp milik Material Design.

Untuk teks, dua angka ini aman dijadikan patokan. Ukuran huruf isi minimal 16 piksel, sama dengan ukuran bawaan browser. Panjang baris dijaga di kisaran 45 sampai 75 karakter, rentang yang direkomendasikan Robert Bringhurst dalam The Elements of Typographic Style.

Langkah #5: Uji di Layar Sempit dan Layar Lebar

Buka halaman di lebar 360 piksel dan 1280 piksel. Di browser komputer, mode perangkat pada inspect element bisa menyimulasikan ukuran HP tanpa berpindah perangkat. Periksa tiga hal: pesan utama terlihat tanpa menggulir, tidak ada teks yang meluber, dan tombol pemesanan mudah ditekan dengan ibu jari.

Kalau Anda belum ingin menulis kode, website builder menyediakan template yang grid dan breakpoint-nya sudah disiapkan. Langkah pertama sampai ketiga tetap perlu Anda kerjakan sendiri, karena template tidak tahu pesan utama usaha Anda.

Pertanyaan Seputar Layout

Apa itu layout kerja?

Layout kerja adalah susunan meja, peralatan, dan jalur gerak di tempat kerja agar pekerjaan berlangsung lancar dan aman. Di kantor, layout kerja mengatur letak meja dan ruang rapat. Di pabrik, istilah ini merujuk pada tata letak mesin yang mengikuti urutan proses produksi.

Apa tugas seorang layouter?

Layouter menata teks dan gambar dari naskah yang sudah disunting menjadi halaman siap terbit. Pekerjaannya meliputi memilih ukuran huruf, menempatkan gambar, mengatur margin dan nomor halaman, lalu menyiapkan berkas akhir untuk percetakan. Posisinya dalam alur penerbitan ada sesudah editor dan sebelum proses cetak.

Apakah lay out dan layout sama?

Maknanya berkaitan, tetapi jenis katanya berbeda. Lay out adalah kata kerja untuk kegiatan menata, sedangkan layout adalah kata benda untuk hasil tataannya.

Apa itu layout ruangan?

Layout ruangan adalah rencana penempatan perabot, pintu, dan jalur gerak di dalam satu ruang, misalnya kamar tidur atau ruang kantor. Rencana ini digambar di atas denah, yaitu gambar tampak atas yang menunjukkan dinding, jendela, dan ukuran ruang. Adapun site plan menggambarkan posisi bangunan terhadap seluruh lahan, termasuk jalan masuk dan area parkir.

Aplikasi apa yang dipakai untuk membuat layout?

Canva sudah memadai untuk poster dan konten media sosial. Adobe InDesign dipakai untuk buku dan majalah berhalaman banyak. Figma dipakai untuk merancang layout UI (antarmuka) website dan aplikasi, sementara Microsoft Word cukup untuk makalah.

Kesimpulan

Layout adalah tata letak, yaitu keputusan tentang di mana teks, gambar, dan ruang kosong diletakkan agar pesan terbaca dalam urutan yang benar. Prinsipnya sama di poster, dokumen Word, aplikasi, maupun website: hierarki, kedekatan, perataan, keseimbangan, dan konsistensi. Di website, prinsip itu mendapat satu syarat tambahan, yaitu tetap utuh dari layar 320 piksel sampai monitor lebar.

Template sudah memadai untuk halaman sederhana seperti profil usaha atau undangan acara. Susun layout sendiri ketika pesan utama Anda tidak cocok dengan susunan template, atau ketika isi Anda jauh lebih panjang daripada contoh yang disediakan.

Semoga artikel ini membantu.