UI design adalah tentang tampilan visual dan interaksi antarmuka yang digunakan pengguna. UX design adalah tentang pengalaman pengguna secara keseluruhan saat menggunakan produk digital.

1. UI/UX DESIGN
Bambang Herlandi
www.bambangherlandi.web.id

2. APA ITU UI/UX?
• UI merupakan singkatan dari User Interface
• UX merupakan singkatan dari User Experience.
www.bambangherlandi.web.id

3. APA ITU UI?
• UI atau User Interface adalah proses dimana menampilkan sebuah hasil dalam bentuk tampilan
yang dapat dilihat oleh pengguna (user).
• Lebih tepatnya adalah bagian visual dari website, software, maupun hardware untuk user dapat
berinteraksi.
• Tujuan dari User Interface sendiri adalah untuk meningkatkan fungsionalitas serta user
experience dari pengguna.
www.bambangherlandi.web.id

4. APA ITU UX?
• UX atau User Experience adalah proses dimana pengguna dapat berinteraksi dengan interface
secara baik dan nyaman.
• Tujuan dari UX adalah untuk meningkatkan kepuasan pengguna saat mengakses sebuah
tampilan, baik dari sisi website, mobile, maupun desktop. UX sendiri menjadi sebuah
penghubung antara pengguna dengan produk.
www.bambangherlandi.web.id

5. www.bambangherlandi.web.id
 App structure
 Functionality
 User journey
 Empathy maps
 Icon & visual style
 Design system
 Production
 User research
 Discovery
 Layout &
interactive design
 User testing
UX UI

6. PERAN SEORANG UI/UX DESIGNER
• Setiap perusahaan maupun startup tentunya berlomba-lomba untuk meningkatkan kualitas dari
produk yang dihasilkan, baik dari segi fungsionalitas maupun dari kualitas tampilannya.
• Dunia IT orang yang ahli dalam bidang UI/UX disebut dengan UI/UX designer.
• Tugas dari posisi tersebut tentunya tidak hanya sekedar ahli dalam membuat sebuah desain
maupun tampilan kasar dari aplikasi. Akan tetapi, UI/UX Designer juga harus memperhatikan
mengenai fungsionalitas dan tampilan dari desain awal yang akan dibuat untuk perangkat
lunak.
www.bambangherlandi.web.id

7. KOMPONEN DALAM UI/UX
Informasi
Arsitektur
Hierarki
Sekuensial
Matriks
Interaksi
Desain
Fungsionalitas Prototype Desain Visual
www.bambangherlandi.web.id

8. ASPEK UI/UX
Segi penggunaan (usability).
Segi tampilan visual.
Konsistensi pada desainnya.
www.bambangherlandi.web.id

9. TAHAPAN PEMBUATAN USER INTERFACE
Persiapan
Wireframe
Mockup
Prototype
www.bambangherlandi.web.id

10. TAHAPAN PERSIAPAN PEMBUATAN UI
Menentukan masalah yang ingin Anda selesaikan
Mengenali pengguna produk Anda
Melihat apa yang telah dilakukan pesaing di bidang produk Anda
Mengumpulkan persyaratan produk secara keseluruhan
www.bambangherlandi.web.id

11. TAHAPAN PEMBUATAN WIREFRAME UI
• Wireframe merupakan sebuah sketsa kasar
tampilan aplikasi atau website.
• Biasanya digunakan untuk menyusun tata
letak awal dalam suatu desain.
• Wireframe ini bisa dicoret-coret tangan atau
menggunakan tools atau aplikasi khusus
bikin wireframe.
• Biasanya wireframe dibuat dengan warna
hitam putih yang lebih menekankan isi dari
kontennya.
www.bambangherlandi.web.id

12. TAHAPAN PEMBUATAN MOCKUP UI
• Mockup memberikan gambaran secara detail
sebelum produk dibuat dengan menyampaikan
aspek desain visual, termasuk gambar, warna,
dan tipografi.
• Mockup dapat mengorganisir detail dari
proyek, menerjemahkan ide ke dalam bahasa
yang dapat dimengerti stakeholders,
menyampaikan ide kepada anggota tim,
implementasi desain, dan melihat perspektif
user.
• Mockup bersifat statis dan tidak bisa
dioperasikan.
www.bambangherlandi.web.id

13. TAHAPAN PEMBUATAN PROTOTYPE UI
• Prototype adalah sebuah simulasi interaksi
antara pengguna dan tampilan (interface)
dimana user atau pengguna dapat melihat dan
berinteraksi dengan user interface secara
langsung.
• Mungkin tidak tampak persis seperti produk
akhir, tetapi mendekati desain produk aslinya.
• Dengan ini harapannya kita mendapat
masukan dari pengguna, bagian mana yang
mudah dimengerti dan bagian mana yang susah
mengerti atau bahkan bingung.
www.bambangherlandi.web.id

14. TAHAPAN MELAKUKAN USER EXPERIENCE
Product
Definition
Research
Analysist
Design
Implementation
Evaluate
www.bambangherlandi.web.id

15. APA YANG HARUS DIPELAJARI SEBAGAI UI
DESIGNER
Introduction
to UI design
Brand and
personality
Layout
Design
principles
Interactivity
Typography
Colour,
shapes and
effects
Iconography
and imagery
Design
process
Presenting
designs
Project and
portfolio
UI design
tools
www.bambangherlandi.web.id

16. ALAT UNTUK DESAIN UI
Adobe XD Figma Sketch
Invision
Studio
Adobe
Illustration
Adobe
Photoshop
www.bambangherlandi.web.id

17. APA YANG HARUS DIPELAJARI SEBAGAI UX
DESIGNER
Introduction
to UX design
User
research
Analysis
techniques
Structure
and
navigation
Interactions
Design
principles
Design
patterns
Mobile UX Workflows
Prototyping
and
handover
Portfolio
projects
www.bambangherlandi.web.id

18. ALAT UNTUK DESAIN UI
Lookback.io FlowMap Sketch Balsamiq Hotjar Miro
www.bambangherlandi.web.id

19. REFERENSI
• https://www.uxdesigninstitute.com/
• https://id.quora.com/Bagaimana-tahapan-desain-UI-UX-itu
• https://www.techfor.id/proses-desain-user-experience-ux/
• https://ingearfa.wordpress.com/2018/02/03/ui-ux-5-apa-saja-tahapan-dalam-ui-ux-design/
• https://sis.binus.ac.id/2016/07/29/user-experience-design-process/
www.bambangherlandi.web.id

20. www.bambangherlandi.web.id
bambangherlandi
www.bambangherlandi.web.id