1-Introduction to UIUX

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 Abstract Skeleton Structure Scope Strategy

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 Credit to Pablo Stanley Menetapkan Interaction Design • Mendeskripsikan bagaimana merespon aktivitas user Menetapkan model Information Architecture • Mendesain informasi yang diklasifikasi menjadi beberapa kelompok agar dapat memahami struktur produk dengan mudah

Skeleton Plane Credit to Pablo Stanley 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 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 Visual Design Business Goals Information Information Information Product Strategy Architecture Design Objective BrandComm Navigation Design

Strategy Scope Structure Skeleton Surface

Proses UX Design

User-Centered Design Design Design Lean Thinking Sprint UX

User-Centered Design Identify Need Specify Context Specify Evaluate of Use Requirement Design 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

Bisnis Sweet Spot Area IT User

Pro-Tips untuk Pemula

Tips UX Design untuk pemula Credit to Pablo Stanley 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 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 Credit to Pablo Stanley 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 5 Mulai membuat eksplorasi desain UI

Refactoring UI by Adam Wathan & Steve Schoger