Home Challenge Learn Design Blog Bookmarks Elements
Home
Challenge
Learn Design
Blog
Bookmarks
Elements
TENTANG
Panduan belajar UI Design. Dibagi dalam beberapa bagian yang akan rilis setiap minggu nya. Saat ini sedang dalam tahap penulisan materi. Ketika materi baru dirilis akan ada tanda nya.
BASIC
01
Intro release
Mengenal apa itu UI Design dan kegunaannya
02
Mindset release
Pemikiran dibalik pembuatan UI Design
03
Industry release
Mengenal industri design dan pekerjaan UI Designer
TYPOGRAPHY
01
Why Typography? release
Kenapa harus menguasai typography untuk membuat UI Design
02
Font Size release
Mempelajari penggunaan ukuran teks
03
Spacing release
Mempelajari pengaturan jarak antar huruf pada teks dan jarak antar baris pada paragraf
04
Font Weight release
Mempelajari penggunaan ketebalan teks
05
Hierarchy release
Membuat susunan beberapa teks yang mudah untuk dibaca
06
Font Tips release
Beberapa tips dalam penggunaan font
LANDING PAGE
01
Preface release
Apa itu landing page dan fungsi nya
02
Navigation release
Mengenal komponen yang terdapat pada bagian navigasi atau menu pada landing page
03
Hero release
Mengenal komponen yang terdapat pada Hero section, dimana adalah bagian pada landing page yang letak nya berada di area atas dibawah navigasi
04
Features Section
Mengenal komponen komponen yang terdapat pada bagian pengenalan fitur
05
Form
Mengenal komponen komponen yang sering digunakan pada sebuah form
06
Footer
Mengenal komponen komponen yang terdapat pada bagian paling bawah dari landing page
E-Commerce
01
E-Commerce Preface
Mengenal apa itu e-commerce dan bagaimana UI di dalam nya
02
Homepage
Mengenal komponen komponen yang terdapat pada halaman awal E-Commerce
03
Detail Product
Mengenal komponen komponen yang terdapat pada halaman detail produk
04
Checkout
Mengenal komponen dan bagaimana alur pada halaman checkout
05
Payment
Mengenal komponen dan bagaimana alur pada halaman pembayaran
Dashboard
01
Dashboard Preface
Mengenal apa itu dashboard dan bagaimana UI di dalam nya
02
Sidebar
Mengenal komponen sidebar yang merupakan tempat untuk menaruh menu atau navigasi
03
Data Visual
Mengenal jenis charts yang sering digunakan pada dashboard
04
Data Tables
Mengenal penggunaan table untuk menampilkan data pada dashboard
05
Settings
Mengenal komponen yang terdapat pada halaman pengaturan dashboard
Responsive
01
Preface
Mengenal apa itu responsive design
02
Landing Page
Langkah langkah membuat design responsive dari halaman landing page
03
E-Commerce
Langkah langkah membuat design responsive dari halaman E-Commerce
04
Dashboard
Langkah langkah membuat design responsive dari halaman Dashboard
APP
01
Preface
Apa itu aplikasi dan bagaimana UI di dalam nya
02
Guideline
Mempelajari guideline app dan bagaimana cara menggunakan nya
03
Social Media App
Mempelajari komponen yang terdapat dalam aplikasi sosial media
04
E-Commerce App
Mempelajari komponen yang terdapat dalam aplikasi E-Commerce
05
Finance App
Mempelajari komponen yang terdapat dalam aplikasi Finansial
06
Sports App
Mempelajari komponen yang terdapat dalam aplikasi Olahraga
LAYOUT
01
Composition
Mempelajari cara menentukan komposisi
02
Grouping
Pengelompokkan konten atau elemen untuk membuat informasi lebih jelas
03
Whitespace
Mempelajari penggunaan whitespace untuk membuat layout yang clean
04
Best Practices
Mempelajari bagaimana layout yang sering digunakan pada produk digital
05
Visual Hierarchy
Mempelajari bagaimana menyusun elemen elemen yang ada pada satu halaman menjadi komposisi yang mudah dipahami
06
Grid
Mempelajari penggunaan grid untuk membuat layout
USER FLOW
01
Preface
Apa itu user flow dan apa fungsi nya dalam UI Design
02
User & System
Bagaimana memahami kebutuhan user dan sistem untuk pembuatan user flow
03
Step by Step
Mendefinisikan langkah langkah dalam user flow
04
User Flow Map
Membuat peta atau alur user flow untuk melihat gambaran besar nya
05
Wireframe
Proses sketsa setelah membuat user flow