• What is UI vs. UX? (Key Differences & Importance)

• Design Thinking Process (Empathize, Define, Ideate, Prototype, Test)

• UX Laws & Principles (Hick’s Law, Fitts’s Law, Jakob’s Law)

• UI Design Fundamentals (Visual Hierarchy, Contrast, Consistency)

Hands-on Activity:

• Analyze and critique a popular app’s UI/UX.

• Figma Interface Overview (Toolbar, Layers, Assets, Properties)

• Frames & Artboards (Setting Up for Web & Mobile)

• Shapes, Text, and Vector Tools (Pen Tool, Boolean Operations)

• Components & Styles (Creating Reusable Elements)

Hands-on Activity:

• Design a simple landing page using basic shapes and text.

• What is Wireframing? (Low-Fidelity vs. High-Fidelity)

• Information Architecture (IA) (Sitemaps, User Flows)

• Common UI Patterns (Cards, Navigation, Forms)

• Designing for Mobile & Desktop (Responsive Grids)

Hands-on Activity:

• Wireframe a mobile app dashboard (3 key screens).

• Color Theory & Accessibility (Contrast Ratios, WCAG Guidelines)

• Typography in UI (Font Pairing, Readability, Scaling)

• Iconography & Imagery (SVGs, Stock Photos, Custom Illustrations)

• Micro-Interactions (Hover States, Button Effects)

Hands-on Activity:

• Convert a wireframe into a high-fidelity UI screen.

• Creating Clickable Prototypes (Links, Transitions, Overlays)

• Advanced Animations (Smart Animate, Micro-Interactions)

• User Testing Basics (Feedback Collection, Iteration)

• Design Handoff (Export Assets, Developer Notes)

Hands-on Activity:

• Prototype a 3-screen user flow (e.g., e-commerce checkout).

• What is a Design System? (Tokens, Components, Documentation)

• Building a UI Kit (Buttons, Inputs, Dropdowns, Modals)

• Auto-Layout & Constraints (Responsive Components)

• Using Plugins (Icon Libraries, Color Accessibility)

Hands-on Activity:

• Create a custom UI kit for a fintech app.

• User Research Methods (Surveys, Interviews, Personas)

• Usability Testing (Task Flows, Heatmaps, A/B Testing)

• Analyzing Data (Identifying Pain Points)

• Iterating Designs (Improving Based on Feedback)

Hands-on Activity:

• Conduct a mini usability test on a prototype.

• Freelance & Client Work (Briefs, Pricing, Revisions)

• Case Study Format (Problem, Solution, Results)

• Portfolio Presentation (Behance, Dribbble, Personal Site)

Project Options:
1️⃣ Branding Project (Logo + Style Guide + Marketing Materials)
2️⃣ UI/UX App Design (Figma Prototype + User Flow)
3️⃣ Social Media Campaign (Canva + Photoshop Graphics)

Final Submission:

• Present work in a PDF portfolio or Behance/Dribbble.