Bagaimana implementasi mockup design

Slide 1

Slide 1 text

Bagaimana Implementasi Mockup Design GDSC UIN Jakarta - 28 Nov 2021 Image by pexels.com

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Penyangkalan Image by pexels.com

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Perjalanan karir saya Image by pexels.com

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Membangun di publik Image by pexels.com

Slide 9

Slide 9 text

ksana.in/gh

Slide 10

Slide 10 text

Lulus mau kerja apa? Image by pexels.com

Slide 11

Slide 11 text

👋 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

Slide 12

Slide 12 text

Keuntungan jadi Frontend Developer Image by pexels.com

Slide 13

Slide 13 text

● 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

Slide 14

Slide 14 text

Siapa sih Frontend Dev? Image by pexels.com

Slide 15

Slide 15 text

Pengguna BE App FE App DB Icons by iconﬁnder.com

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Frontend Javascript CSS HTML

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Tantangan yang dihadapi Image by pexels.com

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Bagaimana implementasi design menjadi baris kode Image by pexels.com

Slide 25

Slide 25 text

Jenis Mockup: - Low Fidelity - High Fidelity - Prototyping

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Dari mana memulainya? Image by pexels.com

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Permudah jalan kesana Image by pexels.com

Slide 31

Slide 31 text

Internship Portofolio Learn & Exploration Re-share Connections

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

33 Pelajari cara belajar yang efektif

Slide 34

Slide 34 text

Bloom Taxonomy

Slide 35

Slide 35 text

35 Cari teman belajar dan mentor

Slide 36

Slide 36 text

36 Jangan lupa belajar fundamental & konsep

Slide 37

Slide 37 text

37 Jangan panik kalau ketemu error

Slide 38

Slide 38 text

38 Paksakan belajar Bahasa Inggris

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Image by pexels.com