Akses kelas selamanya

Ambil Promo
flash sale
hamburger-menu

Kelas Online
Learn Flutter & Adobe XD: Build a Complete Mobile App

How to become Full-Stack Designer and Developer

icon global
Release date November 2021
icon convert
Last updated December 2024
Member

631 enrolled

Tingkatan
level
Sertifikat
icon_check
Konsultasi
icon_check

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!

Sneak Peek

Key Points

icon_check

Mendesain aplikasi e-commerce dengan Adobe XD

icon_check

Prototype UI Design dengan Adobe XD

icon_check

Memahami Widget pada Flutter

icon_check

Slicing UI Design ke Real Project dengan Flutter

icon_check

Deploy Project ke Play Store

Designed For

icon_check

Anda yang ingin mempelajari proses Design to Code

icon_check

Anda yang ingin mempelajari UI/UX Design dengan Adobe XD

icon_check

Anda yang ingin mempelajari Slicing UI ke Flutter

icon_check

Anda yang ingin membangun aplikasi e-commerce

icon_check

Anda yang ingin memiliki portofolio yang menjual

icon_check

Anda yang ingin menjadi Front-End Developer

Course Lessons

Learn With Expert

Mentor Fini Charisa

Fini Charisa

UI Designer

ic-star ic-star ic-star ic-star ic-star

(8.2K)

Mentor Tasya Agnes

Tasya Agnes

Front-End Developer

ic-star ic-star ic-star ic-star ic-star

(13.1K)

Our Happy Students

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

All Rating
Syam at BuildWithAngga
Syam

Full-Stack Developer

ic-star ic-star ic-star ic-star ic-star
Roki Ronaldi at BuildWithAngga
Roki Ronaldi

Mobile App Developer

Excellent! Thanks BWA.. read more

ic-star ic-star ic-star ic-star ic-star
Muhammad Yafi Azka at BuildWithAngga
Muhammad Yafi Azka

Mobile App Developer

Penjelasannya yang jelas, langkah-langkahnya yang mudah diikuti, dan contoh-contohnya yang sangat membantu, sangat direkomendasikan bagi siapapun yang ingin belajar Flutter. read more

ic-star ic-star ic-star ic-star ic-star
Ilham Faturahman at BuildWithAngga
Ilham Faturahman

Front-End Developer

Terbaik read more

ic-star ic-star ic-star ic-star ic-star
Vigo Firmansyah Putra at BuildWithAngga
Vigo Firmansyah Putra

Full-Stack Developer

Sangat informatif dan mudah dimengerti read more

ic-star ic-star ic-star ic-star ic-star
Hendrawan Wibowo at BuildWithAngga
Hendrawan Wibowo

Mobile App Developer

Kelas menambah insight baru terkait flutter read more

ic-star ic-star ic-star ic-star ic-star
Belum ada review
loader
Load More Reviews

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

logo

Adobe XD

Software Gratis

logo

Flutter SDK

Software Gratis

logo

VSCode

Software Gratis

#BeyondPremium
Tampaknya kelas ini sedang menutup pendaftaran baru.
Silahkan menunggu pendaftaran batch selanjutnya.
Similar Courses
Foto kelas Learn Flutter & Adobe XD: Build a Complete Mobile App Foto kelas Learn Flutter & Adobe XD: Build a Complete Mobile App Foto kelas Learn Flutter & Adobe XD: Build a Complete Mobile App

Learn Flutter & Adobe XD: Build a Complete Mobile App

How to become Full-Stack Designer and Developer

  • lock
    icon
    7 minutes
  • lock
    Grid dan jarak
    6 minutes
  • lock
    Warna
    4 minutes
  • lock
    Tipografi dan Font
    5 minutes

  • lock
    Understand Part 1
    4 minutes
  • lock
    Understand part 2
    6 minutes
  • lock
    Research
    6 minutes
  • lock
    User Flow
    10 minutes
  • lock
    Wireframe Sketch
    5 minutes

  • lock
    Perkenalan Tools Adobe XD Part 1
    9 minutes
  • lock
    Perkenalan Tools Adobe XD part 2
    5 minutes
  • lock
    Document Asset Typography
    7 minutes
  • lock
    Document Asset Color
    3 minutes

  • lock
    Home - Header
    9 minutes
  • lock
    Home - Banner & Categories
    10 minutes
  • lock
    Home - Product and Menu Bar
    9 minutes
  • lock
    Home - Fix When Scrolling
    2 minutes
  • lock
    Search Page
    4 minutes
  • lock
    Product Page Part 1
    9 minutes
  • lock
    Product Detail part 2
    4 minutes
  • lock
    Cart Page
    8 minutes
  • lock
    Checkout Page
    10 minutes
  • lock
    Login Page
    7 minutes
  • lock
    Register Page
    2 minutes
  • lock
    Onboarding Screen
    6 minutes
  • lock
    Empty State
    3 minutes
  • lock
    Profile
    11 minutes
  • lock
    Edit Profile
    6 minutes
  • lock
    Address
    2 minutes
  • lock
    History Page
    9 minutes
  • lock
    History Detail
    3 minutes
  • lock
    Notification
    6 minutes

  • lock
    Prototype Part 1
    7 minutes
  • lock
    Prototype - Product Detail Part 2
    1 minutes
  • lock
    Prototype Part 3
    8 minutes

  • lock
    Membuat link & view setting
    5 minutes
  • lock
    Export Asset
    11 minutes

  • lock
    Perkenalan Kelas (Adobe XD x Flutter Class)
    2 minutes
  • lock
    Export Asset From Adobe XD
    6 minutes

  • lock
    Get Started Page - 1. Create New Project
    7 minutes
  • lock
    Get Started Page - 2. Add Body
    8 minutes
  • lock
    Get Started Page - Finishing
    4 minutes

  • lock
    Login Page - 1. Add Header
    8 minutes
  • lock
    Login Page - 2. Add TextFormField
    9 minutes
  • lock
    Login Page - Finishing
    13 minutes

  • lock
    Register Page - 1. Add body
    9 minutes
  • lock
    Register Page - Finishing
    5 minutes

  • lock
    Home Page - 1. Export Asset & Add Navigator
    9 minutes
  • lock
    Home Page - 2. Add First Header
    10 minutes
  • lock
    Home Page - Finishing Header
    3 minutes
  • lock
    Home Page - 3. Add Banner
    16 minutes
  • lock
    Home Page - 4. Add Categories
    15 minutes
  • lock
    Home Page - Add Product List
    12 minutes
  • lock
    Home Page - Split Widget Product List
    12 minutes
  • lock
    Home Page - Export Asset Bottom NavBar
    5 minutes
  • lock
    Home Page - Bottom Navigation Bar (Finishing)
    11 minutes

  • lock
    Product Page - Add Body
    13 minutes
  • lock
    Product Page - Bottom Navigation Bar
    6 minutes

  • lock
    Search Page
    16 minutes

  • lock
    Cart Page - Add Body
    14 minutes
  • lock
    Cart Page - Finishing
    9 minutes

  • lock
    Detail Page - Add Header
    8 minutes
  • lock
    Detail Page - Add Body
    7 minutes
  • lock
    Detail Page - Add Body Part II
    15 minutes
  • lock
    Detail Page - Finishing
    9 minutes

  • lock
    Notification Page - Add Body
    16 minutes
  • lock
    Notification Page - Finishing
    6 minutes

  • lock
    Order Details - Add Header
    15 minutes
  • lock
    Order Details - Add Order Summary
    7 minutes
  • lock
    Order Details - Finishing
    10 minutes

  • lock
    Payment Success Page
    9 minutes

  • lock
    Profile Page - Add Header
    9 minutes
  • lock
    Profile Page - Add Body
    13 minutes
  • lock
    Profile Page - Add Bottom Navigation Bar
    7 minutes

  • lock
    Edit Profile Page - Add Header
    5 minutes
  • lock
    Edit Profile Page - Finishing
    9 minutes

  • lock
    Create New Address
    11 minutes

  • lock
    Edit Address Page
    10 minutes

  • lock
    Order History - Add Header
    6 minutes
  • lock
    Order History - Add Body
    12 minutes

  • lock
    Add Finishing Page
    4 minutes

  • lock
    Adding Navigator - Flow Page
    15 minutes

  • lock
    Closing
    1 minutes
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!

read more
Key Points
  • check
    Mendesain aplikasi e-commerce dengan Adobe XD
  • check
    Prototype UI Design dengan Adobe XD
  • check
    Memahami Widget pada Flutter
  • check
    Slicing UI Design ke Real Project dengan Flutter
  • check
    Deploy Project ke Play Store
Created For
  • check
    Anda yang ingin mempelajari proses Design to Code
  • check
    Anda yang ingin mempelajari UI/UX Design dengan Adobe XD
  • check
    Anda yang ingin mempelajari Slicing UI ke Flutter
  • check
    Anda yang ingin membangun aplikasi e-commerce
  • check
    Anda yang ingin memiliki portofolio yang menjual
  • check
    Anda yang ingin menjadi Front-End Developer
For Your Career
phone
Akses Selamanya
Belajar lebih santai & produktif
private
Assets & Grup Private
Diskusi belajar agar lebih terarah
project
Sertifikat & Portfolio
Gunakan untuk modal bekerja
631
Happy Students
Syam at BuildWithAngga
Syam

Full-Stack Developer

Nice

ic-star ic-star ic-star ic-star ic-star
Roki Ronaldi at BuildWithAngga
Roki Ronaldi

Mobile App Developer

Excellent! Thanks BWA..

ic-star ic-star ic-star ic-star ic-star
Muhammad Yafi Azka at BuildWithAngga
Muhammad Yafi Azka

Mobile App Developer

Penjelasannya yang jelas, langkah-langkahnya yang mudah diikuti, dan contoh-contohnya yang sangat membantu, sangat direkomendasikan bagi siapapun yang ingin belajar Flutter.

ic-star ic-star ic-star ic-star ic-star
Ilham Faturahman at BuildWithAngga
Ilham Faturahman

Front-End Developer

Terbaik

ic-star ic-star ic-star ic-star ic-star
Vigo Firmansyah Putra at BuildWithAngga
Vigo Firmansyah Putra

Full-Stack Developer

Sangat informatif dan mudah dimengerti

ic-star ic-star ic-star ic-star ic-star
Hendrawan Wibowo at BuildWithAngga
Hendrawan Wibowo

Mobile App Developer

Kelas menambah insight baru terkait flutter

ic-star ic-star ic-star ic-star ic-star
loader

Pertanyaan Umum

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

Contact CS

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.

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 BuildWithAngga. Silakan 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 BuildWithAngga. Kami siap melanjutkan kepada proses hukum apabila Anda terbukti benar memperjualbelikan kelas kami secara ilegal.

Silahkan menunggu pendaftaran batch selanjutnya

arrow_upward