Web Camp View Syllabus
Live & Interactive

Master UI/UX
& Web Design
With Figma

Grow your design skills with guided practice. Build real projects, step by step

UI/ UX image

Your Learning Journey

A structured curriculum that takes you from design fundamentals to real projects.

Next 3 Month Course

  • Modules

    24

  • Class Duration

    2 hours each

  • Schedule

    2 days per week

  • Challenges

    20+

  • Real Projects

    4

  1. What Is Design
  2. Design Philosophy
  3. Explore Design History
    1. Qin Shi Huang Sword (Craftsmanship & Function)
    2. The Number 14 Chair (Industrial Design & Usability)
  4. Introduction to Web Design
  5. What Is UI/UX Design?
  6. The First UI Design
  7. Differences Between UI & UX
  8. Challenge
  1. Get started with Figma:
    1. Interface overview
    2. Exploring Figma Tools (Frames, Shapes, Typography, Layers, Alignment, Effects, Etc) and Properties
    3. Working with Layers and the Layer Panel
  2. Challenge
  1. Website Analysis & Section Mapping
    1. Hero
    2. About
    3. Portfolio/Work
    4. Testimonials
    5. Contact
    6. Footer
  2. Building the Personal Portfolio Homepage
    1. Header
    2. About
    3. Portfolio
    4. Contact
    5. Footer
  3. Challenge
  1. Introduction
  2. Layout
  3. Visual Hierarchy
  4. Visual Noise
  5. Iconography
  6. Contrast
  7. Spacing, White Space/ Negative Space
  8. Consistency
  9. Laws of UX
  10. Challenge
  1. Typefaces & Fonts
  2. Font Weight & Style
  3. Font Size & Scale
  4. Heading levels (H1, H2, H3…)
  5. Body text, captions, small text
  6. Line Height (Leading)
  7. Spacing between lines for readability
  8. Letter Spacing (Tracking) & Kerning
  9. Adjusting spacing between characters
  10. Hierarchy
  11. How to guide users with headings, subheadings, body text
  12. Alignment
  13. Left, Center, Right, Justified
  14. Contrast & Legibility
  15. Color contrast
  16. Light vs. dark backgrounds
  17. Responsive Typography
  18. How font sizes adapt across desktop, tablet, mobile
  19. Best Practices in UI
  20. Create Custom typography scales
  21. Challanage
  1. The importance of colors in UI/UX design
  2. Color Wheel
  3. Meaning of Each Color
  4. Meaning of colors in different contexts
  5. Introduction to Color Psychology
  6. Gender Differences in Color Preference
  7. Color Contrast, Color Hierarchy & Color Accessibility
  8. Color Harmony in UI Design
  9. Grayscale Color
  10. Gradients
  11. How to create great gradients
  12. Choosing Colors
  13. Background colors
  14. Color Combination
  15. Creating color palette
  16. Challenge
  1. Intro to Ul Elements
  2. Buttons
  3. Text Inputs
  4. Checkboxes & Radio Buttons
  5. Toggles / Switches
  6. Dropdowns & Select Menus
  7. Navigation Components
  8. Navbar
  9. Sidebar / Drawer
  10. Tabs
  11. Breadcrumbs
  12. Cards
  13. Lists & Tables
  14. Modals & Dialogs
  15. Tooltips & Popovers
  16. Forms
  17. Media Elements
  18. Feedback Elements
  19. Alerts / Banners
  20. Toasts / Snackbars
  21. Progress bars & Spinners
  22. Challenge
  1. Figma Components
  2. What is Component
  3. What is Auto Layout
  4. How to Create a Component
  5. How to Create a Component Set
  6. How to Modify a Component
  7. How to detach Components
  8. How to delete Components
  9. Global vs Local Components
  10. Figma Design Systems
  11. Challenge
  1. What is Design System in Figma
  2. When do you need a Design System?
  3. Exploring Design System
  4. How to Update and Publish Design System
  5. Challenge
  1. Grid System
  2. Intro to Grids
  3. Grid Terminology
  4. Column
  5. Gutter
  6. Responsive Grid Layouts
  7. Fluid Grid Layout
  8. Fixed Grid Layout
  9. Mixed Grid Layout
  10. Using Grids in Figma
  11. Best Practices
  12. Challenge
  1. Ecommerce Project
  2. Brief
  3. Project Overview
  4. Sitemap
    1. What is Sitemap
    2. How to create a sitemap
  5. Userflow
    1. What is Userflow
    2. How to create a Userflow
  6. Challenge
  1. Sketch
  2. Low Fidelity Wireframes
  3. High Fidelity Wireframes
  4. User Scanning Patterns
  5. Information Architecture
  6. Priority Framework
  7. Importance of Search
  8. Creating a Wireframe
  9. Challenge
  1. Navbar
  2. Search
  3. Hero
  4. Footer
  5. Challenge
  1. Body Sections
  2. CTA
  3. Challenge
  1. Profile Page
  2. Search Page
  3. Challenge
  1. Authentication page
  2. Sign in page
  3. Sign Up Page
  4. Password Reset page
  5. Account Verification Page
  6. Challenge
  1. Creating a Responsive Navbar
  2. Combining Sections with Auto Layout
  3. Applying Responsive Typography
  4. Designing Tablet View
  5. Designing Mobile View
  6. Challenge
  1. Introduction
  2. What are variables in design?
  3. Why we use variables
  4. Difference between variables and hard-coded values
  5. Types of Variables (15–20 min)
  6. Color Variables
  7. Typography Variables
  8. Spacing Variables
  9. Border & Shadow Variables
  10. Create a color palette in Figma using variables
  11. Apply variables to buttons, cards, headings, and text
  12. Change a variable
  13. Challenge
  1. What is prototype
  2. Build your prototype
  3. Transitions
  4. Advanced Animation
  5. Loading Skeleton
  6. Challenge
  1. Design Handover Process :
    1. How to prepare design for developer
    2. Sharing files with permissions
    3. Commenting and Collaboration
    4. How to Compress Image
    5. How to export image
    6. How to export icons
  2. Challenge
  1. What is Product Design
  2. Kitab Al-Hiyal (Mechanical Ingenuity)
  3. Difference between UI design, UX design, and Product Design
  4. Product thinking (solving problems, not just making screens)
  5. What is SaaS (Software as a Service)
  6. Examples
  7. Why SaaS is popular
  8. Building a Project Management App:
    1. Project Management App Design – Overview & Brief
  9. Challenge
  1. Brief: Introduction to SaaS UI
  2. Live Design
  3. Login/Signup Page
  4. User Dashboard (overview of projects & tasks)
  5. Overview
  6. Project Board (Kanban with To-do, In-progress, Done)
  7. Task Card
  8. Challenge
  1. Brief: Admin vs User flows
  2. Live Design
  3. Admin Dashboard
  4. Manage Users
  5. Challenge
  1. Brief: SaaS marketing best practices
  2. Live Design
    1. Navigation Bar
    2. Hero Section
  3. Challenge
  1. Wrap Up the Course