15 Hari Menjadi Full-Stack Designer

Mulai dari Research sampai bisa Ngoding!

Design akan terlihat seperti pada contoh di atas

Author:
- Angga Risky (​https://youtube.com/anggarisky​)
- Sandhika Galih (​http://youtube.com/webprogrammingunpas

Tools:
- Adobe XD ​(Gratis, Nanti kita Download Bersama)
- Visual Studio Code ​(Gratis, Nanti kita Download Bersama)
- Boostrap 4 ​(Gratis, Nanti kita Download Bersama)

Deskripsi:

Kelas yang akan membawa kamu untuk belajar bagaimana menjadi seorang ​Full-Stack
Designer,​ di mana mempelajari dasar-dasar ​UX​ dan ​UI​ design serta belajar koding untuk
client-side dalam membangun sebuah website toko online menggunakan ​Adobe XD​ dan
Framework ​Bootstrap​ (latest version)
Pada kelas ini, kamu akan belajar bagaimana membangun sebuah produk yang mudah
digunakan untuk pengguna menggunakan teknik ​UX design​ dan membuat produk yang
cantik dari segi visual.

Kamu juga, akan belajar dasar-dasar ​HTML5​, ​CSS3​, dan juga ​JavaScript​ serta ​Bootstrap
4​ (framework Front-End) untuk membuat website lebih interaktif.

Materi (Kelas UX) oleh Angga Risky :

# Adobe XD Pemula
- Perkenalan ​VIDEO SELESAI DIBUAT
- Tools Dasar ​VIDEO SELESAI DIBUAT
- Tools Dasar II ​VIDEO SELESAI DIBUAT
- Prototype ​VIDEO SELESAI DIBUAT
- Kolaborasi Designer & Developer ​VIDEO SELESAI DIBUAT

# Warming Up
- Perkenalan UX ​VIDEO SELESAI DIBUAT
- Tools untuk UX Designer ​VIDEO SELESAI DIBUAT

# Basic UX
- Research
- Competitive Research ​VIDEO SELESAI DIBUAT
- Survey ​VIDEO SELESAI DIBUAT
- Customer Persona

# GO UX
- Wireframe
- Landing Page
- Product Page
- Checkout Page
- Category Page
- Success Checkout Page
- Prototype
- User-Testing
- Interview

Materi (Kelas UI) oleh Angga Risky :

# Warming Up
- Perkenalan UI
- Tools untuk UI Designer

# Basic UI
 - Graphic Designer vs. UI Designer
- UI vs. UX

# Basic II UI
- Design Style
- Grid System
- Color
- Typography
- Icon
- Illustration
- Tips Pilih Foto Produk

# Hard UI
- Transformasi Wireframe ke Visual
- Landing Page
- Product Page
- Checkout Page
- Category Page
- Success Checkout Page

# Finalizing
- Tools untuk kolaborasi Designer dan Developer
- Assets untuk Developer
- Support Developer (Selama Projek Berlangsung)

Materi (Kelas Front-End) oleh Sandhika Galih :

# Warming Up
- Course Intro
- Penjelasan Web Application Framework
- Apa itu Bootstrap & kenapa kita menggunakannya?
- Apa yang baru di Bootstrap versi 4
- Environment Setup, Software & Pre-Requisite
- Simple Bootstrap setup

# Bootstrap 4
# Basic HTML Elements
- Intro
- Typography & Code
- Images & Figures
- Tables

# Utilities
- Intro
- Text Alignment
 - Float & Fixed Position
- Colors & Background
- Border & Shadow
- Sizing & Spacing

# CSS Components
- Intro
- Navs & Navbar
- Jumbotron
- List Group & Badges
- Forms & Input
- Input Groups
- Cards

# Grid System & Flexbox

- Intro
- Container, row & column
- Mobile first design & responsive breakpoints
- Grid system
- Flexbox utilities

# Project (Online Shop Web Design)

- Intro
- Landing Page
- Product Page
- Checkout Page
- Category Page
- Success Checkout Page

# Contoh video pembelajaran

- Design VCards Adobe Xd
https://www.youtube.com/watch?v=30RE5QH3UO0&t=14s

- Ngoding VCards Bootstrap 4

https://www.youtube.com/watch?v=JzOvojgB4ZA

Harga Kelas Online:

- Masa Pre Order (19 Mei — 9 Juli): ​IDR 250.000
- Harga Normal (10 Juli): ​IDR 388.000
*bayar sekali, akses video dan konsultasi selamanya

Catatan Penting:
- Video akan diletakan pada ​Google Drive ​dan bebas akses selamanya
 - Dengan mengikuti kelas online ini, kalian mendapatkan akses ke serangkaian video
pembelajaran sesuai dengan materi yang sudah ditulis di atas
- Proses belajar dilakukan secara mandiri setelah kalian mendapatkan akses ke video
pembelajaran
- Kelas online ini tidak berupa pembelajaran secara live streaming
- Video pembelajaran berbahasa Indonesia
- Materi dari Dasar (tidak perlu khawatir, semua bisa belajar)
- Semua tools yang diperlukan gratis / ​open-source
- Kelas akan dirilis pada tanggal ​11 Juli 2019

Benefit Unggulan:
- Gratis File Design (Icon, Illustration, Fonts)
- Gratis Projek (Source code dan Design projek)
- Grup private, untuk berdiskusi seputar materi yang ada di kelas online
- Video kualitas tinggi (1080hd)
- Audio lebih nyaman untuk didengarkan
- Masih banyak lagi, lihat sendiri saja nanti

Order & Pertanyaan (WhatsApp): 0821 2063 9680 (Angga)

*sebelum bertanya pastikan kamu sudah baca semua informasi pada dokumen ini

Terima kasih, kita tunggu di kelas ya, guys!