Artikel ini ditulis pada 6 November 2026.
Alat AI cepat berubah. Kerangka dasar sebuah halaman tidak. Header, hero, section, footer, navigation, card — seseorang cukup mempelajari enam istilah ini untuk membuat brief layar pertama mereka. Menu di dalam produk akan berpindah. Bacalah artikel ini sebagai peta struktur halaman, bukan panduan panel pembuat situs tertentu.
Sebelum ada dekorasi, sebuah halaman web adalah urutan tugas. Ada elemen yang memberi tahu posisi Anda saat ini. Ada elemen yang menjelaskan identitas tempat ini dalam satu kalimat. Ada elemen yang mengulang jenis informasi serupa. Ada elemen yang mengarahkan ke tempat berikutnya, dan ada elemen yang menutup halaman. Ketika tugas-tugas ini tidak diberi nama yang jelas, model AI akan menghasilkan poster: satu gambar besar, teks melayang, dan tanpa jalan untuk menggulir ke bawah. Halaman terlihat selesai, tetapi tidak bisa digunakan di ponsel.
Sebutkan nama tugas tersebut dalam bahasa Inggris di dalam perintah, lalu jelaskan maksudnya dalam bahasa Anda di bawahnya. Jika bahasa Indonesia memiliki kata yang baku, gunakan kata tersebut bersama istilah bahasa Inggris dalam tanda kurung pada kali pertama disebut. Jika tidak ada istilah baku, tidak perlu menciptakan kata baru. Penjelasan singkat ditambah kata benda bahasa Inggris sudah cukup.
Enam bagian, sesuai urutan yang ditemui pengguna
Header adalah pita tipis di bagian paling atas. Header memuat nama situs dan beberapa navigasi utama. Header bukanlah tempat untuk menampung hero kedua. Jika semua hal dianggap penting dan ditaruh di header, halaman tidak lagi memiliki bagian atas, melainkan hanya kerumunan teks.
Hero adalah area besar pertama yang dilihat pengguna. Isi hero adalah satu pernyataan utama, satu kalimat pendukung, dan satu tombol tindakan. Sebuah klinik dapat menyebutkan layanan utamanya lalu menawarkan tombol “Buat Janji”. Sebuah toko dapat menyebutkan produk utamanya lalu memberikan tombol “Lihat Roti Hari Ini”. Hero yang dipaksakan memuat seluruh informasi bisnis hanyalah brosur yang ditempel di bagian atas. Sisa halaman akhirnya hanya mengulang informasi tersebut, dan pengguna ponsel tidak pernah sampai pada informasi harga atau alamat.
Section adalah satu topik khusus dengan sebuah judul. Jam buka, harga, tim kami, atau pertanyaan umum. Section adalah cara membuat halaman panjang menjadi mudah dibaca sekilas. Mintalah section berdasarkan pertanyaan nyata yang dimiliki pengunjung, bukan sekadar kata “section” saja. Perintah seperti “Section berjudul Jam Buka, dengan jadwal seminggu ditulis dalam teks bukan gambar” akan bertahan dalam proses penerjemahan. Sebaliknya, gambar tabel jadwal tidak bisa diproses dengan baik.
Footer adalah penutup halaman. Footer memuat alamat lengkap, jam buka kembali jika perlu, serta cara menghubungi Anda. Pengguna yang tersesat biasanya menggulir ke paling bawah dengan sengaja. Footer yang hanya berisi garis dekoratif akan mengecewakan mereka.
Navigation adalah daftar singkat berisi menu tujuan, biasanya diletakkan di dalam header. Lima menu sudah tergolong banyak untuk layar ponsel. Lebih dari itu sebaiknya disembunyikan di balik satu tombol kontrol, bukan dipaksakan berjejer hingga teksnya mengecil. Jangan meminta navigation yang mengulang semua judul section; itu hanyalah daftar isi yang menyamar menjadi situs web.
Card adalah wadah berulang untuk satu jenis informasi yang sejenis: layanan, kelas, atau produk. Setiap card memiliki struktur slot yang seragam: gambar atau ikon jika ada, judul, satu kalimat penjelasan, dan satu tombol tindakan. Card yang masing-masing menggunakan tata letak berbeda bukanlah satu kesatuan set, melainkan lima poster yang dikumpulkan.
Card yang sama, dua pilihan lebar
Halaman yang hanya dirancang untuk lebar layar komputer akan rusak di negara-negara yang menjadikan ponsel sebagai perangkat utama. Sebutkan pembagian kolomnya. Pada layar lebar, tampilkan tiga card dalam satu baris. Pada layar sempit, tampilkan satu card di atas card berikutnya. Teks di dalam card tidak berubah, hanya barisnya yang menyesuaikan. Ini adalah tata letak responsif (responsive layout), dan ini adalah sebuah kondisi teknis, bukan sekadar gaya visual. Perintah “buat responsif” membiarkan model AI memilih titik potong yang bisa saja menyembunyikan tombol. Perintah “Tiga kolom saat layar lebar, satu kolom saat layar sempit, dengan tombol tindakan tetap terlihat” mencegah masalah tersebut.
Layar tablet bisa berada di antaranya dengan dua kolom. Anda boleh menyatakannya, tetapi tidak wajib. Konsep satu dan tiga kolom sudah cukup mengajarkan prinsip dasar: konten adalah sebuah daftar, sedangkan baris horizontal adalah bonus dari lebarnya layar.
Header yang tetap menempel di atas (sticky header) — yaitu header yang tidak bergerak saat halaman digulir — bersifat opsional. Fitur ini membantu jika fungsi navigasi adalah jalan utama untuk kembali. Namun, fitur ini mengganggu jika memakan sepertiga ruang layar ponsel yang pendek. Mintalah sticky header hanya jika fungsi navigasi lebih penting daripada paragraf berikutnya. Sebutkan nama “sticky header” jika ingin istilah bahasa Inggrisnya, dan sebutkan pula kondisinya: ukurannya tetap ringkas dan tidak menutupi judul pertama.
Halaman yang tampak selesai tetapi tidak bisa digunakan
Sebuah klinik kecil pernah meminta “halaman utama yang indah”. Model AI menghasilkan gambar lorong klinik yang tinggi, slogan melintang di atasnya, serta deretan ikon pucat tanpa teks penjelasan. Di layar laptop toko, tampilan itu tampak tenang. Namun di layar ponsel saat pengguna berada di halte bus, slogan menutupi lorong gambar, deretan ikon berhimpitan menjadi garis tak terbaca, dan jam buka menyatu di dalam gambar sehingga tidak dapat diterjemahkan maupun dibaca oleh pembaca layar (screen reader). Tidak ada satu pun elemen di halaman itu yang berfungsi sebagai header, hero, section, atau card. Tampilan itu hanyalah poster yang bisa digulir.
Brief kedua lalu menyebutkan kerangka dasarnya secara jelas tanpa memasukkan kata-kata tentang keindahan. Header memuat nama klinik dan tiga tautan: pendaftaran, jam buka, dan lokasi. Hero memuat satu kalimat dan satu tombol “Buat Janji”. Tiga section ditulis sepenuhnya sebagai teks. Satu set card memuat tiga jenis layanan, tersusun tiga kolom saat layar lebar dan menumpuk saat layar sempit. Footer memuat alamat sebagai teks. Halaman tersebut menjadi fungsional dan biasa — persis seperti yang dibutuhkan pengguna di halte bus. Gambar lorong klinik tetap bisa digunakan di dalam hero dengan ukuran lebih kecil dari kalimat utama, tanpa lagi mendominasi seluruh halaman.
Itulah perubahan nyata yang dihasilkan oleh enam istilah ini dalam pekerjaan. Istilah-istilah ini mencegah model AI menghabiskan seluruh responsnya hanya untuk menciptakan suasana visual. Suasana visual boleh berada di dalam suatu area, tetapi tidak boleh menggantikan area tersebut. Jika Anda menyusun brief dalam bahasa Indonesia, Hindi, atau Arab, tuliskan enam istilah bahasa Inggris tersebut dalam perintah, lalu cantumkan kalimat nyata klinik Anda di bawahnya. Kerangka dasar antarmuka berlaku universal, sedangkan kalimatnya tetap berakar pada bahasa pengguna.
Perubahan pada cara menyusun brief pertama
Brief pertama Anda cukup terdiri dari satu paragraf:
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
Di bawah kalimat tersebut, tuliskan isi dari ketiga section dalam bahasa Anda. Model AI tidak membutuhkan bahasa Anda untuk menempatkan sebuah header. Namun Anda membutuhkan bahasa Anda sendiri untuk menentukan bahwa ketiga section tersebut berisi jam buka, harga, dan lokasi — bukan slogan yang diulang tiga kali.
Ini adalah struktur halaman yang sebenarnya dibutuhkan oleh hampir setiap organisasi kecil. Ini juga halaman yang sering kali dihias secara berlebihan oleh model AI jika Anda hanya mengatakan “modern dan bersih”. Kata modern bukanlah sebuah area halaman. Header, hero, section, footer, navigation, dan card adalah area nyata halaman. Pelajari istilah ini, tempelkan dalam bahasa Inggris, lalu tuliskan fakta informasi dalam bahasa orang yang akan membacanya.
Keputusan berikutnya bukanlah memilih area baru, melainkan menentukan apa yang terjadi ketika halaman perlu meminta informasi dari pengguna atau menampilkan kumpulan fakta lain tanpa memindahkan mereka ke halaman baru. Itu adalah bentuk yang berbeda dari section, dan akan dibahas di artikel berikutnya.