Designing User-Friendly Interfaces: Bridging UI/UX and Basic Programming

Delivered for Socialization and Webinar Biomedical Engineering (SOWBI) X Bvatecamp TELKOM UNIVERSITY PURWOKERTO

Transcript

1. Designing User-Friendly Interfaces: Bridging UI/UX and Basic Programming Ahmad Arif Faizin Head of Academy Dicoding Indonesia Socialization and Webinar Biomedical Engineering SOWBI X Bvatecamp TELKOM UNIVERSITY PURWOKERTO
4. LEARNING OUTCOMES Hasil yang akan kita bawa pulang 01 Learn UI vs UX Ciri UX yang baik Design Thinking Prinsip Dasar Visual Design • Prinsip Dasar Layouting • • • • 02 Design • • • • • Perkenalan Figma Praktik Frame Grid Auto Layout 03 Build • • • • HTML vs CSS Element Tag Flexbox
5. UI/UX FUNDAMENTALS Mulai dari orang yang akan memakai Desain yang baik memudahkan orang menyelesaikan tugas.
6. JAWAB DI CHAT UI UX
7. THE DIFFERENCE UI adalah tampilan. UX adalah pengalaman. UI UX Apa yang dilihat dan disentuh oleh pengguna Apa yang dirasakan pengguna selama menggunakan Warna · tipografi · tombol · ikon Alur · kejelasan · efisiensi · rasa aman
8. A QUICK REALITY CHECK Terlihat modern belum tentu mudah digunakan “Terlihat menarikˮ MediNote Catatan Kunjungan Alergi: Penisil in PASIEN Raka Pratama Tekana n Darah 118/7 6 Denyut Jantung 72 SpO₂ 98% “Mudah digunakanˮ MediNote Catatan Kunjungan Alergi: Penisil in PASIEN Raka Pratama Suhu 36.7 °C Keluhan utama Tekana n Darah 118/7 6 Denyut Jantung 72 SpO₂ 98% Suhu 36.7 °C Keluhan utama Simpan Draft Pusing sejak pagi... Teks kecil · aksi tidak jelas · terlalu ramai Simpan Draft Pusing sejak pagi... Hierarki jelas · label lengkap · alur mudah dipahami
9. USER EXPERIENCE “UX is everything that touches upon your experience with the product.ˮ Don Norman
10. WHY IT MATTERS Why UX is Important?
11. JAWAB DI CHAT Menurut kalian, aplikasi kesehatan apa yang memiliki UX yang bagus? Mengapa kamu suka?
12. GOOD UX UX yang baik punya empat ciri
13. Useful Menyelesaikan kebutuhan nyata
14. Usable Mudah dipahami dan digunakan
15. Enjoyable Terasa nyaman digunakan User Centered Design
16. Equitable Dapat digunakan secara adil • • • • Pikirkan tentang aksesibilitas untuk disabilitas (color modification, voice control, screen reader, alternative text, caption). Pertimbangkan Next Billion User (User dengan spek minimal, koneksi lambat, kurang literasi) Buat desain untuk berbagai platform (mobile, desktop, tablet, wearable, TV) Buat desain yang inklusif (tidak menyinggung SARA)
17. JAWAB DI CHAT Ada yang pernah mendengar Design Thinking?
18. FROM PROBLEM TO PROTOTYPE Design Thinking dalam satu gambar Empathize Amati pengguna Define Tentukan masalah Ideate Cari alternatif Prototype Buat rancangan Test Minta masukan
19. WORKSHOP CASE STUDY Kenalan dengan MediNote Kita akan membawa case ini dari awal sampai akhir nanti~
20. EMPATHIZE Merasakan apa yang mereka rasakan~ G Banyak kunjungan, waktu terbatas. S Mencatat data dengan cepat dan benar. NA Nadia, perawat Goal ! Pain Point Data tersebar. Isian sulit dipindai. Situation Berpindah antara pasien dan perangkat. N Need Butuh hierarki dan label yang jelas.
21. “There's no substitute for personally watching and listening to real people.ˮ — Larry Page, Founder, Google
22. DEFINE Masalah yang akan kita selesaikan Bagaimana kita dapat membantu petugas kesehatan... mencatat informasi pasien secara cepat, jelas, dan minim kesalahan? HOW MIGHT WE?
23. IDEATE Crazy Eight
24. PROTOTYPE Rancang Design
25. Elemen Dasar VISUAL DESIGN Tipografi Warna Ikonografi
26. TYPOGRAPHY Tipografi Gunakan font yang mudah dibaca dan bedakan tingkat informasinya.
27. TYPOGRAPHY Tips dalam Tipografi • • • Legibility : Mudah untuk dibaca Branding : Sesuai dengan brand perusahaan Consistency : Konsisten dalam ukuran dan font untuk tipe konten yang sama
28. COLOR Gunakan komposisi warna 603010
29. ACCESSIBILITY Tips dalam Penentuan Warna • • • Jangan terlalu banyak warna Gunakan color pallette: colorhunt.co, coolors.co Pilih warna yang kontras
30. ICONOGRAPHY Ikon harus mudah dikenali ♥ O₂ °C ! Denyut jantung Saturasi oksigen Suhu tubuh Alergi Gunakan ikon yang familier, konsisten, dan tidak berdiri sendiri.
31. ICONOGRAPHY Ikon lebih jelas jika disertai label ⌂ ✚ ≡ ⚙ ⌂ Home ✚ Catat ≡ Riwayat Apa arti setiap ikon? Ikon + label = lebih sedikit tebakan
32. Prinsip Dasar MENYUSUN LAYOUT Grid Containment White space
33. LAYOUT Grid menjaga posisi tetap konsisten
34. LAYOUT Containment untuk mengelompokkan informasi
35. LAYOUT White space memberi ruang nafas~
36. VISUAL PRINCIPLES Empat prinsip untuk mengatur perhatian U Emphasis ✓ Apa yang harus dilihat dulu? ☺ Proportion Apakah ukurannya masuk akal? Hierarchy Apa urutan kepentingannya? ∞ Unity Apakah semuanya terasa satu sistem?
37. Emphasis menentukan fokus pertama
38. Hierarchy menentukan urutan baca
39. Scale menjaga perbandingan ukuran
40. Unity menyatukan tampilan
41. “That's been one of my mantras - focus and simplicity. Simple can be harder than complex: you have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains.ˮ — Steve Jobs
42. TOOLS & BRIDGE Basic Design with Figma Sudah paham teorinya, Mari kita praktik bersama 👋
43. JAWAB DI CHAT Ada yang sudah pernah pakai Figma?
44. THE DESIGN TOOL Mengapa memakai Figma? V Visual C Ide langsung terlihat I Terukur Ukuran, warna, dan jarak dapat diperiksa Kolaboratif Mudah berbagi dan menerima masukan → Siap dikodekan Ukuran dan struktur dapat diterjemahkan ke kode
45. FIGMA ESSENTIALS Empat alat Figma yang dipakai hari ini U Frame ✓ Area layar yang akan dirancang ☺ Text Heading, label, dan isi Shape Card, line, dan container ∞ Align Merapikan posisi dan jarak
46. FIGMA ESSENTIALS Group Vs Frame Merapikan susunan, Atur arah, alignment, padding, dan gap pada satu frame secara otomatis.
48. FIGMA ESSENTIALS Auto Layout Merapikan susunan, Atur arah, alignment, padding, dan gap pada satu frame secara otomatis.
49. FIGMA ESSENTIALS Component Membuat elemen yang konsisten dengan mudah, tanpa harus mengubah satu per satu ketika terjadi perubahan desain
50. TOOLS & BRIDGE Basic Programming with HTML Hidupkan desain Anda menjadi halaman web yang nyata menggunakan VS Code!
51. HTML & CSS Di Balik Layar, Ada 3 Peran HTML The Skeleton CSS The Skin JavaScript The Brain
52. HTML FUNDAMENTALS HTML Element & Attributes Struktur elemen dengan konten: menentapkan informasi tambahan <elemen atribut="nilai atribut">Konten</elemen> nama elemen teks yang akan tampak pada browser Contoh: <h1 class="judul ILT">Fundamental AI dan Prompt Engineering</h1>
53. HTML FUNDAMENTALS HTML Punya Hierarki <!DOCTYPE html> <!-- Deklarasi dokumen --> <html lang="id"> <!-- Root element --> <head> <!-- Info tentang halaman --> <meta charset="UTF-8"> <title>Judul Halaman</title> </head> <body> <!-- Konten yang ditampilkan --> <h1>Heading Utama</h1> <p>Paragraf pertama</p> </body> </html>
54. SEMANTIC HTML Pakai elemen sesuai fungsinya 1 <header> 2 Identitas halaman 4 <form> Area input <main> 3 Konten utama 5 <label> Nama isian <section> Kelompok informasi 6 <button> Aksi pengguna
55. SEMANTIC HTML Cheatsheet HTML yang paling sering digunakan
56. CSS FUNDAMENTALS CSS Pemberi Rupa pada Halaman • • Kode Deklaratif untuk menetapkan style pada HTML element. Hal esensial untuk dipelajari di CSS ◦ Ragam Selector ◦ Format Teks dan Font ◦ Warna ◦ Layouting ◦ Responsive Design
57. CSS FUNDAMENTALS CSS mengatur tampilan .patient-card { padding: 24px; border-radius: 16px; background: #ffffff; } → selector + property + value Baca struktur dari luar ke dalam. Setiap baris punya peran.
58. CSS FUNDAMENTALS Box model mengatur ruang margin padding P Padding Jarak di dalam elemen. border CONTENT M Margin Jarak di luar elemen.
59. CSS LAYOUT Flexbox untuk satu arah, Grid untuk dua arah Flexbox Grid Satu arah: baris atau kolom Baris dan kolom sekaligus
60. FIGMA  CODE Slicing mengubah desain menjadi kode FIGMA HTML CSS Frame halaman <main> max-width · margin Auto Layout urutan elemen display: flex Auto Layout kumpulan card display: grid Fill & radius section/article background · border-radius Gap & padding : gap · padding
61. QUICK RECAP Cek ini sebelum mulai praktik 1 UX Mulai dari kebutuhan pengguna dan tugas yang harus selesai. 2 Figma Merekam struktur, hierarki, warna, dan jarak. Pertanyaan sebelum kita mulai? 3 Kode HTML membawa makna. CSS membawa tampilan.
62. GUIDED PRACTICE Workshop: landing page MediNote Talk is cheap, show me the code~
63. EXPECTED RESULT Hasil akhir: landing page MediNote MediNote Catatan Kunjungan PASIEN Alergi: Penisilin Raka Pratama Tekanan Darah Denyut Jantung SpO₂ Suhu 118/76 72 98% 36.7°C Keluhan utama Pusing sejak pagi... Simpan Draft
64. Cuss ikuti step by Step langkahnya di sini https://s.id/medinote
65. PROJECT SETUP Siapkan folder dan tiga file <> index.html Struktur dan konten landing page. {} styles.css Warna, jarak, layout, dan responsif. Tambahkan assets/hero-rme.png, lalu buka folder medinote di VS Code.
66. BUILD THE STRUCTURE Langkah HTML 1. Tulis kerangka dokumen <!doctype html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MediNote</title> <link rel="stylesheet" href="styles.css"> </head> <body></body> </html> → index.html Hubungkan styles.css di dalam <head>, lalu cek judul tab MediNote.
67. BUILD THE STRUCTURE Langkah HTML 2. Buat header dan navigasi <header class="site-header"> <div class="header-inner"> <a class="logo" href="#home">MediNote</a> <nav class="main-nav" aria-label="Navigasi utama"> <a class="active" href="#home">Home</a> <a href="#feature">Feature</a> <a href="#testimony">Testimony</a> <a href="#pricing">Pricing</a> <a href="#faq">FAQ</a> </nav> </div> </header> → <header> + <nav> Logo dan lima menu memakai tautan. Home diberi class active.
68. BUILD THE STRUCTURE Langkah HTML 3. Buat hero dan trust badge <main> <section class="hero" id="home"> <div class="trust-badge"> <span class="trust-icon">✓</span> <span>Terintegrasi resmi dengan Kemenkes RI / SATUSEHAT &amp; Enkripsi Data ISO 27001</span> </div> </section> </main> → Hero wrapper Letakkan trust badge di awal <section class="hero">.
69. BUILD THE STRUCTURE Langkah HTML 4. Headline dan deskripsi <h1> <span>Kelola Rekam Medis Elektronik Klinik &amp; Praktik</span> <span>Mandiri Lebih <strong>Cepat, Aman, dan Terintegrasi</strong></span> <span>SATUSEHAT</span> </h1> <p class="hero-description"> Solusi RME komprehensif berstandar Permenkes. </p> → Headline + deskripsi <strong> menandai frasa biru tanpa membuat section baru.
70. BUILD THE STRUCTURE Langkah HTML 5. Tambahkan dua tombol <div class="hero-actions"> <a class="button button-primary" href="#uji-coba"> Mulai Uji Coba Gratis </a> <a class="button button-secondary" href="#demo"> <span class="play-icon">▶</span> <span>Lihat Demo Interactive</span> </a> </div> → CTA links Class button membuat style kedua CTA dapat dipakai ulang.
71. BUILD THE STRUCTURE Langkah HTML 6. Masukkan hero image ✓ <div class="hero-image"> ✓ <img src="assets/hero-rme.png" ✓ alt="Tampilan aplikasi RME pada monitor"> ✓ </div>
72. HTML CHECKPOINT Langkah HTML 7. Gabungkan potongan <body> <header class="site-header">...</header> <main> <section class="hero" id="home"> ... <div class="hero-image">...</div> </section> </main> </body> → index.html lengkap Urutan header, hero, tombol, dan gambar harus sama seperti panduan.
73. APPLY THE STYLE Langkah CSS 1. Mulai dari variabel dan reset :root { --blue: #004ac6; --text: #101828; --muted: #475467; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, sans-serif; color: var(--text); background: #fff; } → Fondasi CSS Gunakan #004AC6 untuk logo, Home aktif, headline, dan tombol utama.
74. APPLY THE STYLE Langkah CSS 2. Tata header dan navigasi .site-header { padding: 32px 0; } .header-inner { max-width: 1416px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .main-nav { display: flex; gap: 32px; } .logo, .active { color: var(--blue); } → Header + navigasi Sejajarkan logo dan menu. Gunakan gap 32 px untuk navigasi.
75. APPLY THE STYLE Langkah CSS 3. Atur hero dan trust badge .hero { max-width: 1080px; margin: 48px auto 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .trust-badge { padding: 8px 16px; border-radius: 999px; } → Hero wrapper Lebar 1080 px, gap 24 px, dan semua konten rata tengah.
76. APPLY THE STYLE Langkah CSS 4. Atur headline dan tombol .hero h1 { margin: 0; font: 700 48px/1.15 Poppins, sans-serif; } .hero h1 strong { color: var(--blue); } .hero-actions { display: flex; gap: 16px; } .button { padding: 16px 24px; border-radius: 12px; font-weight: 700; } .button-primary { background: var(--blue); color: #fff; } → Hierarchy + CTA Gunakan Poppins untuk headline dan bentuk tombol yang konsisten.
77. RESPONSIVE DESIGN Langkah CSS 5. Gambar dan layar kecil .hero-image { width: 100%; overflow: hidden; border-radius: 32px; } .hero-image img { display: block; width: 100%; } @media (max-width: 760px) { .header-inner { grid-template-columns: 1fr; gap: 20px; } .main-nav { flex-wrap: wrap; justify-content: center; } .hero h1 { font-size: 36px; } .hero-actions { flex-direction: column; } } → Image + Media Query Radius gambar 32 px. Pada layar kecil, menu dan tombol boleh turun.
78. VISUAL QA Bandingkan Figma dan browser FIGMA MediNote BROWSER Catatan Kunjungan Alergi: Penisili n PASIEN Raka Pratama Tekanan Darah 118/7 6 Denyut Jantung 72 SpO₂ 98% MediNote Catatan Kunjungan Raka Pratama Suhu 36.7° C Keluhan utama Tekanan Darah 118/7 6 Denyut Jantung 72 SpO₂ 98% Suhu 36.7° C Keluhan utama Simpan Draft Pusing sejak pagi... Alergi: Penisili n PASIEN Simpan Draft Pusing sejak pagi... Periksa ukuran, gap, padding, alignment, warna, dan radius.
79. QUICK FIX Periksa parent sebelum menambah CSS ✓ Apakah styles.css sudah terhubung? ✓ Apakah class HTML dan selector CSS sama? ✓ Apakah path assets/hero-rme.png benar? ✓ Apakah ukuran, gap, padding, dan alignment mengikuti Figma?
80. SHARE & Q&A Tunjukkan hasilmu! Kirim screenshot di chat atau buka mic untuk berbagi satu hal yang berhasil dan satu hal yang masih membingungkan.
81. AI ACCELERATOR Bonus 1: buat draft UI dengan Stitch 1 Mulai dari tujuan dan konteks pengguna 2 Eksplorasi beberapa arah desain 3 Bawa hasilnya ke tool desain dan pengembangan Mulai Coba Tinjau stitch.withgoogle.com
83. AI ACCELERATOR Bonus 2: lanjutkan prototipe di Google AI Studio 1 Gunakan prompt untuk membuat draft aplikasi 2 Perbaiki struktur dan tampilan 3 Tinjau kembali HTML semantik dan aksesibilitas Mulai Coba Tinjau aistudio.google.com
85. KEY TAKEAWAYS Ringkasnya 01 Pahami Pahami tugas dan kebutuhan pengguna 02 Rancang Atur hierarki, jarak, dan pola visual 03 Bangun Susun HTML, lalu atur tampilannya dengan CSS
86. Closing Bagaimana sesi hari ini dalam satu kata? Jawab dengan satu kalimat pendek.
89. THANK YOU “Design is not just what it looks like and feels like. Design is how it works.ˮ Steve Jobs Ahmad Arif Faizin · Dicoding Indonesia