Digital Bootcamp - Intensive Class

UI/UX Design Masterclass

"Mastering UI/UX, Elevate Your Digital Design Career"

gambar-kelas-uiux

📚 Kenapa harus belajar UI/UX Design Masterclass

👨‍🏫 Trainer yang akan mengajar 👩‍🏫

tim-UIUX-Design-Master-Class-1

Septa Inigopatria

Digital Product Manager

Product Development, UI/UX Design & Research, Graphic Design, Data Analysis.

tim-UIUX-Design-Master-Class-2

Mahannani Lestari

Digital & Product Designer

UI/UX Design, Design System Development, Design Thinking, Information Architecture.

🎯 Target dan Sasaran kelas bootcamp ini

  • Menguasai skill desain UI/UX dalam pengembangan produk-produk digital inovatif.
  • Meningkatkan skill desain sesuai kebutuhan industri saat ini dengan mengembangkan kemampuan UI/UX design dari riset pengguna, wireframing, prototyping, hingga usability testing menggunakan tools terkini.
  • Membangun Portofolio UI/UX profesional dengan mengembangkan studi kasus desain produk digital yang siap digunakan untuk melamar pekerjaan atau menarik klien potensial.

💻 Topik yang akan dipelajari

  • Introduction to UI/UX Design

  • UI/UX Basic Principle – From Idea to Interface

  • UI/UX Design Tools & Technologies

  • UI Design Process

  • Advance Visual Design

  • UI/UX Research

  • UI/UX Best Practice
  • Design Presentation
  • Project Portofolio

🎁 Benefit yang didapat

ikon-dibimbing-it=expert

Dibimbing IT Expert &
Top Level Management Industri

ikon-fleksibelitas-program

Fleksibilitas Program dan
Fokus Skillset Tertentu

ikon-sertifikat

Sertifikat Diterbitkan CCIT FT-UI
(Universitas Indonesia)

ikon-belajar-dan-upgrade

3+ Bulan Belajar & Upgrade Skill Bareng Praktisi Top Industri

ikon-pendamping-24jam

Pendampingan Personal dan
24 Jam Akses Materi via LMS

ikon-bonus-eksklusif

Bonus Eksklusif 2 Materi Soft Skill
Buat Siap Kerja!

⚙️ Tools yang akan digunakan

Figma

Miro

Google Sheets

Google Slides

📝 Proyek yang akan dikerjakan

  • Digital Product UI/UX Design
  • Designing UI/UX for Point of Sales (POS) Application (Web & Mobile)
  • Designing UI/UX for Ecommerce or Market Place Platform (Web)
  • Designing UI/UX for News Portal Platform (Mobile)

🏢 Prospek karir

📢 Untuk siapa kelas ini?

  • Mahasiswa (UI & Non UI) dan Umum yang ingin belajar dan memperkaya portofolio di bidang perancangan UI/UX dan Produk Digital
  • Desainer Grafis yang Ingin Masuk ke Dunia Digital
  • Frontend Developer yang Ingin Kuasai Desain
  • Mahasiswa DKV, Sistem Informasi, atau Informatika
  • Staff Non-IT yang Ingin Beralih Karir ke Desain Digital
  • Digital Marketing Specialist

🕣 Jadwal

  1. Live Zoom setiap Senin dan Rabu pukul 18.30 – 21.30 (Malam)
  2. Durasi kelas 2,5 – 3 jam per sesi selama 3 bulan.
  3. Kelas dimulai tanggal 12 Agustus 2025.

🗂️ Teknis Pelaksanaan

  1. Peserta yang melakukan pendaftaran, wajib join di group Whatsapp yang diberikan.
  2. Setiap sesi live akan dilaksanakan secara online menggunakan Zoom selama 24x pertemuan dilanjutkan dengan project portofolio dan bimbingan softskill untuk siap kerja dan pengembangan karir.
  3. Peserta wajib aktif di platform LMS (Learning Management System) baik dalam pembelajaran maupun forum kolaborasi.
  4. Peserta dapat mendownload ataupun mengakses materi belajar termasuk sampel source code (khusus kelas programming) di LMS.
  5. Peserta dapat bertanya dan berdiskusi dengan mentor dan peserta lain terkait materi, tugas dan konsultasi di LMS.

Module 1: Introduction to UI/UX Design

Topic: What is UI/UX? Understanding the Difference

  • Definition of User Interface (UI) & User Experience (UX)
  • Key Differences Between UI & UX
  • How UI and UX Work Together in Product Development

Topic: Importance of UI/UX in Digital Products

  • How UI/UX Impacts Business Success
  • The Role of UI/UX in User Engagement & Retention

Topic: The Role of a UI/UX Designer in a Development Team

  • Responsibilities of a UI/UX Designer
  • UI/UX Collaboration with Developers, Product Managers & Stakeholders
  • Understanding the Product Development Lifecycle & Where UI/UX Fits In
  • Real-World Workflow: From Research to Implementation

Topic: Current Trends in UI/UX Design

  • Minimalist & Neumorphic UI Design
  • AI & Automation in UI/UX (Chatbots, Personalization)
  • Dark Mode & Adaptive Design
  • AR/VR in UI/UX: The Future of Immersive Experiences
  • The Rise of Voice UI & Conversational Interfaces

Module 3: UI/UX Design Tools & Technologies

Topic: Overview of UI/UX Design Tools

  • Features & Key Differences Between Figma, Adobe XD, and Sketch
  • Choosing the Right Tool for the Right Project
  • Best Practices for UI Design in Each Tool

Topic: Collaborative Design Workflows (Cloud-based Design Tools)

  • Benefits of Cloud-Based Collaboration
  • Real-time Editing & Version ControlReal-time Editing & Version Control
  • Sharing & Collecting Feedback from Stakeholders
  • Managing Design Systems & Libraries for Scalability
  • Hands-on: Collaborative design exercise using Figma, Setting up cloud-based design libraries for teams, Role-based workflow demonstration

Module 4: UI Design Process

Topic: Understanding the UI Design Workflow

  • The Role of UI Design in Product Development
  • Stages of UI Design: Research & Ideation, Wireframing & Prototyping, UI Design & Visual Styling, Handoff to Development, Testing & Iteration
  • Collaborative Design with Developers & Stakeholders
  • Hands-on: Mapping a UI design workflow for a real-world project

Topic: Creating Wireframes & Low-Fidelity Prototypes

  • Introduction to Wireframing: Why It’s Important
  • Low-Fidelity vs. High-Fidelity Prototypes
  • Tools for Wireframing & Prototyping (Figma, Adobe XD, Sketch)
  • User Testing with Low-Fidelity Prototypes
  • Hands-on:
    – Sketching wireframes on paper before moving to digital tools,
    – Creating interactive low-fidelity prototypes in Figma

Module 5: Advance Visual Design

Topic: Advanced Techniques in UI Animation & Microinteractions

  • Importance of Motion in UI/UX Design
  • Types of UI Animations (Transitions, Loading Effects, Hover States, etc.)
  • Enhancing User Experience with Microinteractions
  • Tools for UI Animation (Figma Smart Animate, Adobe After Effects, Lottie, Framer)
  • Performance Considerations for Smooth UI Animations
  • Hands-on:
    – Creating smooth page transitions and interactive hover effects
    – Designing microinteractions for buttons, forms, and notifications

Topic: Designing for Dark Mode & Custom Themes

  • The Rise of Dark Mode & User Preferences
  • Principles of Dark Mode UI Design (Contrast, Colors, Shadows)
  • Implementing Light/Dark Mode Toggle & Custom Themes
  • Best Practices for Theming in Design Systems
  • Hands-on:
    – Designing a UI with both light and dark mode variations
    – Testing contrast and accessibility in dark mode

Module 6: UI/UX Research

Topic: Conducting Effective User Research (Surveys, Interviews, Analytics)

  • Introduction to User Research
    – The role of research in UX design
    – Differences between qualitative and quantitative research
    – Ethical considerations in user research
  • Survey Design & Implementation
    – Writing unbiased survey questions
    – Choosing the right survey tools (Google Forms, Typeform, SurveyMonkey)
    – Analyzing survey data for UX decision-making
  • Conducting User Interviews
    – Techniques for structured and unstructured interviews
    – Best practices for note-taking and recording insights
    – Synthesizing interview findings into actionable recommendations
  • Data Analytics for UX Research
    – Using analytics tools (Google Analytics, Hotjar, Mixpanel)
    – Tracking user behavior patterns
    – Interpreting quantitative vs. qualitative data
  • Leveraging Analytics for UX Research
    – Introduction to web and app analytics (Google Analytics, Mixpanel, Amplitude)
    – Key UX metrics: user retention, engagement, and drop-off rates
    – Using data to identify usability pain points
  • Hands-on:
    – Conduct a user survey and analyze the results
    – Perform a live user interview and extract insights
    – Explore Google Analytics to understand user behavior

Module 6: UI/UX Research

Topic: Heatmaps & Interaction Tracking for User Behavior

  • Introduction to Heatmaps & Click Tracking
    – Understanding heatmaps and their UX impact
    – Types of heatmaps (click maps, scroll maps, movement maps)
    – Identifying usability bottlenecks using heatmaps
  • Interaction Tracking & Session Recording
    – Tools for behavior tracking (Hotjar, Crazy Egg, FullStory)
    – Analyzing session recordings for friction points
    – Using tracking insights to optimize user flows
  • Using Heatmaps for UX Optimization
    – Analyzing scrolling behavior to improve content placement
    – Heatmap-driven design enhancements for navigation and CTA buttons
    – Real-world case studies on heatmap insights improving conversion rates
  • Hands-on Activities:
    – Set up a heatmap for a website or prototype
    – Analyze user interaction data from session recordings
    – Provide UX recommendations based on heatmap insights

Module 7: UI/UX Best Practice

Topic: Implementing UX Writing & Microcopy

  • Introduction to UX Writing
    – Difference between UX writing, copywriting, and technical writing
    – The role of microcopy in UX
  • Principles of Effective UX Writing
    – Clarity: Writing for usability
    – Brevity: Saying more with fewer words
    – Consistency: Using a unified voice and tone
    – Inclusivity & Accessibility in UX writing
  • Writing for Key UI Elements
    – Call-to-action (CTA) buttons
    – Error messages and form validation
    – Onboarding guides and tooltips
    – Empty states and success messages
  • A/B Testing & Evaluating UX Copy
    – Testing tone and clarity with users
    – Using analytics to track the impact of UX copy
    – Iterating based on feedback
  • Hands-on:
    – Rewrite a set of UI messages for better clarity and engagement
    – Conduct a UX writing A/B test using two versions of CTA buttons
    – Create a UX writing style guide for consistency

Module 7: UI/UX Best Practice

Topic: Ethical Design & Dark Pattern Avoidance

  • Understanding Ethical UX Design
    What is ethical design?
    The impact of design on user behavior
    Balancing business goals with user well-being
  • Identifying Dark Patterns
    – Sneaky subscriptions (Roach Motel)
    – Misdirection in UI elements
    – Confirmshaming & FOMO tactics
    – Privacy invasion & deceptive data collection
  • Building Ethical Digital Products
    – Designing for transparency and trust
    – Prioritizing user control over data
    – Accessibility and inclusivity considerations
  • Regulatory & Legal Considerations
    – GDPR & CCPA compliance in UX
    – Ethical AI and algorithmic transparency
    – Designing for mental well-being
  • Hands-on:
    – Identify and analyze dark patterns in real-world applications
    – Redesign an interface to improve ethical transparency
    – Conduct a peer review of an existing UX design for ethical compliance

Module 8: Design Presentation

Topic: Creating Impactful Design Presentations

  • Structuring a Design Presentation
    – Understanding the goal of the presentation
    – Organizing information for clarity and impact
    – Creating a logical storytelling flow
  • Visualizing Design Concepts
    – Using UI mockups, wireframes, and prototypes effectively
    – Presenting research insights and usability test results
    – Showcasing the design evolution (before & after)
  • Engaging Your Audience
    – Making presentations interactive
    – Using analogies to explain complex concepts
    – Handling tough questions with confidence
  • Hands-on:
    – Create a Figma-based design presentation
    – Deliver a short design review presentation with live feedback
    – Analyze and improve an existing UI/UX presentation

Module 8: Design Presentation

Topic: Documenting UI/UX Design Decisions

  • Why Design Documentation Matters
    – Keeping track of design iterations
    – Reducing misalignment in teams
    – Ensuring knowledge retention
  • Key Elements of UX Documentation
    – Design rationale and trade-offs
    – Wireframes, user flows, and annotations
    – UX research findings and insights
  • Best Tools for UX Documentation
    – Figma & Notion for design specs
    – Confluence & Google Docs for team collaboration
    – Loom & Miro for visual storytelling
  • Hands-on:
    – Create a design decision log for a real-world case study
    – Document user flows and wireframes in Figma
    – Conduct a peer review of UX documentation

Module 2: UI/UX Basic Principle - From Idea to Interface

Topic: Principles of User-Centered Design

  • Understanding User-Centered Design (UCD)
  • Key Principles: Usability, Accessibility, and User Needs
  • he Role of Research in UCD
  • Case Studies: Successful UCD Implementations

Topic: Design Thinking Process & Problem-Solving Approaches

  • What is Design Thinking?
  • The 5-Stage Process: Empathize, Define, Ideate, Prototype,Test
  • Case Studies: Real-World Design Thinking Applications

Module 2: UI/UX Basic Principle - From Idea to Interface

Topic: Wireframing & Prototyping Fundamentals

  • Introduction to Wireframing: Purpose & Best Practices
  • Low-Fidelity vs. High-Fidelity Prototypes
  • Tools for Wireframing & Prototyping (Figma, Adobe XD, Sketch)
  • Hands-on: Creating Wireframes & Interactive Prototypes

Topic: Accessibility & Inclusive Design Considerations

  • Understanding Accessibility: Why It Matters
  • WCAG (Web Content Accessibility Guidelines) Standards
  • Designing for Different User Needs: Vision, Mobility, Cognitive Impairments
  • Implementing Inclusive Design in UI/UX

Module 3: UI/UX Design Tools & Technologies

Topic: Interactive Prototyping & Testing with Tools

  • Creating Interactive Prototypes in Figma, Adobe XD, & Sketch
  • Setting Up Clickable Prototypes & User Flows
  • Running Usability Tests & Collecting Feedback
  • Integration with Development Tools (Zeplin, Inspect, etc.)
  • Hands-on: Collaborative design exercise using Figma, Setting up cloud-based design libraries for teams, Role-based workflow demonstration

Module 4: UI Design Process

Topic: Typography, Colors, and Visual Hierarchy

  • Principles of Effective Typography in UI
  • Choosing the Right Fonts for Readability & Branding
  • Understanding Color Psychology & Contrast for Accessibility
  • Creating Visual Hierarchy: Spacing, Alignment, and Consistency
  • Hands-on:
    – Selecting typography and color schemes for a UI project
    – Applying visual hierarchy techniques to improve user experience

Topic: Designing for Different Screen Sizes (Responsive & Adaptive Design)

  • Difference Between Responsive & Adaptive Design
  • Designing for Mobile-First vs. Desktop-First
  • Using Flexible Grids, Breakpoints, and Media Queries
  • Tools for Testing Responsiveness (Chrome DevTools, BrowserStack)
  • Hands-on:
    – Creating a responsive UI layout using Figma
    – Testing designs across multiple screen sizes

Module 5: Advance Visual Design

Topic: Branding & Visual Identity in UI Design

  • Understanding Brand Identity & Consistency in UI
  • Creating a Visual Language: Typography, Colors, and Imagery
  • Designing for Brand Recognition (Logos, Icons, UI Elements)
  • Implementing Branding in Digital Products
  • Hands-on:
    – Creating a brand guideline and applying it to a UI design
    – Ensuring brand consistency across multiple screens

Topic: Creating Scalable UI Component Systems

Module 6: UI/UX Research

Topic: Understanding User Personas & Journey Mapping

  • Developing Data-Driven User Personas
    – The importance of personas in UX design
    – Methods for gathering and analyzing persona data
    – Creating detailed persona profiles with behaviors, goals, and pain points
  • User Journey Mapping
    – Understanding the stages of a user’s journey
    – Identifying key touchpoints and pain points
    – Mapping user emotions and behaviors throughout the experience
  • Tools for Persona Development & Journey Mapping
    – Figma, Miro, UXPressia, and Adobe XD
    – Empathy mapping to deepen user understanding
    – Customer experience (CX) mapping for multi-platform interactions
  • Hands-on :
    – Create user personas based on research data
    – Develop a journey map for a digital product
    – Present findings and recommendations for UX improvements

Module 6: UI/UX Research

Topic: A/B Testing & Behavioral Analytics

  • Fundamentals of A/B Testing
    – What is A/B testing, and why is it important?
    – Defining test hypotheses and success metrics
    – Choosing the right test variables (layout, CTAs, color, copy)
  • Running A/B Tests Effectively
    – Tools for A/B testing (Google Optimize, Optimizely, VWO)
    – Best practices for setting up and monitoring tests
    – Avoiding biases and statistical pitfalls
  • Interpreting A/B Test Results
    – Understanding statistical significance and confidence levels
    – Making data-driven design decisions
    – Case studies on A/B test-driven UX improvements
  • Hands-on Activities:
    – Set up an A/B test for a landing page or feature
    – Analyze test data and identify winning variations
    – Optimize a digital experience based on A/B test results

Module 7: UI/UX Best Practice

Topic: Design Systems & Component Libraries (Google Material, Apple HIG)

  • Introduction to Design Systems
    – What is a Design System?
    – Benefits of using a Design System
    – Key components: UI Kits, Patterns, Guidelines
  • Popular Design Systems & Their Principles
    – Google Material Design (Theming, Motion, Accessibility)
    – Apple Human Interface Guidelines (HIG) (Hierarchy, Typography, Gestures)
    – IBM Carbon, Microsoft Fluent UI, and other systems
  • Building a Component Library
    – Tokens (Color, Spacing, Typography)
    – Components (Buttons, Forms, Cards)
    – Interaction Guidelines
  • Managing and Scaling a Design System
    – Version control and documentation
    – Design tokens for cross-platform applications
    – Collaboration with developers (Storybook, Figma, Zeroheight)
  • Hands-on:
    – Build a basic component library in Figma or Storybook
    – Apply Google Material or Apple HIG principles to a UI project
    – Create a design system documentation page

Module 7: UI/UX Best Practice

Topic: Interaction Design & UX Psychology

  • Fundamentals of Interaction Design (IxD)
    – UX vs. UI vs. IxD
    – Gestalt Principles of Perception
    – Affordance, Signifiers, and Feedback
  • Psychological Principles in UX Design
    – Hick’s Law: Reducing cognitive load
    – Fitts’s Law: Designing for easy interactions
    – Jakob’s Law: Familiarity in design
    – Zeigarnik Effect: Encouraging task completion
  • Designing for Behavioral Patterns
    – Cognitive biases in decision-making
    – Gamification and motivation (Hook Model)
    – Reducing friction in user flows
  • Interaction Patterns & Motion Design
    – Microinteractions and animation principles
    – Designing intuitive touch & gesture-based interactions
    – Best practices for feedback mechanisms (loading states, haptic feedback)
  • Hands-on:
    – Redesign a mobile form using UX psychology principles
    – Implement a microinteraction prototype using Figma or After Effects
    – Conduct a usability test on an interactive prototype

Module 8: Design Presentation

Topic: Effective Design Communication with Stakeholders

  • Understanding Stakeholder Needs
    – Identifying key stakeholders (Business, Tech, Marketing)
    – Tailoring communication styles for different audiences
    – Aligning design goals with business objectives
  • Explaining Design Decisions Effectively
    – Using design principles and research insights
    – Storytelling techniques for design justification
    – Handling feedback and objections
  • Facilitating Effective Design Discussions
    – Running productive design reviews
    – Encouraging constructive criticism
    – Building stakeholder buy-in
  • Hands-on:
    – Conduct a mock stakeholder presentation
    – Role-play handling feedback from different stakeholder types
    – Craft a one-page design rationale document

Module 8: Design Presentation

Topic: Collaborating with Developers & Product Managers

  • Understanding the Developer’s Perspective Key front-end development concepts (CSS, JavaScript, APIs)
    Design feasibility and performance considerations
    How developers interpret UI specs

  • Effective Designer-Developer Collaboration
    – Best tools for design handoff (Figma, Zeplin, Storybook)
    – Writing clear design specifications
    – Conducting design QA and iteration
  • Working with Product Managers
    – Understanding the product roadmap and prioritization
    – Aligning design goals with business strategy
    – Communicating design trade-offs effectively
  • Hands-on:
    – Conduct a design handoff session with a developer
    – Write a simple design spec document
    – Participate in a cross-functional team discussion on a real-world product feature

Module 9: Project Portofolio

Topic: Projects

Topic: Assesment / Uji Kompetensi

Premium

Rp.7.000.000

Umum

Rp.5.500.000

Mahasiswa

Rp.3.500.000

Frequently Asked Question

Tidak. Kursus ini dirancang dan disesuaikan  untuk pemula , mahasiswa, umum dan profesional tanpa latar belakang IT. Materi disusun secara bertahap, mulai dari dasar hingga tingkat lanjut, sehingga dapat diikuti oleh siapa saja.

Ya. Setelah menyelesaikan seluruh materi dan tugas yang diberikan, Anda akan menerima sertifikat resmi dikeluarkan oleh CCIT FT Universitas Indonesia (UI) yang dapat digunakan untuk melamar pekerjaan atau menambah portofolio profesional.

Kursus ini menggunakan metode blended learning, yaitu kombinasi antara:

  • Belajar mandiri melalui platform e-learning, di mana peserta dapat mengakses materi, video, dan tugas kapan saja.
  • Virtual meet via Zoom (live session) bersama mentor, dijadwalkan secara rutin untuk diskusi, tanya jawab, atau membahas topik penting secara interaktif.
    Metode ini memberikan fleksibilitas belajar sekaligus pengalaman interaktif dengan pendampingan mentor.

Ya. Kami menyediakan forum diskusi, sesi tanya jawab bersama mentor, serta dukungan teknis untuk membantu Anda selama proses belajar.

Untuk kursus secara umum (selain Mobile Development), perangkat minimal yang disarankan adalah:

  • Prosesor: Minimal Dual-core, seperti Intel Core i3 generasi ke-6 atau AMD Ryzen 3 2200U
  • RAM: Minimal 4GB (disarankan 8GB)
  • Sistem Operasi: Windows 10, macOS 10.13 atau versi lebih baru
  • Koneksi Internet: Stabil, minimal 10 Mbps

    Untuk kursus Mobile Development dan Game Development, disarankan:
  • Prosesor: Quad-core, seperti Intel Core i5 generasi ke-8 atau AMD Ryzen 5 3500U
  • RAM: Minimal 8GB (disarankan 12GB atau lebih)
  • Penyimpanan: SSD minimal 256GB

Ya. Kursus ini bekerja sama dengan CCIT FT Universitas Indonesia, sehingga sertifikat yang diterbitkan memiliki kredibilitas tinggi dan dapat menjadi nilai tambah pada CV Anda.

Durasi kelas intensive bootcamp adalah 3 bulan, dengan sesi live melalui Zoom 2 kali dalam seminggu, masing-masing berdurasi 3 jam. Jadwal berlangsung pada hari kerja (weekdays) pukul 19.00 – 22.00 WIB atau hari libur (weekend) pukul 09.00 - 12.00

Durasi kelas fast track adalah 5 hari, dengan sesi live melalui Zoom 5 kali dalam seminggu, masing-masing berdurasi 3 jam. Jadwal berlangsung pada hari kerja (weekdays) pukul 19.00 – 22.00 WIB atau hari libur (weekend) pukul 09.00 - 12.00

Ya. Materi kursus dapat diakses kapan saja melalui platform LMS atau LXP, sehingga Anda bisa belajar secara fleksibel di luar jadwal live session.

Ya. Tugas diberikan di setiap akhir pertemuan. Selain itu, peserta akan mengerjakan proyek nyata (real project) sebagai bagian dari proses belajar dan portofolio.

Ya. Kursus ini berbayar, namun Anda akan mendapatkan akses seumur hidup ke seluruh materi pembelajaran, termasuk video, modul, dan forum diskusi.

Ya. Peserta akan mendapatkan bimbingan langsung dari mentor profesional, serta akses ke group chat khusus untuk berdiskusi dan berkonsultasi.

Tidak ada tes masuk untuk dapat mengikuti program di Digiskill Hub, semua orang dengan latar belakang apapun dapat mengikuti program ini

Ingin belajar skill digital menarik lainnya?

Kami juga ada program Intensive Bootcamp lainnya — pembelajaran mendalam dan langsung praktik bareng mentor!