MODUL MATERI: DESAIN WEB (WEB DESIGN) UNTUK DKV SMK

 BAB 1: Menguak Rahasia Desain Web & UI/UX Dasar

Pernahkah kamu membuka sebuah situs web yang tampilannya sangat keren, tetapi pas mau cari tombol Beli atau Kontak, kamu malah pusing dan kebingungan? Atau sebaliknya, pernah melihat web yang navigasinya sangat mudah, tapi tampilannya kusam dan membosankan?

Nah, di dunia Desain Komunikasi Visual (DKV), mendesain web itu bukan cuma soal "menggambar yang bagus di layar". Lebih dari itu, desain web adalah tentang bagaimana kita menciptakan media komunikasi interaktif yang bisa membantu pengunjung memahami informasi, betah berlama-lama, hingga tertarik membeli sebuah produk.

Yuk, kita bedah fondasi utamanya bersama-sama!

🎨 1. Apa Itu Desain Web dalam Dunia DKV?

Di era digital seperti sekarang, situs web adalah "wajah utama" atau toko virtual dari sebuah brand, perusahaan, maupun kreator.

Jika seorang desainer grafis konvensional merancang poster untuk dilihat satu arah di papan pengumuman, maka desainer DKV di dunia web merancang ruang interaktif. Pengunjung web bisa mengklik tombol, menggeser gambar (carousel), mengisi formulir, hingga berpindah halaman.

Oleh karena itu, tugas desainer web DKV adalah memastikan komunikasi visual tersebut berjalan dua arah dengan lancar, estetik, dan tepat sasaran.

🤝 2. Duet Maut: Mengenal UI (User Interface) vs UX (User Experience)

Saat belajar desain web, kamu pasti akan sangat sering mendengar istilah UI dan UX. Meskipun sering disebut bersamaan, keduanya punya peran yang berbeda namun saling melengkapi.

Mari kita gunakan analogi sederhana: Mengendarai Sepeda Motor.

• Motor yang Mengkilap & Keren (Catnya mulus, lampu LED futuristik, bentuknya gagah) ──► Ini adalah UI.

• Sensasi Mengendarai Motor (Joknya empuk, stangnya nyaman, remnya pakem, tidak bikin pegal) ──► Ini adalah UX.

Jika salah satunya buruk, pengalaman berkendara tentu jadi tidak menyenangkan, bukan? Begitu juga dengan situs web!

🖌️ A. UI (User Interface) – "Wajah & Estetika Visual"

UI berfokus pada segala hal yang dilihat langsung oleh mata pengunjung di layar. Ini adalah domain utama kreativitas anak DKV!

Elemen-elemen utama UI meliputi:

• 🎨 Warna: Penentuan palet warna yang sesuai dengan identitas brand dan psikologi pengguna.

• 🔤 Tipografi: Pemilihan jenis huruf (font) yang estetik namun tetap mudah dibaca di layar.

• 📐 Tata Letak (Layout): Penyusunan posisi gambar, teks, dan elemen grafis agar seimbang (grid system).

• 🔘 Komponen Interaktif: Bentuk tombol, ikon, garis pemisah, hingga animasi transisi saat tombol diklik.

Tujuan Utama UI: Membuat tampilan web terlihat menarik, indah, profesional, dan konsisten secara visual.

🧠 B. UX (User Experience) – "Kenyamanan & Kemudahan Rasa"

UX berfokus pada apa yang dirasakan oleh pengguna saat menjelajahi dan menggunakan situs web tersebut. Apakah mereka merasa mudah, atau justru pusing dan frustrasi?

Fokus utama UX meliputi:

• 🗺️ Kemudahan Navigasi: Apakah menu utama mudah ditemukan?

• 🚀 Efisiensi Alur (User Flow): Berapa kali klik yang dibutuhkan pengunjung dari halaman utama sampai berhasil membeli produk? (Makin sedikit dan jelas alurnya, makin bagus UX-nya!).

• 💡 Kejelasan Informasi: Apakah tulisan dan petunjuk di dalam web mudah dipahami tanpa bikin bingung?

• 📱 Kenyamanan Penggunaan: Apakah tombolnya cukup besar untuk ditekan menggunakan jempol di layar HP?

Tujuan Utama UX: Memastikan web terasa mudah, intuitif, cepat, dan memberikan kenyamanan maksimal bagi pengunjung.

 

💡 Rangkuman Singkat

Aspek	UI (User Interface)	UX (User Experience)
Fokus Utama	Keindahan & Estetika Visual	Kenyamanan & Kemudahan Fungsi
Pertanyaan Kunci	"Apakah tampilan web ini terlihat bagus dan menarik?"	"Apakah web ini mudah dan nyaman digunakan?"
Elemen Khas	Warna, Font, Ikon, Ilustrasi, Layout	Alur Pengguna (User Flow), Arsitektur Informasi, Riset

💬 Catatan Belajar Hari Ini:

"Desain UI yang cantik tanpa UX yang baik hanya akan jadi pajangan yang membingungkan. Sebaliknya, UX yang canggih tanpa UI yang menarik akan terasa membosankan. Kombinasi seimbang keduanya adalah kunci sukses seorang Desainer Web!"