Bagaimana implementasi mockup design

Menceritakan bagaimana sebuah mockup design bisa sampai ke dalam web

Transcript

1. Bagaimana Implementasi Mockup Design GDSC UIN Jakarta - 28 Nov 2021 Image by pexels.com
2. 2 Irfan Maulana Principal Engineer Web Platform @ Tokopedia mazipan.space
3. Penyangkalan Image by pexels.com
4. 👋 Penyangkalan Saya tidak mewakili Tokopedia, jadi segala materi dalam sesi kali ini bukan datang dari Tokopedia, melainkan pendapat pribadi saya. Beberapa materi merupakan pendapat pribadi yang bisa jadi sesuai ataupun tidak sesuai dengan kondisi kalian, segala resiko dari kesalahan penerjemahan maksud dari isi materi bukanlah menjadi tanggung jawab saya. Materi ini dimaksudkan untuk kegiatan belajar bersama, dan tidak untuk dikomersialkan.
5. Perjalanan karir saya Image by pexels.com
6. 2008 2009 2009-2013 2013 2008 Lulus SMK Akuntansi 2009 2009-2013 2013 Pekerjaan formal pertama: Kasir swalayan populer Kuliah di UMJ Sembari kerja di Pabrik Roti Pekerjaan pertama sebagai programmer ksana.in/mzp.cerita-saya
7. 2013 2015 2018 2019 2013-2015 Java Web Developer 2015-2018 Frontend Devs 2018-2019 Frontend Devs 2019-present Principal Eng
8. Membangun di publik Image by pexels.com
9. ksana.in/gh
10. Lulus mau kerja apa? Image by pexels.com
11. 👋 Pekerjaan di sekitar software development Developer Data Cyber Security DevOps/Cloud/SRE Network/SysOps QA/TE IOT Engineer Performance Eng Dan lainnya... IT Support AI/ML Engineer DBA
12. Keuntungan jadi Frontend Developer Image by pexels.com
13. • Gap buat pemula cukup rendah • Dasar-dasarnya sudah diajarkan di kampus • Bisa dipelajari sendiri, cukup mudah, bisa secara daring • Lebih mudah mendistribusikan portofolio • Lebih bisa dilihat hasil kerjanya • Bisa membangun multi platform Apps dengan web • Sudah punya daya saing yang cukup baik dengan developer lainnya dalam memberikan dampak
14. Siapa sih Frontend Dev? Image by pexels.com
15. Pengguna BE App FE App DB Icons by iconfinder.com
17. PHP Python Java C# RUby Kotlin Rust SCALA Go Nodejs Typescript
18. Frontend Javascript CSS HTML
19. Backend Frontend APIs Authentication & authorization DB Cache System Messaging Web Security CI/CD Containerization etc... Layouting Interaction Data Fetching UI Kit Performance CI/CD etc...
20. Tantangan yang dihadapi Image by pexels.com
21. Various Platform/Device Web Performance Design JS Fatigue Testing ksana.in/susahnya-jadi-frontend
22. Bagaimana sebuah design bisa sampai ke pengguna? Image by pexels.com
24. Bagaimana implementasi design menjadi baris kode Image by pexels.com
25. Jenis Mockup: - Low Fidelity - High Fidelity - Prototyping
26. Alat Kolaborasi: - Figma - Sketch - Adobe XD - Framer - InVision
27. Persiapan: - Pilih framework - Bangun design system/UI Kit sederhana - Slicing HTML+CSS berdasarkan spesifikasi design - Tambahkan interaksi - Jahit dengan data (jika diperlukan)
28. Dari mana memulainya? Image by pexels.com
29. Dari mana memulainya? https://roadmap.sh/frontend
30. Permudah jalan kesana Image by pexels.com
31. Internship Portofolio Learn & Exploration Re-share Connections
33. 33 Pelajari cara belajar yang efektif
34. Bloom Taxonomy
35. 35 Cari teman belajar dan mentor
36. 36 Jangan lupa belajar fundamental & konsep
37. 37 Jangan panik kalau ketemu error
38. 38 Paksakan belajar Bahasa Inggris
39. 39 Sekian dan terima kasih Silahkan bertanya... Slide bisa diunduh di ksana.in/slide-gdsc-uin
40. Image by pexels.com