Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bagaimana implementasi mockup design

Bagaimana implementasi mockup design

Menceritakan bagaimana sebuah mockup design bisa sampai ke dalam web

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

November 26, 2021
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

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

  16. None
  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

  23. None
  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

  32. None
  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