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
   

   View Slide

2. 2
   Irfan Maulana
   Principal Engineer Web Platform @ Tokopedia
   mazipan.space
   

   View Slide

3. Penyangkalan
   Image by pexels.com
   

   View Slide

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.
   

   View Slide

5. Perjalanan karir saya
   Image by pexels.com
   

   View Slide

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
   

   View Slide

7. 2013 2015 2018 2019
   2013-2015
   Java Web Developer
   2015-2018
   Frontend Devs
   2018-2019
   Frontend Devs
   2019-present
   Principal Eng
   

   View Slide

8. Membangun di publik
   Image by pexels.com
   

   View Slide

9. ksana.in/gh
   

   View Slide

10. Lulus mau kerja apa?
    Image by pexels.com
    

    View Slide

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
    

    View Slide

12. Keuntungan jadi
    Frontend Developer
    Image by pexels.com
    

    View Slide

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
    

    View Slide

14. Siapa sih Frontend Dev?
    Image by pexels.com
    

    View Slide

15. Pengguna
    BE App
    FE App
    DB
    Icons by iconfinder.com
    

    View Slide

16. View Slide

17. PHP
    Python
    Java
    C#
    RUby
    Kotlin
    Rust
    SCALA
    Go
    Nodejs
    Typescript
    

    View Slide

18. Frontend
    Javascript
    CSS
    HTML
    

    View Slide

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

    View Slide

20. Tantangan
    yang dihadapi
    Image by pexels.com
    

    View Slide

21. Various Platform/Device
    Web Performance
    Design
    JS Fatigue
    Testing
    ksana.in/susahnya-jadi-frontend
    

    View Slide

22. Bagaimana sebuah
    design bisa sampai ke
    pengguna?
    Image by pexels.com
    

    View Slide

23. View Slide

24. Bagaimana implementasi
    design menjadi baris kode
    Image by pexels.com
    

    View Slide

25. Jenis Mockup:
    - Low Fidelity
    - High Fidelity
    - Prototyping
    

    View Slide

26. Alat Kolaborasi:
    - Figma
    - Sketch
    - Adobe XD
    - Framer
    - InVision
    

    View Slide

27. Persiapan:
    - Pilih framework
    - Bangun design system/UI Kit sederhana
    - Slicing HTML+CSS berdasarkan
    spesifikasi design
    - Tambahkan interaksi
    - Jahit dengan data (jika diperlukan)
    

    View Slide

28. Dari mana memulainya?
    Image by pexels.com
    

    View Slide

29. Dari mana memulainya?
    https://roadmap.sh/frontend
    

    View Slide

30. Permudah jalan kesana
    Image by pexels.com
    

    View Slide

31. Internship
    Portofolio
    Learn &
    Exploration
    Re-share
    Connections
    

    View Slide

32. View Slide

33. 33
    Pelajari cara
    belajar yang efektif
    

    View Slide

34. Bloom
    Taxonomy
    

    View Slide

35. 35
    Cari teman belajar
    dan mentor
    

    View Slide

36. 36
    Jangan lupa belajar
    fundamental & konsep
    

    View Slide

37. 37
    Jangan panik
    kalau ketemu error
    

    View Slide

38. 38
    Paksakan belajar
    Bahasa Inggris
    

    View Slide

39. 39
    Sekian dan terima kasih
    Silahkan bertanya...
    Slide bisa diunduh di
    ksana.in/slide-gdsc-uin
    

    View Slide

40. Image by pexels.com
    

    View Slide