Home
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.10

Home
/Flows
/Awareness & Status
Description
We read faster and worse than thought.

Patterns for 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.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (114)
  • Tablet (2)
  • Mobile (19)
401. In-App News Notification

401. In-App News Notification

Desktop, Awareness, Notification Badge, Tooltip, Infinite Scroll, Hypertext Links

Open pattern
400. 3D Button Shadow

400. 3D Button Shadow

Desktop, Awareness, Pathfinding, Button, Animation, Transition

Open pattern
397. Modal with Card Options

397. Modal with Card Options

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, EspaƱol, Modal, Thumbnail, Animation

Open pattern
388. Multiple Item Selection Drag & Drop

388. Multiple Item Selection Drag & Drop

Desktop, Accessibility, Feedback, Awareness, Decision Making, Web, EspaƱol, User Selection, Drag & Drop Gesture, Tooltip, Scrollbar, Checkbox

Open pattern
386. Skeleton Loader

386. Skeleton Loader

Desktop, Awareness, Onboarding, Web, English, Loader, Thumbnail

Open pattern
382. Interactive Background Animation

382. Interactive Background Animation

Desktop, Feedback, Awareness, Onboarding, Landing Page, Web, English, Animation, Scrollbar, QR

Open pattern
378. Modal Blackout with Animation

378. Modal Blackout with Animation

Desktop, Decision Making, Awareness, Onboarding, Web, EspaƱol, Modal, Hypertext Links, Animation

Open pattern
363. Better History - Back to Top on scroll

363. Better History - Back to Top on scroll

Desktop, Pathfinding, Awareness, Web, English, Pagination, Infinite Scroll, Hypertext Links, Fixed on Scroll

Open pattern
361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

Desktop, Awareness, Pathfinding, Onboarding, Web, EspaƱol, Loader, Hypertext Links

Open pattern
360. Page Outline Menu

360. Page Outline Menu

Desktop, Pathfinding, Awareness, Accessibility, Onboarding, Web, English, Pagination, Anchor Scroll

Open pattern
356. MetaMap - Multi-Layout Topbar Menu

356. MetaMap - Multi-Layout Topbar Menu

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Navbar, Dropdown Menu

Open pattern
No preview

355. Jira - Feature Presentation Tooltip

Desktop, Awareness, Decision Making, Onboarding, Web, EspaƱol, Tooltip, Hypertext Links, Pagination

Open pattern
No preview

354. Figma - Floating Form with Steps

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

Open pattern
353. Population Pyramid - Visualizations with live filters

353. Population Pyramid - Visualizations with live filters

Desktop, Pathfinding, Awareness, Decision Making, Web, EspaƱol, Graph, Filters, Dropdown Menu, Transition

Open pattern
349. HubSpot - Toggle High Contrast

349. HubSpot - Toggle High Contrast

Desktop, Accessibility, Awareness, Web, English, Hypertext Links, Navbar

Open pattern
347. YouTube - Floating Progress Bar

347. YouTube - Floating Progress Bar

Desktop, Awareness, Accessibility, Feedback, Web, English, Side Panel, Accordion

Open pattern
357. Modal with Steps (No blackout)

357. Modal with Steps (No blackout)

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

Open pattern
344. MercadoLibre - Horizontal Item Slider

344. MercadoLibre - Horizontal Item Slider

Desktop, Awareness, Pathfinding, Web, EspaƱol, Carrousel, Modal, Pagination, Image / Illustration

Open pattern
343. Behance - Login with Code Validation

343. Behance - Login with Code Validation

Desktop, Consent, Decision Making, Awareness, Web, EspaƱol, Text Input, Hypertext Links, Pagination

Open pattern
339. Asana - Platform Onboarding Simulator

339. Asana - Platform Onboarding Simulator

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links

Open pattern
346. Toggl - Sidebar Menu Show More

346. Toggl - Sidebar Menu Show More

Desktop, Pathfinding, Accessibility, Awareness, Web, English, Accordion, Navbar

Open pattern
345. Vertical Accordion for FAQs

345. Vertical Accordion for FAQs

Desktop, Pathfinding, Accessibility, Awareness, Web, EspaƱol, Accordion, Hypertext Links

Open pattern
No preview

336. Floating Popover on Click

Desktop, Pathfinding, Awareness, Apple OS, English, Tooltip, Text Input, Hypertext Links

Open pattern
343. Modal Drag & Drop to Fixed Position

343. Modal Drag & Drop to Fixed Position

Desktop, Accessibility, Pathfinding, Awareness, Web, EspaƱol, Drag & Drop Gesture, Modal, Side Panel

Open pattern
334. MercadoLibre - Call to Action Trigger Effect

334. MercadoLibre - Call to Action Trigger Effect

Desktop, Decision Making, Awareness, Web, EspaƱol

Open pattern
331. Linkedin - Search Bar Blackout

331. Linkedin - Search Bar Blackout

Desktop, Pathfinding, Awareness, Web, EspaƱol

Open pattern
332. Apple - Drag&Drop Browser File to Desktop

332. Apple - Drag&Drop Browser File to Desktop

Desktop, Pathfinding, Accessibility, Awareness, Web, Drag & Drop Gesture, Image / Illustration, File OS, Modal, Click Event

Open pattern
322. Search on Menu Items

322. Search on Menu Items

Desktop, Pathfinding, Awareness, Apple OS, EspaƱol, Navbar, Dropdown Menu, Text Input

Open pattern
No preview

333. Static Tooltip with Steps

Desktop, Onboarding, Pathfinding, Awareness, Apple OS, English

Open pattern
325. Apple - Drag & Drop Slots

325. Apple - Drag & Drop Slots

Desktop, Decision Making, Awareness, Accessibility, Apple OS, English

Open pattern
319. Wordpress - Delete Confirmation with Name

319. Wordpress - Delete Confirmation with Name

Desktop, Decision Making, Consent, Awareness, Web, EspaƱol, Modal, Avatar, Button, Hypertext Links

Open pattern
315. Signal - PIN Reminder

315. Signal - PIN Reminder

Desktop, Awareness, Accessibility, Apple OS, English, Text Input, Modal, Banner, Hypertext Links

Open pattern
318. Instagram - Animated Illustration with Menu

318. Instagram - Animated Illustration with Menu

Desktop, Pathfinding, Awareness, Web, English, Animation, Pagination, Carrousel

Open pattern
310. HubSpot - Checkbox Confirmation

310. HubSpot - Checkbox Confirmation

Desktop, Decision Making, Awareness, Web, EspaƱol, Modal, Text Input, Button

Open pattern
308. MercadoLibre - Hero Slider

308. MercadoLibre - Hero Slider

Desktop, Pathfinding, Awareness, Web, EspaƱol, Carrousel, Drag & Drop Gesture, Transition, Photo

Open pattern
308. Spinners for Module Loading

308. Spinners for Module Loading

Desktop, Awareness, Pathfinding, Web, English, Loader, Twitter

Open pattern
307. Tooltip on Hover

307. Tooltip on Hover

Desktop, Awareness, Pathfinding, Apple OS, Web, English, Thumbnail, Tooltip, Side Panel, Google, Google Chrome

Open pattern
306. Drag & Drop for Reordering Items

306. Drag & Drop for Reordering Items

Desktop, Awareness, Accessibility, Web, English, Drag & Drop Gesture, Filters, Notion

Open pattern
305. Button Combo for App Download

305. Button Combo for App Download

Desktop, Pathfinding, Decision Making, Awareness, Web, EspaƱol, Button, Microsoft, Microsoft Teams

Open pattern
303. Background Animation

303. Background Animation

Desktop, Onboarding, Awareness, Web, English, Animation, Password Input

Open pattern
300. Sound Bars Graph

300. Sound Bars Graph

Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Sound Bar, Transition, Click Event, Dropdown Menu, WhatsApp

Open pattern
No preview

299. Fixed Corner Popup with Steps

Desktop, Feedback, Awareness, Web, English, Notion

Open pattern
295. ā€œNEWā€ Badge on Menu Items

295. ā€œNEWā€ Badge on Menu Items

Desktop, Mobile, Awareness, Decision Making, Pathfinding, Web, English, Navbar, Notification Badge, Hypertext Links, Notion

Open pattern
293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

Desktop, Awareness, Pathfinding, Accessibility, Web, English, EspaƱol, Side Panel, Transition, Click Event, Navbar, Google, Gmail

Open pattern
292. Vertical Icon Menu

292. Vertical Icon Menu

Desktop, Awareness, Pathfinding, Web, English, Tooltip, Side Panel, Navbar, Mailchimp

Open pattern
291. Action Menu from Button

291. Action Menu from Button

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Google, Google Meet

Open pattern
290. Floating Popover on Click

290. Floating Popover on Click

Desktop, Awareness, Decision Making, Web, English, Unsplash

Open pattern
288. Vimeo - Topbar Language Switching

288. Vimeo - Topbar Language Switching

Desktop, Awareness, Accessibility, Web, English, EspaƱol, Vimeo

Open pattern
286. Apple - Background Animation on Scroll

286. Apple - Background Animation on Scroll

Desktop, Awareness, Pathfinding, Web, EspaƱol, Apple

Open pattern
285. Cloudflare - Sidebar with Scroll

285. Cloudflare - Sidebar with Scroll

Desktop, Pathfinding, Awareness, Web, English, Cloudflare

Open pattern
284. Emergency Information Map

284. Emergency Information Map

Desktop, Pathfinding, Awareness, Landing Page, Web, EspaƱol, Google

Open pattern
No preview

284. Top Tooltip on Link Hover

Desktop, Awareness, Pathfinding, Web, English, Crunchbase

Open pattern
281. Ideabot - Background Animation on Mouse Movement

281. Ideabot - Background Animation on Mouse Movement

Desktop, Awareness, Web, English

Open pattern
268. GIPHY - Alert on Drag & Drop

268. GIPHY - Alert on Drag & Drop

Desktop, Awareness, Pathfinding, Web, Apple OS, English, Drag & Drop Gesture, Modal, Hypertext Links, Animation, Image / Illustration, GIPHY

Open pattern
275. Popover on Hover

275. Popover on Hover

Desktop, Awareness, Decision Making, Web, EspaƱol, Tooltip, Linkedin

Open pattern
274. Interactive Background Animation

274. Interactive Background Animation

Desktop, Pathfinding, Awareness, Web, English, Animation, Loader, Drag & Drop Gesture, GitHub

Open pattern
243. GIPHY - Trim Video Slicers

243. GIPHY - Trim Video Slicers

Desktop, Decision Making, Awareness, Accessibility, Web, English, Animation, User Selection, Drag & Drop Gesture, GIPHY

Open pattern
253. Youtube - Table Row Selector

253. Youtube - Table Row Selector

Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google

Open pattern
251. Progressive Layout Loader

251. Progressive Layout Loader

Desktop, Pathfinding, Awareness, Web, English, Tooltip, Loader, Animation, Google, Google Analytics

Open pattern
235. Background Animation on Hover

235. Background Animation on Hover

Desktop, Decision Making, Awareness, Pathfinding, Web, EspaƱol, Animation, Hypertext Links, Disney

Open pattern
241. Modal Blackout with Steps

241. Modal Blackout with Steps

Desktop, Onboarding, Awareness, Web, English, Modal, Hypertext Links, Pagination, Image / Illustration, Wordpress

Open pattern
231. Automatic Floating Popover with Steps

231. Automatic Floating Popover with Steps

Desktop, Awareness, Pathfinding, Web, EspaƱol, Hypertext Links, Pagination, Side Panel, Wordpress

Open pattern
229. Top Banner for Design Changes

229. Top Banner for Design Changes

Desktop, Awareness, Web, EspaƱol, Hypertext Links, Banner, Google, Google Meet

Open pattern
222. Floating Banner on User Input

222. Floating Banner on User Input

Desktop, Decision Making, Awareness, Web, English, Banner, Twitter

Open pattern
215. Stacked Action Button

215. Stacked Action Button

Desktop, Awareness, Pathfinding, Web, English, Fixed on Scroll, Navbar, Infinite Scroll, Twitter

Open pattern
212. Automatic Background Animation

212. Automatic Background Animation

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

Open pattern
172. PedidosYa - Search Results Recommendation

172. PedidosYa - Search Results Recommendation

Desktop, Onboarding, Decision Making, Awareness, Web, EspaƱol, Tooltip, PedidosYa

Open pattern
101. Downloading Desktop App

101. Downloading Desktop App

Desktop, Awareness, Web, English, Hypertext Links

Open pattern
45. Webapp Video Loader

45. Webapp Video Loader

Desktop, Awareness, Web, English, EspaƱol, Loader

Open pattern
199. Sidebar Emptystate

199. Sidebar Emptystate

Desktop, Onboarding, Awareness, Web, English, Side Panel, Hypertext Links, Empty State, Google, Google Suite

Open pattern
43. File Upload Status

43. File Upload Status

Desktop, Awareness, Web, English, Side Panel, Fixed on Scroll, Error State, Progress State, Google, Google Suite

Open pattern
95. Delete Confirmation with Name

95. Delete Confirmation with Name

Desktop, Awareness, Web, English, Text Input, Modal, Hypertext Links, Webflow

Open pattern
189. Feature Preview on Menu

189. Feature Preview on Menu

Desktop, Awareness, Accessibility, Web, English, Dropdown Menu, Notification Badge

Open pattern
5. Website Promotional Top Banners

5. Website Promotional Top Banners

Desktop, Awareness, Web, English, Banner, Hypertext Links

Open pattern
31. Page Blocker Edition Warning

31. Page Blocker Edition Warning

Desktop, Awareness, Web, English

Open pattern
No preview

132. Amazon - Store Tooltip Reminders

Desktop, Onboarding, Awareness, Web, EspaƱol, Tooltip, Hypertext Links, Amazon

Open pattern
130. Animated Email Page

130. Animated Email Page

Desktop, Awareness, Decision Making, Email, English, Animation, Hypertext Links, Google, Gmail

Open pattern
189. Illustration (Meme) on Empty State

189. Illustration (Meme) on Empty State

Desktop, Awareness, Web, English, Image / Illustration, Hypertext Links, Webflow

Open pattern
42. Browser Status Banner for Pages

42. Browser Status Banner for Pages

Desktop, šŸ“± Mobile, Awareness, Apple OS, EspaƱol, Banner, Hypertext Links, Empty State, Error State, Apple Safari

Open pattern
No preview

164. Static Tooltip on Menu

Desktop, Awareness, Web, EspaƱol, Tooltip, Hypertext Links, Linkedin

Open pattern
158. Bar Reading Status

158. Bar Reading Status

Desktop, Awareness, Pathfinding, Web, English, Progress State, Notification Badge, Navbar, Fixed on Scroll, McKinsey

Open pattern
56. Automatic Blackout Popover with Steps

56. Automatic Blackout Popover with Steps

Desktop, Onboarding, Decision Making, Awareness, Web, English, EspaƱol, Google, Gmail

Open pattern
203. Password Expiration on Login

203. Password Expiration on Login

Desktop, Awareness, Web, English

Open pattern
179. Stylized Feature Highlighting

179. Stylized Feature Highlighting

Desktop, Awareness, Web, English, Google, Google Suite

Open pattern
147. Linked Settings for User Permissions

147. Linked Settings for User Permissions

Desktop, Consent, Awareness, Web, English, Google, Google Analytics

Open pattern
139. Synced Hover Animations

139. Synced Hover Animations

Desktop, Decision Making, Awareness, Web, English, Hypertext Links, Graph, Mailchimp

Open pattern
124. Critical Changes Warning

124. Critical Changes Warning

Desktop, Awareness, Apple OS, EspaƱol, Slack

Open pattern
100. Automatic Floating Popover

100. Automatic Floating Popover

Desktop, Awareness, Web, EspaƱol, Google, Google Sites

Open pattern
117. Side Status Notification

117. Side Status Notification

Desktop, Awareness, Apple OS, English, EspaƱol, WhatsApp

Open pattern
116. User Feedback on Web Content

116. User Feedback on Web Content

Desktop, Feedback, Awareness, Web, EspaƱol

Open pattern
63. GitHub - Contextual Back Navigation Bar

63. GitHub - Contextual Back Navigation Bar

Desktop, Awareness, Pathfinding, Web, English, GitHub

Open pattern
116. 2-pane Automatic Slider

116. 2-pane Automatic Slider

Desktop, Pathfinding, Awareness, Web, EspaƱol, Tiendanube

Open pattern
133. Website-Browser Notification Reminder

133. Website-Browser Notification Reminder

Desktop, Awareness, Web, English, Facebook

Open pattern
176. Wordpress.com - Natural Inputs with Suggestions

176. Wordpress.com - Natural Inputs with Suggestions

Desktop, Decision Making, Accessibility, Awareness, Pathfinding, Web, English, Wordpress

Open pattern
91. Bubble Status Reading

91. Bubble Status Reading

Desktop, Pathfinding, Awareness, Appreciation, Web, English, Infinite Scroll, Pagination, Animation, Fixed on Scroll, Progress State, Empty State, TechCrunch

Open pattern
173. Share Invitation to Live Movie

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

Open pattern
83. Rewards Notification on Topbar

83. Rewards Notification on Topbar

Desktop, Awareness, Appreciation, Web, English, Notification Badge, Dropdown Menu, Navbar

Open pattern
55. Contextual Form Input Errors

55. Contextual Form Input Errors

Desktop, Awareness, Web, EspaƱol, Zoom

Open pattern
38. Youtube - Video Statusbar

38. Youtube - Video Statusbar

Desktop, Awareness, Web, English, Google, YouTube

Open pattern
66. Actionable Empty State

66. Actionable Empty State

Desktop, Onboarding, Awareness, Web, English, Loader, Empty State, Google, Google Suite

Open pattern
39. Youtube - Dismissed Bottom Popup

39. Youtube - Dismissed Bottom Popup

Desktop, Awareness, COVID-19 Edition, Web, English

Open pattern
196. Video Story on Website

196. Video Story on Website

Desktop, Decision Making, Awareness, Web, EspaƱol

Open pattern
37. Branded Illustrations for Reinforcement

37. Branded Illustrations for Reinforcement

Desktop, Awareness, Web, English

Open pattern
42. Modal for Tags Editing

42. Modal for Tags Editing

Desktop, Accessibility, Awareness, Web, English, Google, Google Keep

Open pattern
80. Contextual Input Status

80. Contextual Input Status

Desktop, Awareness, Web, English, Noun Project

Open pattern
29. General Form Errors Banner

29. General Form Errors Banner

Desktop, Awareness, Web, English, Text Input, Banner, Notification Badge, Mailchimp

Open pattern
105. Automatic Blackout Popover

105. Automatic Blackout Popover

Desktop, Awareness, Web, English

Open pattern
178. OS Voice Widget with Actions

178. OS Voice Widget with Actions

Desktop, Awareness, Apple OS, English, Apple

Open pattern
50. Food Order Receipt

50. Food Order Receipt

Desktop, Email notification, Awareness, Email, English, Uber EATS

Open pattern
180. Dedicated Screen for Action Confirmation

180. Dedicated Screen for Action Confirmation

Desktop, Decision Making, Awareness, Consent, Web, EspaƱol, English, Linkedin

Open pattern
146. Intelligencer - Hamburger Menu

146. Intelligencer - Hamburger Menu

Desktop, Mobile, Pathfinding, Awareness, Web, English

Open pattern
6. Modal Blackout with Form

6. Modal Blackout with Form

Desktop, Awareness, Web, English

Open pattern
4. Floating Status Banner

4. Floating Status Banner

Desktop, Awareness, Web, Google, Gmail

Open pattern
155. Menu Search Highlighting

155. Menu Search Highlighting

Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Apple

Open pattern
Ā 
Ā