Kosakata Komponen Website

Daftar lengkap istilah komponen UI/UX, widget, dan fitur dari berbagai jenis website (Blog, E-commerce, SaaS, Dashboard, hingga Sosmed) untuk vibe coding maksimal

Istilah lengkap dari berbagai ekosistem website mulai dari blog, e-commerce, hingga SaaS enterprise. Dijamin klien lu bakal manggut-manggut kagum karena lu tahu istilah teknis dari setiap sudut web!

1. Table of Contents (ToC) Daftar isi interaktif di artikel blog yang bisa diklik untuk langsung melompat ke sub-bab tertentu.
2. Author Bio Box Kotak informasi profil penulis yang biasanya diletakkan di akhir artikel beserta foto dan tautan sosial media.
3. Share Buttons Tombol pintasan cepat untuk membagikan artikel ke platform media sosial (Twitter/X, Facebook, WhatsApp, LinkedIn).
4. Comment Section Area interaktif bagi pembaca untuk meninggalkan tanggapan, lengkap dengan sistem balasan (nested replies).
5. Related Posts Bagian rekomendasi artikel lain yang temanya serupa di bawah artikel yang sedang dibaca.
6. Reading Time Indicator Label estimasi waktu baca (misal: '4 min read') berdasarkan jumlah kata di artikel.
7. Newsletter Subscription Box Formulir pendaftaran email bagi pengunjung agar berlangganan buletin atau update artikel terbaru.
8. Tag & Category Cloud Kumpulan label topik atau kategori tulisan yang bisa diklik untuk memfilter arsip tulisan.
9. Bookmark / Save Article Fitur untuk menyimpan artikel ke akun pribadi agar bisa dibaca lagi nanti (Read Later).
10. Product Gallery & Zoom Komponen foto produk utama dengan opsi thumbnail dan fitur perbesar gambar saat kursor mendekat.
11. Variant Selector Pilihan opsi produk berupa tombol ukuran (S, M, L) atau warna yang mengubah harga dan stok secara dinamis.
12. Add to Cart & Buy Now Tombol aksi utama untuk memasukkan produk ke keranjang belanja atau langsung menuju halaman pembayaran.
13. Shopping Cart Drawer Panel samping atau pop-up ringkas yang meluncur keluar saat produk dimasukkan ke keranjang.
14. Wishlist Fitur daftar keinginan untuk menandai produk favorit tanpa langsung membelinya.
15. Product Filter & Sort Sistem penyaringan lanjutan berdasarkan rentang harga, merek, rating, dan pengurutan (termurah/terlaris).
16. Checkout Flow Alur bertahap proses pembelian mulai dari alamat pengiriman, kurir, hingga metode pembayaran.
17. Coupon / Promo Code Box Kolom input khusus untuk memasukkan kode diskon guna memangkas total belanja.
18. Product Review & Rating Sistem penilaian bintang (1-5) dan ulasan teks dari pembeli sebelumnya.
19. Analytics Chart & Graph Grafik visual data (garis, batang, lingkaran) untuk memantau metrik bisnis atau performa sistem secara real-time.
20. Pricing Table Tabel perbandingan paket berlangganan (Free, Pro, Enterprise) beserta daftar fitur masing-masing.
21. User Role & Permission Matrix Panel pengaturan hak akses akun (Admin, Editor, Viewer) di dalam sistem aplikasi.
22. API Key Management Halaman khusus untuk menghasilkan, menyalin, atau mencabut kunci akses integrasi pihak ketiga.
23. Billing & Invoice History Riwayat tagihan pembayaran langganan bulanan/tahunan beserta unduhan bukti bayar (invoice).
24. Activity Log / Audit Trail Catatan riwayat aktivitas keamanan sistem (siapa yang login, mengubah data, atau menghapus file dan kapan waktunya).
25. Onboarding Tour / Walkthrough Panduan pop-up interaktif langkah demi langkah untuk mengenalkan fitur bagi pengguna baru.
26. Feed / Timeline Aliran konten berbasis waktu atau algoritma yang menampilkan postingan dari akun yang diikuti.
27. Like / Reaction Button Tombol tanda suka atau ekspresi emosi (emoji) terhadap suatu unggahan.
28. Direct Messaging (DM) Chat Fitur percakapan privat secara real-time antar pengguna.
29. Follow / Subscribe Button Tombol untuk mengikuti aktivitas akun pengguna lain.
30. Notification Center Pusat pemberitahuan interaktif yang mencatat aktivitas seperti balasan, suka, atau tag baru.
31. User Profile Header Halaman identitas pengguna lengkap dengan foto profil, sampul (banner), bio, dan statistik pengikut.
32. Navbar & Mega Menu Menu navigasi utama di atas halaman, lengkap dengan dropdown kategori besar.
33. Hero Section Bagian pembuka utama halaman landing page yang berisi tajuk utama, sub-teks, dan tombol CTA.
34. Footer Bagian paling bawah website yang memuat tautan legal, peta situs, dan sosial media.
35. Sidebar Panel vertikal di sisi kiri atau kanan untuk widget tambahan.
36. Breadcrumb Jejak navigasi hierarki halaman (Home > Kategori > Artikel).
37. Pagination & Infinite Scroll Teknik pemecah halaman daftar isi atau pemuatan otomatis ke bawah.
38. Modal & Popup Jendela dialog melayang di atas konten utama untuk konfirmasi atau form cepat.
39. Carousel / Slider Komponen gambar atau banner bergeser secara otomatis maupun manual.
40. Accordion Daftar teks vertikal yang bisa dibuka-tutup untuk menghemat ruang.
41. Tabs Navigasi berbentuk lembaran untuk berpindah antar panel konten di halaman yang sama.
42. Tooltip Keterangan teks kecil yang muncul saat kursor melayang di atas ikon.
43. Offcanvas Drawer Panel laci yang meluncur dari samping layar (biasanya menu seluler).
44. Skeleton Screen Kerangka abu-abu berkedip sebagai penanda area yang sedang memuat data (loading).
45. Toast Notification Pemberitahuan mengapung kecil di sudut layar yang muncul sesaat lalu hilang otomatis.
46. Empty State Tampilan ilustrasi dan teks saat data di dalam sistem sedang kosong.
47. Badge & Tag Label kecil penanda status (misal: 'Baru', 'Diskon 50%').
48. Dark Mode Toggle Tombol pengalih tema tampilan terang dan gelap.

Kosakata Komponen Website

Menu Navigasi

Tunggu, Jangan Pergi