Sistem Desain Modular

Katalog Komponen UI Website Terstandarisasi

Setiap komponen direkayasa secara modular dengan semantic HTML5, prinsip aksesibilitas WCAG, dan optimasi performa Core Web Vitals tanpa beban skrip yang tidak perlu.

Lihat Contoh Kode & Implementasi

Navigation

2 Komponen

Navigation

Responsive Header & Navigation Bar

Komponen navigasi primer sticky dengan logo institusi, tautan halaman berhierarki jelas, penanda bahasa (ID/EN), dan tombol call-to-action konversi utama.

Prinsip Rekayasa:

Gunakan semantic tag <header> dan <nav aria-label="Main Navigation">

Pastikan tombol menu mobile memiliki atribut aria-expanded dan aria-controls

Hindari tautan menu bertingkat lebih dari 2 level di tampilan smartphone

Pertimbangan UX:Pertahankan posisi sticky dan kontras warna yang cukup agar pengunjung selalu memiliki kendali navigasi di mana pun mereka berada.

Snippet Kode Gunakan di Web

Navigation

Accessible Enterprise Mega Menu

Panel navigasi multi-kolom yang mengelompokkan puluhan kategori layanan, artikel panduan, dan sub-sektor industri ke dalam grid terorganisir tanpa membuat pengguna kewalahan.

Prinsip Rekayasa:

Dukungan penuh navigasi keyboard (Tab, Escape, Arrow keys)

Kelompokkan tautan berdasarkan kategori logis dengan judul tebal

Sertakan kartu promosi visual ringkas di kolom paling kanan mega menu

Pertimbangan UX:Berikan jeda waktu penutupan (debounce) halus saat kursor berpindah agar menu tidak tertutup secara tidak sengaja.

Snippet Kode Gunakan di Web

Hero & Headers

1 Komponen

Hero & Headers

High-Impact Hero Section

Area layar pertama (above-the-fold) dengan proposisi nilai utama, headline yang menggugah, sub-judul penjelasan, tombol aksi ganda (primary & secondary CTA), dan badge kepercayaan.

Prinsip Rekayasa:

Gunakan tag <h1> tunggal yang jelas mengandung maksud pencarian utama

Optimalkan Largest Contentful Paint (LCP) dengan memprioritaskan aset gambar hero

Hindari slider otomatis bergerak yang membingungkan fokus membaca pengguna

Pertimbangan UX:Pastikan kontras teks terhadap latar belakang memenuhi standar WCAG AAA agar mudah dibaca di layar ponsel di bawah sinar matahari.

Snippet Kode Gunakan di Web

Conversion & CTA

3 Komponen

Conversion & CTA

Conversion Call-to-Action Banner

Blok penutup strategis yang merangkum urgensi penawaran, jaminan kemudahan proses, dan mengarahkan pengguna untuk mengambil keputusan tindakan (action).

Prinsip Rekayasa:

Gunakan teks tombol yang berorientasi hasil spesifik (cth: "Bangun Website Anda" bukan "Kirim")

Sertakan mikro-komitmen bebas risiko (cth: "Tanpa komitmen • Respon cepat jam kerja")

Beri ruang kosong (padding) yang lapang agar blok terlihat menonjol

Pertimbangan UX:Jadikan tombol cukup besar untuk disentuh dengan mudah pada layar sentuh smartphone (minimal area sentuh 48x48 pixel).

Snippet Kode Gunakan di Web

Conversion & CTA

Multi-Channel Contact & Location Map

Bagian kontak menyeluruh yang memadukan formulir pesan tervalidasi, nomor telepon kantor, alamat email resmi, jam operasional, dan peta interaktif Google Maps.

Prinsip Rekayasa:

Lengkapi formulir dengan atribut autocomplete yang benar (name, email, tel)

Sematkan peta Google Maps responsif yang membuka aplikasi peta saat disentuh di ponsel

Sertakan nomor kontak alternatif darurat untuk layanan 24 jam

Pertimbangan UX:Beri indikator visual status sukses pengiriman yang jelas setelah formulir dikirimkan.

Snippet Kode Gunakan di Web

Conversion & CTA

Floating & Inline WhatsApp CTA Button

Tombol kontak WhatsApp melayang (floating) dengan indikator status online dan pesan pembuka template yang otomatis menyesuaikan konteks halaman.

Prinsip Rekayasa:

Gunakan warna hijau resmi WhatsApp (#25D366) yang langsung dikenali secara universal

Format pesan URL encoded dengan konteks spesifik layanan yang sedang dibaca pengunjung

Pastikan tombol melayang tidak menutupi tombol navigasi penting lainnya di layar ponsel

Pertimbangan UX:Beri label teks pembantu seperti "Konsultasi Cepat" di samping icon agar pengguna paham fungsi tombol tersebut.

Snippet Kode Gunakan di Web

Pricing & Commerce

1 Komponen

Pricing & Commerce

Transparent Pricing Matrix Card

Kartu perbandingan paket harga yang menampilkan nama tier, banderol biaya terformat, daftar fitur tercakup, durasi estimasi pengerjaan, dan tombol pilihan paket.

Prinsip Rekayasa:

Sorot satu tier paling populer secara visual dengan outline khusus atau badge rekomendasi

Gunakan icon centang hijau jelas untuk fitur yang disertakan

Tampilkan nominal harga secara transparan tanpa embel-embel biaya tersembunyi

Pertimbangan UX:Kelompokkan fitur yang disertakan dari yang paling esensial hingga nilai tambah agar perbandingan logis.

Snippet Kode Gunakan di Web

Content & Layout

6 Komponen

Content & Layout

Modular Feature & Capability Grid

Susunan grid 3 atau 4 kolom berisi icon fungsional, judul fitur tegas, dan deskripsi manfaat ringkas untuk menjelaskan kapabilitas sistem atau layanan.

Prinsip Rekayasa:

Batasi deskripsi per fitur maksimal 2 hingga 3 baris agar ritme visual seimbang

Gunakan icon vektor SVG yang konsisten dalam satu keluarga gaya desain

Terapkan efek hover halus pada kartu untuk memberikan umpan balik interaksi

Pertimbangan UX:Pada layar mobile kecil, otomatis ubah grid menjadi 1 kolom yang nyaman dibaca tanpa terpotong.

Snippet Kode Gunakan di Web

Content & Layout

Comprehensive Service Cards

Kartu penjelasan layanan bisnis mendalam yang mencakup deskripsi spesifikasi pekerjaan, industri sasaran, dan tautan eksplorasi lebih lanjut.

Prinsip Rekayasa:

Sertakan pembeda visual antar layanan melalui kode warna atau icon spesifik

Tautkan setiap kartu ke halaman detail layanan atau ke form inquiry langsung

Pertimbangan UX:Jelaskan hasil nyata yang didapat klien, bukan sekadar istilah teknis internal yang membingungkan orang awam.

Snippet Kode Gunakan di Web

Content & Layout

Categorized Portfolio & Case Study Grid

Grid pameran hasil karya dan proyek fisik dengan filter kategori interaktif, ringkasan nama klien, tahun pelaksanaan, dan thumbnail visual berkualitas tinggi.

Prinsip Rekayasa:

Gunakan teknik lazy loading dan format WebP/AVIF untuk kompresi foto proyek

Sediakan filter kategori tanpa perlu me-reload seluruh halaman browser

Beri judul proyek yang deskriptif mengenai masalah yang dipecahkan

Pertimbangan UX:Hindari teks overlay yang menutupi keseluruhan foto; tampilkan detail saat kursor menyentuh kartu (hover state).

Snippet Kode Gunakan di Web

Content & Layout

Interactive Photo Gallery & Lightbox

Koleksi galeri foto berkecepatan tinggi dengan kemampuan perbesaran gambar layar penuh (lightbox modal) dan navigasi geser ramah sentuhan jari.

Prinsip Rekayasa:

Dukungan gesture swipe untuk pengguna layar sentuh smartphone

Sertakan tombol tutup (close button) berukuran jelas dan tombol navigasi panah

Selalu cantumkan atribut alt text pada setiap foto untuk indeks Google Image SEO

Pertimbangan UX:Pastikan gambar resolusi penuh hanya dimuat saat pengunjung mengklik foto untuk menghemat kuota internet.

Snippet Kode Gunakan di Web

Content & Layout

Editorial Blog & Article Layout

Tata letak publikasi konten artikel edukasi dan wawasan industri dengan tipografi yang nyaman di mata, estimasi waktu baca, tanggal rilis, dan tombol bagikan.

Prinsip Rekayasa:

Gunakan batas lebar kolom artikel maksimal 65-75 karakter per baris demi kenyamanan membaca

Sertakan Schema.org Article atau BlogPosting untuk indeks artikel Google

Sematkan modul artikel terkait di bagian bawah untuk menekan bounce rate

Pertimbangan UX:Pilih tinggi baris (line-height) 1.6 hingga 1.8 agar mata pembaca tidak lelah saat membaca artikel panjang.

Snippet Kode Gunakan di Web

Content & Layout

Work Process & Milestone Timeline

Visualisasi alur langkah kerja bertahap (Tahap 1 Konsultasi, Tahap 2 Perancangan, Tahap 3 Pelaksanaan, Tahap 4 Peluncuran) yang menghubungkan proses dari awal hingga selesai.

Prinsip Rekayasa:

Gunakan garis penghubung visual antar titik tahapan

Beri nomor urut yang jelas dan judul singkat pada setiap tahap

Pertimbangan UX:Pada tampilan ponsel, susun timeline secara vertikal dari atas ke bawah agar mudah di-scroll.

Snippet Kode Gunakan di Web

Trust & Proof

6 Komponen

Trust & Proof

Verified Testimonial & Review Spotlight

Kartu kutipan ulasan klien nyata yang menampilkan foto profil, nama lengkap, jabatan, nama instansi, serta rating bintang kepuasan kerja.

Prinsip Rekayasa:

Gunakan ulasan otentik yang menyebutkan pencapaian angka riil

Hindari ulasan anonim atau foto stok palsu yang merusak kredibilitas institusi

Cantumkan logo perusahaan klien jika memiliki izin resmi publikasi

Pertimbangan UX:Beri penekanan visual pada kalimat terpenting dalam kutipan agar pembaca kilat langsung menangkap intisari kepuasan.

Snippet Kode Gunakan di Web

Trust & Proof

Semantic FAQ Accordion with Schema.org

Accordion tanya jawab interaktif tanpa ketergantungan JavaScript berat, dibangun dengan semantic HTML <details> dan <summary> serta mikrodata Schema.org FAQPage.

Prinsip Rekayasa:

Gunakan tag native <details> dan <summary> untuk aksesibilitas keyboard otomatis

Sematkan script Schema.org FAQPage JSON-LD untuk memicu Google Rich Results

Tuliskan pertanyaan persis seperti kalimat yang sering diajukan calon klien asli

Pertimbangan UX:Pertahankan teks jawaban tetap ringkas dan langsung ke pokok solusi tanpa kalimat berbelit-belit.

Snippet Kode Gunakan di Web

Trust & Proof

Leadership & Specialist Team Grid

Kartu profil jajaran pimpinan direksi, dokter spesialis, atau partner hukum dengan foto potret formal, riwayat pendidikan, spesialisasi, dan tautan profil profesional.

Prinsip Rekayasa:

Gunakan foto dengan sudut pencahayaan dan latar belakang yang senada antar anggota tim

Cantumkan nomor izin registrasi profesi jika berkaitan dengan medis atau hukum

Pertimbangan UX:Tampilkan nama lengkap beserta gelar akademik secara rapi tanpa memotong teks.

Snippet Kode Gunakan di Web

Trust & Proof

Metric Counter & Impact Statistics

Baris angka pembuktian performa (misal: 100% On-Time Delivery, 500+ Proyek Selesai, 15 Tahun Pengalaman) dengan label penjelasan singkat di bawah tiap angka.

Prinsip Rekayasa:

Gunakan hanya angka fakta riil yang dapat dipertanggungjawabkan kebenarannya

Gunakan tipografi angka berukuran besar (bold display) yang kontras

Pertimbangan UX:Beri label satuan yang jelas (Persen, Jam, Tahun, Unit) agar pembaca tidak salah menafsirkan angka.

Snippet Kode Gunakan di Web

Trust & Proof

Feature & Competitor Comparison Table

Tabel perbandingan mendalam yang menyandingkan fitur standar vs paket enterprise, atau membandingkan solusi Anda terhadap cara kerja tradisional yang lambat.

Prinsip Rekayasa:

Pertahankan kolom header tabel tetap terbaca saat tabel digulir secara horizontal

Gunakan simbol centang dan minus dengan warna kontras (hijau vs abu-abu)

Pertimbangan UX:Beri highlight latar belakang halus pada kolom produk yang paling Anda rekomendasikan.

Snippet Kode Gunakan di Web

Trust & Proof

Client & Partner Trust Logo Cloud

Deretan logo klien korporat, mitra vendor, atau sertifikasi industri dengan tampilan monokrom bersih yang tidak mencolok agar tetap selaras dengan desain website.

Prinsip Rekayasa:

Ubah semua logo klien menjadi format monokrom (abu-abu/slate) agar terlihat rapi dan elegan

Pastikan ukuran visual proporsional antar logo yang memiliki orientasi berbeda (persegi vs memanjang)

Pertimbangan UX:Hindari logo bergerak terlalu cepat yang membuat mata lelah; prioritaskan tampilan statis yang stabil.

Snippet Kode Gunakan di Web

Footers

1 Komponen

Footers

Comprehensive Semantic Footer

Bagian penutup situs semantik <footer> dengan ringkasan legalitas perusahaan, peta navigasi situs (sitemap links), legalitas privasi, hak cipta, dan kredensial hosting.

Prinsip Rekayasa:

Kelompokkan tautan navigasi ke dalam kolom berkategori jelas

Sertakan pernyataan hak cipta tahun berjalan yang dinamis

Tampilkan rincian verifikasi keamanan (SSL HTTPS, edge compatible)

Pertimbangan UX:Pastikan warna teks tautan footer memiliki kontras yang nyaman dibaca di latar gelap.

Snippet Kode Gunakan di Web

Forms & Inputs

1 Komponen

Forms & Inputs

Validated Lead Capture Contact Form

Formulir input pesan terproteksi spam bot dengan validasi tipe data (email, nomor WhatsApp, nama instansi) dan umpan balik status pengiriman.

Prinsip Rekayasa:

Batasi jumlah kolom isian hanya pada informasi esensial untuk meminimalkan friksi pengguna

Terapkan validasi input realtime saat pengguna selesai mengetik

Sediakan proteksi bot menggunakan honeypot tersembunyi tanpa captcha membingungkan

Pertimbangan UX:Beri fokus outline yang tegas saat kolom input aktif untuk membantu pengguna dengan keterbatasan visual.

Snippet Kode Gunakan di Web

Konsultasi WhatsAppChat WA