Curriculum
Course: Product Design 2025 (Batch B)
Login

Curriculum

Product Design 2025 (Batch B)

Getting Started (Introductory class))

0/3

Design Tools & Setup

0/3

UI Design Principles

0/2

Wireframes & Visual Hierarchy

0/0

UX Fundamentals

0/0

Process and Architecture

0/0

Prototyping & Testing

0/0

Real world Application

0/0

Motion Design Basics

0/0

Advance Animations

0/0

Capstone Project

0/0

Portfolio & Career Launch

0/0
Text lesson

Layouts, Spacing, and Grids

  • Why Layouts & Grids Matter

    • The importance of structure in UI/UX

    • Visual balance and readability

  • Understanding Layout Grids

    • Types of grids: column, row, and grid

    • Grid settings: margins, gutters, columns

    • When and how to use layout grids in Figma

  • Spacing & Alignment

    • Consistent spacing for visual flow

    • Padding vs margin: what’s the difference?

    • Using Figma’s alignment and distribution tools

  • Establishing Visual Hierarchy with Layout

    • Using white space to group content

    • Organizing sections for user clarity

  • Responsive Layouts in Figma

    • Constraints and resizing behaviors

    • Designing for multiple screen sizes

  • Common Mistakes & Fixes

    • Inconsistent spacing

    • Misaligned elements

    • Ignoring hierarchy and flow

 

  • Practical Task

    • Apply a 12-column grid to design a simple webpage layout

    • Use consistent spacing to design a clean UI section (e.g., pricing, testimonials)