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 full-size slide

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

    View full-size slide

  3. Penyangkalan
    Image by pexels.com

    View full-size 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 full-size slide

  5. Perjalanan karir saya
    Image by pexels.com

    View full-size 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 full-size slide

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

    View full-size slide

  8. Membangun di publik
    Image by pexels.com

    View full-size slide

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

    View full-size slide

  10. 👋 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 full-size slide

  11. Keuntungan jadi
    Frontend Developer
    Image by pexels.com

    View full-size slide

  12. ● 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Frontend
    Javascript
    CSS
    HTML

    View full-size slide

  17. 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 full-size slide

  18. Tantangan
    yang dihadapi
    Image by pexels.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Dari mana memulainya?
    Image by pexels.com

    View full-size slide

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

    View full-size slide

  27. Permudah jalan kesana
    Image by pexels.com

    View full-size slide

  28. Internship
    Portofolio
    Learn &
    Exploration
    Re-share
    Connections

    View full-size slide

  29. 33
    Pelajari cara
    belajar yang efektif

    View full-size slide

  30. Bloom
    Taxonomy

    View full-size slide

  31. 35
    Cari teman belajar
    dan mentor

    View full-size slide

  32. 36
    Jangan lupa belajar
    fundamental & konsep

    View full-size slide

  33. 37
    Jangan panik
    kalau ketemu error

    View full-size slide

  34. 38
    Paksakan belajar
    Bahasa Inggris

    View full-size slide

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

    View full-size slide

  36. Image by pexels.com

    View full-size slide