// “Course Overview”
(Establishing the foundation in design principles, psychology, industry roles and tools.)
The Roadmap to Your UX/UI Journey
- Meet the instructor and explore real-life projects
- Understand what the bootcamp includes in depth
- Discover how each week builds toward the final project
// “UX: The Good, the Bad, and the Ugly”
The Design Tree
- Explore the design tree
- Position UX in the design tree
- Analyze real-world examples of design roles (understand the business, UX, UI, IxD, visual design, product design)
// “Research First, and AI tools”
Design Principles & Visual Communication
- Learn and apply basic design principles (color, balance, typography, proximity, etc.)
- Understand the importance of storytelling in design
- Apply infographic design principles
// “Design for Humans”
// “Design for Presentations”
Logo Design
- Understand what makes a good logo
- Explore logo types
- Get introduced to Adobe Illustrator
- Design your personal logo for your portfolio website
// “Design Principles”
The Psychology Behind Great Design
- Explore the psychology behind great design
- Understand how design decisions influence user behavior
- Learn Hick’s Law and key Gestalt principles
// “Introduction to Adobe Illustrator and Photoshop”
Visual Enhancement with Adobe Photoshop
- Learn the difference between vector and pixels
- Understand image resolution and DPI
- Apply layout & composition techniques
- Understand aspect ratios
- Compare design for print vs. digital
- Get started with Adobe Photoshop
- Explore Adobe Color
// “Introduction to Soft Skills”
Soft Skills
- Meet your soft skills instructor
- Learn soft skills techniques for UX/UI designers
// “Communication"
// “Questioning and needs assessment"
Project Presentation
// “Synthesis and Affinity Mapping”
(Build a strong UX foundation by mastering design thinking, research methods, and Figma while applying a user-centered approach.)
The UX Design Process
- Explore the key phases of design thinking (empathize, define, ideate, prototype, and test)
- Apply a user-centered approach to design
- Clarify the problem and set research objectives
// “Ideation, and AI Tools”
⠀UX Research Methods
- Utilize research methods like competitive analysis, user interviews, surveys, and affinity diagram
- Define user needs and pain points
// “User Flows and Wireframes”
Agile for UX Design
- Understand how UX fits into agile workflows
- Learn key concepts: sprints, user stories, standups, and MVPs
// “Introduction to Figma”
⠀User Definitions & Journeys
- Build user personas & define user stories
- Differentiate between user journeys & user flows
// “UI Principles”
From Theory to Practice
- Craft a compelling case study
- Collaborate on a team project
// “AutoLayout and Components”
Figma Essentials & Advanced Techniques
- Get started with the essentials of Figma
- Master advanced techniques in Figma
// “Inspiration”
AI Integration in UX/UI
- Leverage AI tools to enhance UX/UI design processes
// “Accessibility”
Weekly Discussions & Design Enhancements
- Explore weekly topics
- Learn design tips & tricks
// “Building High-Fidelity”
// “Clickable Prototyping”
// “Problem Solving”
// “Basics of Teamwork (On Site)"
// “Creative/Critical Thinking"
Project Presentation Exam
Student Evaluation Committee
(Develop UI and interaction design skills, mastering usability, accessibility, and design systems to create structured, user-friendly interfaces.)
// “Research and Ideation”
Tech Talk
- Attend talks on UX and other evolving topics like AI in design
- Gain insights from industry professionals sharing real-world experiences and trends
// “Usability Testing, and AI tools”
UI & Interaction Design Principles
- Apply principles of UI & interaction design to craft engaging user interfaces
- Design UI elements & components
- Utilize visual hierarchy in UI to improve interface clarity
- Understand web design principles
// “HTML/CSS/MQ/Responsiveness”
UI Patterns & Best Practices
- Implement UI patterns and apply best practices
- Master advanced Figma components & auto layout to create flexible and responsive designs
- Incorporate animations & micro-interactions to elevate user engagement
// “Design System”
Usability Testing & UI Refinements
- Conduct usability testing to identify issues
- Analyze feedback and improve UI based on test results
- Perform UX audits & heuristic evaluations
// “Building High Fidelity Web Interactive Designs”
⠀Accessibility & Inclusive Design
- Apply WCAG 2.1 guidelines for accessibility
- Design with accessibility in mind to reach all abilities
- Use inclusive design to support diverse users and needs
// “CV Writing”
Design Systems & UI Libraries
- Build consistent design systems in Figma
- Organize and manage components using UI libraries
- Maintain and scale your system over time
- Design a mini design system in Figma
// “Job Hunting Techniques”
Career Development & Job Preparation
- Build a standout resume
- Gain strategies for effective job searching
- Prepare for your job interviews
// “Job Interview Preparation”
Introduction to Figma Sites
- Build and publish websites directly in Figma
- Explore scroll effects, anchors, and animations
- Define the concept and structure of your personal portfolio
Project Presentation Exam
// “Building High Fidelity App Interactive Designs”
(Learn the fundamentals of web design, and usability testing, while gaining hands-on experience with high-fidelity UI components and design systems)
Web Design & Responsive UI
- Explore the differences between responsive mobile design & mobile apps
- Understand website categories & their purposes
- Apply responsive and adaptive design principles
- Design adaptive UI for various users & devices
- Create interactive prototypes using Figma
// “Introduction to Webflow”
Web Content Structure with Information Architecture
- Build information architecture (IA) for websites
- Create navigation & content hierarchies
// “Build your portfolio on Webflow”
HTML, CSS & JavaScript Basics
- Learn how HTML structures web content
- Style layouts, colors, and typography using CSS
- Create responsive designs with CSS media queries
- Enhance UI with CSS animations (hover effects, transitions, keyframes)
- Understand basic JavaScript to add simple interactivity
// “Presentation Skills”
Usability Testing
- Conduct usability tests
- Analyze feedback and improve the UI
// “Pitching Skills (On Site)”
Project: Your First Website
- Understand the process of creating an effective website
- Develop a strategy for building a successful website
- Design and build your first website
- Apply responsive design in Figma with constraints and variables
// “Job Interview Simulation Part I”
Project: Your Portfolio Website
- Plan the structure & content of your personal portfolio
- Design your personal portfolio
Student Evaluation Committee
(Learn the fundamentals of web design, and usability testing, while gaining hands-on experience with high-fidelity UI components and design systems)
// “Testing and Dev Collaboration”
Mobile Design Principles & Guidelines
- Understand iOS & Android design guidelines (Material Design and Human Interface Guidelines)
- Optimize mobile interfaces for different screen sizes & devices
// “Improving Design Performance”
Mobile UI Patterns & Interactions
- Apply proven mobile UI patterns for better usability
- Implement intuitive gestures for enhanced user engagement (swipe, tap, drag, long press, etc.)
// “Webflow Portfolio Iteration”
Mobile UI Practice & App Design
- Analyze real mobile apps to understand iOS and Android design patterns
- Design for mobile using auto layout and platform guidelines in Figma
- Create a case study from your mobile app practice
// “Design Sprints Workshop”
Gamification & User Engagement
- Analyze real-world gamification examples
- Implement gamification strategies such as reward systems & badges
- Apply psychological principles of motivation & retention (autonomy, mastery, relatedness)
// “Job Interview Simulation Part II”
Preparation of Mobile Design for Development
- Prepare UI components & assets
- Collaborate with developers for pixel-perfect implementation
// “Soft Skills Evaluation and Personal Assessment”
(Learn core animation principles and how to apply them effectively in digital experiences.)
// “Final Project Reviews”
The Role of Motion in UX/UI
- Discover how motion improves usability, engagement, and microinteractions
// “Mock interviews (Tech and HR)”
Animation Principles & Techniques
- Understand the 12 principles of animation
- Explore the different types of animation
- Apply timing & easing for natural motion effects
- Create your first animation in Photoshop using the timeline
After Effects for Motion Design & Explainer Videos
- Learn After Effects essentials: interface, keyframes, layers, masking, and basic animations
- Explore advanced techniques
- Follow the steps of creating an explainer video (scriptwriting, storyboarding, animation, sound design)
Student Evaluation Committee
// “Final Project Reviews”
(Focus on finalizing mobile app projects, refining designs, and preparing portfolios)
Portfolio Review & Final Touches
- Review portfolio structure & design
⠀Final Project: Mobile App & Case Study
- Build a mobile app and document your full design process
- Create a complete case study that reflects everything you’ve learned, from research and UI design to prototyping, motion, and handoff
// “Final Project Reviews”
(Ensure students are fully prepared to present their work professionally, finalize their portfolios.)
One-on-One Feedback
- Receive individualized reviews
