UX PATTERN
Awareness & Status
Because we read faster and worse than thought. Useful ways to drive user's attention to a specific topic or area of the screen for ease of use, not for selling ads.
397. Modal with Card Options
397. Modal with Card Options
Modal
388. Multiple Item Selection Drag & Drop
388. Multiple Item Selection Drag & Drop
SelectionDrag & Drop
386. Skeleton Loader
386. Skeleton Loader
Loader
382. Interactive Background Animation
382. Interactive Background Animation
Animation & Video
378. Modal Blackout with Animation
378. Modal Blackout with Animation
ModalHypertextAnimation & Video
363. Better History - Back to Top on scroll
363. Better History - Back to Top on scroll
PaginationScrollHypertextFixed on Scroll
361. WhatsApp - Progress Bar Loading
361. WhatsApp - Progress Bar Loading
LoaderHypertext
360. Page Outline Menu
360. Page Outline Menu
PaginationScroll
356. MetaMap - Multi-Layout Topbar Menu
356. MetaMap - Multi-Layout Topbar Menu
NavbarDropdown Menu
355. Jira - Feature Presentation Tooltip
355. Jira - Feature Presentation Tooltip
TooltipHypertextPagination
354. Figma - Floating Form with Steps
354. Figma - Floating Form with Steps
Input FieldSide Panel
353. Population Pyramid - Visualizations with live filters
353. Population Pyramid - Visualizations with live filters
GraphAnimation & VideoFiltersDropdown Menu
349. HubSpot - Toggle High Contrast
349. HubSpot - Toggle High Contrast
HypertextNavbar
347. YouTube - Floating Progress Bar
347. YouTube - Floating Progress Bar
Side PanelAccordion
357. Modal with Steps (No blackout)
357. Modal with Steps (No blackout)
ModalAnimation & Video
344. MercadoLibre - Horizontal Item Slider
344. MercadoLibre - Horizontal Item Slider
CarrouselModalPaginationIllustration
343. Behance - Login with Code Validation 
343. Behance - Login with Code Validation
Input FieldHypertextPagination
339. Asana - Platform Onboarding Simulator
339. Asana - Platform Onboarding Simulator
Input FieldPaginationAnimation & VideoHypertext
346. Toggl - Sidebar Menu Show More
346. Toggl - Sidebar Menu Show More
AccordionNavbar
345. Vertical Accordion for FAQs
345. Vertical Accordion for FAQs
AccordionHypertext
336. Floating Popover on Click
336. Floating Popover on Click
TooltipInput FieldHypertext
343. Modal Drag & Drop to Fixed Position
343. Modal Drag & Drop to Fixed Position
Drag & DropModalSide Panel
334. MercadoLibre - Call to Action Trigger Effect
334. MercadoLibre - Call to Action Trigger Effect
331. Linkedin - Search Bar Blackout
331. Linkedin - Search Bar Blackout
332. Apple - Drag&Drop Browser File to Desktop
332. Apple - Drag&Drop Browser File to Desktop
322. Apple - Search on Menu Items
322. Apple - Search on Menu Items
333. Static Tooltip with Steps
333. Static Tooltip with Steps
325. Apple - Drag & Drop Slots
325. Apple - Drag & Drop Slots
319. Wordpress - Delete Confirmation with Name
319. Wordpress - Delete Confirmation with Name
315. Signal - PIN Reminder
315. Signal - PIN Reminder
Input FieldModalBannerHypertext
312. Instagram - Animated Illustration with Menu
312. Instagram - Animated Illustration with Menu
310. HubSpot - Checkbox Confirmation
310. HubSpot - Checkbox Confirmation
308. MercadoLibre - Hero Slider
308. MercadoLibre - Hero Slider
308. Spinners for Module Loading
308. Spinners for Module Loading
307. Tooltip on Hover
307. Tooltip on Hover
306. Drag & Drop for Reordering Items
306. Drag & Drop for Reordering Items
305. Button Combo for App Download
305. Button Combo for App Download
303. Background Animation
303. Background Animation
300. Sound Bars Graph
300. Sound Bars Graph
299. Fixed Corner Popup with Steps
299. Fixed Corner Popup with Steps
295. “NEW” Badge on Menu Items_00.42.51/w=1920,quality=90,fit=scale-down)
295. “NEW” Badge on Menu Items
NavbarNotification BadgeHypertext
293. Collapsable Sidebar Menu
293. Collapsable Sidebar Menu
292. Vertical Icon Menu
292. Vertical Icon Menu
291. Action Menu from Button
291. Action Menu from Button
289. Floating Popover on Click
289. Floating Popover on Click
288. Vimeo - Topbar Language Switching
288. Vimeo - Topbar Language Switching
286. Apple - Background Animation on Scroll
286. Apple - Background Animation on Scroll
285. Cloudflare - Sidebar with Scroll
285. Cloudflare - Sidebar with Scroll
284. Emergency Information Map
284. Emergency Information Map
284. Top Tooltip on Link Hover
284. Top Tooltip on Link Hover
281. Ideabot - Background Animation on Mouse Movement
281. Ideabot - Background Animation on Mouse Movement
268. GIPHY - Alert on Drag & Drop
268. GIPHY - Alert on Drag & Drop
Drag & DropModalHypertextAnimation & VideoIllustration
275. Popover on Hover_07.10.33_p._m..png&w=1920&q=90)
275. Popover on Hover
Tooltip
274. Interactive Background Animation
274. Interactive Background Animation
Animation & VideoLoaderDrag & Drop
243. GIPHY - Trim Video Slicers
243. GIPHY - Trim Video Slicers
Animation & VideoSelectionDrag & Drop
253. Youtube - Table Row Selector
253. Youtube - Table Row Selector
ScrollSelectionInput Field
251. Progressive Layout Loader
251. Progressive Layout Loader
TooltipLoaderAnimation & Video
235. Background Animation on Hover
235. Background Animation on Hover
Animation & VideoHypertext
241. Modal Blackout with Steps
241. Modal Blackout with Steps
ModalHypertextPaginationIllustration
231. Automatic Floating Popover with Steps
231. Automatic Floating Popover with Steps
HypertextPaginationSide Panel
229. Top Banner for Design Changes_15.12.59/w=1920,quality=90,fit=scale-down)
229. Top Banner for Design Changes
HypertextBanner
222. Floating Banner on User Input_16.00.46/w=1920,quality=90,fit=scale-down)
222. Floating Banner on User Input
Banner
215. Stacked Action Button
215. Stacked Action Button
Fixed on ScrollNavbarScroll
212. Automatic Background Animation 
212. Automatic Background Animation
Animation & VideoLoaderHypertext
172. PedidosYa - Search Results Recommendation_00.32.31/w=1920,quality=90,fit=scale-down)
172. PedidosYa - Search Results Recommendation
Tooltip
101. Downloading Desktop App_11.28.04_a._m..png&w=1920&q=90)
101. Downloading Desktop App
Hypertext
45. Webapp Video Loader_11.42.04_p._m..png&w=1920&q=90)
45. Webapp Video Loader
Loader
199. Sidebar Emptystate_12.03.02/w=1920,quality=90,fit=scale-down)
199. Sidebar Emptystate
Side PanelHypertextEmpty State
43. File Upload Status_13.52.38/w=1920,quality=90,fit=scale-down)
43. File Upload Status
Side PanelFixed on ScrollError StateProgress State
95. Delete Confirmation with Name_02.02.36_p._m..png&w=1920&q=90)
95. Delete Confirmation with Name
Input FieldModalHypertext
189. Feature Preview on Menu_09.05.58_p._m..png&w=1920&q=90)
189. Feature Preview on Menu
Dropdown MenuNotification Badge
5. Website Promotional Top Banners
5. Website Promotional Top Banners
BannerHypertext
31. Page Blocker Edition Warning_09.47.02_p._m..png&w=1920&q=90)
31. Page Blocker Edition Warning
132. Amazon - Store Tooltip Reminders
132. Amazon - Store Tooltip Reminders
TooltipHypertext
130. Animated Email Page
130. Animated Email Page
Animation & VideoHypertext
189. Illustration (Meme) on Empty State_10.03.52/w=1920,quality=90,fit=scale-down)
189. Illustration (Meme) on Empty State
IllustrationHypertext
42. Browser Status Banner for Pages_06.23.32_p._m..png&w=1920&q=90)
42. Browser Status Banner for Pages
BannerHypertextEmpty StateError State
158. Bar Reading Status
158. Bar Reading Status
Progress StateNotification BadgeNavbarFixed on Scroll
56. Automatic Blackout Popover with Steps
56. Automatic Blackout Popover with Steps
203. Password Expiration on Login_23.24.56/w=1920,quality=90,fit=scale-down)
203. Password Expiration on Login
179. Stylized Feature Highlighting
179. Stylized Feature Highlighting
147. Linked Settings for User Permissions_09.35.30_p._m..png&w=1920&q=90)
147. Linked Settings for User Permissions
139. Synced Hover Animations
139. Synced Hover Animations
HypertextGraph
124. Critical Changes Warning_11.56.38_a._m..png&w=1920&q=90)
124. Critical Changes Warning
100. Automatic Floating Popover_23.29.09/w=1920,quality=90,fit=scale-down)
100. Automatic Floating Popover
117. Side Status Notification
117. Side Status Notification
116. User Feedback on Web Content_00.09.24/w=1920,quality=90,fit=scale-down)
116. User Feedback on Web Content
63. GitHub - Contextual Back Navigation Bar_21.29.50/w=1920,quality=90,fit=scale-down)
63. GitHub - Contextual Back Navigation Bar
116. 2-pane Automatic Slider
116. 2-pane Automatic Slider
133. Website-Browser Notification Reminder_08.04.40_a._m..png&w=1920&q=90)
133. Website-Browser Notification Reminder
176. Wordpress.com - Natural Inputs with Suggestions
176. Wordpress.com - Natural Inputs with Suggestions
91. Bubble Status Reading 
91. Bubble Status Reading
ScrollPaginationAnimation & VideoFixed on ScrollProgress StateEmpty State
173. Share Invitation to Live Movie
173. Share Invitation to Live Movie
HypertextNavbarLive StateEmpty StateCopy to ClipboardAvatarShare ThumbnailInvitation Link
83. Rewards Notification on Topbar_23.36.31/w=1920,quality=90,fit=scale-down)
83. Rewards Notification on Topbar
Notification BadgeDropdown MenuNavbar
55. Contextual Form Input Errors_03.59.07_p._m..png&w=1920&q=90)
55. Contextual Form Input Errors
38. Youtube - Video Statusbar_02.05.03_p._m..png&w=1920&q=90)
38. Youtube - Video Statusbar
66. Actionable Empty State_19.04.51/w=1920,quality=90,fit=scale-down)
66. Actionable Empty State
LoaderEmpty State
39. Youtube - Dismissed Bottom Popup_10.22.23_p._m..png&w=1920&q=90)
39. Youtube - Dismissed Bottom Popup
196. Video Story on Website
196. Video Story on Website
37. Branded Illustrations for Reinforcement
37. Branded Illustrations for Reinforcement
42. Modal for Tags Editing_02.04.21_p._m..png&w=1920&q=90)
42. Modal for Tags Editing
80. Contextual Input Status_12.12.09_p._m..png&w=1920&q=90)
80. Contextual Input Status
29. General Form Errors Banner_20.00.24/w=1920,quality=90,fit=scale-down)
29. General Form Errors Banner
Input FieldBannerNotification Badge
105. Automatic Blackout Popover_12.48.42_p._m..png&w=1920&q=90)
105. Automatic Blackout Popover
178. OS Voice Widget with Actions
178. OS Voice Widget with Actions
50. Food Order Receipt
50. Food Order Receipt
180. Dedicated Screen for Action Confirmation
180. Dedicated Screen for Action Confirmation
146. Intelligencer - Hamburger Menu_16.21.40/w=1920,quality=90,fit=scale-down)
146. Intelligencer - Hamburger Menu
6. Modal Blackout with Form_07.33.05_p._m..png&w=1920&q=90)
6. Modal Blackout with Form
4. Floating Status Banner_23.17.53/w=1920,quality=90,fit=scale-down)
4. Floating Status Banner
155. Menu Search Highlighting
155. Menu Search Highlighting