Slide DevCoach

DevCoach 138 : iOS | Desain Mobile App yang Menarik dan Efisien

Transcript

1. Dicoding Developer Coaching #138
2. Position Desain Mobile App yang Menarik dan Efisien Front-End Web Gilang Ramadhan Curriculum Mobile Developer
3. Developer Coaching #121 iOS Developer • Membangun aplikasi berbasis list dengan Table View di UIKit. • Mengenal SwiftUI beserta fitur-fitur-nya. • Membangun aplikasi berbasis list dengan SwiftUI. • Kelebihan dan kekurangan SwiftUI dibanding UIKit.
4. Learning Objectives • Memahami pentingnya penggunaan font dan warna ketika membuat sebuah design. • Memahami cara membangun tampilan antarmuka pengguna dengan baik. • Memahami cara membangun pengalam pengguna dengan baik. • Mengerti perbedaan teknik dalam menyusun tampilan aplikasi iOS dengan Android. • Mengetahui tahapan proses dalam membangun rancangan aplikasi iOS. iOS Developer
5. Kepuasan Pengguna iOS Developer
6. iOS Developer Kepuasan Pengguna adalah Segalanya 󰺖 Bintang satu dulu ya, kalau sudah diperbaiki saya kasih bintang lima
7. Penentuan Warna iOS Developer
8. Penentuan Warna Warna menjadi indikator yang penting. Color Emotion Guide: Setiap warna memiliki artinya masing-masing. Contohnya warna merah mencerminkan kasih sayang dan cinta. iOS Developer
9. Kombinasi Warna 1. Analogous Colors iOS Developer
10. Kombinasi Warna 1. Analogous Colors 2. Complementary Colors iOS Developer
11. Kombinasi Warna 1. Analogous Colors 2. Complementary Colors 3. Split Colors iOS Developer
12. Kombinasi Warna 1. Analogous Colors 2. Complementary Colors 3. Split Colors 4. Triadic Colours iOS Developer
13. Kombinasi Warna 1. Analogous Colors 2. Complementary Colors 3. Split Colors 4. Triadic Colours 5. Monochromatic iOS Developer
14. Tools Menentukan Warna 1. colorhunt.co 2. flatuicolors.com 3. materialpalette.com 4. colorzilla.com iOS Developer
15. Tipografi iOS Developer
16. Tipografi Tipografi adalah ilmu cetak atau seni percetakan. Teks yang sama, maknanya bisa menjadi berbeda. Oleh karena itu, kenali karakteristik setiap jenis font yang digunakan. iOS Developer
17. Mobile User Interface (UI) iOS Developer
18. User Interface (UI) Desain antarmuka pengguna adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman dan interaksi pengguna. iOS Developer
19. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey iOS Developer
20. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey iOS Developer
21. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey • Efisien dalam Penggunaan Alignment iOS Developer
22. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey • Efisien dalam Penggunaan Alignment • Interaction Design iOS Developer
23. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey • Efisien dalam Penggunaan Alignment • Interaction Design • Gunakanlah Lo Fi Design iOS Developer
24. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey • Efisien dalam Penggunaan Alignment • Interaction Design • Gunakanlah Lo Fi Design • Usahakan Teks Terlihat pada Gambar iOS Developer
25. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey • Efisien dalam Penggunaan Alignment • Interaction Design • Gunakanlah Lo Fi Design • Usahakan Teks Terlihat pada Gambar iOS Developer
26. Guide UI Design • Sebuah Aplikasi Memiliki Perjalanan/Journey • Efisien dalam Penggunaan Alignment • Interaction Design • Gunakanlah Lo Fi Design • Usahakan Teks Terlihat pada Gambar iOS Developer
27. Mobile User Experience (UX) iOS Developer
28. User Experience User experience adalah cara seseorang merasakan ketika menggunakan sebuah produk, sistem, atau jasa. iOS Developer
29. Guide UX Design 1. Usability iOS Developer
30. Guide UX Design 1. Usability 2. Asking for Permission iOS Developer
31. Guide UX Design 1. Usability 2. Asking for Permission 3. User Profiling iOS Developer
32. Guide UX Design 1. Usability 2. Asking for Permission 3. User Profiling iOS Developer
33. Guide UX Design 1. Usability 2. Asking for Permission 3. User Profiling 4. Form vs Function iOS Developer
34. Guide UX Design 1. Usability 2. Asking for Permission 3. User Profiling 4. Form vs Function iOS Developer
35. Guide UX Design 1. Usability 2. Asking for Permission 3. User Profiling 4. Form vs Function 5. Consistency iOS Developer
36. Guide UX Design 1. Usability 2. Asking for Permission 3. User Profiling 4. Form vs Function 5. Consistency 6. Simplicity iOS Developer
37. iOS vs Android iOS Developer
38. iOS vs Android Dalam membangun aplikasi iOS, ada beberapa hal yang perlu Anda perhatikan. • Navigation • Judul Sebuah Halaman • Icon iOS Developer
39. iOS Design Guidelines iOS Developer
40. iOS Design Guidelines Lakukan beberapa hal berikut sebelum membangun tampilan aplikasi iOS. 1. Design Pattern and Color Pattern iOS Developer
41. iOS Design Guidelines Lakukan beberapa hal berikut sebelum membangun tampilan aplikasi iOS. 1. Design Pattern and Color Pattern 2. User Flow Diagram iOS Developer
42. iOS Design Guidelines Lakukan beberapa hal berikut sebelum membangun tampilan aplikasi iOS. 1. Design Pattern and Color Pattern 2. User Flow Diagram 3. Wireframe (lo-fi) iOS Developer
43. iOS Design Guidelines Lakukan beberapa hal berikut sebelum membangun tampilan aplikasi iOS. 1. Design Pattern and Color Pattern 2. User Flow Diagram 3. Wireframe (lo-fi) 4. Mockup (hi-fi) iOS Developer
44. iOS Design Guidelines Lakukan beberapa hal berikut sebelum membangun tampilan aplikasi iOS. 1. Design Pattern and Color Pattern 2. User Flow Diagram 3. Wireframe (lo-fi) 4. Mockup (hi-fi) 5. Animated App Prototype iOS Developer
45. Human Interface Guideline (HIG) iOS Developer
46. iOS Developer
47. iOS Developer Desain aplikasi yang baik mempertimbangkan elemen-elemen seperti warna, tipografi, user interface (UI), dan user experience (UX), dengan fokus pada perjalanan pengguna, alignment, interaction design, usability, dan kesederhanaan untuk menciptakan pengalaman positif.
48. Thank You gilang-adhan gilang@dicoding.com iOS Developer
49. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback