Session X: Creating UI Elements – Buttons, Forms, and Cards

Lesson Overview

In this session, learners will gain hands-on experience with designing and prototyping essential UI components—buttons, forms, and cards. These elements are the building blocks of most interfaces and play a critical role in guiding users through interactions, ensuring usability, and creating a cohesive design system. Students will learn best practices for designing these elements with accessibility, responsiveness, and consistency in mind.

Learning Objectives

By the end of this session, learners will be able to:

• Understand the principles of UI component design and their role in user interaction.

• Design buttons with appropriate states (default, hover, active, disabled).

• Create forms that are user-friendly, accessible, and optimized for both desktop and mobile.

• Prototype cards for displaying grouped content effectively (e.g., product previews, blog posts, or profile cards).

• Apply visual hierarchy, consistency, and accessibility to UI element creation.

Lesson Content

1. Buttons – Driving User Actions

• Definition & Role: Primary triggers for user interactions (e.g., “Sign Up,” “Submit”).

• Types of Buttons: Primary, secondary, tertiary, ghost, icon-only.

• Design Principles:

  • Contrast for visibility.

  • Clear labels (microcopy).

  • Proper sizing & spacing.

  • Feedback states: hover, pressed, focus, disabled.

• Exercise: Design and prototype a set of buttons with different states.

2. Forms – Gathering User Input

• Purpose: Collecting user data (sign-up, checkout, contact).

• Best Practices:

  • Simple and concise (minimize fields).

  • Group related fields logically.

  • Clear labels and placeholder text.

  • Error handling & validation feedback.

  • Accessibility: proper tab order, ARIA labels.

• Exercise: Create a responsive sign-up form with validation states.

3. Cards – Organizing Content

• Definition: Container components that group related content into an easily scannable format.

• Examples: Product cards, blog post previews, user profile cards.

• Design Principles:

  • Use of imagery, text, and CTA buttons.

  • Consistent padding and alignment.

  • Shadows and borders for hierarchy.

  • Responsive scaling (grid layouts).

• Exercise: Design a set of cards for a product listing page.

Practical Project

• Task: Build a mini UI kit with buttons, a simple form, and cards, maintaining consistency in colors, typography, and spacing.

• Tools: Figma / Adobe XD / Sketch.