Setiap website punya cerita. Tapi bagi saya, justru proses mendesain ulang sebuah website menyimpan lebih banyak kisah — tentang pemiliknya, tentang tujuannya, dan tentu saja… tentang tantangan di balik layarnya.
Mendesain ulang website bukan sekadar mempercantik tampilan. Tapi menyelaraskan wajah digital dengan identitas dan perjalanan sang pemiliknya.
Kali ini, saya ingin membagikan pengalaman saya sebagai desainer web dalam proyek redesign website kangfadhil.id, sebuah situs pribadi milik Kang Fadhil Dzikri — seorang Digital Marketing Enthusiast dari Bandung yang aktif berbagi insight, membangun komunitas, dan terus tumbuh sebagai profesional di dunia digital.
Latar Belakang Project
Saat saya menerima tantangan untuk me-redesign website Kang Fadhil Dzikri, seorang Digital Marketing Enthusiast dari Bandung yang aktif berbagi insight dan edukasi tentang SEO dan strategi konten digital, saya langsung paham: website ini harus berubah arah — bukan hanya tampilannya, tapi juga cara menyampaikan pesannya dan kecepatan akses webnya.
Brief & Tantangan
Tampilan website versi sebelumnya sudah rapi, tapi terlalu generik. Padahal Kang Fadhil adalah figur yang:
- Aktif berbagi ilmu
- Dekat dengan komunitasnya
- Selalu punya energi baru dalam menyampaikan edukasi digital
Tantangan utama saya: membuat website yang lebih personal, lebih hangat, dan lebih fleksibel untuk mengelola konten edukasi digital.
Proses Desain Ulang
Saya memilih menggunakan WordPress Block Editor (FSE) agar seluruh desain fleksibel dan ringan, tanpa bergantung pada plugin page builder tambahan. Dengan tools bawaan WordPress, saya dapat menyusun ulang struktur halaman dari nol, dan membangun ulang identitas visual yang lebih merepresentasikan Kang Fadhil sebagai seorang praktisi dan mentor.
Elemen Desain Utama
Bagian Homepage: Misi Utama, Sorotan Utama
Saat saya pertama kali melihat homepage lama dari website Kang Fadhil, hal yang langsung terlintas di kepala adalah: “Ini harus lebih dari sekadar ‘kartu nama digital’.” Karena Kang Fadhil bukan sembarang praktisi digital, tapi Growth Business Specialist dengan pengalaman SEO sejak 2009. Maka saya mulai menyusun ulang homepage sebagai etalase personal brand yang benar-benar kuat.
Hero Section: Perkenalan Penuh Karakter
Saya mulai dengan membuat Hero Section yang langsung memperkenalkan siapa Kang Fadhil, lengkap dengan jabatan “Digital Marketing Enthusiast”, ditambah CTA ganda: Hubungi Saya & Lihat Profil. Agar tidak sekadar teks, saya padukan dengan ilustrasi dan foto profesional Kang Fadhil yang menyatu dengan grafis lingkaran — mewakili perjalanan & pertumbuhan yang terus berputar.
Quote Section: Personal & Emosional
Bagian ini penting — saya tampilkan foto close-up Kang Fadhil mengenakan hoodie merah disertai kutipan motivasi tentang makna sukses. Ini memberi nuansa manusiawi & empatik, mengingatkan kita bahwa dibalik strategi bisnis ada nilai hidup yang dijunjung.
Trust Element: Angka yang Bicara
Tepat di bawahnya, saya munculkan angka-angka pencapaian: jumlah klien, project, dan tahun pengalaman. Karena, kita tahu, angka lebih mudah dipercaya dibanding janji. Desain dibuat bersih, simetris, dan mudah dicerna.
Layanan Utama: Fokus & Jelas
Selanjutnya, saya perkenalkan layanan Kang Fadhil sebagai Growth Business Specialist. Saya pecah menjadi 4 box:
- SEO Technical
- Campaign SEO
- SEO Strategy
- Conversion Rate
Setiap box punya ikon dan deskripsi ringkas agar mudah dipahami bahkan oleh yang awam SEO.
Produk Digital: E-Book & Bootcamp
Untuk bagian produk, saya munculkan dua unggulan:
- E-Book: Menjadi SEO Specialist Itu Asik Loh!
- Bootcamp: SEO Foundation Academy
Visualnya dibuat atraktif dan profesional, dengan harga dan tanggal kelas agar mudah diakses calon peserta.
Ruang Belajar (Blog Section)
Karena edukasi adalah bagian dari brand Kang Fadhil, saya munculkan artikel terbaru dari blog dalam bentuk card 3 kolom. Setiap card punya thumbnail, judul, dan CTA baca selengkapnya. Ini memperkuat positioning beliau sebagai thought leader.
CTA Penutup: Ajak Kolaborasi
Saya tutup homepage dengan ajakan langsung: “Let’s Work Together”. Visual jembatan kota Bandung di malam hari menambah kesan lokal, profesional, dan siap melayani siapa pun yang ingin berkolaborasi.
Desain homepage ini bukan sekadar layout, tapi perjalanan mendesain ulang citra profesional Kang Fadhil secara digital.
Tujuannya satu: website ini bukan hanya bisa dilihat, tapi bisa dipercaya.
Halaman Produk: Gak Cuma Jualan, Tapi Juga Meyakinkan
Di halaman produk ini, saya ingin memastikan setiap orang yang membuka link e-book dan bootcamp langsung paham nilai dari produknya — tanpa harus mikir panjang. Jadi, yang saya lakukan pertama adalah menyusun ulang strukturnya jadi lebih rapi dan fokus ke konversi.
Produk 1: Panduan Menjadi SEO Specialist Itu Asik Loh!
Untuk e-book ini, saya bikin tampilannya mirip landing page sederhana:
- Gambar cover e-book yang besar dan jelas di bagian atas.
- Judul dan deskripsi produk saya susun dalam grid dua kolom biar rapi.
- Saya sematkan highlight fitur seperti apa yang akan kamu pelajari dan untuk siapa e-book ini cocok — semuanya ditampilkan dalam bentuk poin-poin supaya mudah dicerna.
- CTA beli diarahkan ke marketplace digital dengan gaya tombol besar dan menonjol, biar gampang diklik.
Produk 2: Bootcamp SEO Foundation Academy Batch 2
Halaman bootcamp saya desain dengan pendekatan semi-event:
- Ada poster digital kelas di sisi kanan dan deskripsi mendetail di sisi kiri.
- Saya tambahkan info teknis seperti jadwal, platform (Zoom), hingga benefit peserta, disajikan secara berurutan.
- Bagian bonus dan harga spesial saya desain dengan gaya highlight, agar terlihat menarik dan tidak tenggelam oleh teks lainnya.
- Sama seperti e-book, tombol CTA diarahkan ke WhatsApp atau halaman pembayaran.
Intinya, saya buat halaman produk ini bukan hanya “kelihatan keren”, tapi juga nyaman dibaca dan mudah dibeli.
Halaman Artikel: Belajar SEO Gak Perlu Ribet
Untuk halaman artikel, saya pastikan tampilannya tetap simpel tapi tetap punya identitas visual yang kuat.
- Saya susun artikel dalam layout 3 kolom menggunakan blok post grid bawaan, agar efisien dan tetap responsif.
- Tiap card artikel tampil dengan thumbnail gambar, judul yang clickable, dan excerpt ringkas. Desainnya bersih dan modern, jadi nyaman dilihat, terutama di layar mobile.
- Di bagian atas halaman, saya tambahkan judul section “Ruang Belajar” sebagai pemanis dan penguat identitas brand edukatif dari Kang Fadhil.
Fungsinya jelas: siapa pun yang datang ke halaman ini bisa langsung lihat dan klik artikel terbaru yang relevan — baik pemula maupun yang sudah paham SEO.
Kalau homepage adalah pintu masuknya, maka halaman produk dan artikel ini adalah ruang interaksi dan edukasi. Saya pastikan semuanya terstruktur, jelas, dan tetap dalam gaya visual brand Kang Fadhil: profesional tapi tetap ramah dan approachable.
Halaman CV: Bukan Sekadar Daftar Riwayat Hidup
Salah satu tantangan seru dalam project redesign ini adalah bikin halaman CV Kang Fadhil tetap informal tapi tetap powerful. Saya gak ingin halaman ini sekadar daftar panjang pengalaman kerja — tapi juga jadi ajang pamer kredibilitas yang elegan.
Makanya, saya mulai dari Foto dan Nama Kang Fadhil lalu tambahkan siapa Kang Fadhil dan quote yang singkat tapi berkesan. Lalu masuk ke bagian inti yang saya susun dalam tampilan 2 kolom:
Kiri: Informasi Personal dan Kemampuan
- Kontak, Pendidikan, kemampuan, dan bahasa saya susun rapi di bagian kiri
- Saya tambahkan juga logo kecil biar tampilannya gak kaku.
Kanan: Pengalaman
- Saya pisahkan antara Pengalaman Kerja dan Pengalaman Pembicara.
- Bagian Pengalaman Pembicara, saya susun dalam grid layout biar tampil modern.
Saya tetap jaga tone desain dari homepage dan produk, dengan font dan warna yang senada. Tujuannya: menjaga brand consistency. Dan tentu saja, pastikan halaman ini tetap cepat dimuat dan nyaman dilihat di mobile.
Halaman ini bukan cuma tempat pamer CV, tapi ruang personal branding versi digital — dan saya pastikan tampilannya segar dan profesional.
Halaman Single Post: Bikin Pembaca Betah Sampai Habis
Saat mengerjakan bagian halaman artikel/single post, saya tahu betul kalau ini bukan cuma soal nulis dan baca — tapi soal mengajak pengunjung stay lebih lama dan nyaman menyerap isi konten.
Makanya, begitu masuk ke halaman artikel seperti “Website Hilang di Google? Ini 7 Penyebab & Solusinya!”, hal pertama yang saya tata adalah:
Struktur Layout yang Rapi
- Bagian header artikel saya desain tegas dengan judul besar yang langsung nangkep mata, dilengkapi dengan breadcrumb sebagai navigasi mini biar user gak nyasar.
- Saya tambahkan juga gambar featured image yang ukurannya pas dan kontekstual — biar tampilannya menarik saat artikel dishare ke media sosial.
Tipografi yang Nyaman
Saya pilih ukuran font yang readable untuk desktop maupun mobile. Jarak antar paragraf juga saya atur biar mata gak cepat lelah.
Komponen di Bawah Artikel
- Saya sisipkan kolom penulis lengkap dengan avatar, siapa penulis dan tombol sosial media.
- Saya sisipkan juga navigasi artikel terbaru di bagian bawah. Ini penting buat menjaga user tetap muter-muter di website — alias engagement boost.
Saya tutup homepage dengan ajakan langsung: “Let’s Work Together”. Visual jembatan kota Bandung di malam hari menambah kesan lokal, profesional, dan siap melayani siapa pun yang ingin berkolaborasi.
Mobile Friendly? Wajib!
Saya pastikan desain tetap smooth di HP. Mulai dari margin, padding, sampai ukuran teks — semua saya cek agar user bisa baca dengan nyaman sambil rebahan 😁.
Di halaman artikel ini, tujuan saya sederhana: bikin pembaca nyaman, gak cepat kabur, dan langsung tertarik lanjut baca artikel lainnya. Dan itu harus didukung desain yang clean dan ramah mata.
Tools & Teknologi yang Saya Gunakan
Nah, setelah ngobrolin bagian depan layar yang penuh visual dan pengalaman pengguna, sekarang waktunya saya bongkar sedikit “dapur teknis” dari website kangfadhil.id yang saya redesign.
CMS: WordPress
Website Kang Fadhil ini dibangun menggunakan WordPress — karena fleksibel, powerful, dan komunitasnya luas banget. Terutama untuk personal branding, WordPress adalah pilihan yang solid.
Tema: Block Theme Modern
Saya pakai tema berbasis Full Site Editing (FSE) alias block theme modern yang mendukung Block Editor bawaan WordPress 100%. Tema yang digunakan adalah tema bawaan WordPress terbaru yaitu Twenty Twenty-Five, tema ini dikenal karena kesederhanaan, fleksibilitas, dan fitur-fitur yang berorientasi pada block editor bawaan.
Plugin: Seperlunya, Bukan Sebanyak-banyaknya
Biar website tetap ringan dan cepat diakses, saat ini saya hanya pasang plugin yang benar-benar bisa membantu saya khususnya untuk meningkatkan performance website, seperti:
- Rank Math untuk optimasi mesin pencari.
- LiteSpeed Cache untuk mempercepat loading.
- Twentig untuk menambahkan fitur-fitur penting dan kreatif ke block editor WordPress.
Ya, saat ini hanya 3 plugin itu yang saya aktifkan di website kangfadhil.id, tidak ada plugin page builder. Semua layout saya buat langsung pakai Block Editor bawaan WordPress, yang ternyata cukup andal dan menyenangkan dipakai kalau sudah terbiasa.
Hasil Akhir
Dengan desain baru ini, pengunjung tidak hanya melihat siapa Kang Fadhil — tapi juga merasakan bagaimana ia berbicara, mengajar, dan membangun hubungan. Desainnya bersih, cepat, responsif, dan tetap mudah digunakan oleh Kang Fadhil untuk mengelola sendiri kontennya di masa depan.
Insight Pribadi
Proyek ini mengingatkan saya bahwa desain bukan tentang “yang terlihat keren”, tapi tentang bagaimana website bisa bicara untuk pemiliknya. Saya belajar langsung dari kepribadian Kang Fadhil, cara dia menyapa audiens, dan bagaimana ia menyusun edukasi digital. Semua itu saya tuangkan ke dalam desain yang sekarang bisa kamu lihat di kangfadhil.id.
Penutup dari Saya
Bagi saya, setiap project desain website bukan hanya soal “membuatnya lebih bagus”. Tapi soal mewakili siapa pemiliknya di dunia digital.
Terima kasih untuk Kang Fadhil atas kepercayaannya.
Dan untuk kamu yang sedang berpikir untuk membangun atau me-redesign website personalmu… mungkin ini saatnya.
Ingin website personal kamu di-redesign juga? Yuk ngobrol.
Leave a Reply