Design Patterns

An Action Bar is a user interface element that provides users with a set of actions or options related to the current context of the application, typically displayed at the top of the screen.

An avatar is a graphical representation of a user or their character in digital environments, often used in online platforms, games, and virtual communities.

A badge is a visual indicator used in user interfaces to convey information, achievements, or statuses related to a user or item.

A button is a user interface element that triggers an action or event when clicked or tapped, essential for facilitating interactions in digital designs.

A Call to Action (CTA) is a design element that prompts users to take specific actions, such as signing up, downloading, or purchasing.

A card is a UI design element that encapsulates related information or actions, often displayed as a rectangular container with an image, text, and buttons.

A carousel is a design pattern that displays a series of content items, such as images or text, in a rotating, often interactive, format allowing users to cycle through the items manually or automatically.

A chip is a compact UI element that represents a piece of information or an action, often used for selections, filtering, or input in user interfaces.

A Color Picker is a UI component that allows users to select colors from a visual interface, often used in graphic design, web development, and digital art applications.

A Command Palette is a UI component that provides users with a quick access menu for executing commands, actions, or functions within an application, often accessed via keyboard shortcuts.

A Call to Action (CTA) is a design element intended to prompt users to take a specific action, such as clicking a button or filling out a form.

A Data Table is a structured display of information organized in rows and columns, allowing users to easily access, analyze, and manipulate data.

Drag and Drop is an interaction technique that allows users to select and move items on a user interface by clicking, holding, and dragging them to a new location.

A Floating Button is a circular action button that hovers over the user interface, providing easy access to primary actions without obstructing content.

A form is a user interface component that collects input from users, typically through fields like text boxes, checkboxes, or dropdowns.

A grid is a layout structure that organizes content into rows and columns, facilitating alignment, consistency, and visual hierarchy in design.

A Hero Section is a prominent area at the top of a webpage designed to grab attention, typically featuring a large image, headline, and call-to-action (CTA).

Hotkeys are keyboard shortcuts that provide quick access to specific functions or commands within software, enhancing user efficiency.

Input refers to any data or information entered by users into a system, often through UI elements like text fields, buttons, or gestures.

Keyboard shortcuts are combinations of keys that perform specific tasks or functions within software applications, enhancing efficiency and usability.

A landing page is a standalone web page created specifically for a marketing or advertising campaign, designed to convert visitors into leads or customers.

A link is a navigational element that allows users to move from one page or section of content to another, often through clickable text or images.

A list is a UI element that presents a series of related items in a vertical or horizontal arrangement, allowing users to browse, select, or interact with the data presented.

A loading spinner is a visual indicator that informs users that a process is ongoing, typically while waiting for content to load or an action to complete.