📋 Pre-Build Analysis — PMB KIAT Kuningan

Analisis Lengkap Pembuatan Website
PMB KIAT Kuningan

Kuliah Ilmu Agama Terbuka · 80% Online + 20% Offline · Kabupaten Kuningan, Jawa Barat

01
Analisis Website Referensi
markazilmuslims.com — Kekuatan, Kelemahan & Pelajaran
✅ Yang Sudah Bagus (Pertahankan)
🎯
Unique Value Proposition Jelas
Tagline "Potensi - Aksi - Manifestasi" + fokus guru agama & Al-Qur'an sangat spesifik. Bukan sekadar "kursus umum".
Pertahankan
📋
Visi & Misi Detail (7 Poin)
Menunjukkan keseriusan lembaga. Sangat penting untuk kepercayaan orang tua & calon mahasiswa.
Pertahankan
🧑‍🏫
Profil Dosen Lengkap
8 dosen dengan latar belakang LIPIA, Madinah, Mesir — sangat membangun kredibilitas. Foto + title + almamater.
Pertahankan
💬
Testimoni Real dengan Identitas
Nama asli, usia, profesi (bu guru, ibu RT, mahasiswi). Bukan testimoni anonim. Membangun trust sangat kuat.
Pertahankan
🎓
Program Beasiswa
Differentiator kuat — program beasiswa guru Al-Quran/Agama menjadi daya tarik unik yang sulit ditandingi kompetitor.
Pertahankan
📜
Legalitas CMQ (Kemnaker RI)
Sertifikasi LPK resmi Kementerian Ketenagakerjaan RI — sangat kuat secara kepercayaan. Tampilkan prominently.
Upgrade
⚠️ Yang Perlu Diperbaiki (Upgrade)
📱
UI/UX Masih Dasar
Layout WordPress default, tidak ada design system. Akan kita upgrade ke Tailwind-inspired dengan identitas kampus UT.
Upgrade Penuh
🔍
SEO On-Page Lemah
Tidak ada meta desc optimal, heading structure kurang, keyword density tidak terencana, canonical URL belum optimal.
Perbaiki
📊
Tidak Ada CTA Strategis
Tombol pendaftaran tidak menonjol. Tidak ada urgency, countdown, atau social proof di atas fold. Konversi lemah.
Redesign
🗺️
GEO Location Tidak Terekspos
"Kuningan Jawa Barat" hampir tidak muncul di konten. Sangat buruk untuk lokal SEO dan pencarian geo-spesifik.
Tambahkan
⚡
Page Speed & Mobile
WordPress dengan banyak plugin cenderung berat. Template baru harus mobile-first dan ringan (tanpa WP overhead).
Optimasi
📅
Tidak Ada PMB Flow Jelas
Tidak ada halaman khusus PMB dengan jadwal, syarat, alur pendaftaran yang terstruktur. Perlu dibangun dari nol.
Bangun Baru
02
Identitas Brand & Visual
Warna, font, tone, dan positioning
🎨 Palet Warna
Biru Kampus Utama
#1d4ed8 — Kepercayaan, Akademis
Biru Tua Sekunder
#1e3a8a — Authority, Formal
Teal Aksen (Islami)
#0d9488 — Spiritual, Segar
Gold CTA
#d97706 — Aksi, Urgensi
Putih Bersih
#ffffff — Canvas utama
🔤 Tipografi
✦
Playfair Display
Heading, brand name, quote. Kesan klasik, akademis, terpercaya. Sering dipakai kampus bergengsi.
Display / H1-H3
✦
Plus Jakarta Sans
Body text, navbar, card content. Font Indonesia-friendly, sangat readable di mobile, modern & bersih.
Body / UI
✦
Amiri / Noto Naskh Arabic
Untuk teks Arab di halaman program Al-Qur'an dan kutipan ayat. Pastikan rendering benar di semua device.
Arab Text
💡 Kombinasi Playfair + Jakarta Sans = look "kampus resmi modern" yang cocok untuk target guru & profesional muda Muslim.
🎯 Brand Positioning
🏷️
Nama Brand
PMB KIAT — Kuliah Ilmu Agama Terbuka. Singkatan mudah diingat, bermakna, khas.
📍
GEO: Kabupaten Kuningan, Jawa Barat
Tampilkan di: title tag, meta desc, H1, topbar, footer, konten body. Targetkan long-tail lokal.
SEO Kritis
🏛️
Konsep Mirip UT (Universitas Terbuka)
Layout sistem modul, 80% online 20% offline. Tampilkan badge "Hybrid Learning" dan ikon khas UT-style.
🎓
Target Audiens
Guru PAI, Guru Al-Qur'an, guru TPQ, ibu rumah tangga yang ingin mengajar, fresh graduate pontren, calon guru agama.
Spesifik
💎
Tone of Voice
Formal namun hangat. Islami tapi inklusif. Berwibawa namun accessible. Gunakan bahasa "teman belajar" bukan "dosen kaku".
03
Content Mapping — Halaman & Konten
Semua konten dari referensi yang akan diadaptasi
📄 Daftar Halaman Website
🏠
/ — Beranda (Homepage)
Hero PMB + Quick CTA + Statistik + Program + Dosen + Testimoni
Prioritas 1
📝
/daftar — Pendaftaran Mahasiswa Baru
Form PMB, syarat, alur, jadwal, biaya/beasiswa. Halaman konversi utama.
Prioritas 1
📚
/program — Semua Program
Index program: Bahasa Arab, Al-Qur'an, Ilmu Syar'i, S1 RPL
Prioritas 1
📖
/program/bahasa-arab — Detail Bahasa Arab
Kurikulum, dosen, jadwal, biaya, CMQ sertifikasi
Prioritas 2
📖
/program/al-quran — Detail Al-Qur'an + CMQ
Tahsin Tajwid, Tahfiz Bersanad, CMQ Certification
Prioritas 2
📖
/program/ilmu-syari — Ilmu Syar'i
Fiqh, Hadits, Aqidah, Tafsir
Prioritas 2
🎓
/program/s1-rpl — Kuliah S1 RPL
1-2 tahun akselerasi, untuk upgrade kualifikasi guru
Prioritas 2
🎁
/beasiswa — Beasiswa Guru
Beasiswa untuk guru Al-Quran/Agama + cara mendaftar donatur
Prioritas 3
👨‍🏫
/dosen — Jajaran Dosen & Manajemen
Profil 8+ dosen: foto, nama, almamater, bidang keahlian
Prioritas 3
📰
/rubrik — Artikel Ilmu & Berita
Konten blog: Adab, Al-Qur'an, Berita KIAT — penting untuk SEO
SEO
📍
/kampus — Info Kampus Offline Kuningan
Lokasi: MI Islamadina Kasturi Kuningan + Google Maps embed
GEO SEO
🗂️ Konten Per Section Beranda
① Hero SectionTagline KIAT + Tombol Daftar (Gold CTA) + Tombol Info Program + Badge "80% Online 20% Offline" + Jumlah Mahasiswa/Alumni
② Pengumuman PMBCountdown pendaftaran + gelombang + kuota tersisa. Urgent & prominently displayed.
③ Statistik KIATX Mahasiswa Aktif · X Alumni · X Program · Sejak Tahun · X Dosen Bersertifikat
④ Program Unggulan4 kartu: Bahasa Arab / Al-Qur'an CMQ / Ilmu Syar'i / S1 RPL — dengan harga & durasi
⑤ Keunggulan KIAT80% Online (Zoom/LMS) · Sertifikat Resmi Kemnaker · Dosen LIPIA/Madinah · Beasiswa Tersedia · Jadwal Fleksibel · Lokasi Kuningan
⑥ Visi & MisiDari referensi + tambahkan visual yang lebih menarik
⑦ Dampak Positif2 tab: Akademik + Ibadah. Konten dari referensi, desain ulang jadi accordion/tab interaktif.
⑧ Jajaran Dosen8 kartu dosen: foto, nama, gelar, almamater. Dari referensi, design upgrade.
⑨ BeasiswaBanner beasiswa guru Al-Quran/Agama + CTA daftar beasiswa
⑩ Testimoni AlumniSlider quotes nyata dari referensi + identitas (nama, profesi, usia)
⑪ CTA PMB Akhir"Mulai Perjalanan Ilmu Anda" + Form mini (nama, WA) atau redirect ke /daftar
⑫ Artikel / Rubrik Ilmu3 artikel terbaru: Adab, Al-Qur'an, Berita
04
Strategi SEO + GEO (Kuningan)
Kata kunci, meta, schema, dan optimasi lokal
🔍 Target Kata Kunci Utama
🎯 PRIMARY KEYWORDS (high intent)
kuliah agama islam online kuliah bahasa arab online PMB kuliah agama Kuningan kuliah ilmu agama terbuka kuliah online guru agama
📍 GEO KEYWORDS (lokal Kuningan + Jabar)
kuliah agama Kuningan Jawa Barat KIAT Kuningan kampus agama islam Kuningan kuliah bahasa arab Kuningan guru PAI Kuningan beasiswa guru Al-Quran Kuningan
🎓 PROGRAM KEYWORDS (specific)
kursus bahasa arab online bersertifikat tahsin tajwid bersanad online S1 RPL agama islam 1 tahun sertifikasi CMQ Al-Quran kuliah baca kitab gundul program kejar paket guru agama
❓ QUESTION KEYWORDS (blog/artikel)
cara belajar bahasa arab untuk guru apa itu kuliah ilmu agama terbuka manfaat belajar bahasa arab bagi guru syarat kuliah s1 rpl agama
⚙️ Implementasi SEO Teknis
ElemenImplementasiPrioritas
Title TagPMB KIAT Kuningan — Kuliah Ilmu Agama Terbuka | 80% OnlineWajib
Meta DescDaftar sekarang! KIAT Kuningan: kuliah bahasa Arab, Al-Qur'an, Ilmu Syar'i. 80% online, dosen LIPIA. Beasiswa tersedia untuk guru.Wajib
H1 Tag1 per halaman. Mengandung keyword + "Kuningan"Wajib
OG Tagsog:title, og:desc, og:image (1200×630px logo KIAT)Wajib
Schema JSON-LDEducationalOrganization, Course, LocalBusiness, FAQPagePenting
Canonical URLhttps://pmb.kiat.ac.id/ (atau domain yang dipakai)Penting
Sitemap XMLSemua halaman + artikel blogNormal
Alt TextSetiap gambar: "Dosen KIAT Kuningan Ust. [nama]"Penting
Internal LinkSetiap halaman program cross-link ke /daftarPenting
Google MapsEmbed di halaman /kampus + footer. Klaim Google My Business!Wajib GEO
💡
GEO SEO Tip: Sebutkan "Kabupaten Kuningan, Jawa Barat" minimal 5x di homepage secara natural dalam kalimat. Tambahkan nama kelurahan/kecamatan sekitar kampus offline untuk cakupan radius lebih luas.
📋 Schema JSON-LD yang Wajib Dipasang di <head>
EducationalOrganization Schema
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "EducationalOrganization",
  "name": "KIAT Kuningan",
  "description": "Kuliah Ilmu Agama Terbuka...",
  "url": "https://pmb.kiat.ac.id",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Kuningan",
    "addressRegion": "Jawa Barat",
    "addressCountry": "ID"
  }
}
</script>
Course Schema (per program)
{
  "@type": "Course",
  "name": "Bahasa Arab Komprehensif",
  "description": "Program Bahasa Arab...",
  "provider": {
    "@type": "Organization",
    "name": "KIAT Kuningan"
  },
  "courseMode": "online",
  "inLanguage": "id",
  "offers": {
    "@type": "Offer",
    "availability": "InStock"
  }
}
05
Wireframe Layout Beranda
Struktur visual dari atas ke bawah
ℹ️
Layout beranda dirancang untuk konversi maksimal — setiap section mengarahkan ke CTA pendaftaran.
🔵 TopbarPengumuman PMB Gelombang X · Batas: [tanggal] · Sisa Kuota: [X]
🔵 Navbar StickyLogo KIAT + Menu (Beranda / Program / Beasiswa / Rubrik / Kampus / Daftar) + Dark Toggle
⭐ Hero — FULL HEIGHTH1: "Kuliah Ilmu Agama Terbuka di Kuningan" | Tagline "Potensi · Aksi · Manifestasi" | Badge: 80% Online 20% Offline | CTA Besar: [Daftar Sekarang] + [Lihat Program]
📊 Stat BarX Mahasiswa · X Alumni · X Program · X Dosen Tersertifikasi · Tahun Berdiri
🔔 Pengumuman PMBGelombang pendaftaran + countdown timer + tombol daftar
📚 Program Unggulan (4 Kartu)Bahasa Arab | Al-Qur'an CMQ | Ilmu Syar'i | S1 RPL
✅ Keunggulan KIAT (6 poin)80% Online · Dosen LIPIA · Sertifikat Resmi · Beasiswa · Fleksibel · Kuningan
🎯 Visi & MisiTab / Accordion visual — lebih interaktif dari referensi
🕌 Dampak Belajar Bahasa ArabTab: Akademik | Ibadah — konten dari referensi, design upgrade
👨‍🏫 Dosen Pengajar (Slider)8 dosen dari referensi + kartu profil upgrade
💰 Beasiswa Banner"Gratis untuk Guru Al-Qur'an / Agama" — CTA menonjol
💬 Testimoni Alumni (Slider)Quote + nama + profesi + usia — dari referensi, dibuat lebih visual
📰 Rubrik Ilmu (3 Artikel)Blog preview: Adab, Al-Qur'an, Berita — penting untuk SEO
📝 CTA PMB FinalForm mini: Nama + No WA + Program → Submit ke WhatsApp / CMS
🔵 FooterPeta Google Maps offline Kuningan + kontak + sosmed + copyright
🆚 Perbandingan: Referensi vs PMB KIAT Baru
Elemen
markazilmuslims.com
PMB KIAT Baru
UI/UX
WordPress default, minimal design
Tailwind-inspired, design system, dark mode
Hero
Text saja, tidak ada visual kuat
Full-width dengan gradient islami + animasi
PMB Flow
Tidak terstruktur
Halaman /daftar khusus + alur lengkap
GEO SEO
Hampir tidak ada geo signal
Kuningan disebut di title, H1, body, footer, schema
CTA
Tidak prominent
Gold button + countdown + urgency
Mobile
Belum optimal
Mobile-first, thumb-friendly, fast load
Konten Arab
Text biasa
Arabic font proper (Amiri) + RTL support
Schema
Tidak ada
EducationalOrg + Course + FAQ JSON-LD
🏗️ Struktur File (Konsep PKBM sebelumnya)
📁 pmb-kiat/
├── index.html ← Beranda PMB
├── daftar.html ← Halaman PMB Form
├── program.html
├── beasiswa.html
├── dosen.html
├── kampus.html
└── 📁 assets/
├── 📁 css/
main.css · navbar.css · hero.css
components.css · dark.css
├── 📁 js/
main.js · darkmode.js · countdown.js · form.js
└── 📁 img/
logo/ · dosen/ · banner/ · program/
06
Rencana Build — Urutan Pengerjaan
Rekomendasi langkah demi langkah
🟢 FASE 1 — Foundation
1️⃣
main.css
CSS variables (biru, putih, gold, teal islami) + reset + layout + typography + scroll reveal
CSS
2️⃣
navbar.css
Topbar pengumuman PMB + navbar sticky + logo KIAT + dropdown + dark toggle
CSS
3️⃣
hero.css
Hero full-height dengan ornamen islami, badge 80/20 online-offline, stat bar
CSS
4️⃣
darkmode.js + countdown.js
Dark mode toggle + countdown PMB gelombang (real-time)
JS
5️⃣
index.html skeleton
HTML utama dengan semua section dari wireframe, link ke CSS/JS eksternal
HTML
🟡 FASE 2 — Content Sections
6️⃣
components.css
Kartu program, kartu dosen, slider testimoni, accordion visi-misi, tab dampak bahasa Arab
CSS
7️⃣
Section Program
4 kartu: Bahasa Arab, Al-Qur'an CMQ, Ilmu Syar'i, S1 RPL — dengan detail & CTA
HTML
8️⃣
Section Dosen
8 profil dosen dari referensi — kartu dengan foto, nama, almamater (LIPIA/Madinah)
HTML
9️⃣
Section Testimoni
Slider auto-play — kutipan dari 4+ testimoni alumni real dari referensi
HTML
🔟
Section Beasiswa + CTA
Banner beasiswa + form mini WhatsApp redirect untuk lead generation
HTML
🔵 FASE 3 — SEO & Polish
①
Meta Tags Lengkap
Title, desc, OG tags, Twitter card, canonical, robots meta — per halaman
SEO
②
Schema JSON-LD
EducationalOrganization + Course + FAQ + LocalBusiness di index.html
SEO
③
dark.css final
Override semua variabel warna untuk dark mode — nuansa islami yang tetap elegan
CSS
④
daftar.html
Halaman PMB khusus: syarat, alur, jadwal gelombang, form pendaftaran, WhatsApp
HTML
⑤
kampus.html
Halaman offline campus: Google Maps Kuningan + foto + info lokasi — GEO SEO
HTML
✅ Analisis FrontEnd Desain Siap
Next BackEnd Design n Siap Develop 🚀

Catatan : Saya mulai dari index.html full beranda dulu biar kelihatan visual keseluruhannya, lalu saya pecah ke file-file terpisah, dan setelah ini baru pembangunan BackEndnya, Okey.

🏠 A. Build index.html Full Beranda 📝 B. Halaman Daftar/PMB 📚 C. Halaman Program ⚙️ D. Setup CSS Files