Logo Resmi Fadhil
Fadhil NuruzzamanSoftware Engineer
Logo Resmi Fadhil
Profil EdukasiMa'had Alam Nurul Ilmi2025

Mahad Nurul Ilmi: Website Pendidikan Islam

Ma'had Nurul Ilmi adalah pesantren yang baru berdiri, kehadirannya di dunia maya masih berupa postingan yang tersebar di YouTube, Instagram, TikTok, dan Facebook. Karena itu mereka butuh satu website resmi untuk memperkenalkan program dan kurikulumnya ke calon santri dan orang tua, terutama yang berasal dari luar daerah.

Preview

Jelajahi Situsnya

Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.

Preview desktop Mahad Nurul Ilmi: Website Pendidikan Islam

Desktop

Preview mobile Mahad Nurul Ilmi: Website Pendidikan Islam

Mobile

Tech Stack

Teknologi Penggerak Proyek

Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.

Logo Wordpress
Logo Elementor
Logo Blocksy
Logo LiteSpeed Cache
Logo AIOSEO
Logo Hostinger
Logo Google Search Console
Logo Google Analytics
Logo Figma
Logo Claude

Peran

Rincian per Skill

Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.

Web Development

  • Membeli domain sekolah, mengonfigurasi DNS, dan mengarahkannya ke Hostinger.
  • Menginstall dan menyiapkan WordPress dari nol di hosting Hostinger.
  • Membangun dan menyusun situs dengan WordPress, Elementor, dan tema Blocksy.
  • Menginstall dan mengonfigurasi setiap plugin yang dibutuhkan situs.
  • Menyiapkan arsitektur dan template blog untuk publikasi artikel.
  • Mengonfigurasi SSL, backup rutin, dan optimasi kecepatan situs untuk keandalan.
  • Melakukan pemeliharaan rutin: update plugin dan tema, serta memantau performa dan uptime.

Web Design

  • Menyesuaikan global style, warna, dan tipografi Blocksy untuk branding sekolah.
  • Menyusun program, kurikulum, dan kegiatan jadi bagian-bagian yang jelas dan terpisah.
  • Menata galeri foto kegiatan santri sebagai grid bento untuk variasi visual.
  • Melakukan penyesuaian responsif per halaman untuk orang tua yang browsing di mobile.

Graphic Design

  • Menyesuaikan logo sekolah yang sudah ada untuk penggunaan web, menyesuaikan ukuran, format, dan latar belakang.
  • Merancang ikon sederhana untuk membedakan tiap kategori program dan kurikulum.
  • Memilih dan mengedit foto kegiatan santri untuk galeri.
  • Membuat favicon situs.
  • Mengompres setiap gambar ke WebP dan di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

  • Menulis copy program, kurikulum, dan halaman situs untuk membangun kredibilitas dengan calon orang tua.
  • Menulis artikel blog yang ditargetkan SEO, rata-rata skor AIOSEO di atas 90.
  • Menggunakan blog untuk mempublikasikan artikel keagamaan, konten pendidikan Islam, pengumuman penerimaan PPDB, dan update kegiatan santri.
  • Menyiapkan Google Search Console dan Google Analytics untuk memantau traffic.

Sorotan

Di Balik Layar

Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.

Fitur Utama

  • Desain full responsive di perangkat desktop dan mobile.
  • Gambar dioptimasi untuk loading cepat.
  • Integrasi Google Analytics dan Search Console.
  • Profil sekolah lengkap, termasuk fasilitas pondok.
  • Rincian program pendidikan yang ditawarkan.
  • Overview kurikulum yang mencakup mata pelajaran dan studi Islam.
  • Overview kegiatan kewirausahaan santri.
  • Galeri foto kegiatan sekolah dalam layout grid bento.
  • Blog yang mencakup artikel keagamaan, pendidikan Islam, pengumuman PPDB, dan kegiatan santri.
  • Halaman kontak dengan lokasi Google Maps yang di-embed.
  • Link ke akun media sosial resmi sekolah.

Tantangan yang Dihadapi

Menyusun Beragam Program dan Kurikulum

Sekolah menawarkan banyak program, mata pelajaran, dan bidang studi Islam, plus kegiatan kewirausahaan, jadi kontennya disusun jadi kategori yang jelas alih-alih satu daftar panjang.

Navigasi Informasi yang Padat

Program, kurikulum, dan kegiatan dikelompokkan ke menu terpisah agar pengunjung tidak merasa kewalahan oleh satu halaman panjang.

Membangun Kredibilitas untuk Institusi Baru

Sebagai pesantren yang baru berdiri, situs ini butuh membangun kepercayaan lewat informasi program yang detail dan foto kegiatan asli, bukan sejarah institusi.

Pelajaran yang Didapat

  • Belajar membangun kredibilitas institusi baru lewat detail program dan kurikulum yang konkret, bukan mengandalkan sejarah institusi.
  • Melihat langsung bagaimana mengelompokkan kurikulum yang luas jadi kategori yang jelas mengurangi rasa kewalahan bagi orang tua yang belum familiar dengan kehidupan pesantren.

Dampak

Masalah yang Terselesaikan Setelah Rilis

Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.

Detail program yang bisa diverifikasi

Gambar di bawah 200KB

Jangkauan melampaui area lokal

Perbaikan Kritis

Memperkuat Kepercayaan untuk Institusi Baru

Sebelum

Sebagai pesantren yang baru berdiri, calon orang tua punya sedikit sekali bahan untuk menilai program-programnya sebelum mendaftarkan anak mereka.

Sesudah

Informasi program yang detail, rincian kurikulum, dan foto kegiatan asli memberi calon orang tua sesuatu yang konkret untuk dinilai seiring institusi terus berkembang.

Performa

Halaman Lambat Akibat Gambar yang Tidak Dioptimasi

Sebelum

Gambar beresolusi tinggi di seluruh situs, bukan cuma satu bagian, berisiko memperlambat setiap halaman.

Sesudah

Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, menjaga halaman tetap cepat tanpa penurunan kualitas yang terlihat.

Peningkatan

Jangkauan ke Calon Santri di Luar Daerah

Sebelum

Informasi tentang ma'had cuma tersebar lewat postingan YouTube, Instagram, TikTok, dan Facebook, tanpa satu sumber otoritatif.

Sesudah

Calon orang tua dari luar kota sekarang bisa mempelajari program, kurikulum, dan fasilitas secara mandiri sebelum berkunjung.