Patterns for Awareness & Status
- Desktop (116)
- Tablet (3)
- Mobile (19)
403. File Upload and Background Loader
Desktop, Awareness, Feedback, Onboarding, Web, English, User Selection, Drag & Drop Gesture, Loader, Animation, Image / Illustration, Empty State, Progress State, Button, File OS, Click Event
402. Transition: Zoom-to-Dock for Minimize
Desktop, Awareness, Accessibility, Decision Making, Apple OS, EspaƱol, Navbar, Drag & Drop Gesture, Animation, Pagination, Side Panel, Transition, Click Event, Browser Window
401. In-App News Notification
Desktop, Awareness, Notification Badge, Tooltip, Infinite Scroll, Hypertext Links
400. 3D Button Shadow
Desktop, Awareness, Pathfinding, Button, Animation, Transition
397. Modal w/ Card Options
Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, EspaƱol, Modal, Thumbnail, Animation, Close Overlay, Cards, Dim Overlay
388. Drag & Drop and Checkbox to Select Multiple Item
Desktop, Accessibility, Feedback, Awareness, Decision Making, Web, EspaƱol, User Selection, Drag & Drop Gesture, Tooltip, Scrollbar, Checkbox
386. Skeleton Loader
Desktop, Awareness, Onboarding, Web, English, Loader, Thumbnail
382. Interactive Background Animation
Desktop, Feedback, Awareness, Onboarding, Landing Page, Web, English, Animation, Scrollbar, QR
378. Modal Blackout w/ Animation
Desktop, Decision Making, Awareness, Onboarding, Web, EspaƱol, Modal, Hypertext Links, Animation
363. Better History - Back to Top on scroll
Desktop, Pathfinding, Awareness, Web, English, Pagination, Infinite Scroll, Hypertext Links, Fixed on Scroll
361. WhatsApp - Progress Bar Loading
Desktop, Awareness, Pathfinding, Onboarding, Web, EspaƱol, Loader, Hypertext Links
360. Page Outline Menu
Desktop, Pathfinding, Awareness, Accessibility, Onboarding, Web, English, Pagination, Anchor Scroll
356. MetaMap - Multi-Layout Topbar Menu
Desktop, Pathfinding, Awareness, Decision Making, Web, English, Navbar, Dropdown Menu
355. Jira - Feature Presentation Tooltip
Desktop, Awareness, Decision Making, Onboarding, Web, EspaƱol, Tooltip, Hypertext Links, Pagination
354. Figma - Floating Form with Steps
Desktop, Feedback, Consent, Awareness, Web, English, Text Input, Side Panel
353. Population Pyramid - Visualizations with live filters
Desktop, Pathfinding, Awareness, Decision Making, Web, EspaƱol, Graph, Filters, Dropdown Menu, Transition
349. HubSpot - Toggle High Contrast
Desktop, Accessibility, Awareness, Web, English, Hypertext Links, Navbar
347. YouTube - Floating Progress Bar
Desktop, Awareness, Accessibility, Feedback, Web, English, Side Panel, Accordion
357. Modal w/ Steps & Animation (No blackout)
Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration
344. MercadoLibre - Horizontal Item Slider
Desktop, Awareness, Pathfinding, Web, EspaƱol, Carrousel, Modal, Pagination, Image / Illustration
343. Behance - Login with Code Validation
Desktop, Consent, Decision Making, Awareness, Web, EspaƱol, Text Input, Hypertext Links, Pagination
339. Asana - Platform Onboarding Simulator
Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links
346. Sidebar Menu With Collapsable Items (Show More)
Desktop, Pathfinding, Accessibility, Awareness, Web, English, Accordion, Navbar
345. Vertical Accordion for FAQs
Desktop, Pathfinding, Accessibility, Awareness, Web, EspaƱol, Accordion, Hypertext Links
336. Floating Popover on Click
Desktop, Pathfinding, Awareness, Apple OS, English, Tooltip, Text Input, Hypertext Links
343. Modal/Dialog Drag & Drop to Fixed Position
Desktop, Accessibility, Pathfinding, Awareness, Web, EspaƱol, Drag & Drop Gesture, Modal, Side Panel, Alert Dialog
334. MercadoLibre - Call to Action Trigger Effect
Desktop, Decision Making, Awareness, Web, EspaƱol
331. Linkedin - Search Bar Blackout
Desktop, Pathfinding, Awareness, Web, EspaƱol
332. Drag & Drop to Create File from Web Image
Desktop, Pathfinding, Accessibility, Awareness, Web, Apple OS, Drag & Drop Gesture, Image / Illustration, File OS, Modal, Click Event
322. Search on Menu Items
Desktop, Pathfinding, Awareness, Apple OS, EspaƱol, Navbar, Dropdown Menu, Text Input, Fixed on Scroll
333. Static Tooltip with Steps
Desktop, Onboarding, Pathfinding, Awareness, Apple OS, English
325. Drag & Drop Tag Colors to Slots
Desktop, Decision Making, Awareness, Accessibility, Apple OS, English, Drag & Drop Gesture, Color Marker, Checkbox, Tags
319. Modal Blackout w/ Multiple Choice
Desktop, Decision Making, Consent, Awareness, Web, EspaƱol, Modal, Avatar, Button, Hypertext Links
315. Signal - PIN Reminder
Desktop, Awareness, Accessibility, Apple OS, English, Text Input, Modal, Banner, Hypertext Links
318. Instagram - Animated Illustration with Menu
Desktop, Pathfinding, Awareness, Web, English, Animation, Pagination, Carrousel
316. Modal Blackout for Delete Confirmation
Desktop, Decision Making, Awareness, Web, EspaƱol, Modal, Text Input, Button
308. MercadoLibre - Hero Slider
Desktop, Pathfinding, Awareness, Web, EspaƱol, Carrousel, Drag & Drop Gesture, Transition, Photo
308. Spinners for Module Loading
Desktop, Awareness, Pathfinding, Web, English, Loader, Twitter
307. Tooltip on Hover
Desktop, Awareness, Pathfinding, Apple OS, Web, English, Thumbnail, Tooltip, Side Panel, Google, Google Chrome
306. Drag & Drop for Reordering List Items (Mouse)
Desktop, Awareness, Accessibility, Web, English, Drag & Drop Gesture, Filters, List Items, Modal, Checkbox, Notion
305. Button Combo for App Download
Desktop, Pathfinding, Decision Making, Awareness, Web, EspaƱol, Button, Microsoft, Microsoft Teams
303. Background Animation (on Load)
Desktop, Onboarding, Awareness, Apple OS, English, Animation, Password Input
300. Sound Bars Graph
Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Sound Bar, Transition, Click Event, Dropdown Menu, WhatsApp
299. Fixed Corner Popup with Steps
Desktop, Feedback, Awareness, Web, English, Notion
_00.42.51.png?table=block&id=0252c6ff-06c8-496f-88d6-e8f876a3af4d&cache=v2)
295. āNEWā Badge on Menu Items
Desktop, Mobile, Awareness, Decision Making, Pathfinding, Web, English, Navbar, Notification Badge, Hypertext Links, Notion
293. Collapsable Sidebar Menu
Desktop, Awareness, Pathfinding, Accessibility, Web, English, EspaƱol, Side Panel, Transition, Click Event, Navbar, Google, Gmail
292. Vertical Icon Menu
Desktop, Awareness, Pathfinding, Web, English, Tooltip, Side Panel, Navbar, Hover Event, Image / Illustration, Notification Badge, Dashboard, Mailchimp
291. Action Menu from Button
Desktop, Decision Making, Awareness, Pathfinding, Web, English, Google, Google Meet
290. Floating Popover on Click
Desktop, Awareness, Decision Making, Web, English, Unsplash
288. Vimeo - Topbar Language Switching
Desktop, Awareness, Accessibility, Web, English, EspaƱol, Vimeo
286. Background Animation on Scroll
Desktop, Awareness, Pathfinding, Web, EspaƱol, Animation, Transition, Image / Illustration, Fixed on Scroll, Apple
285. Cloudflare - Sidebar with Scroll
Desktop, Pathfinding, Awareness, Web, English, Cloudflare
284. Emergency Information Map
Desktop, Pathfinding, Awareness, Landing Page, Web, EspaƱol, Google
284. Top Tooltip on Link Hover
Desktop, Awareness, Pathfinding, Web, English, Crunchbase
281. Background Animation (on Mouse Move)
Desktop, Awareness, Web, English
268. Drag & Drop to Upload File
Desktop, Awareness, Pathfinding, Web, Apple OS, English, Drag & Drop Gesture, Modal, Hypertext Links, Animation, Image / Illustration, GIPHY
_07.10.33_p._m..png?table=block&id=1b4e4bae-3d76-8055-baf9-d28c23cd351f&cache=v2)
275. Popover on Hover
Desktop, Awareness, Decision Making, Web, EspaƱol, Tooltip, Linkedin
274. Interactive Background Animation
Desktop, Pathfinding, Awareness, Web, English, Animation, Loader, Drag & Drop Gesture, GitHub
243. GIPHY - Trim Video Slicers
Desktop, Decision Making, Awareness, Accessibility, Web, English, Animation, User Selection, Drag & Drop Gesture, GIPHY
253. Youtube - Table Row Selector
Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google
251. Progressive Layout Loader
Desktop, Pathfinding, Awareness, Web, English, Tooltip, Loader, Animation, Google, Google Analytics
235. Background Animation (on Mouse Hover)
Desktop, Decision Making, Awareness, Pathfinding, Web, EspaƱol, Animation, Hypertext Links, Disney
241. Modal Blackout w/ Steps
Desktop, Onboarding, Awareness, Web, English, Modal, Hypertext Links, Pagination, Image / Illustration, Wordpress
231. Floating Dialog Popover w/ Steps
Desktop, Awareness, Pathfinding, Web, EspaƱol, Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress
_15.12.59.png?table=block&id=9d78d4bd-0fab-4f57-9291-2d0e1b8e99a9&cache=v2)
229. Top Banner for Design Changes
Desktop, Awareness, Web, EspaƱol, Hypertext Links, Banner, Google, Google Meet
_16.00.46.png?table=block&id=64a4f84d-2f69-4a08-86e4-8fa4fe9dcdf7&cache=v2)
222. Floating Banner on User Input
Desktop, Decision Making, Awareness, Web, English, Banner, Twitter
221. Stacked Action Button
Desktop, Awareness, Pathfinding, Web, English, Fixed on Scroll, Navbar, Infinite Scroll, Button, Back Link, Search Input, Twitter
212. Automatic Background Animation (on Load)
Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links
_00.32.31.png?table=block&id=99d40e79-c293-4cc7-a954-2f94c0c543a9&cache=v2)
172. PedidosYa - Search Results Recommendation
Desktop, Onboarding, Decision Making, Awareness, Web, EspaƱol, Tooltip, PedidosYa
_11.28.04_a._m..png?table=block&id=9ed7b18a-e2c4-459c-89d2-022135be31eb&cache=v2)
207. Downloading Desktop App
Desktop, Awareness, Web, English, Hypertext Links
_11.42.04_p._m..png?table=block&id=d98eb8a6-5b4b-424b-9a5b-65dbede004ee&cache=v2)
45. Webapp Video Loader
Desktop, Awareness, Web, English, EspaƱol, Loader
_12.03.02.png?table=block&id=308eebf9-c4aa-4879-a6b9-62970b2cc7d2&cache=v2)
199. Sidebar Emptystate
Desktop, Onboarding, Awareness, Web, English, Side Panel, Hypertext Links, Empty State, Image / Illustration, Google, Google Suite
_13.52.38.png?table=block&id=d897f247-1e88-4d89-a9d1-20bef4084553&cache=v2)
43. File Upload Status
Desktop, Awareness, Web, English, Side Panel, Fixed on Scroll, Error State, Progress State, Google, Google Suite
190. Delete Confirmation w/ Name (moved)
Desktop, Awareness, Web, English, Text Input, Modal, Hypertext Links, Webflow
_09.05.58_p._m..png?table=block&id=0661a925-a354-4f4d-bf55-7d96d9ba0b6f&cache=v2)
189. Feature Preview on Menu
Desktop, Awareness, Accessibility, Web, English, Dropdown Menu, Notification Badge
5. Website Promotional Top Banners
Desktop, Awareness, Web, English, Banner, Hypertext Links
_09.47.02_p._m..png?table=block&id=fe5cf013-944c-4937-88fd-36f64cfb47c7&cache=v2)
31. Page Blocker Edition Warning
Desktop, Awareness, Web, English
132. Amazon - Store Tooltip Reminders
Desktop, Onboarding, Awareness, Web, EspaƱol, Tooltip, Hypertext Links, Amazon
130. Animated Email Page
Desktop, Awareness, Decision Making, Email, English, Animation, Hypertext Links, Google, Gmail
_10.03.52.png?table=block&id=ad3ab3c8-6c9a-4429-9994-30afeb682d3f&cache=v2)
189. Illustration (Meme) on Empty State
Desktop, Awareness, Web, English, Image / Illustration, Hypertext Links, Webflow
_06.23.32_p._m..png?table=block&id=a5d3a106-65c7-460b-a778-61c304ae5652&cache=v2)
42. Browser Status Banner for Pages
Desktop, š± Mobile, Awareness, Apple OS, EspaƱol, Banner, Hypertext Links, Empty State, Error State, Apple Safari
164. Static Tooltip on Menu
Desktop, Awareness, Web, EspaƱol, Tooltip, Hypertext Links, Linkedin
158. Bar Reading Status
Desktop, Awareness, Pathfinding, Web, English, Progress State, Notification Badge, Navbar, Fixed on Scroll, McKinsey
56. Floating Tooltip with Steps and Blackout
Desktop, Onboarding, Decision Making, Awareness, Web, English, EspaƱol, Google, Gmail
_23.24.56.png?table=block&id=06f060c5-b44d-4082-9d62-b7c0189bcb6b&cache=v2)
203. Password Expiration on Login
Desktop, Awareness, Web, English
179. Stylized Feature Highlighting
Desktop, Awareness, Web, English, Google, Google Suite
_09.35.30_p._m..png?table=block&id=c1db356c-f946-4b51-bb38-bfb5ac2ec749&cache=v2)
147. Linked Settings for User Permissions
Desktop, Consent, Awareness, Web, English, Google, Google Analytics
139. Synced Hover Animations
Desktop, Decision Making, Awareness, Web, English, Hypertext Links, Graph, Mailchimp
_11.56.38_a._m..png?table=block&id=6da484d8-6890-4226-a606-6a20416b7eca&cache=v2)
124. Critical Changes Warning
Desktop, Awareness, Apple OS, EspaƱol, Slack
_23.29.09.png?table=block&id=ad1d4038-7dbf-406c-8fd5-eafa71de482b&cache=v2)
100. Floating Tooltip/Dialog
Desktop, Awareness, Web, EspaƱol, Google, Google Sites
117. Side Status Notification
Desktop, Awareness, Apple OS, English, EspaƱol, WhatsApp
_00.09.24.png?table=block&id=f48d5687-133d-44a0-a396-718ca971a554&cache=v2)
116. User Feedback on Web Content
Desktop, Feedback, Awareness, Web, EspaƱol
_21.29.50.png?table=block&id=5a6c8023-5e5e-42d0-b8fc-da78c2f1f777&cache=v2)
63. GitHub - Contextual Back Navigation Bar
Desktop, Awareness, Pathfinding, Web, English, GitHub
116. 2-pane Automatic Slider
Desktop, Pathfinding, Awareness, Web, EspaƱol, Tiendanube
_08.04.40_a._m..png?table=block&id=810934ce-58c2-461f-bcaa-d79ea9cced35&cache=v2)
133. Website-Browser Notification Reminder
Desktop, Awareness, Web, English, Facebook
176. Wordpress.com - Natural Inputs with Suggestions
Desktop, Decision Making, Accessibility, Awareness, Pathfinding, Web, English, Wordpress
91. Bubble Status Reading
Desktop, Pathfinding, Awareness, Appreciation, Web, English, Infinite Scroll, Pagination, Animation, Fixed on Scroll, Progress State, Empty State, TechCrunch
173. Share Invitation to Live Movie
Desktop, Pathfinding, Onboarding, Awareness, Web, Apple OS, EspaƱol, Hypertext Links, Navbar, Live State, Empty State, Copy to Clipboard, Avatar, Thumbnail, Invitation Link, Disney
_23.36.31.png?table=block&id=22445216-099c-4354-bc23-e3a914fa931f&cache=v2)
83. Rewards Notification on Topbar
Desktop, Awareness, Appreciation, Web, English, Notification Badge, Dropdown Menu, Navbar
_03.59.07_p._m..png?table=block&id=0ef4338e-4be1-481e-9753-6b2bb792f374&cache=v2)
55. Contextual Form Input Errors
Desktop, Awareness, Web, EspaƱol, Zoom
_02.05.03_p._m..png?table=block&id=4eb0c3ce-f51b-438a-96de-d7045dae1631&cache=v2)
38. Youtube - Video Statusbar
Desktop, Awareness, Web, English, Google, YouTube
_19.04.51.png?table=block&id=c9b88fac-62bb-47ff-966c-7ff44c98dbdd&cache=v2)
66. Actionable Empty State
Desktop, Onboarding, Awareness, Web, English, Loader, Empty State, Google, Google Suite
_10.22.23_p._m..png?table=block&id=a402fe60-7ce5-4745-a1f9-f4b828842202&cache=v2)
39. Youtube - Dismissed Bottom Popup
Desktop, Awareness, COVID-19 Edition, Web, English
196. Video Story on Website
Desktop, Decision Making, Awareness, Web, EspaƱol
37. Branded Illustrations for Reinforcement
Desktop, Awareness, Web, English
_02.04.21_p._m..png?table=block&id=9b36cb7e-e548-458a-986d-ebcd770dd991&cache=v2)
42. Modal for Tags Editing
Desktop, Accessibility, Awareness, Web, English, Google, Google Keep
_12.12.09_p._m..png?table=block&id=4debb66f-0e58-4abf-a3bd-6a5508e1bf7d&cache=v2)
80. Contextual Input Status
Desktop, Awareness, Web, English, Noun Project
_20.00.24.png?table=block&id=e6aae8a8-6e93-4986-82bc-b86e2f0f1dd2&cache=v2)
29. General Form Errors Banner
Desktop, Awareness, Web, English, Text Input, Banner, Notification Badge, Mailchimp
_12.48.42_p._m..png?table=block&id=b4906d6f-a1ce-4586-9895-0858a8b7f2cc&cache=v2)
105. Floating Tooltip Blackout
Desktop, Awareness, Web, English, Button, Dim Overlay, Tooltip, Alert Dialog, Close Overlay, Hypertext Links
23. Floating Voice Widget with Actions
Desktop, Awareness, Apple OS, macOS, English, Fixed on Scroll, Button, Animation, Avatar, Sound Bar, Color Marker, Apple
50. Food Order Receipt
Desktop, Email notification, Awareness, Email, English, Uber EATS
10. Dedicated Screen for Action Confirmation
Desktop, Decision Making, Awareness, Consent, Web, EspaƱol, English, Button, Hypertext Links, Invitation Link, Image / Illustration, Linkedin
_16.21.40.png?table=block&id=c1ac4cac-0b2d-4491-bcf8-45f141c0886e&cache=v2)
146. Intelligencer - Hamburger Menu
Desktop, Mobile, Pathfinding, Awareness, Web, English
_07.33.05_p._m..png?table=block&id=e04cf39f-acb8-4e76-9283-92b13dc9998c&cache=v2)
6. Modal Blackout w/ Form
Desktop, Awareness, Web, English
_23.17.53.png?table=block&id=2d513c69-382d-4510-918b-0381251b1d98&cache=v2)
4. Floating Status Banner
Desktop, Awareness, Web, Google, Gmail
155. Menu Search Highlighting
Desktop, Awareness, Pathfinding, Apple OS, macOS, EspaƱol, Dropdown Menu, Search Input, Click Event, User Selection, Text Input, Dim Overlay, Apple