10 Kelas Gratis Belajar UI UX Design di BuildWithAngga

Halo teman-teman! Kamu lagi tertarik banget sama dunia UI UX design tapi bingung mau mulai dari mana? Atau mungkin kamu udah pernah dengar tentang BuildWithAngga tapi masih ragu-ragu buat nyoba kelasnya? Tenang aja, artikel ini bakal ngasih kamu informasi lengkap tentang 10 kelas gratis yang bisa kamu ambil di platform tersebut.

BuildWithAngga memang udah terkenal banget di kalangan designer Indonesia sebagai salah satu platform pembelajaran online yang paling komprehensif. Yang bikin menarik, mereka ngasih beberapa kelas gratis yang kualitasnya gak kalah sama kelas berbayar. Ini kesempatan emas buat kamu yang mau belajar UI UX tapi budget masih terbatas.

Dalam artikel ini, kita bakal bahas satu per satu kelas gratis yang tersedia, mulai dari yang cocok buat pemula sampai yang lebih advance. Kamu juga bakal tau apa aja yang dipelajari di setiap kelas dan kenapa kelas-kelas ini worth it buat dicoba. Yuk langsung aja kita mulai eksplorasinya!

Sebelum masuk ke daftar kelasnya, penting banget nih buat kamu tau bahwa belajar UI UX itu gak cuma soal bikin desain yang cantik. Ada banyak aspek lain kayak research, user testing, wireframing, prototyping, dan masih banyak lagi. Makanya, memilih platform pembelajaran yang tepat tuh crucial banget buat perkembangan skill kamu kedepannya.

Freelance UI/UX: From Client Briefs to Winning Wireframes

Kalau kamu berencana terjun ke dunia freelance atau emang udah jadi freelancer tapi masih suka bingung sama brief klien, kelas ini cocok banget buat kamu. Pada kelas online ini kita akan belajar memahami brief projek yang telah diberikan oleh klien sehingga kita bisa memberikan kualitas terbaik dan mendapatkan bayaran tinggi sebagai seorang freelance ui ux designer.

Dari brief tersebut akan kita coba perjelas kembali sebelum memulai proses design, setelah seluruhnya sudah jelas maka kita bisa membuat UI UX moodboarding sebagai inspirasi design dari projek tersebut. Yang menarik dari kelas ini adalah kamu bakal belajar bikin UI UX moodboarding yang bisa jadi panduan visual buat kamu dan klien punya visi yang sama tentang hasil akhir proyeknya.

Selanjutnya kita akan membuat beberapa wireframe sesuai kebutuhan projek tersebut sehingga klien dapat membayangkan dengan baik bagaimana tata letak dan bentuk design website yang akan mereka dapatkan nantinya.

Materi yang Dipelajari

• Memahami brief projek freelance ui ux design
• Memberikan kualitas tinggi kepada klien
• Membuat wireframe berdasarkan brief projek
• Mempelajari software figjam dan whimsical

Tools yang Digunakan

Notion, Whimsical, FigJam

Link Kelas

https://buildwithangga.com/kelas/freelance-uiux-from-client-briefs-to-winning-wireframes

Mastering UX Micro Interactions with Jitter

Selamat datang di kelas Mastering UX Micro Interactions with Jitter : Creating Delightful User Experiences. Kalau kamu udah bosen sama design yang statis dan pengen bikin interface yang lebih hidup, kelas ini adalah jawabannya!

Di kelas ini, kita akan belajar bagaimana menggunakan Jitter, sebuah tools canggih untuk membuat prototype, untuk meningkatkan kemampuan desain UX kita dan menciptakan pengalaman pengguna yang menarik. Micro interaction adalah bagaimana kita membuat sebuah tampilan animasi yang responsif serta dapat membuat antarmuka digital kita terlihat hidup.

Nah, yang bikin micro interaction ini penting banget adalah karena mereka sangat berperan dalam melibatkan pengguna, sehingga dapat membantu mereka berinteraksi dengan lebih mudah, dan menambahkan sentuhan khusus pada desain kita. Dengan Jitter, kita akan belajar cara membuat interaksi desain dengan mudah dan efisien.

Selama kelas ini, kita akan mempelajari lebih dalam tentang micro interaction dalam UX, dan bagaimana hal itu mempengaruhi keterlibatan pengguna, hubungan emosional, dan kegunaan secara keseluruhan. Kita akan menjelajahi prinsip desain, praktik terbaik, dan contoh-contoh nyata untuk membangun dasar yang kuat sesuai dengan prinsip micro interaction.

Buat kamu yang pengen upgrade skill animasi dan prototyping, kelas ini bakal ngasih kamu insight tentang gimana caranya bikin user experience yang gak cuma cantik tapi juga engaging banget.

Materi yang Dipelajari

• Mempelajari prinsip-prinsip dasar micro interaction
• Latihan membuat sebuah tampilan animasi yang intuitive
• Mastering tools Jitter sebagai alat pembuatan advance prototyping yang bisa kita sesuaikan untuk desain micro interaction

Tools yang Digunakan

Jitter

Link Kelas

https://buildwithangga.com/kelas/mastering-ux-micro-interactions-with-jitter

UI Styleguide With Figma

Dalam membuat tampilan UI, Designer perlu menerapkan design yang menarik dan tentunya konsisten dengan UI Style Guide agar memudahkan proses web/mobile development. Nah, kalau kamu sering ngalamin kesulitan buat maintain konsistensi design atau malah bingung gimana caranya bikin design system yang proper, kelas ini cocok banget buat kamu!

Dengan UI Style Guide, Designer dapat menghemat waktu karena pembuatan komponen design menjadi lebih praktis dan dapat dikerjakan oleh beberapa designer secara bersamaan. Bayangin deh, kalau semua tim punya panduan yang sama, pasti gak ada lagi yang namanya design yang berantakan atau inkonsisten.

Pada kelas ini, Mentor menggunakan Figma yang telah digunakan oleh banyak perusahaan besar dunia seperti GitHub, Dropbox, Twitter dan Slack. Kita akan belajar proses design yang cepat dengan fitur-fitur bermanfaat seperti Auto Layout, Design Tokens, hingga beberapa rekomendasi pilihan plugin yang sangat efisien.

Yang paling seru, nantinya kita juga akan membuat design library dan komponen design yang responsive dengan fitur Auto Layout. Jadi kamu gak perlu lagi pusing mikirin gimana caranya bikin component yang bisa adaptif sama berbagai ukuran layar.

Kelas ini cocok bagi kamu yang ingin mendalami UI Style Guide secara gratis. Selain itu, Mentor ahli kami akan siap membantumu melalui grup konsultasi. Jadi kalau ada yang kurang jelas atau butuh feedback, tinggal tanya aja di grup!

Materi yang Dipelajari

• Membuat variant component
• Membuat component responsive dengan auto layout
• Memahami perbedaan frame dan group
• Memahami style guide dan design library

Tools yang Digunakan

Figma

Link Kelas

https://buildwithangga.com/kelas/ui-styleguide-with-figma

UX Design : User Flow

Ketika membangun suatu aplikasi mobile atau website maka tahap utama yang perlu dilakukan adalah merancangnya terlebih dahulu dari segi alur, warna, interaksi, dan juga masih banyak lainnya yang bisa kita temukan ketika berada pada tahap Design. Nah, kalau kamu masih bingung gimana caranya bikin user experience yang smooth dan logis, kelas ini bakal ngajarin kamu step by step!

Pada kelas ini kita akan memperdalam keahlian UX kita terutama pada bagian User-Flow, di sini kita akan mengenal apa itu User-Flow dan bagaimana cara mengimplementasikan hal tersebut pada suatu design aplikasi. User Flow ini penting banget loh, soalnya ini yang nentuin gimana user bakal berinteraksi sama produk yang kita bikin.

Yang asyiknya lagi, tools yang kita gunakan adalah Whimsical jadi tidak perlu download dan membayar karena ini gratis, sehingga siapa saja yang tertarik akan dunia design bisa langsung mempelajarinya. Jadi gak ada alasan lagi buat gak mulai belajar user flow dari sekarang!

Di kelas ini kamu bakal belajar gimana caranya ngerencanain perjalanan user dari awal sampai akhir, mulai dari mereka buka aplikasi sampai mencapai tujuan utama mereka. Ini crucial banget buat bikin aplikasi yang user-friendly dan gak bikin user bingung pas make produk kita.

Materi yang Dipelajari

• Mengenal apa itu User-Flow dan Manfaatnya
• Menggunakan Whimsical untuk mendesain Flow aplikasi
• Mengimplementasikan User-Flow pada design aplikasi
• Belajar UX User-Flow Dari Dasar

Tools yang Digunakan

Figma, Whimsical

Link Kelas

https://buildwithangga.com/kelas/ux-design-user-flow

Mastering Figma: Modern UI Dashboard Design

Dalam membuat User Interface sebuah website, Designer harus memerhatikan visual design yang atraktif demi kepuasan pengguna. Nah, kalau kamu lagi nyari kelas yang bisa ngajarin gimana caranya bikin dashboard yang keren dan fungsional, kelas ini adalah pilihan yang tepat banget!

Hal ini berarti tampilan situs tidak hanya enak dipandang, namun juga pengguna bisa memahami kegunaan setiap komponen desain yang dipilih Designer. Prosesnya dimulai dari memahami dahulu fitur apa yang dibutuhkan pengguna, lalu bagaimana menggambarkannya melalui wireframe (layout berisi draf komponen UI), hingga membangun konsep desain itu menjadi nyata melalui visual design yaitu desain lengkap yang disertai gambar, warna dan tipografi.

Kali ini kamu akan belajar visual design berupa tampilan dashboard dengan tool populer Figma. Dashboard sangat dibutuhkan dalam situs bisnis karena berisi data penting pengguna. Desain yang terencana dengan baik dapat meningkatkan produktifitas bisnis dan profit penjualan yang signifikan.

Bersama Mentor ahli, kamu akan membuat desain yang efektif meliputi design project, export design, sampai design presentation demi peluang karir yang lebih baik. Hasil project kelas ini nantinya bisa kamu kembangkan lagi sesuai keinginan dan showcase pada platform online seperti Dribbble untuk nambah portofolio.

Yang menarik dari kelas ini adalah kamu bakal belajar gimana caranya transform wireframe jadi visual design yang eye-catching. Plus, kamu juga bakal dapet insight tentang best practices dalam mendesain dashboard yang user-friendly dan data-driven.

Materi yang Dipelajari

• Mengubah wireframe menjadi visual design
• Mendesain tampilan dashboard website
• Mempelajari tool utama pada Figma
• Membangun portofolio website design

Tools yang Digunakan

Figma

Link Kelas

https://buildwithangga.com/kelas/mastering-figma-modern-ui-dashboard-design

Workshop Figma: Design Charity Landing Page

Landing Page sangatlah penting perannya di dalam sebuah website toko online, perusahaan, atau lainnya. Karena ia adalah halaman pertama yang akan dikunjungi oleh pengguna baru atau lama. Nah, kalau kamu pengen belajar bikin landing page yang bener-bener engaging dan bisa ngejual, kelas workshop ini cocok banget!

Oleh karena itu di Workshop Figma kali ini kita akan belajar mendesain sebuah Landing Page untuk kebutuhan website Charity (mengumpulkan dana bantuan) yang dapat memberikan pesan baik untuk donatur. Kenapa charity? Soalnya design untuk charity website tuh challenging banget, karena kita harus bisa bikin design yang emotionally appealing tapi tetap professional.

Yang menarik dari kelas ini adalah kamu bakal belajar gimana caranya bikin landing page yang gak cuma cantik diliat, tapi juga bisa ngeconvert visitor jadi donatur. Ini skill yang super valuable, karena prinsip yang sama bisa diterapin buat landing page produk atau service lainnya.

Silahkan bergabung untuk belajar Figma dalam mendesain website mulai dari dasar sampai bisa memiliki portfolio bersama mentor Angga Risky. Di kelas ini kamu bakal dibimbing step by step mulai dari konsep sampai eksekusi final design yang siap dipake.

Selain itu, kamu juga bakal belajar tentang psychology behind charity design, gimana caranya bikin CTA yang compelling, dan tips-tips praktis buat bikin landing page yang high-converting. Semua materinya applicable banget buat real project!

Materi yang Dipelajari

• Menguasai berbagai macam tools yang tersedia di Figma
• Menggunakan berbagai inspirasi design landing page yang modern
• Belajar mendesain dengan menggunakan Grid System
• Membuat tampilan CTA Landing Page yang menginspirasi audiens

Tools yang Digunakan

Figma

Link Kelas

https://buildwithangga.com/kelas/workshop-figma-design-charity-landing-page

UI Design : Grid System dengan Figma

Dalam membangun sebuah website dengan design yang menarik dan juga professional maka peran grid system sangatlah penting untuk mencapai hal-hal tersebut. Kalau kamu masih sering bingung kenapa design kamu suka keliatan berantakan atau gak rapi, kemungkinan besar itu karena kamu belum pake grid system yang bener!

Grid system memiliki beberapa manfaat yang salah satunya adalah untuk mempermudah proses kerja sama antara designer dan juga developer. Bayangin deh, kalau design kamu udah pake grid system yang proper, developer bakal lebih gampang ngimplementasiin design kamu ke dalam code.

Pada kelas kali ini kita akan bahas tuntas tentang pengertian dan juga penggunaan grid system pada design website menggunakan software Figma.com. Kamu bakal belajar dari basic concept sampe advanced implementation yang bisa langsung dipraktekkin di project nyata.

Kelas ini sangat cocok sekali apabila saat ini kita masih di tahap pemula, karena jika tidak kita pelajari sedari sekarang maka khawatir kedepannya hasil design kita tidak dapat diimplementasikan oleh developer dan ditolak oleh klien. Trust me, grid system ini foundational banget buat karir designer kamu!

Yang bikin kelas ini menarik adalah kamu bakal belajar gimana caranya bikin grid yang gak cuma bagus diliat tapi juga functional buat responsive design. Jadi design kamu bakal kelihatan consistent di berbagai device, mulai dari desktop sampe mobile.

Materi yang Dipelajari

• Implementasi Grid ke UI Design
• Mempelajari Tools Dasar Figma
• Memahami Fungsi Grid dalam Project
• Merancang Grid pada Figma

Tools yang Digunakan

Figma

Link Kelas

https://buildwithangga.com/kelas/ui-design-grid-system-dengan-figma

UI Design: Wireframe to Visual Design

Visual Design adalah hal yang penting dalam membuat suatu tampilan UI. Tujuannya agar tampilan UI Design yang dibuat tidak membingungkan bagi user yang menggunakannya. Nah, kalau kamu masih struggle gimana caranya transform wireframe yang masih hitam-putih jadi visual design yang stunning, kelas ini bakal jadi game changer buat kamu!

Di kelas ini kita akan mempelajari cara membuat sebuah tampilan mulai dari tahap pembuatan moodboard menggunakan InvisionApp yang terdiri dari tipografi, warna dan juga referensi design. Moodboard ini penting banget loh, karena ini yang bakal jadi panduan visual sepanjang proses design kamu.

Lalu dilanjutkan dengan mengubah Wireframe ke bentuk Visual Design menggunakan Figma. Proses transformasi ini adalah salah satu skill yang paling crucial buat designer, karena di sinilah wireframe yang masih abstrak berubah jadi design yang siap diimplementasikan.

Yang menarik dari kelas ini adalah kamu bakal belajar step-by-step process yang systematic, jadi gak akan ada lagi yang namanya bingung mau mulai dari mana pas dapat wireframe dari UX researcher atau client. Kamu juga bakal dapet insight tentang bagaimana menentukan hierarchy yang tepat buat berbagai element.

Selain itu, kamu juga bakal belajar gimana cara import dan organize asset seperti gambar dan icon supaya workflow kamu lebih efficient. Plus, kamu bakal tau tips dan tricks buat bikin visual design yang gak cuma cantik tapi juga functional dan user-friendly.

Materi yang Dipelajari

• Import Gambar dan Icon untuk Tampilan UI Design
• Menentukan Hirarki Teks pada Konten
• Mengubah Tampilan Wireframe menjadi Visual Design
• Membuat Moodboard untuk Referensi Design

Tools yang Digunakan

InVision, Figma

Link Kelas

https://buildwithangga.com/kelas/ui-design-wireframe-to-visual-design

Complete Guide UX Wireframe Design

Pada seri kelas design kali ini, kamu akan mengenal wireframing yaitu proses membuat rancangan awal desain aplikasi demi meningkatkan pengalaman pengguna (UX). Kalau kamu masih bingung gimana caranya bikin wireframe yang bener dan efektif, kelas ini bakal ngasih kamu complete guide dari A sampai Z!

Wireframe berbentuk gambar rangka dengan fokus pada penataan konten dan fungsionalitas suatu screen aplikasi. Pada tahapan ini Designer harus memperhatikan kebutuhan user beserta user flow agar menciptakan UX yang baik. Bila wireframe dibangun dengan baik oleh sang Designer dan penyampaiannya kepada rekan lain (stakeholder, Developer, UX Designer) berjalan lancar, proses pengembangan aplikasi tentunya menjadi lebih hemat uang dan waktu.

Bersama Angga Risky, kamu akan mengetahui cara membuat satu screen visual design dari sebuah wireframe. Tahapan materi terdiri dari pembahasan workflow sesuai dengan brief project, tool brainstorming yang efektif seperti Whimsical dan Miro, information architecture atau bagan informasi untuk menyusun user interface secara terstruktur, sampai praktik membangun visual design.

Yang menarik dari kelas ini adalah kamu bakal belajar gimana caranya interpret brief client dengan benar, karena sering banget kan brief yang dikasih client tuh masih abstrak atau kurang detail. Di sini kamu bakal dapet framework buat ngebreak down brief jadi wireframe yang actionable.

Hasil project pada kelas ini bisa jadi langkah awal bagi kamu mendesain aplikasi yang lebih complex. Kelas ini sangat cocok bagi kamu yang ingin berkarir sebagai UI Designer dan pengen punya solid foundation dalam wireframing process.

Materi yang Dipelajari

• Memahami brief project dari klien atau perusahaan
• Mengenal definisi dan manfaat wireframe
• Mendalami Whimsical dan Figma untuk brainstorming wireframe
• Mengubah wireframe ke visual design

Tools yang Digunakan

Figma, Whimsical

Link Kelas

https://buildwithangga.com/kelas/complete-guide-ux-wireframe-design

Intro to UX Design Research

Research merupakan bagian yang penting dalam proses pembuatan suatu produk, tidak terkecuali terhadap aplikasi maupun website. Kalau kamu pengen tau kenapa aplikasi yang satu sukses banget sementara yang lain gagal total, jawabannya sering banget ada di research yang dilakukan sebelum development!

Hal ini lantaran proses UX Design Research dapat menggali berbagai informasi terkait target pengguna dan kebutuhannya yang dapat diimplementasikan ke dalam aplikasi. Seorang UX Design Researcher akan mengadopsi berbagai metode untuk menemukan masalah yang mungkin terjadi pada aplikasi ataupun kemungkinan fitur baru yang dibutuhkan oleh user.

Bersama mentor Angga Risky, kita akan diajak untuk mengenal UX design Research dari dasar. Mentor akan menjelaskan bagaimana memilih metode yang tepat hingga bagaimana mengimplementasikan research plan dan melakukan evaluasi terhadap research yang telah dilakukan.

Yang menarik dari kelas ini adalah kamu bakal belajar gimana caranya bikin research plan yang bener-bener actionable, bukan cuma sekedar survei yang ujung-ujungnya gak kepake. Kamu juga bakal dapet insight tentang berbagai research method dan kapan waktu yang tepat buat pake masing-masing method.

Kelas ini merupakan pilihan yang sesuai untuk mempelajari konsep, teori, dan praktik dari UX Research. Kelas ini juga cocok untuk menambah wawasan Product Designer dan UX Designer tentang bagaimana research dilakukan sehingga dapat bekerjasama dengan lebih baik bersama UX Researcher.

Selain itu, kamu juga bakal belajar tentang langkah awal dalam membangun startup dari perspektif research, yang penting banget buat kamu yang ada rencana bikin produk sendiri atau join early-stage startup.

Materi yang Dipelajari

• Belajar dan praktik membuat sebuah Research Plan
• Memahami langkah awal dalam membangun Startup
• Belajar memilih metode Research yang tepat
• Mengenal UX Design Research dari dasar

Tools yang Digunakan

Maze Design, Figma, Notion, Miro

Link Kelas

https://buildwithangga.com/kelas/intro-to-ux-design-research

Penutup

Nah, itu dia 10 kelas gratis yang bisa kamu ambil di BuildWithAngga buat belajar UI UX Design! Dari yang kita bahas tadi, kamu bisa liat sendiri kan kalau platform ini emang komplit banget materinya. Mulai dari yang basic kayak wireframing dan grid system, sampai yang lebih advanced kayak micro interactions dan research methodology.

Yang bikin BuildWithAngga istimewa adalah kualitas kelasnya yang gak kalah sama kelas berbayar. Mentor-mentornya juga udah berpengalaman di industri, jadi materi yang diajarkan tuh applicable banget buat dunia kerja. Plus, ada grup konsultasi yang bisa ngebantu kamu kalau ada yang kurang jelas.

Kamu juga bisa liat kalau tools yang dipake di kelas-kelas ini tuh tools yang emang lagi trending di industri, kayak Figma, Whimsical, Jitter, dan Notion. Jadi skill yang kamu dapet bakal relevant banget buat karir kamu kedepannya.

Tips Memilih Kelas yang Tepat

Buat kamu yang masih bingung harus mulai dari mana, nih ada beberapa rekomendasi berdasarkan level dan minat kamu. Kalau kamu masih pemula banget, coba mulai dari kelas "UI Design: Grid System dengan Figma" atau "Complete Guide UX Wireframe Design" karena kedua kelas ini ngasih foundation yang solid.

Buat kamu yang udah punya basic tapi pengen nge-improve skill tertentu, bisa pilih sesuai kebutuhan. Misalnya kalau kamu pengen jadi freelancer, kelas "Freelance UI/UX: From Client Briefs to Winning Wireframes" cocok banget. Atau kalau kamu tertarik sama research, langsung aja ambil "Intro to UX Design Research".

Yang penting, jangan ambil semua kelas sekaligus ya! Fokus ke satu atau dua kelas dulu, dalami sampai bener-bener paham, baru lanjut ke kelas berikutnya. Quality over quantity, guys!

Langkah Selanjutnya

Setelah selesai ngambil kelas-kelas gratis ini, kamu bisa mulai bikin portofolio dari project yang udah dikerjain di kelas. Upload hasil karya kamu ke platform kayak Dribbble atau Behance buat showcase skill kamu.

Kalau kamu udah merasa confident sama hasil belajar dari kelas gratis, mungkin saatnya consider buat upgrade ke kelas premium BuildWithAngga. Biasanya kelas premium punya project yang lebih kompleks dan challenging, plus ada mentoring yang lebih intensive.

Jangan lupa juga buat tetep update sama tren terbaru di dunia UI UX. Follow designer-designer ternama di social media, baca artikel terbaru, dan ikutin komunitas design. Dunia design tuh fast-moving banget, jadi kamu harus tetep up-to-date.

Motivasi Terakhir

Remember, jadi UI UX Designer yang sukses tuh bukan cuma soal technical skill aja, tapi juga problem-solving ability dan empathy ke user. Kelas-kelas di BuildWithAngga ini bakal ngasih kamu both technical knowledge dan mindset yang tepat buat jadi designer yang impactful.

Gak usah takut buat mulai, even kalau kamu merasa masih gak tau apa-apa. Everyone starts somewhere, dan yang penting adalah consistency dalam belajar. Take your time, enjoy the process, dan jangan lupa practice regularly.

Good luck buat journey belajar UI UX kamu! Semoga artikel ini bisa ngebantu kamu nemuin starting point yang tepat. See you di dunia design!