Introduction to

UI/UX Design
UI/UX Design Class for Beginner
Outline materi

1 Apa itu UI & UX?

2 Element of UX Design

3 Proses UX Design

4 Pro-Tips untuk Pemula

Credit to Pablo Stanley

Apa itu UI & UX?
 User Interface

UI is the design of user interfaces for machines and

software, such as computers, home appliances,
mobile devices, and other electronic devices, with
the focus on maximizing usability and the user
experience.
 User Experience

UX is the process of supporting user behavior

through usability, usefulness, and desirability
provided in the interaction with a product.
 UX UI
What you feel when What you see & do
you use a thing when you use a thing
UX Design ditemukan oleh
Don Norman pada 1995
 UX UI
User Research Information Architecture UI Trends UI Styleguide UI Mockup

Personas Usability Testing Prototyping Design Handoff

Journey Mapping Task Analysis User Flow DesignOps

Usability Metric Wireframing Interaction Design

Element of UX Design
The Five Planes of UX Design
Concrete

Surface
Skeleton
Structure
Scope
Strategy
Abstract
Strategy Plane
Menetapkan kebutuhan user
• Apa permasalahan yang akan
dipecahkan?
• Siapa target usernya? Apa
kebutuhan mereka?

Menetapkan objektif Product/Business

• Idetifikasi solusi yang dapat
mencapai tujuan bisnis
Credit to Pablo Stanley
Scope Plane
Menetapkan spesifikasi fungsional
• Menentukan kemampuan sistem dalam
menunjang fungsionalitas produk

Menetapkan kriteria konten

• Menjelaskan bagaimana sistem
melakukan komunikasi ke user
• Memberi detail strategi informasi yang
sesuai dengan Brand Communication
Credit to Pablo Stanley
Structure Plane
Menetapkan Interaction Design
• Mendeskripsikan bagaimana
merespon aktivitas user

Menetapkan model Information Architecture

• Mendesain informasi yang diklasifikasi
menjadi beberapa kelompok agar dapat
Credit to Pablo Stanley
memahami struktur produk dengan
mudah
Skeleton Plane
Menetapkan Interface Design
• Mendesain elemen yang dapat berjalan secara
fungsional

Menetapkan Information Design

• Menetapkan elemen informasi yang dapat
memberikan penjelasan untuk masing-masing
fungsionalistas

Menetapkan Navigation Design

• Mendesain tampilan utama yang dapat Credit to Pablo Stanley

mempermudah user dalam menavigasikan produk

Surface Plane
Menetapkan Sensory Design
• Menentukan susunan informasi
yang akan di tampilkan secara
visual
• Menentukan respon sistem pada
saat user melakukan suatu action
(suara/visual)

Credit to Pablo Stanley

Strategy Scope Structure Skeleton Surface

Problem Kemampuan Interaction Interface Respon

Statement Sistem Design Design Sistem

Target User Information Information Information Visual Design

Strategy Architecture Design
Business Goals
BrandComm Navigation
Product Design
Objective
Strategy Scope Structure Skeleton Surface
Proses UX Design
 User-Centered Design

Design Design Lean

Thinking Sprint UX
User-Centered Design

Identify Need

Specify Context
of Use

Evaluate Specify
Design Requirement

Produce Solution
Design
Design Thinking
Design Sprint 2.0
Lean UX
Hal yang perlu diingat

1 Tidak semua design process harus

dilakukan di setiap situasi/kondisi

2 Design process hanya

mempermudah dalam mencari solusi

3 Dalam sesi workshop harus saling menghormati

4 Usahakan ada sponsor dalam sesi workshop

 Sweet Spot
Bisnis Area

IT User
Pro-Tips untuk Pemula
Tips UX Design untuk pemula

1 Cari permasalahan di sekitarmu

(bisa jadi apapun)

2 Gali lebih dalam untuk

permasalahan yang dihadapi user

3 Buat solusi desain

4 Evaluasi setiap solusi dengan Usability Testing

Credit to Pablo Stanley

5 Dokumentasikan setiap proses dan tulis di Medium

 Credit to Pablo Stanley

Ulangi lagi, lagi, dan lagi…

Hingga kamu terlatih untuk dapat mengetahui kebutuhan user
Tips UI Design untuk pemula

1 Mulai dari aplikasi yang paling kamu

suka (contoh: Instagram or Tiktok)

2 Desain sama persis dengan aplikasi

tersebut

3 Identifikasi setiap aturan UI

4 Ulangi terus sampai kamu jago Credit to Pablo Stanley

5 Mulai membuat eksplorasi desain UI

Refactoring UI
by Adam Wathan & Steve Schoger