Pengantar Web Design UI/UX

 

Pertemuan 1: Pengantar Web Design UI/UX

Objektif Pembelajaran: Mahasiswa memahami definisi web design, UI design, dan UX design; perbedaan fundamental di antara ketiganya; bagaimana ketiganya bekerja bersama; dan bagaimana positioning mata kuliah ini dalam ekosistem desain digital yang lebih luas.

Modul ini memberikan landasan konseptual yang kuat sebelum diving ke dalam specialized modules. Clarity tentang terminologi dan boundaries adalah kritis untuk membangun mental models yang akurat dalam pembelajaran desain.

Definisi dan Distinctions Fundamental

Web Design adalah praktik comprehensive yang merancang keseluruhan visual identity, functionality, dan experience dari sebuah website (MockFlow, 2025; Otakoyi, 2025). Web designers fokus pada: aesthetics overall website, layout dan struktur pages, visual hierarchy, brand consistency, responsiveness across devices. Output: complete website designs, page layouts, visual specifications untuk multiple screen sizes (MockFlow, 2025).

UI Design (User Interface Design) adalah specialized discipline yang merancang visual dan interactive elements yang directly berinteraksi dengan users: buttons, menus, forms, icons, navigation, typography, color schemes (The Cuneiform, 2025; GeeksforGeeks, 2023). UI designers fokus pada: making interface visually appealing, designing interactive components, ensuring intuitive interaction patterns, maintaining visual consistency, crafting microinteractions dan feedback states (MockFlow, 2025; Interaction Design Foundation, 2026). Output: high-fidelity mockups, interactive components, design systems, visual specifications.

UX Design (User Experience Design) adalah strategic discipline yang merancang keseluruhan user journey dan satisfaction—bukan hanya interface elements (CareerFoundry, 2025; Mockflow, 2025). UX designers fokus pada: understanding user needs dan pain points through research, defining information architecture dan user flows, creating wireframes, conducting usability testing, iterating based upon user feedback, ensuring seamless end-to-end experience (The Cuneiform, 2025; CareerFoundry, 2025). Output: user personas, user journey maps, information architecture diagrams, wireframes, prototypes, usability testing reports, recommendations (Interaction Design Foundation, 2026).

Perbedaan Fundamental: Web Design vs UI vs UX

Aspek	Web Design	UI Design	UX Design
Primary Focus	Overall website visual identity dan struktur	Visual & interactive interface elements	Holistic user experience dan journey
Scope	Entire website (pages, layouts, branding)	Individual interactive components & screens	Complete user interaction end-to-end
Timeline dalam Process	Mid-to-late stage (setelah UX strategy defined)	Late stage (visual layer pada UX structure)	Early stage (research & strategy first)
Key Deliverables	Page designs, layout specifications, responsive designs	Mockups, components, design systems, visual specifications	Personas, user flows, wireframes, research findings, prototypes
Design Tools	Figma, Adobe XD, Webflow	Figma, Sketch, Adobe XD	FigJam, Miro, Notion, Maze, Figma
Design Phase	Aesthetics & struktur	Visual & interactive details	Strategy & problem-solving
Key Question	"How does the website look visually?"	"How do users interact with interface?"	"Does the experience solve user problems?"

Web designer membangun apa yang Anda lihat—overall visual look (MockFlow, 2025).
UI designer membentuk bagaimana Anda berinteraksi—interactive elements (GalaxyUX, 2025).
UX designer menentukan mengapa Anda tinggal—problem-solving & satisfaction (GalaxyUX, 2025).

Bagaimana Web Design, UI, dan UX Bekerja Bersama

Ketiganya bukan silos terpisah, mereka adalah overlapping disciplines yang collaborate untuk create exceptional digital experiences (MockFlow, 2025; GalaxyUX, 2025).

Typical Workflow Collaboration:

1. UX Researchers melakukan user research, mengidentifikasi problems, define objectives

2. UX Designers membuat information architecture, user flows, wireframes

3. UI Designers menerapkan visual design, membuat component library, design high-fidelity mockups

4. Web Designers memastikan overall visual coherence, responsive behavior across devices

5. Semua iterates berdasarkan user testing feedback

Real-World Scenario:

• UX discovers: Users struggling dengan finding products karena navigation confusing

• UX solution: Merestruktur information architecture, menyederhanakan navigation flow

• UI translates: Membuat clear navigation components, visual hierarchy untuk guide users, intuitive icons

• Web designer ensures: Navigation responsive, accessible across all devices, brand-consistent

• Testing validates: Users dapat find products easily sekarang

Fundamental Principles dalam UI/UX Design

Memahami core principles adalah foundation untuk semua learning berikutnya (The Cuneiform, 2025; UXPlaybook, 2026):

1. User-Centric Design
Setiap design harus prioritize user needs, goals, pain points—bukan designer preferences atau business assumptions (The Cuneiform, 2025; CareerFoundry, 2021). Process: conduct research, create personas, continuously validate dengan user feedback (UXPlaybook, 2026).

2. Simplicity
Complex interfaces membuat users overwhelmed. Simplicity berarti: removing unnecessary elements, clear mental models, straightforward interactions (The Cuneiform, 2025; UXPlaybook, 2026). Prinsip: design untuk ease of understanding, not impressive visuals.

3. Consistency
Consistent interfaces adalah predictable interfaces. Users tidak perlu relearn cara berinteraksi setiap kali menemukan sesuatu yang baru. Consistency berlaku untuk: visual elements (buttons, colors, typography), interaction patterns (bagaimana forms work, bagaimana navigation functions), information architecture (content organization) (The Cuneiform, 2025; Chillybin, 2024).

4. Accessibility
Design harus inclusive untuk semua users, regardless of ability. Accessibility mencakup: color contrast suitable untuk color-blind users, clear text alternatives untuk images, keyboard navigation, readable font sizes, semantic HTML (The Cuneiform, 2025; Chillybin, 2024). Bukan optional—increasingly legal requirement dalam many jurisdictions.

5. Responsiveness
Interfaces harus adapt seamlessly across devices: desktop (1920px+), tablet (768px-1024px), mobile (320px-480px) (The Cuneiform, 2025). Responsive design memastikan: content readable di setiap size, interactions work dengan both mouse dan touch, performance maintained across devices.

6. Error Prevention & Recovery
Good design mengantisipasi potential mistakes dan membantu users recover gracefully (The Cuneiform, 2025). Contoh: form validation preventing incorrect inputs, clear error messages, undo functionality, confirmation dialogs untuk destructive actions.

7. Feedback & Affordance
Users perlu immediate feedback tentang system responses to their actions. Affordance adalah visual signals yang communicate function: buttons look clickable, links look like links (The Cuneiform, 2025). Microinteractions (loading states, success messages, animations) guide users dan provide reassurance.

Relevansi untuk Indonesian Digital Market

Indonesia memiliki unique characteristics yang influence UI/UX design priorities:

Mobile-First Context (Mockflow, 2025)
~70% dari Indonesian internet users mengakses web via mobile. Responsive design bukan luxury, ini kebutuhan. Design mobile experience first, kemudian scale to desktop.

Diversity of Users
Wide range dari digital literacy levels (dari tech-savvy millennials ke senior citizens). Interfaces harus accommodate: beginner users needing clear guidance, power users wanting efficiency, users dengan limited bandwidth, users pada slower devices.

Local Platform Preferences
Indonesian users heavily menggunakan: WhatsApp, TikTok, Instagram, local e-commerce platforms (Tokopedia, Shopee, Bukalapak). Design harus align dengan familiar patterns dari platform yang users sudah comfortable dengan.

Multilingual Considerations
Many Indonesian digital products melayani multiple languages. Design harus consider: text expansion (Indonesian typically longer than English), right-to-left scripts jika applicable, cultural appropriateness dari imagery dan language.

Accessibility dalam Practice
Power outages, slow internet connections, older devices tetap common. Design untuk: minimal data usage, offline capability where possible, fast loading times, clear visual hierarchies untuk reduce scanning time.

Best Practices dari Ketiga Disciplines

Dari Web Design: Visual storytelling, brand consistency, responsive thinking
Dari UI Design: Attention to detail, visual elegance, interaction delight
Dari UX Design: User empathy, research-driven decisions, iterative improvement

Modern designers semakin membutuhkan skills across semua three areas (GalaxyUX, 2025). Dalam kursus ini, fokus pada UI/UX design dengan understanding dari web design principles.

Pedagogical Approach untuk Module A

Ini bukan lecture-only. Gunakan interactive discovery:

Exercise 1: Platform Analysis

• Berikan 3 apps: 1 dengan excellent UX, 1 dengan excellent UI, 1 dengan balanced keduanya

• Minta mahasiswa analyze: What makes UX good? What makes UI good? How do they work together?

• Diskusi: Identify specific UI elements, specific UX flows, how they serve each other

Exercise 2: Terminology Clarification

• Minta mahasiswa describe design problem dalam context UMKM atau local business

• Have different students propose: Web design solution, UI design solution, UX design solution

• Highlight differences dalam approach, focus, deliverables

Exercise 3: Principle Application

• Show screenshot dari poorly designed interface

• Ask: Which principles violated? How would you fix berdasarkan simplicity principle? accessibility principle? consistency principle?

• Document recommendations

Exercise 4: Reflection
Create personal learning journal:

• Document understanding dari web design, UI, UX

• Reflection questions: How do these disciplines overlap? How do I position my learning? What excited me most?

• Deliverable: 1-2 page reflection document