Premium Edition

Learn Flutter & Adobe XD: Build a Complete Mobile App

How to become Full-Stack Designer and Developer

Member

125 enrolled

Tingkatan
Sertifikat
Konsultasi

Develop Your Skills

Faktor pertama yang menjadi alasan pengguna menggunakan aplikasi e-commerce adalah tampilan antarmuka (UI) yang menarik. UI yang dirancang dengan baik dapat menanamkan kepercayaan pada produk yang ditawarkan, yang nantinya berpengaruh penting terhadap kelancaran bisnis produk tersebut. Kelas ini akan membahas proses pengembangan UI pada sisi Front-End secara lengkap, dari mendesain UI dengan Adobe XD sampai slicing desain ke Flutter.

Melalui case study “E-Commerce Story”, Adobe XD digunakan untuk membangun komponen UI (icon, tipografi, gambar, warna, dll) menjadi sebuah aplikasi utuh. Dengan Adobe XD, kita bisa menghasilkan high quality design sekaligus prototype guna memeriksa apakah interaksi dan navigasi pilihan kita sudah dirasa sesuai untuk dipakai secara nyata. Setelah desain selesai dibuat, proses berlanjut pada tahapan slicing design asset ke Flutter SDK. Slicing dilakukan untuk menulis coding dalam satu basis kode dengan beragam Widget praktis seperti Scaffold, Drawer, hingga Navigator.

Kelas ini cocok bagi Anda yang ingin mendalami desain aplikasi berskala besar. Bila menemukan kendala selama belajar, silakan berkonsultasi dengan para Mentor ahli kami di grup konsultasi. Segera daftar dan kami tunggu di kelas, ya!

Demo Project

Key Points

Mendesain aplikasi e-commerce dengan Adobe XD

Prototype UI Design dengan Adobe XD

Memahami Widget pada Flutter

Slicing UI Design ke Real Project dengan Flutter

Deploy Project ke Play Store

Sneak Peek

Designed For

Anda yang ingin mempelajari proses Design to Code

Anda yang ingin mempelajari UI/UX Design dengan Adobe XD

Anda yang ingin mempelajari Slicing UI ke Flutter

Anda yang ingin membangun aplikasi e-commerce

Anda yang ingin memiliki portofolio yang menjual

Anda yang ingin menjadi Front-End Developer

Learn With Expert

Tasya Agnes

Flutter Developer

Profile Mentor

Fini Charisa

UI Designer

Profile Mentor

Course Prerequisite

Kami rekomendasikan untuk mempelajari kelas di bawah

Happy Learning

Materi kelas yang bermanfaat untuk karir kita

1

Pembukaan

play_circle

Perkenalan Mentor 1 (Tasya)

1 mins

play_circle

Perkenalan Mentor 2 (Fini)

1 mins

2

Introduction UI Design

play_circle

Perkenalan UI

3 mins

play_circle

Perkenalan UX

3 mins

lock

Tools

5 mins

3

Dasar UI Design

lock

icon

7 mins

lock

Grid dan jarak

6 mins

lock

Warna

4 mins

lock

Tipografi dan Font

5 mins

4

Tahap UI Design

lock

Understand Part 1

4 mins

lock

Understand part 2

6 mins

lock

Research

6 mins

lock

User Flow

10 mins

lock

Wireframe Sketch

5 mins

5

Design UI - Component

lock

Perkenalan Tools Adobe XD Part 1

9 mins

lock

Perkenalan Tools Adobe XD part 2

5 mins

lock

Document Asset Typography

7 mins

lock

Document Asset Color

3 mins

6

Design UI - Page

lock

Home - Header

9 mins

lock

Home - Banner & Categories

10 mins

lock

Home - Product and Menu Bar

9 mins

lock

Home - Fix When Scrolling

2 mins

lock

Search Page

4 mins

lock

Product Page Part 1

9 mins

lock

Product Detail part 2

4 mins

lock

Cart Page

8 mins

lock

Checkout Page

10 mins

lock

Login Page

7 mins

lock

Register Page

2 mins

lock

Onboarding Screen

6 mins

lock

Empty State

3 mins

lock

Profile

11 mins

lock

Edit Profile

6 mins

lock

Address

2 mins

lock

History Page

9 mins

lock

History Detail

3 mins

lock

Notification

6 mins

7

Prototyping

lock

Prototype Part 1

7 mins

lock

Prototype - Product Detail Part 2

1 mins

lock

Prototype Part 3

8 mins

8

Finishing

lock

Membuat link & view setting

5 mins

lock

Export Asset

11 mins

9

Flutter Introduction

lock

Perkenalan Kelas (Adobe XD x Flutter Class)

2 mins

lock

Export Asset From Adobe XD

6 mins

10

Get Started Page

lock

Get Started Page - 1. Create New Project

7 mins

lock

Get Started Page - 2. Add Body

8 mins

lock

Get Started Page - Finishing

4 mins

11

Login Page

lock

Login Page - 1. Add Header

8 mins

lock

Login Page - 2. Add TextFormField

9 mins

lock

Login Page - Finishing

13 mins

12

Register Page

lock

Register Page - 1. Add body

9 mins

lock

Register Page - Finishing

5 mins

13

Home Page

lock

Home Page - 1. Export Asset & Add Navigator

9 mins

lock

Home Page - 2. Add First Header

10 mins

lock

Home Page - Finishing Header

3 mins

lock

Home Page - 3. Add Banner

16 mins

lock

Home Page - 4. Add Categories

15 mins

lock

Home Page - Add Product List

12 mins

lock

Home Page - Split Widget Product List

12 mins

lock

Home Page - Export Asset Bottom NavBar

5 mins

lock

Home Page - Bottom Navigation Bar (Finishing)

11 mins

14

Product Page

lock

Product Page - Add Body

13 mins

lock

Product Page - Bottom Navigation Bar

6 mins

15

Search Page

lock

Search Page

16 mins

16

Cart Page

lock

Cart Page - Add Body

14 mins

lock

Cart Page - Finishing

9 mins

17

Detail Page

lock

Detail Page - Add Header

8 mins

lock

Detail Page - Add Body

7 mins

lock

Detail Page - Add Body Part II

15 mins

lock

Detail Page - Finishing

9 mins

18

Notification Page

lock

Notification Page - Add Body

16 mins

lock

Notification Page - Finishing

6 mins

19

Order Details Page

lock

Order Details - Add Header

15 mins

lock

Order Details - Add Order Summary

7 mins

lock

Order Details - Finishing

10 mins

20

Payment Success Page

lock

Payment Success Page

9 mins

21

Profile Page

lock

Profile Page - Add Header

9 mins

lock

Profile Page - Add Body

13 mins

lock

Profile Page - Add Bottom Navigation Bar

7 mins

22

Edit Profile Page

lock

Edit Profile Page - Add Header

5 mins

lock

Edit Profile Page - Finishing

9 mins

23

Create New Address

lock

Create New Address

11 mins

24

Edit Address Page

lock

Edit Address Page

10 mins

25

Order History

lock

Order History - Add Header

6 mins

lock

Order History - Add Body

12 mins

26

Add Finishing Page

lock

Add Finishing Page

4 mins

27

Adding Navigator - Flow Page

lock

Adding Navigator - Flow Page

15 mins

28

Closing

lock

Closing

1 mins

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

Adobe XD

Software Gratis

Download Now

Flutter SDK

Software Gratis

Download Now

VSCode

Software Gratis

Download Now

125 Happy Members

Review setelah bergabung di kelas Learn Flutter & Adobe XD: Build a Complete Mobile App

Belum ada review.

Featured Projects

0 Hasil karya terbaik di kelas Learn Flutter & Adobe XD: Build a Complete Mobile App

Belum ada hasil karya.

#BeyondPremium

Start to Invest 100%

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

Selamanya

Rp 111,111

Miliki kelas Premium secara permanen
dan bangun sebuah projek nyata

Akses kelas selamanya

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Beli Kelas Lihat Benefit Lainnya

Berlangganan

Rp 0

Mengikuti kelas dengan waktu yang
terbatas dan biaya lebih hemat

Akses kelas terbatas

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Subscribe Kelas Lihat Benefit Lainnya

Pertanyaan Umum

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

WhatsApp Admin

Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels yang memberartikan bahwa cocok untuk seluruh tingkatan. Kami juga menyarankan calon member untuk mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.

Kami telah menyediakan kelas yang terstruktur dan well-designed oleh mentor yang berpengalaman sehingga akan sangat mudah untuk dipahami oleh siapa saja.

Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan untuk mendapatkannya, para member diwajibkan untuk menyelesaikan seluruh materi kelas dan juga Quiz yang telah disediakan oleh mentor.

Salah satu benefit unggulan kami adalah group konsultasi yang diberikan sebagai bonus untuk member yang telah mengikuti kelas Premium di platform BuildWith Angga. Silahkan menghubungi Admin untk mendapatkan akses pada group tersebut.

Kami mengizinkan member yang telah mengikuti kelas Premium untuk menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat utamanya adalah dengan memodifikasi sedikitnya yaitu 30% dari original project buatan mentor kelas tersebut.

Kami melarang member menjual atau membagikan hak akses kelas Premium kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari kita support creators Indonesia dengan cara membeli kelas secara resmi dan satu akun hanya untuk satu pengguna saja.

Kami tidak memperbolehkan member menjual kembali materi kelas di BuildWith Angga. Kami siap melanjutkan kepada proses hukum apabila Anda terbukti benar memperjualbelikan kelas kami secara ilegal.

Rp 111,111

Rp 485,000

Beli Kelas