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

Creating UI Elements: Buttons, Forms, Cards

  1. Introduction to UI Elements

    • Role of buttons, forms, and cards in product interfaces

    • What makes a UI element effective?

  2. Designing Buttons

    • Anatomy of a button: text, padding, icon (optional), states

    • Primary vs secondary buttons

    • Hover, pressed, and disabled states (introducing variants)

  3. Designing Input Forms

    • Text fields, labels, checkboxes, and dropdowns

    • Field states: default, focus, error, success

    • Spacing and accessibility considerations

  4. Designing Cards

    • Common use cases: profile, product, blog post cards

    • Structure: image, title, content, actions

    • Visual hierarchy and padding

  5. Turning UI Elements into Components

    • Making each element reusable

    • Using variants for states and styles

    • Organizing them in your Assets panel

  6. UI Best Practices

    • Consistent sizing and spacing

    • Aligning with brand style (color, typography, shadows)

    • Mobile vs desktop considerations

  7. Practice Task

    • Design a CTA button with three states (default, hover, disabled)

    • Create a simple contact form

    • Build a product card with image, title, description, and button