Desain UI/UX

Membangun Desain UI/UX WordPress yang Profesional dan User-Friendly

Pendahuluan

Dalam pelajaran ini Anda akan mempelajari langkah-langkah praktis untuk membuat desain UI/UX yang modern, responsif, dan mudah digunakan di WordPress. Anda akan memahami bagaimana merancang struktur halaman, memilih tipografi dan warna, mengatur hierarki visual, serta mengoptimalkan pengalaman pengguna menggunakan pembuat tema seperti Elementor, Astra, Kadence, dan fitur bawaan WordPress.

UI/UX yang baik sangat penting karena:

  • Meningkatkan kenyamanan pengguna dan durasi kunjungan.
  • Mempercepat proses pembelian/registrasi.
  • Meningkatkan kepercayaan merek.
  • Mengurangi rasio pentalan serta meningkatkan kualitas SEO.

Prasyarat / Alat yang Dibutuhkan:

  • WordPress (diinstal dan sudah bisa diakses).
  • Tema modern : Astra, Kadence, atau sejenisnya.
  • Pembuat halaman: Elementor / Elementor Pro.
  • Pengetahuan dasar tata letak (padding, margin).
  • Plugin pendukung (opsional): Happy Addons, ElementsKit, Spectra.

Langkah-Langka Utama

1. Menentukan Struktur Halaman (Wireframe)

Sebelum membuat desain, Anda harus menentukan struktur dasar dari setiap halaman.

Instruksi Detail:

  1. Tentukan tujuan halaman utama: informasi, penjualan, edukasi, pendaftaran, dll.
  2. Buat outline 5 elemen dasar:
    • Judul
    • Bagian pahlawan
    • Konten utama
    • CTA (Ajakan Bertindak)
    • Catatan kaki
  3. Gambar wireframe sederhana di kertas atau Figma/Excalidraw.
  4. Pastikan setiap halaman memiliki satu fokus utama.

(Petunjuk Visual: menampilkan sketsa wireframe sederhana dengan header, hero, konten, CTA, footer)

Tip Penting:
Selalu buat satu tujuan utama dan satu CTA pada setiap halaman untuk menghindari gangguan.

2. Mengatur Layout Menggunakan Elementor

Mulai membangun struktur halaman langsung di WordPress.

Instruksi Detail:

  1. Masuk ke Dasbor WordPress → Halaman → Tambah Baru .
  2. Klik Edit dengan Elementor.
    (Petunjuk Visual: Jendela Elementor pertama kali terbuka)
  3. Tambahkan Bagian → pilih struktur kolom (1 kolom untuk hero, 2 kolom untuk konten).
  4. Atur Layout Section:
    • Lebar Konten → Lebar Penuh
    • Kesenjangan → Tidak Ada Kesenjangan
    • Tinggi → Tinggi Min (400–700 piksel)
  5. Tambahkan widget seperti:
    • Menuju
    • Editor Teks
    • Tombol
    • Gambar
  6. Gunakan Navigator untuk menjaga struktur tetap rapi.
    (Petunjuk Visual: menunjukkan panel Navigator Elementor)

Peringatan:
Jangan membuat terlalu banyak kolom—maksimal 2–3 untuk menjaga keterbacaan di seluler.

3. Menentukan Tipografi dan Hierarki Teks

Desain UI/UX yang profesional selalu konsisten dalam tipografi.

Instruksi Detail:

  1. Masuk ke Elementor → Site Settings → Typography.
  2. Tentukan:
    • Judul font (contoh: Poppins, Montserrat).
    • Badan font (contoh: Inter, Open Sans).
  3. Atur skala hierarki:
    • H1: 32–48 piksel
    • H2: 24–32 piksel
    • H3: 18–24 piksel
    • Tubuh: 14–16 piksel
  4. Gunakan line-height 1.4–1.7 untuk kenyamanan membaca.
  5. Terapkan gaya ini ke seluruh bagian situs web.

(Visual Hint: panel Site Settings Typography Elementor terlihat)

Tip UX:
Gunakan maksimal 2 jenis font untuk menjaga kesan profesional dan konsisten.

4. Menentukan Warna Merek & Kontras

Warna memiliki peran besar dalam merek persepsi dan kenyamanan mata.

Instruksi Detail:

  1. Tentukan palet warna:
    • Primary (warna utama brand)
    • Sekunder
    • Neutral (hitam, abu, putih)
    • Aksen (sorotan)
  2. Masuk ke Elementor → Pengaturan Situs → Warna Global.
  3. Atur kontras warna:
    • Latar belakang terang + teks gelap = lebih mudah dibaca.
    • CTA selalu menggunakan warna primer yang mencolok.
  4. Gunakan alat seperti Pemeriksa Kontras untuk memastikan aksesibilitas.

(Petunjuk Visual: menampilkan 4 kotak warna dengan label Primer/Sekunder/Neutral/Aksen)

Peringatan:
Hindari warna yang terlalu mencolok seperti merah neon atau hijau terang untuk latar belakang karena membuat pengguna cepat lelah.

5. Mendesain Hero Section yang menarik

Bagian Hero adalah area pertama yang dilihat pengguna — harus jelas dan fokus.

Instruksi Detail:

  1. Tambahkan Section satu kolom.
  2. Tambahkan:
    • Heading utama (H1)
    • Subjudul
    • Tombol CTA
    • Gambar atau ilustrasi
  3. Atur background:
    • Warna solid
    • Latar belakang gambar
    • Gradient sederhana
  4. Pastikan teks mudah dibaca di atas gambar.
  5. Tambahkan padding 80–120px untuk ruang visual.

(Petunjuk Visual: bagian hero dengan heading besar dan tombol di tengah)

Tip:
Terapkan prinsip “Above the Fold”: semua inti pesan harus terlihat tanpa scroll.

6. Membuat Navigasi dan Header yang UX-Friendly

Navigasi mempengaruhi kenyamanan pengguna dalam menjelajah situs.

Instruksi Detail:

  1. Buka Penampilan → Kustomisasi → Pembuat Header (Astra/Kadence).
  2. Atur struktur:
    • Logo kiri
    • Menu kanan
  3. Tambahkan CTA ringkas seperti tombol “Daftar”, “Hubungi Kami”.
  4. Aktifkan Sticky Header agar tetap terlihat saat di-scroll.
  5. Untuk mobile:
    • Aktifkan hamburger menu.
    • Sederhanakan daftar menu (maksimal 5–6 item).

(Petunjuk Visual: tampilan header builder dengan logo dan menu)

Tip UX:
Menu yang terlalu banyak fokus fokus dan menurunkan tingkat konversi.

7. Mendesain Footer yang Informatif

Footer sering diabaikan, padahal sangat penting untuk kredibilitas.

Instruksi Detail:

  1. Masuk ke Penyesuai → Pembuat Footer.
  2. Tambahkan elemen:
    • Logo kecil
    • Menu tambahan
    • Ikon sosial
    • Kontak
    • Hak cipta
  3. Gunakan warna lebih gelap agar membedakan area.

(Petunjuk Visual: footer tiga kolom berisi menu, kontak, media sosial)

8. Mengoptimalkan Versi Mobile (Responsif)

80% pengguna WordPress mengunjungi dari seluler.

Instruksi Detail:

  1. Di Elementor, klik Mode Responsif → Seluler.
  2. Periksa setiap bagian:
    • Judul terlalu besar → perbaiki.
    • Kolom berlebihan → susun ulang menjadi satu kolom.
  3. Perbaiki padding/margin khusus mobile.
  4. Uji dengan beberapa perangkat (Chrome DevTools).

(Petunjuk Visual: tampilan mode Elementor seluler)

Peringatan:
Jangan pernah hanya mendesain untuk desktop — mobile-first jauh lebih penting.

9. Mengoptimalkan Kecepatan dan Performa UX

Kecepatan = UX = SEO.

Instruksi Detail:

  1. Gunakan plugin optimasi:
    • WP Rocket / Cache LiteSpeed
  2. Kompres gambar menggunakan:
    • Piksel Pendek
    • Bayangkan
  3. Gunakan format WebP.
  4. Hindari plugin berlebihan (maksimal 15–20 per situs).
  5. Cek skor di:
    • Wawasan Kecepatan Halaman
    • GTMetrix

(Petunjuk Visual: tangkapan layar hasil skor PageSpeed)

Ringkasan

Tiga poin penting yang harus Anda ingat:

  1. UI/UX WordPress harus dimulai dari struktur (wireframe), bukan langsung desain.
  2. Konsistensi tipografi & warna menentukan profesionalitas desain.
  3. Mobile-first dan kecepatan adalah faktor terbesar dalam keberhasilan UX.

Tugas Praktis untuk Anda

Buat satu halaman “Landing Page” sederhana untuk satu produk/jasa menggunakan WordPress + Elementor dengan aturan berikut:

  • Bagian pahlawan dengan H1 + CTA.
  • Section fitur dengan 3 kolom.
  • Bagian testimoni.
  • Section CTA akhir.
  • Responsiveness versi mobile sudah diperbaiki.
  • Tipografi dan konsistensi warna.
Previous Lesson
Back to Course
Next Lesson