Anatomi Website dan Web Application

Memahami nama bagian UI membuat komunikasi dengan designer, developer, dan coding agent lebih presisi. Anda dapat mengganti prompt "buat website bagus" menjadi instruksi yang menjelaskan hierarchy, layout, behavior, state, dan perangkat yang harus didukung.

1. Dari Browser sampai Component

Website adalah kumpulan page yang dapat diakses melalui domain. Web page adalah satu halaman atau route. Web application memiliki behavior interaktif dan state seperti login, data user, form, dashboard, atau transaksi. Component adalah bagian UI yang dapat digunakan ulang, misalnya button, card, navbar, atau dialog.

Viewport adalah area browser yang terlihat. Fold adalah batas bawah layar sebelum user scroll. Above the fold adalah konten yang terlihat pertama kali. Konten penting tidak harus semuanya berada di sana, tetapi identitas page, value utama, dan next action sebaiknya mudah ditemukan.

2. Page Shell, Header, dan Navigation

Page shell atau app shell adalah kerangka yang konsisten antar page. Biasanya memuat header, navigation, main content, dan footer. Pada aplikasi login, shell dapat memuat sidebar serta top bar.

Pada smartphone, navbar sering berubah menjadi menu atau drawer. Jangan hanya menyembunyikan link tanpa menyediakan jalur pengganti yang dapat digunakan keyboard dan screen reader.

3. Hero dan Call to Action

Hero adalah bagian utama di awal landing page. Komponen umumnya adalah eyebrow opsional, headline, supporting copy, primary CTA, secondary CTA, dan visual yang relevan.

CTA atau call to action adalah elemen yang mendorong tindakan, misalnya "Mulai gratis", "Lihat demo", atau "Download Project ZIP". Primary CTA adalah tindakan paling penting. Secondary CTA memberi jalur alternatif. Terlalu banyak CTA dengan bobot sama membuat prioritas tidak jelas.

Hero bukan nama untuk setiap banner besar. Ia harus menjelaskan tujuan page dan membantu user memutuskan langkah berikutnya.

4. Section, Container, Grid, dan Spacing

Section mengelompokkan konten berdasarkan satu topik. Container membatasi lebar dan menjaga alignment. Grid mengatur column dan row. Stack menempatkan elemen secara vertikal atau horizontal dengan gap yang konsisten.

Whitespace bukan ruang terbuang. Ia membantu hierarchy dan keterbacaan. Spacing harus mengikuti sistem, bukan angka acak pada setiap component. Responsive layout mengubah jumlah column, urutan, ukuran, atau navigation berdasarkan ruang yang tersedia, bukan hanya mengecilkan seluruh desktop page.

5. Card, KPI, List, dan Table

Card adalah kelompok konten ringkas dengan satu konteks. KPI atau stat card menonjolkan metric penting. List cocok untuk item berurutan atau berulang. Grid cocok ketika item perlu dipindai secara visual. Table cocok untuk data yang harus dibandingkan berdasarkan column.

Data table biasanya menambahkan sort, filter, pagination, row selection, dan action. Pada mobile, tentukan column prioritas, horizontal scroll yang jelas, atau tampilan detail alternatif. Jangan mengubah table menjadi tumpukan card tanpa mempertimbangkan kebutuhan membandingkan data.

6. Sidebar, Tabs, dan Disclosure

Sidebar adalah panel samping untuk navigation, filter, atau context tambahan. Pada mobile, ia sering berubah menjadi drawer. Tabs berpindah antar panel pada konteks yang sama dan bukan pengganti navigation antar page yang seharusnya memiliki URL sendiri.

Accordion menampilkan satu atau beberapa bagian yang dapat dibuka. Dropdown menu menyediakan daftar action atau tujuan. Tooltip memberi penjelasan sangat singkat saat hover atau focus. Popover memuat konten interaktif yang lebih kaya. Gunakan modal hanya ketika user harus menyelesaikan atau membatalkan satu fokus sebelum kembali.

7. Form dan Feedback

Form terdiri dari label, input, helper text, validation, error message, dan action. Jangan memakai placeholder sebagai satu-satunya label. Jelaskan format input dan tampilkan error dekat dengan field yang bermasalah.

Success state harus menjelaskan apa yang berhasil dan apa yang terjadi berikutnya. Error state harus memberi recovery path, bukan hanya "Something went wrong".

8. Modal, Drawer, dan Overlay

Modal atau dialog muncul di atas page dan mengunci fokus untuk tugas tertentu. Drawer atau sheet masuk dari sisi layar dan cocok untuk navigation mobile, filter, atau detail kontekstual. Popover menempel pada trigger dan cocok untuk pilihan singkat.

Setiap overlay memerlukan close button, Escape handling, focus management, backdrop behavior yang jelas, dan label aksesibilitas. Jangan membuka modal di atas modal kecuali alur benar-benar tidak dapat disederhanakan.

9. State dan Permission

Setiap component yang mengambil data perlu dipikirkan dalam beberapa state:

• initial dan loading;
• empty;
• populated;
• partial atau stale;
• validation error;
• server error;
• success;
• disabled;
• unauthenticated;
• permission-limited.

Permission bukan hanya menyembunyikan button. Server tetap harus memeriksa authorization. UI membantu user memahami action yang tersedia, tetapi backend menentukan apakah operasi diizinkan.

10. Responsive Design dan Accessibility

Uji page pada smartphone sempit, tablet, laptop, dan layar lebar. Periksa wrapping headline, overflow table, target sentuh, image crop, sticky element, keyboard order, dan focus ring. Gunakan semantic HTML seperti header, nav, main, section, button, dan footer sesuai makna.

Text alternative diperlukan untuk image yang membawa informasi. Contrast, zoom, reduced motion, label form, serta penggunaan keyboard harus diuji. Accessibility bukan tambahan terakhir setelah visual selesai.

11. Anatomi Page yang Umum

Landing page: header, hero, benefit atau feature, social proof, testimonial, pricing bila relevan, FAQ, final CTA, footer.

Dashboard: app shell, sidebar, top bar, page header, KPI, filter, chart atau table, detail drawer, empty/loading/error state.

Authentication page: brand, heading, form, validation, alternative sign-in, recovery link, legal notice, dan security feedback.

List page: page header, search/filter/sort, result count, list atau table, pagination, bulk action bila diperlukan, serta empty dan error state.

12. Contoh Prompt UI yang Lebih Presisi

Buat authenticated dashboard menggunakan component dan design token existing.

Layout desktop:
- persistent left sidebar;
- top bar dengan page title, search, dan user menu;
- empat KPI card;
- filter bar di atas data table;
- detail record terbuka pada right drawer.

Mobile:
- sidebar menjadi drawer;
- KPI menjadi dua column lalu satu column pada layar sempit;
- table mempertahankan column prioritas dan membuka detail per row.

States:
- loading skeleton;
- empty state dengan CTA;
- populated;
- validation error;
- server error;
- permission-limited.

Jangan membuat navigation item baru atau menyalin brand dari screenshot.

Setelah mengenali struktur, lanjutkan ke Membuat Frontend yang Baik dengan AI untuk membuat DESIGN.md, asset inventory, dan visual QA.

13. Checklist Membaca Screenshot

• Apa jenis page dan tujuan utamanya?
• Apa hierarchy dari headline sampai action?
• Mana shell, section, container, grid, dan component?
• Mana primary dan secondary navigation?
• State apa yang terlihat dan belum terlihat?
• Bagaimana layout berubah pada mobile?
• Asset mana yang hanya reference dan mana yang boleh dipakai?
• Behavior apa yang tidak dapat disimpulkan hanya dari gambar?