Lewati ke konten utama

Arah Desain

Langkah Arah Desain memungkinkan Anda meninjau, menyempurnakan, dan menyelesaikan desain visual tema Anda sebelum Theme Builder menghasilkan tema secara lengkap.

Gambaran Umum​

Setelah menyelesaikan Wawancara Penemuan (Discovery Interview), Theme Builder akan menampilkan arah desain Anda dengan pratinjau (preview) desktop dan seluler. Ini memungkinkan Anda melihat secara persis bagaimana desain Anda akan terlihat di berbagai perangkat sebelum memutuskan tema.

Komponen Arah Desain​

1. Palet Warna​

Skema warna tema Anda, termasuk:

  • Warna Utama (Primary color) — warna merek utama yang digunakan untuk tombol, tautan, dan aksen
  • Warna Sekunder (Secondary color) — warna pelengkap untuk variasi
  • Warna Aksen (Accent color) — warna sorotan untuk elemen penting
  • Warna Netral (Neutral colors) — abu-abu dan putih untuk latar belakang dan teks
  • Warna Teks (Text color) — warna teks utama untuk keterbacaan

2. Tipografi​

Pilihan font untuk:

  • Font Judul (Heading font) — digunakan untuk judul halaman dan header bagian
  • Font Isi (Body font) — digunakan untuk teks paragraf dan konten
  • Ukuran Font (Font sizes) — ukuran responsif untuk berbagai ukuran layar
  • Tinggi Baris (Line height) — jarak antar baris untuk keterbacaan
  • Berat Font (Font weights) — variasi tebal, normal, dan ringan

3. Tata Letak dan Jarak (Layout and Spacing)​

  • Lebar Kontainer (Container width) — lebar maksimum untuk konten
  • Padding dan Margin — jarak di sekitar elemen
  • Sistem Grid (Grid system) — tata letak kolom untuk desain responsif
  • Jarak Komponen (Component spacing) — jarak antar elemen UI

4. Elemen Visual​

  • Gaya Tombol (Button styles) — desain tombol utama, sekunder, dan tersier
  • Desain Kartu (Card designs) — tata letak untuk blok konten
  • Ikon (Icons) — gaya dan ukuran ikon
  • Batas dan Bayangan (Borders and shadows) — kedalaman visual yang halus
  • Efek Hover (Hover effects) — gaya keadaan interaktif

Pratinjau (Preview Rendering)​

Pratinjau Desktop​

Pratinjau desktop menampilkan desain Anda pada lebar penuh (biasanya 1200px atau lebih lebar):

  • Menu navigasi lengkap
  • Tata letak lengkap dengan semua kolom
  • Tipografi dan spasi besar
  • Semua elemen visual dalam ukuran penuh

Pratinjau Seluler​

Pratinjau seluler menampilkan desain Anda pada lebar seluler (biasanya 375px):

  • Navigasi responsif (menu hamburger)
  • Tata letak satu kolom
  • Tipografi dan spasi yang disesuaikan
  • Ukuran tombol yang ramah sentuhan

Titik Henti Responsif (Responsive Breakpoints)​

Theme Builder menampilkan pratinjau pada titik henti ini:

PerangkatLebarPratinjau
Seluler375pxPonsel potret
Tablet768pxTablet lanskap
Desktop1200pxDesktop lebar penuh
Desktop Besar1920pxLayar ultra-lebar

Menyempurnakan Desain Anda​

Melakukan Penyesuaian​

Anda dapat menyempurnakan arah desain Anda dengan:

  1. Menyesuaikan warna — ubah warna apa pun di palet
  2. Mengubah font — pilih jenis huruf yang berbeda
  3. Memodifikasi jarak — sesuaikan padding dan margin
  4. Memperbarui tata letak — ubah lebar kontainer dan kolom grid
  5. Menyesuaikan elemen — modifikasi gaya tombol, desain kartu, dll.

Pembaruan Pratinjau​

Perubahan akan tercermin secara real-time:

  • Pratinjau desktop diperbarui seketika
  • Pratinjau seluler diperbarui seketika
  • Semua titik henti responsif diperbarui
  • Anda dapat beralih antar pratinjau untuk memverifikasi perubahan

Tampilan Perbandingan​

Bandingkan arah desain Anda dengan:

  • Desain Asli (Original design) — lihat apa yang berubah
  • Desain Kompetitor (Competitor designs) — bandingkan dengan situs inspirasi
  • Versi Sebelumnya (Previous versions) — kembali ke arah desain yang lebih awal

Persetujuan Arah Desain​

Setelah Anda puas dengan desain Anda:

  1. Tinjau kedua pratinjau — pastikan tampilan desktop dan seluler sudah bagus
  2. Periksa semua warna — pastikan kontras dan aksesibilitasnya baik
  3. Uji tipografi — verifikasi keterbacaan di semua ukuran
  4. Konfirmasi tata letak — periksa spasi dan perataan
  5. Setujui desain — lanjutkan ke pembuatan tema

Langkah Selanjutnya​

Setelah menyetujui arah desain Anda:

  1. Theme Builder akan menghasilkan tema lengkap Anda
  2. Tema akan diinstal di situs WordPress Anda
  3. Anda dapat menyesuaikan lebih lanjut menggunakan customizer WordPress
  4. Lanjutkan ke Hospitality Menus atau fitur lainnya

Praktik Terbaik​

  • Uji di perangkat nyata — gunakan ponsel dan tablet asli jika memungkinkan
  • Periksa keterbacaan — pastikan teks mudah dibaca di semua ukuran
  • Verifikasi kontras — gunakan Validate Palette Contrast untuk aksesibilitas
  • Pertimbangkan kinerja — optimalkan gambar dan font untuk kecepatan
  • Rencanakan konten — pastikan tata letak berfungsi dengan konten aktual Anda

Pemecahan Masalah (Troubleshooting)​

Pratinjau Tidak Diperbarui​

  • Muat ulang halaman
  • Hapus cache browser
  • Coba browser yang berbeda
  • Periksa koneksi internet

Warna Terlihat Berbeda​

  • Periksa pengaturan warna monitor
  • Coba di perangkat yang berbeda
  • Verifikasi kontras warna dengan alat aksesibilitas
  • Pertimbangkan simulator buta warna

Masalah Tipografi​

  • Verifikasi file font sedang dimuat
  • Periksa ukuran font di berbagai titik henti
  • Uji dengan konten aktual
  • Pertimbangkan panjang baris untuk keterbacaan

Dokumentasi Terkait​