Design System version 1

Components

Reusable building blocks that can be combined to create complex web pages and applications.

Components in Web Design

Components in web design are reusable solutions to common design problems. They provide a framework for creating consistent, efficient, and user-friendly interfaces. By leveraging established patterns, designers can save time, improve quality, and ensure a better user experience.

Common Components by Categories

  1. Layout
  • Grid Layout: Uses a grid system to organize content and maintain consistency.
  • Card Layout: Presents information in a visually appealing and easily digestible format.
  • Hero Image: A large, prominent image that grabs the user's attention.
  • Split-Screen Layout: Divides the page into two or more distinct sections, often with contrasting content.
  1. Navigation
  • Header: Contains the website's logo, navigation menu, search bar, and other essential elements.
  • Footer: Typically includes sitemap, copyright information, contact details, and social media links.
  • Breadcrumb Navigation: Shows the user's current location within the website hierarchy.
  • Hamburger Menu: A compact menu that expands when clicked.
  • Sticky Navigation: A navigation bar that remains fixed at the top of the page as the user scrolls.
  1. Content
  • Cards: Small, self-contained units of content that can be arranged in various layouts.
  • Carousel: A rotating display of images or content.
  • Accordion: Collapsible sections that reveal additional content when clicked.
  • Tabs: A series of clickable segments that switch between different content panels.
  1. Interaction
  • Hover Effects: Visual changes that occur when the user hovers over an element.
  • Tooltips: Provide additional information when the user hovers over an element.
  • Modals: Overlays that appear on top of the current page, often used for forms, alerts, or additional information.
  • Progress Indicators: Visual cues that show the status of a task or process.
  1. Form
  • Single-Column Form: A simple form with all fields in a single column.
  • Multi-Column Form: A form with fields organized into multiple columns.
  • Step-by-Step Form: Breaks down a complex form into multiple steps to simplify the process.