Core Topics

• Gestalt principles: proximity, similarity, continuity, closure, figure/ground
• Visual hierarchy: size, weight, contrast, spacing, and position
• Negative space and white space as a design element
• Grid systems: 8-point grid, 12-column layouts, baseline grids
• Colour theory: hue, saturation, value, warm vs cool, colour harmony models
• WCAG colour contrast requirements: 4.5:1 for text, 3:1 for large text
• Design critique vocabulary and how to give and receive design feedback

Tools & Tech

Learning Outcomes

• Analyse any website or app design using Gestalt principles, visual hierarchy, and colour harmony — and articulate why it works or fails.

Core Topics

• Type anatomy: serif, sans-serif, monospace, display — when to use each
• Typographic scale: establishing a fluid type scale for heading/body hierarchy
• Line height, letter spacing, paragraph width, and reading comfort
• Font pairing strategies: contrast vs harmony, max 2–3 typefaces per project
• Loading web fonts: Google Fonts, next/font, and font performance
• Variable fonts and how they affect responsiveness and file size
• Typography audit: analysing real Nagpur business websites for type issues

Tools & Tech

Learning Outcomes

• Establish a typographic system for a design project — choosing typefaces, scaling sizes, and setting spacing rules that ensure readability across screen sizes.

Core Topics

• Figma interface: frames, layers, groups, components, and the properties panel
• Low-fidelity wireframing: user flows, information architecture sketching
• Auto Layout: responsive frames that resize automatically across screen sizes
• Components and variants: building a design system with button states, input fields, cards
• Styles: colour styles, text styles, and effect styles for consistency
• Real content: why you should never use Lorem Ipsum in production wireframes
• Design handoff: inspect panel, measuring spacing, exporting assets

Tools & Tech

Learning Outcomes

• Build a 10-screen wireframe in Figma using Auto Layout, variants, and a shared component library — structured for developer handoff.

Core Topics

• Figma prototype mode: connections, triggers, animations, overlays
• User flow mapping: from business requirement to screen-by-screen decision tree
• Interaction types: on click, on hover, after delay, drag, scroll
• Micro-interactions: loading states, empty states, success/error feedback
• Presenting prototypes: sharing links, commenting, and stakeholder feedback
• Usability testing basics: 5-second test, think-aloud protocol, Maze setup
• Iteration: how to process feedback and update designs without losing history

Tools & Tech

Learning Outcomes

• Create an interactive prototype in Figma that demonstrates a complete user flow — from landing to task completion — with micro-interactions and shareable link.

Core Topics

• Translating Figma designs to semantic HTML structure
• CSS Flexbox and Grid: pixel-perfect implementation of design layouts
• Tailwind CSS utility classes: matching Figma spacings to utilities
• Responsive breakpoints: mobile-first CSS with media queries
• CSS custom properties: implementing a design token system in code
• Image optimisation: WebP/AVIF, appropriate sizing, lazy loading
• Matching designs across browsers: browser developer tools inspection

Tools & Tech

Learning Outcomes

• Convert a Figma design into pixel-accurate, responsive HTML/CSS that passes cross-browser inspection and matches the original at all three breakpoints.

Core Topics

• WCAG 2.2 accessibility principles: Perceivable, Operable, Understandable, Robust
• Semantic HTML as the first layer of accessibility
• ARIA attributes: roles, states, properties — when to use and when to avoid
• Keyboard navigation: tab order, focus management, skip links
• Screen reader testing: VoiceOver on Mac, NVDA on Windows, mobile screen readers
• Accessible colour contrast and designing for colour blindness
• Automated audit with axe DevTools, WAVE, and Lighthouse Accessibility score

Tools & Tech

Learning Outcomes

• Audit a design for WCAG 2.2 AA compliance, fix identified issues, and achieve a Lighthouse Accessibility score of 95+ on the implemented HTML page.

Core Topics

• What makes a design case study: problem, research, process, solution, outcomes
• Writing case study copy: STAR format adapted for design portfolio
• Presenting your capstone project as a portfolio piece
• Building a simple portfolio site on GitHub Pages or Carrd
• Publishing to Behance: thumbnail, title, tags, project description
• Preparing a Figma portfolio link suitable for job applications
• What design interviewers actually look for: process over polish

Tools & Tech

Learning Outcomes

• Publish a structured design portfolio case study with documented process, Figma prototype link, and implemented code — ready to share with recruiters.