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

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

    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