Visual Design & Style Guide
Kerangka wireframe pada bab sebelumnya kini siap "didandani". Bab ini membahas bagaimana warna, tipografi, grid, ikon, dan komponen disatukan menjadi tampilan visual yang menarik sekaligus konsisten — lalu dirangkum menjadi Style Guide sebagai panduan resmi bagi seluruh tim, sebagai bekal menciptakan karya desain akhir.
Dari Wireframe ke Visual Design
Visual Design adalah tahap "mendandani" wireframe dengan elemen visual nyata — warna, tipografi, ikon, dan gambar — agar tampilan tak hanya fungsional, tapi juga menarik dan mencerminkan identitas brand.
Sesuai elemen CP Karya Desain, tahap ini adalah proses menciptakan karya desain hingga menjadi karya akhir yang siap dipakai atau diserahkan ke tim developer.
Color Theory & Palet Warna
Color theory adalah ilmu tentang bagaimana warna memengaruhi persepsi & emosi pengguna. Palet warna UI umumnya terdiri dari warna primer, sekunder, aksen, dan netral.
Gunakan warna secara konsisten untuk membangun sistem status (merah = error, hijau = sukses, kuning = peringatan) agar pengguna cepat memahami tanpa perlu membaca teks.
Tipografi dalam UI
Tipografi adalah seni memilih & menata huruf agar teks mudah dibaca sekaligus mencerminkan karakter produk.
Tipografi yang konsisten membantu membangun hierarki visual, sehingga pengguna tahu bagian mana yang harus dibaca lebih dulu.
Grid & Spacing System
Grid adalah kerangka kolom & baris yang menjaga elemen tetap rapi dan sejajar. Spacing System adalah aturan jarak antar elemen (umumnya kelipatan 8px) agar tampilan konsisten di seluruh halaman.
Grid & spacing yang rapi membuat desain terasa profesional walau tanpa banyak dekorasi tambahan.
Ikonografi & Imagery
Ikonografi adalah penggunaan simbol visual sederhana untuk mewakili suatu aksi/fungsi. Imagery mencakup foto & ilustrasi yang memperkuat pesan produk.
Konsistensi gaya ikon & imagery memperkuat kesan profesional dan membantu pengguna memahami fungsi tanpa perlu membaca label.
Komponen UI & Consistency
Komponen UI adalah elemen antarmuka yang dapat dipakai berulang (tombol, form, kartu, navigasi) dengan gaya yang konsisten di seluruh halaman.
Komponen yang konsisten mempercepat proses desain & pengembangan karena tim tidak perlu membuat elemen serupa berulang kali dari nol.
Style Guide: Menyatukan Semua Elemen
Style Guide adalah dokumen panduan yang merangkum seluruh aturan visual — warna, tipografi, grid, ikon, dan komponen — menjadi satu acuan resmi bagi tim.
Style Guide pada bab ini menjadi fondasi menuju Bab 8: Design System, di mana seluruh aturan ini akan dikembangkan menjadi sistem desain yang lebih terstruktur & scalable.
Visual Design & Style Guide adalah tahap mengubah kerangka wireframe menjadi karya desain akhir yang menarik, konsisten, dan mudah digunakan. Dengan menguasai warna, tipografi, grid, ikonografi, komponen, hingga menyusun Style Guide, peserta didik siap melangkah ke pembahasan interaktivitas dan penguasaan tools Figma secara lebih mendalam pada bab-bab berikutnya.
E-Book Modul Ini
Baca ringkasan lengkap materi Visual Design & Style Guide dalam format e-book yang bisa dibuka langsung tanpa perlu mengunduh.