All Patterns

This pattern guides users through initial setup with clear, actionable steps, fostering engagement and accelerating feature adoption.

Users can browse a curated selection of offers by clicking pagination arrows, enabling efficient discovery and decision-making.

This pattern uses an animated, interactive background to engage users and visually highlight featured content, enhancing initial appreciation and pathfinding.

Users can personalize their toolbar by toggling specific buttons on or off, enhancing workflow efficiency and tailoring the interface to their needs.

Users can quickly assess system health over time via color-coded hourly indicators, revealing operational status and outage events at a glance.

Offers always-available, AI-powered guidance and support through a fixed bottom-right chat

This pattern describes a desktop web landing page, featuring a fixed navigation bar, footer, and interactive elements such as carousels, buttons, and hypertext links. It integrates animations, video, and anchor scrolling to create an engaging user experience. Notable behavior: Animation; Carrousel; Fixed on Scroll.

This pattern provides a full-height, animated sidebar menu that slides in from the left, offering clear navigation options while dimming the main content for focused interaction.

Users can easily upload files or paste URLs, receiving clear visual feedback and background loading indicators for a seamless experience.

This transition visually guides the user as a window minimizes, smoothly shrinking and moving to its new location in the dock, enhancing spatial awareness and system feedback.

This pattern provides timely, relevant news and updates within the application, enhancing user awareness and engagement without interrupting core workflows.

This pattern uses a subtle 3D shadow animation on hover to provide clear visual feedback, enhancing user awareness and guiding interaction.

This modal presents users with clear, card-based options to initiate a task, guiding them efficiently through initial decision-making.

Users can easily select multiple communication preferences with visually distinct, colored checkboxes that provide immediate feedback on their choices.

This pattern uses a dynamic carousel of images and text to showcase product features, engaging users with interactive content and clear calls to action.

This landing page effectively guides users to download icon management software by showcasing its intuitive interface and customization features.

Users can directly edit text content in place, providing a seamless and efficient way to update information without navigating away.

Users can efficiently organize multiple items by dragging and dropping them into a target category, enhancing content management and task completion.

A skeleton loader provides a visual placeholder for content that is still loading, reassuring users that the page is active and data is on its way.

This pattern uses subtle, interactive background animations to engage users and provide dynamic visual feedback as they scroll or interact with the page.

Dropdown filters enable users to quickly refine content views by selecting specific criteria from a compact, accessible menu.

This pattern uses an animated blackout modal to focus user attention on critical information or actions, ensuring clear decision-making.

This pattern allows users to quickly navigate to the top of a long list by clicking a fixed "Back to Top" button that appears on scroll.

Users can toggle a persistent sidebar menu to reveal or hide navigation options, optimizing screen space while maintaining easy access to key features.

This progress bar visually informs users about the loading status of their chats, providing a clear percentage to manage expectations during data synchronization.

This menu provides an interactive outline of page content, allowing users to quickly navigate to specific sections and understand the page structure at a glance.

This pattern allows users to seamlessly transition from a clear call-to-action button to an input field, streamlining the path to engagement.

This topbar menu uses a dropdown to reveal categorized links, enabling users to quickly navigate to relevant sections and understand the product's diverse offerings.

A feature presentation tooltip, as seen in Jira, guides users through new functionalities or important updates. It often appears during onboarding or to raise awareness, utilizing tooltips with hypertext links and pagination for multi-step tours on both desktop and web interfaces.

Desktop, Feedback, Consent, Awareness, Web, English, Text Input, Side Panel

Users can dynamically filter population data by country and year, enabling quick comparisons and insights into demographic trends.

A modal with a blackout overlay and animated transitions provides a focused input form, ensuring users can quickly add friends without distraction.

This topbar menu dynamically adjusts its layout and content, offering users clear navigation and relevant options as they explore different sections of the site.

Users can toggle high contrast mode to improve readability and accessibility, enhancing the visual experience for those with low vision.

Users can switch between list and grid views to optimize content display for their preference, enhancing readability and navigation.

This floating progress bar provides persistent, non-intrusive feedback on background tasks, allowing users to monitor progress while continuing other work.

This modal guides users through multi-step processes with clear instructions and animated transitions, enhancing awareness without obscuring the underlying content.

This horizontal item slider allows users to effortlessly browse a curated selection of items, enhancing discoverability and engagement with minimal scrolling.

Users input their email for login, then receive and enter a validation code to securely access their account.

Users can instantly toggle between light and dark display modes, enhancing visual comfort and accessibility based on their preference or environment.

Users can dynamically adjust the number of columns and spacing in an image grid using intuitive sliders, enhancing visual organization and content exploration.

This pattern enhances clarity by dynamically magnifying specific image regions, guiding users to key details and improving comprehension of visual instructions.

This pattern guides users through initial setup by simulating product features, allowing them to visualize outcomes and make informed decisions before committing.

This sidebar menu allows users to expand and collapse sections, efficiently managing screen space while providing access to numerous navigation options.

This vertical accordion allows users to efficiently reveal or hide detailed content sections, optimizing screen space and improving navigation for FAQs or contact information.

A UI pattern where a floating popover element appears adjacent to a trigger element upon a click interaction, providing additional context or actions without navigating away.

Users can drag a modal dialog to a fixed side panel, allowing them to view and interact with underlying content without losing context.

Users can effortlessly create a new file on their desktop by dragging and dropping an image directly from a web browser.

This pattern integrates a search input directly within a menu, typically a dropdown, enabling users to quickly filter and locate specific menu items. It enhances pathfinding and awareness, commonly found in desktop applications with navigation bars. Notable behavior: Typing; Filtering; Filtered Menu Items.

This transition allows users to fluidly zoom between a grid of browser tab thumbnails and a full-screen view, enhancing navigation and context switching.

Users can intuitively assign color-coded tags to designated slots via drag-and-drop, enhancing organization and quick visual identification of items.

This sign-in pattern offers both traditional email/password input and a convenient QR code scan, enhancing user flexibility and reducing login friction with engaging loading tips.

This pattern uses a modal blackout to confirm a user's intent to close an account, ensuring they understand the irreversible consequences before proceeding.

This pattern uses a persistent banner to remind users to verify their PIN, enhancing security and recall without interrupting core app functionality.

A web landing page for the Snap Camera product, featuring a fixed navigation bar, interactive buttons, and animated video content to showcase its features and encourage user engagement. Notable behavior: Scrolling; Button Click; Fixed Header.

Users can effortlessly switch between grid and list views of content, enhancing readability and personalizing their browsing experience.

Users can dynamically adjust content aspect ratios via a clickable menu, providing flexible viewing experiences and enhancing content adaptability.

This pattern uses a modal blackout to confirm a delete action, ensuring users are fully aware and can prevent accidental data loss.

This pattern uses a dynamic, animated brand gradient to visually engage users and highlight key messages as they scroll, enhancing brand recognition and content flow.

Users can effortlessly browse featured promotions and products through a dynamic hero slider, enhancing awareness and guiding their pathfinding.

This pattern displays a scrollable modal over a darkened background, allowing users to focus on its content while retaining context of the underlying page.

A fixed navigation bar ensures key actions like "Comenzar gratis" remain accessible as users scroll, improving discoverability and conversion.

This landing page guides users to download the application for their specific operating system, simplifying the installation process.

This spinner provides visual feedback during module loading, reassuring users that the system is actively processing and preventing perceived delays.

Hovering over a truncated title reveals its full text in a tooltip, providing complete context without cluttering the interface.

Users can intuitively reorder list items by dragging and dropping them, providing a direct and efficient way to customize their view.

This pattern offers users clear choices to join a meeting, enabling them to download the app, continue in the browser, or open the existing application for optimal experience.

A dynamic background animation on page load engages users immediately, providing visual interest and a sense of activity while content renders.

Users can quickly toggle between light and dark themes via a side-drawer, enhancing visual comfort and accessibility without leaving the current page.

This pattern displays real-time audio levels as a dynamic graph, providing immediate visual feedback on sound input during a call.

This collapsible sidebar menu allows users to expand or hide navigation options, optimizing screen real estate while maintaining easy access to key sections.

This vertical icon menu provides quick access to key sections, revealing descriptive tooltips on hover to aid navigation and improve user pathfinding.

This pattern reveals a floating popover on click, providing immediate, context-specific information or actions without navigating away from the current view.

This pattern uses a fixed background image that animates and shifts as the user scrolls, creating a dynamic and engaging visual experience.

Users can collapse and expand layout sidebars to optimize screen space, enhancing focus on primary content while maintaining quick access to navigation.

Users can effortlessly upload files by dragging them from their desktop directly into a designated drop zone within the application.

A popover on hover reveals contextual information or actions in a temporary overlay, enhancing user awareness without disrupting the main workflow.

This pattern uses an interactive background animation to engage users and provide visual feedback as they navigate or interact with elements on the page.

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

This multi-depth sidebar navigation allows users to quickly traverse complex information hierarchies, improving discoverability and reducing cognitive load.

Users can dynamically adjust the content preview area, allowing them to visualize their website across various screen sizes for optimal responsiveness and design fidelity.

This modal blackout pattern guides users through multi-step forms, ensuring focused input and clear progression for critical decisions.

Users can precisely trim video segments using a draggable timeline with visual thumbnails, enabling efficient content selection and faster processing.

Users can toggle the sidebar menu to hide or reveal navigation, optimizing screen space for content focus or quick pathfinding.

Users can efficiently select multiple table rows by clicking checkboxes, enabling bulk actions and streamlining content management workflows.

This pattern provides immediate visual feedback during page loads, progressively revealing content to reassure users that the system is actively processing their request.

This pattern uses a subtle background animation on hover to provide visual feedback, guiding users to interactive elements and enhancing discoverability.

This multi-step modal guides users through key features with clear explanations and visual cues, ensuring a smooth onboarding experience.

This pattern guides users through a multi-step onboarding or feature tour with a dismissible, paginated floating dialog, enhancing discoverability and adoption.

A top banner informs users about new design changes, offering a clear link to "Obtener más información" for those seeking further details.

Users can quickly check and manage their notifications by clicking the bell icon, revealing a dropdown with recent alerts and an option to clear them.

This pattern allows users to cancel an ongoing operation, like a file transfer, by clicking a clear "X" icon, providing immediate control over system processes.

Users can double-click an item to open its content in a new, independent window, enabling parallel viewing and enhanced multitasking.

This pattern displays a floating banner over existing content, allowing users to compose new input without losing context of the underlying page.

This pattern keeps primary actions readily accessible by stacking them vertically, ensuring users can quickly initiate key tasks without scrolling.

A UI pattern, exemplified by Netflix, that allows users to toggle the visibility of additional information, often within a navigation or content browsing context, such as revealing details about a video thumbnail via a dropdown or button interaction. Notable behavior: Click; Toggle; Expanded.

Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

This pattern gathers essential user contact information, including first name, surname, and email address, to facilitate account creation and future communication.

This empty state provides a clear call to action, guiding users to initiate content creation and overcome initial blank canvas paralysis.

This pattern provides a fixed, animated bubble that indicates reading progress, helping users understand their position within long articles and enhancing content appreciation.

This pattern uses a notification badge on the top bar to alert users to new rewards, which can be viewed in a dropdown menu for easy access and appreciation.

Users can effortlessly organize and filter list items by category and status, enhancing task management and focus within a customizable interface.

This sidebar empty state introduces new features with a clear illustration and call to action, guiding users to discover and adopt new functionalities.

This modal blackout pattern informs users about enhanced ad privacy, offering clear choices to manage settings or accept changes with distinct action buttons.

This empty state uses a humorous meme and a guiding text to playfully direct users toward the primary action button, encouraging engagement.

This pattern allows users to toggle a colorblind-friendly mode, enhancing accessibility by adding distinct shapes to color labels for improved differentiation.

Users can easily personalize their full-screen widget layout by dragging and dropping elements, enhancing their dashboard's utility and visual organization.

A static tooltip on a menu provides immediate, contextual information for menu items. It typically appears on hover or focus, enhancing user understanding of an item's function or details without requiring an explicit click.

This dedicated screen ensures users explicitly confirm or deny third-party access to their LinkedIn data, promoting transparency and control over personal information.

This floating voice widget provides persistent awareness of an active call, allowing users to quickly mute, unmute, or end the conversation without interrupting their workflow.

Users can invite up to six friends to a synchronized viewing experience, fostering shared enjoyment and social interaction around media content.

This pattern uses a tooltip to highlight "Top Recommended Restaurants," informing users that the displayed selection is personalized based on proximity, order history, and ratings.

This pattern streamlines desktop app sign-in by redirecting users to a web browser for authentication, then seamlessly returning them to the application.

Users can quickly access and customize widgets in a two-pane sidebar, enhancing productivity by providing relevant information at a glance.

A celebratory confetti explosion visually confirms successful user actions, enhancing positive reinforcement and delight.

This pattern offers users a clear, two-step download process, first presenting a prominent "Download" button and then a secondary, fixed-on-scroll button for consistent access.

This pattern highlights matching items within a dropdown menu as a user types into an associated search input, aiding in quick pathfinding and user selection.

A UI element, typically a bar, that visually indicates the user's reading progress or status within a document or page. Often integrated into a fixed navigation bar, it enhances awareness and helps users track their position. Notable behavior: Progress State; Fixed on Scroll.

This top-banner informs users about security risks and prompts them to take action, enhancing account safety and providing clear options to "Get Started" or "Dismiss".

This banner provides a clear, concise message to users, offering an alternative action to streamline the process of adding multiple subscribers.

This floating banner offers a persistent, non-intrusive call to action for subscription, allowing users to easily access pricing details while browsing content.

This pattern uses synchronized hover animations to highlight related data points across different UI elements, enhancing user awareness and decision-making.

This transition subtly scales down an image on hover, providing visual feedback and highlighting interactive elements without obscuring content.

Users can effortlessly browse and select product variations by color, with immediate visual feedback and clear stock availability, streamlining their purchasing decision.

This pattern uses tooltips to provide reminders or onboarding information within a store context, often including hypertext links for further action or navigation. It is primarily designed for desktop web environments to enhance user awareness.

This pattern uses subtle animations within an email to guide users through a privacy checkup, enhancing engagement and clarity for important account actions.

This pattern guides users through a multi-step signup process, including a clear pricing selection, to onboard them efficiently and transparently.

This pattern helps users compare three distinct pricing tiers, highlighting features and costs to facilitate an informed subscription decision.

This pattern enables users to effortlessly share content across popular social networks and via email, boosting content reach and engagement.

This pattern presents a floating tooltip with a dim overlay, guiding users to initiate or schedule a meeting with clear options and keyboard shortcuts for efficiency.

This pattern highlights new or experimental features within a dropdown menu, allowing users to discover and opt-in to upcoming functionalities.

This pattern informs users that a desktop application is downloading, providing clear instructions and a progress indicator to manage expectations and guide the next steps.

A modal dialog pattern requiring the user to explicitly type the name of an item to confirm its deletion, enhancing user awareness and preventing accidental data loss. Notable behavior: Text input; Button click (confirm/cancel); Modal open.

A top primary banner provides crucial, timely information and calls to action, ensuring users are immediately aware of important updates or opportunities.

Users can easily save items to a favorites list by clicking a heart icon, even as a guest, promoting future engagement and purchases.

This loader provides visual feedback to users that content is loading, maintaining engagement and reducing perceived wait times by showing the layout structure.

This pattern provides real-time feedback on file upload progress and status, allowing users to monitor, manage, and resolve potential issues efficiently.

Incremental pricing presents cost adjustments based on user selections or progression through steps. Users make decisions via toggle fields and buttons, influencing the final price.

Users can right-click the maximize button to access a dropdown menu, enabling quick window arrangement options like full screen or tiling to the left or right.

This pattern allows users to precisely select colors from a spectrum, adjust saturation and brightness, and save custom swatches for efficient reuse.

Users can efficiently manage multiple tasks by splitting their operating system screen into distinct, resizable windows, enhancing productivity and multitasking capabilities.

A prominent top banner informs users about new features or promotions, encouraging engagement with a clear call to action.