MAD9020

# Week 5: UI Components

components illustration

UI components are essential building blocks in user interface design, each serving a specific function to create interactive and user-friendly interfaces. They are reusable, scalable elements that help designers and developers construct consistent and efficient user interfaces. Here’s an overview of some common UI components and their roles in UI design:

# Buttons:

# Purpose:

Trigger actions or submit data.

# Types:

  1. Primary Buttons: Highlight the main action.
  2. Secondary Buttons: Offer less prominent actions.
  3. Icon Buttons: Represent actions with icons instead of text.
  4. Toggle Buttons: Switch between two states.

# Best Practices:

  • Ensure buttons are easily distinguishable (primary vs. secondary).
  • Use clear, action-oriented labels.
  • Maintain sufficient padding for touch targets.

# Input Fields:

# Purpose:

Allow users to enter and edit text or data.

# Types:

  1. Text Fields: For single-line input.
  2. Text Areas: For multi-line input.
  3. Password Fields: For secure input.
  4. Search Fields: For search queries.

# Best Practices:

  • Provide clear labels.
  • Offer inline validation and error handling to guide users.
  • Ensure fields are accessible and keyboard-friendly.

# Purpose:

Allow users to select one option from a list.

# Types:

  1. Simple Dropdowns: For single selection.
  2. Multi-select Dropdowns: Allow multiple selections.
  3. Searchable Dropdowns: Enable searching within options.

# Best Practices:

  • Keep the list concise and logically ordered.
  • Use checkmarks or highlighting for selected items.
  • Ensure the dropdown is keyboard navigable.

# Modals:

# Purpose:

Capture user attention for important tasks or information.

# Types:

  1. Alert Modals: Notify users of critical information.
  2. Confirmation Modals: Seek user confirmation for actions.
  3. Form Modals: Contain forms for data entry.

# Best Practices:

  • Use modals sparingly to avoid interrupting the user flow.
  • Provide a clear way to close the modal.
  • Ensure modals are accessible (focus management, screen reader support).

# Toolbars:

# Purpose:

Group a set of actions or controls.

# Types:

  1. Navigation Toolbars: Contain navigation options.
  2. Action Toolbars: Include actions related to the current context.
  3. Editing Toolbars: Provide text editing controls.

# Best Practices:

  • Organize actions logically.
  • Use icons and labels for clarity.
  • Make the toolbar responsive to different screen sizes.

# Cards:

# Purpose:

Encapsulate related information in a compact, visually distinct block.

# Uses:

Display summary information, previews, or grouped content.

# Best Practices:

  • Keep card content concise and relevant.
  • Use visual hierarchy to highlight key information.
  • Maintain image aspect ratio when resizing.
  • Choose vertical or horizontal cards based on your content needs.

# Progress Indicators:

# Purpose:

Show the status of ongoing tasks.

# Types:

  1. Linear Progress Bars: Represent progress linearly.
  2. Circular Progress Indicators: Show progress in a circular form.
  3. Steppers: Indicate the number of steps in a process.

# Best Practices:

  • Use progress indicators to set user expectations.
  • Provide feedback on the completion status.
  • Ensure the indicators are accessible and visible.

# Notifications:

# Purpose:

provide users with timely information, alerts, and feedback.

# Types:

  1. Toasts & Snackbars: brief messages that appear temporarily and then disappear, typically displayed at the bottom or top of the screen.
  2. Banners & Alerts: Persistent messages that stay at the top of the screen until dismissed.
  3. In-App notifications: appear within the app interface without disrupting the user flow.

# Best Practices:

  • Clarity and Conciseness: avoid overloading the user with too much information.
  • Appropriate timing: avoid interrupting the user’s workflow.
  • Prioritization: differentiate between informational, warning, and error notifications using colors and icons.
  • Actionable: Provide relevant actions within the notification when appropriate (e.g., “Retry”, “Undo”).
  • Feedback and Acknowledgment: allow users to dismiss notifications if they are no longer relevant.
  • Non-Intrusive: design notifications to be noticeable but not overly intrusive. Use animations and transitions to smoothly introduce and remove notifications.

# Creating Components in Figma

# From Figma the basics

# The whole Shabang!!

# From button basics to advanced: Apply modes for theming, modes and localization.

# Publish your figma library to use it in your midterm project

# Resources

  1. Material Design Components (opens new window)
  2. UI elements every designer should know (opens new window)
  3. Guide to building a component library (opens new window)
  4. Best practices to create Figma components (opens new window)
  5. Best Practices for UI Cards (opens new window)
  6. 16 little UI design rules that make a big impact (opens new window)

# Lesson Slides

Last Updated: 7/19/2024, 1:26:56 PM

← Week 6: "Design Reviews & Presentations" →