Redesign Website Resmi BPMP DIY
Modernisasi total portal utama institusi; bermigrasi dari tema lawas menuju arsitektur tampilan yang lebih segar, sangat responsif di perangkat seluler, dan inklusif dengan tetap menjaga keamanan operasional basis data institusi.
Peta Jalan & Alur Proyek
Tahapan sistematis migrasi antarmuka dari penemuan masalah hingga rilis resmi ke server pusat.
Analisis Awal
Identifikasi kelemahan tata letak dan performa tema Sahifa yang lama, serta penentuan spesifikasi arsitektur antarmuka baru.
Staging & Konfigurasi
Penyetelan kerangka dasar (layout) menggunakan Tema Astra pada server uji coba agar tidak mengganggu situs utama yang sedang aktif.
Perancangan UI
Pembangunan komponen visual, blok menu, dan halaman statis interaktif secara visual menggunakan pembuat halaman Elementor Pro.
Migrasi Akhir
Proses ekspor-impor pengaturan tata letak ke server produksi, validasi responsivitas di seluler, dan pengujian stabilitas akhir.
Sorotan Proses Pengembangan
Penyetelan Kerangka Tema Astra
Langkah pertama dan paling krusial. Tema Astra dipilih karena bobot kodenya yang sangat ringan. Pada tahap ini, saya melakukan penyetelan Customizer global, mencakup pengaturan dasar tipografi institusi, manajemen warna (Global Color Palette), pengaturan area kepala (Header Builder), dan struktur kerangka (Container) agar kompatibel dengan standar antarmuka web masa kini.
Perakitan Visual via Elementor
Setelah kerangka tema siap, saya membangun antarmuka halaman depan (Homepage) menggunakan pembuat halaman Elementor. Melalui antarmuka visual (Drag and Drop), saya menyusun blok kolom, menyematkan elemen layanan cepat, mengintegrasikan korsel berita (News Slider), dan memastikan setiap piksel desain menyesuaikan secara responsif saat dibuka di layar ponsel cerdas (Mobile-First Approach).
Peran Saya
Web Dev & UI/UX
Platform
WordPress CMS
Instansi
BPMP DIY
Fokus
Modernisasi Desain
01 Mengatasi Tema yang Usang (Outdated)
Website resmi BPMP DIY sebelumnya menggunakan tema klasik Sahifa. Seiring berjalannya waktu, gaya desain tema ini tidak lagi relevan dengan standar antarmuka web pemerintahan modern. Tampilannya kaku, kurang responsif saat diakses dari gawai genggam, dan lambat memuat banyak data. Tantangannya adalah mengubah total wajah portal ini tanpa menghilangkan ribuan data artikel dan informasi institusi yang sudah ada.
02 Pendekatan Komponen Siap Pakai (Pre-Existing)
Untuk mempercepat proses pengembangan tanpa memulai kode dari nol (from scratch), saya mengambil keputusan arsitektural untuk memanfaatkan komponen eksternal (Pre-Existing Library).
- Menggunakan Astra sebagai pondasi tema inti karena keunggulannya dalam performa pemuatan (loading speed) dan arsitekturnya yang ramah SEO.
- Menggunakan Elementor sebagai kanvas perakit antarmuka, memungkinkan pembuatan tata letak kompleks dengan presisi tinggi.
03 Implementasi Antarmuka yang Intuitif
Fokus redesain tidak hanya pada keindahan, tetapi pada fungsionalitas. Saya merombak struktur menu bagian atas (Header/Navbar) agar informasi layanan publik, portal pengaduan, dan berita institusi dikelompokkan dengan logis. Selanjutnya, menggunakan komponen dinamis Smart Slider 3, saya menyematkan elemen komidi putar berita yang otomatis mengambil artikel terbaru, sehingga halaman beranda (homepage) selalu terlihat hidup dan terkini.
04 Eksekusi Migrasi & Validasi Keamanan
Perombakan antarmuka dilakukan sepenuhnya di peladen bayangan (Staging Environment) agar tidak mengganggu pengunjung situs utama. Setelah desain disetujui, saya mengeksekusi perpindahan data konfigurasi (Deployment) dengan teliti. Hasil pengujian akhir memastikan seluruh modul fungsional berjalan tanpa galat (error), responsif di segala ukuran layar, dan fitur aksesibilitas dapat difungsikan oleh pengguna berkebutuhan khusus.
Tech Stack & Plugin
- Tema Core: Astra WP
- UI Builder: Elementor & Addons
- Komponen: Smart Slider 3
- Modul: Script Inklusivitas (A11y)
Pemenuhan Standar Kompetensi SKKNI (Uji Kelayakan)
J.620100.005.01
Mengimplementasikan User Interface
- Membuat dan menentukan purwarupa tata letak kerangka visual (wireframe) menggunakan kerangka antarmuka Tema Astra.
- Mengatur gaya (style), penempatan tombol navigasi sekuensial, dan komponen dialog layanan publik agar pengguna instansi dapat menemukan dokumen secara intuitif.
J.620100.019.002
Menggunakan Library / Komponen Pre-Existing
- Mengidentifikasi dan mengimplementasikan pustaka siap pakai (seperti Elementor dan Smart Slider) guna meningkatkan efisiensi waktu pengerjaan desain arsitektur.
- Menerapkan pembaruan (update) dan konfigurasi pada komponen terkait tanpa memicu konflik dependensi pada basis data CMS yang sudah ada.
J.620100.015.01
Organisasi Sumber Daya Pemrograman
- Menyusun manajemen sumber daya dan hirarki pengkategorian menu (Information Architecture) sesuai standar kelayakan peladen CMS (Content Management System).
- Mengoptimalkan ukuran dan resolusi aset visual sebelum diunggah ke sistem untuk menghemat beban ruang penyimpanan (storage efficiency).
J.620100.010.02
Menjalankan Perintah Eksekusi Akhir
- Melakukan perpindahan konfigurasi (deployment) dari peladen uji coba (staging) ke peladen publik (production) secara terstruktur.
- Mengidentifikasi potensi galat visual antar peramban (cross-browser error) dan memastikan seluruh tautan antarmuka berfungsi (tereksekusi) dengan sempurna.
Revolusi Tampilan Web Anda
Berikan kesan pertama yang tak terlupakan bagi institusi Anda dengan desain antarmuka yang modern, fungsional, dan sangat responsif.
Mulai Proyek