Flows
Awareness
Components
Last update
Jul 23, 2022 6:53 PM
_08.04.40_a._m..png&w=3840&q=90)
397. Modal with Card Options
394. Page Outline Floating Scroller
393. Colored Checkboxes
392. SaaS for Construction Workers
390. Icon Software Landing Page
389. Text Edit Inline Input
388. Multiple Item Selection Drag & Drop
386. Skeleton Loader
383. Video Animation on Touch
382. Interactive Background Animation
379. Dropdown Filters
378. Modal Blackout with Animation
363. Better History - Back to Top on scroll
362. Slack - Side Menu Toggle
361. WhatsApp - Progress Bar Loading
360. Page Outline Menu
359. Discord - Button to Input Transition
358. Google Drive - Floating Menus
357. Google/Youtube Help - Fixed Form with Steps
357. Google/Youtube Help - Fixed Form with Steps
356. MetaMap - Multi-Layout Topbar Menu
355. Jira - Feature Presentation Tooltip
355. Jira - Feature Presentation Tooltip
354. Figma - Floating Form with Steps
354. Figma - Floating Form with Steps
353. Population Pyramid - Visualizations with live filters
362. Modal Blackout with Form & Animations
350. Netifly - Multi-layout Topbar Menu
349. HubSpot - Toggle High Contrast
359. Toggle List/Grid View 
347. YouTube - Floating Progress Bar
357. Modal with Steps (No blackout)
355. Navigation Tabs with Slider (Swipe)
344. MercadoLibre - Horizontal Item Slider
343. Behance - Login with Code Validation 
342. Savee - Light/Dark Mode Switcher 
340. Asana - Zoom/Magnifier Over Image
341. Savee - Image Grid Customization
339. Asana - Platform Onboarding Simulator
346. Toggl - Sidebar Menu Show More
345. Vertical Accordion for FAQs
336. Floating Popover on Click
336. Floating Popover on Click
343. Modal Drag & Drop to Fixed Position
334. MercadoLibre - Call to Action Trigger Effect
332. Apple - Drag&Drop Browser File to Desktop
331. Linkedin - Search Bar Blackout
330. PositivePsychology - Article User Feedback
322. Apple - Search on Menu Items
328. Apple Safari - Zoom In/Out Transition
333. Static Tooltip with Steps
333. Static Tooltip with Steps
325. Apple - Drag & Drop Slots
324. Visual Studio Code - Dual View Scroll Sync
329. Postman - Onboarding Tooltips
329. Postman - Onboarding Tooltips
321. Caloriemama - App Hero Swiper
320. Discord - Sign In with Loading Tips
319. Wordpress - Delete Confirmation with Name
318. Binance - Tooltip on Features
318. Binance - Tooltip on Features
317. Zoom In—Out Transition on Click
316. Apple - Tooltip on icon
315. Signal - PIN Reminder
314. Snapchat - Snap Camera
312. Pocket - View Switcher
312. Instagram - Animated Illustration with Menu
310. HubSpot - Checkbox Confirmation
309. Instagram - Brand Gradient
308. MercadoLibre - Hero Slider
313. Modal Blackout with Scroll
312. Google Data Studio
305. Notion - App Download Page
309. Horizontal Slider for Styles
308. Spinners for Module Loading
307. Tooltip on Hover
306. Drag & Drop for Reordering Items
305. Button Combo for App Download
303. Background Animation
302. Theme Switcher in Side-drawer
300. Sound Bars Graph
299. Fixed Corner Popup with Steps
299. Fixed Corner Popup with Steps
298. Avatar Sync with NFT
297. Thumbs Up/Down
295. “NEW” Badge on Menu Items_00.42.51/w=1920,quality=90,fit=scale-down)
294. Full-Screen Steps Animated Transition 
293. Collapsable Sidebar Menu
292. Vertical Icon Menu
291. Action Menu from Button
289. Floating Popover on Click
288. Vimeo - Topbar Language Switching
286. Apple - Background Animation on Scroll
285. Cloudflare - Sidebar with Scroll
284. Emergency Information Map
284. Top Tooltip on Link Hover
284. Top Tooltip on Link Hover
282. Telegram - Chat Setup Wizard
281. Ideabot - Background Animation on Mouse Movement
280. Slack - Workspace Creation Wizard
271. Slack - Collapsable Sidebars
278. Search Menu Dropdown from Input Text
277. Horizontal Card Slider with Actions
268. GIPHY - Alert on Drag & Drop
275. Popover on Hover_07.10.33_p._m..png&w=1920&q=90)
274. Interactive Background Animation
264. Figma - Interactive Background Animation
264. Figma - Interactive Background Animation
268. Modal Blackout with Swiper
267. Google - Horizontal Card Slider
266. Mailchimp - Hold Button for Confirmation
259. Apple - Drag & Drop List Items
262. Fixed Modal Blackout 
257. Spotify - Zoom In Transition
259. Squarespace - Multi-depth Sidebar Navigation
258. Squarespace - Adaptable Viewport Size
256. Modal Blackout with Steps & Forms
243. GIPHY - Trim Video Slicers
254. Notion - Side Menu Toggle
253. Youtube - Table Row Selector
240. Instagram - Horizontal Accordion
251. Progressive Layout Loader
238. WhatsApp - Color Switcher Preview
237. Apple - Snackbar Popup Animation
236. GIPHY - Horizontal Slider Navigation
235. Background Animation on Hover
233. Asana - Floating Animation
241. Modal Blackout with Steps
231. Automatic Floating Popover with Steps
230. Apple - Secondary Sidebar Toggle
229. Top Banner for Design Changes_15.12.59/w=1920,quality=90,fit=scale-down)
228. Notification Bell Status
236. Horizontal Graph with Time Ranges
226. Youtube Studio - Image Multi-zone Crop 
225. Cloudflare - Multiple Graphs by Time Ranges
232. Drag & Drop to Browser
223. Apple - Stop Operation Progress
222. Cloudflare - Toggle Light/Dark Theme
221. Apple - Image Grid Spacing
220. Apple - Multi-window App
219. Apple - Adjacent Sidebar Toggle
218. Apple Keynote - Template Format Selection
217. Apple - Cropping multiple screens
222. Floating Banner on User Input_16.00.46/w=1920,quality=90,fit=scale-down)
215. Stacked Action Button
214. Netflix - Information Toggle
218. Modal Blackout with Steps, Forms and Animations
211. Intercom - Vertical Icon Menu
212. Automatic Background Animation 
45. Webapp Video Loader_11.42.04_p._m..png&w=1920&q=90)
165. Two-step Download Flow
59. Ecommerce App Homepage (5)
183. Apple MacOS - Full Screen Widget Customization
162. Login Value Compare
101. Downloading Desktop App_11.28.04_a._m..png&w=1920&q=90)
169. Youtube Studio - Delete Content Forever
121. 2-pane Audio Navigation
172. PedidosYa - Search Results Recommendation_00.32.31/w=1920,quality=90,fit=scale-down)
52. Uber EATS - Making a Food Order
31. Page Blocker Edition Warning_09.47.02_p._m..png&w=1920&q=90)
5. Website Promotional Top Banners
53. Apple Safari - Editing Bookmarks
189. Feature Preview on Menu_09.05.58_p._m..png&w=1920&q=90)
95. Delete Confirmation with Name_02.02.36_p._m..png&w=1920&q=90)
175. Tab Preview on Hover State
175. Tab Preview on Hover State
161. Apple - Two-Factor Validation (2FA)_13.07.18/w=1920,quality=90,fit=scale-down)
91. Settings for Account Privacy_12.08.18_a._m..png&w=1920&q=90)
138. Read Modes_03.46.23_p._m..png&w=1920&q=90)
148. Search Bar Fade-out_18.38.50/w=1920,quality=90,fit=scale-down)
134. Save for Reading Later_12.09.49_p._m..png&w=1920&q=90)
43. File Upload Status_13.52.38/w=1920,quality=90,fit=scale-down)
199. Sidebar Emptystate_12.03.02/w=1920,quality=90,fit=scale-down)
54. Apple Safari - Browser Reader Mode_02.31.50_p._m..png&w=1920&q=90)
201. Modal Blackout with Actions
189. Illustration (Meme) on Empty State_10.03.52/w=1920,quality=90,fit=scale-down)
130. Animated Email Page
114. News Swiper_09.27.02_p._m..png&w=1920&q=90)
151. Menu Drop-down
144. Meeting Guest Warning_15.24.08/w=1920,quality=90,fit=scale-down)
93. Top Secondary Banner_03.39.09/w=1920,quality=90,fit=scale-down)
137. Product Color Selector
132. Amazon - Store Tooltip Reminders
132. Amazon - Store Tooltip Reminders
181. Plan Upgrade Flow
106. In-App Promotional Banner
111. Magazine Subscription
7. sitepoint - Accessibility Adjustments
163. Open App from Web
191. Viedo Rewind & Forward
42. Browser Status Banner for Pages_06.23.32_p._m..png&w=1920&q=90)
157. Webflow - Magnifying Glass on Images
65. PedidosYa - Location Confirmation
184. Apple App Store - Download & Confirmation Buttons
198. Take action on Music Claims
89. Bottom Page Fake-News Warning_02.23.00_p._m..png&w=1920&q=90)
61. Section Dropdown_11.40.00_a._m..png&w=1920&q=90)
11. Apple MacOS - Split OS Screens
90. In-product Top Primary Banner_01.42.06_a._m..png&w=1920&q=90)
70. Trip Starting Point
62. Google Maps - Weekly Schedule
127. Google Maps - Notifications Disabled Warning
179. Stylized Feature Highlighting
203. Password Expiration on Login_23.24.56/w=1920,quality=90,fit=scale-down)
56. Automatic Blackout Popover with Steps
158. Bar Reading Status
115. Buffer - Hover Instructions_01.10.02_p._m..png&w=1920&q=90)
81. MercadoLibre - Saving Favourites as Guest_11.47.50_a._m..png&w=1920&q=90)
51. Download App Reminder
167. Apple MacOS - 2-pane Widget Customization
139. Synced Hover Animations
193. Apple iOS - Contextual Feature Presentation
73. App Swiper
152. File Icon Selector
149. Security Top-banner_18.38.44/w=1920,quality=90,fit=scale-down)
145. Communication Preferences on Sign Up Flow_22.41.58/w=1920,quality=90,fit=scale-down)
145. Suscription Options_16.25.05/w=1920,quality=90,fit=scale-down)
147. Linked Settings for User Permissions_09.35.30_p._m..png&w=1920&q=90)
148. Half-page Illustration Slider_17.34.19/w=1920,quality=90,fit=scale-down)
29. About.me - Wizard Generation Profile_01.47.59_p._m..png&w=1920&q=90)
36. Contact Segmentation_04.18.47_p._m..png&w=1920&q=90)
87. Warning on Product Homepage_12.12.08_a._m..png&w=1920&q=90)
10. Background Ads_07.31.59_p._m..png&w=1920&q=90)
83. Banner on News Page_09.17.29_p._m..png&w=1920&q=90)
100. Automatic Floating Popover_23.29.09/w=1920,quality=90,fit=scale-down)
174. User Input for Image ALT Text
182. Static Tooltip for Text Formatting
124. Critical Changes Warning_11.56.38_a._m..png&w=1920&q=90)
107. Updating Phone Number Flow
192. Modal with Actions
128. Navigation Preferences
125. Product Highlights_01.16.07_p._m..png&w=1920&q=90)
103. Subscription Reminder
133. Card Slider with Call-to-Action
131. Free Audiobook Trial_12.02.51_p._m..png&w=1920&q=90)
8. Adobe - In-App NPS Survey
49. Notification for Order Review
116. 2-pane Automatic Slider
28. Slack - Find your Workspace
15. Notifications on Map Geolocation
63. GitHub - Contextual Back Navigation Bar_21.29.50/w=1920,quality=90,fit=scale-down)
14. App Bottom Popup_01.38.38_a._m..png&w=1920&q=90)
122. Automatic Popover with Steps
32. Mailchimp - Makes me feel
40. App Image Loader Skeleton
96. Encouraging Allowing Ads_06.06.59_p._m..png&w=1920&q=90)
171. Slack - Multi-browser Sign In
186. Apple Safari - Browser Background Customization_15.51.37/w=1920,quality=90,fit=scale-down)
116. User Feedback on Web Content_00.09.24/w=1920,quality=90,fit=scale-down)
117. Side Status Notification
173. Share Invitation to Live Movie
91. Bubble Status Reading 
94. Top Primary Banner_01.19.43_p._m..png&w=1920&q=90)
93. Welcome Screen with Background_08.28.52_p._m..png&w=1920&q=90)
129. PDF Show & Download_21.22.04/w=1920,quality=90,fit=scale-down)
190. Ask Email for Playing Video
168. Anfibia - Natural Article Rating
79. Out of downloads_10.13.56_p._m..png&w=1920&q=90)
176. Wordpress.com - Natural Inputs with Suggestions
133. Website-Browser Notification Reminder_08.04.40_a._m..png&w=1920&q=90)
208. Checkbox for User Confirmation_23.27.14/w=1920,quality=90,fit=scale-down)
98. Features on Signing-up_07.32.46_p._m..png&w=1920&q=90)
57. IDF - Encouraging Newsletter Sign-up_01.22.20_a._m..png&w=1920&q=90)
173. Toggl - Onboarding Action Tooltip
9. App Integration Banner
202. Apple Reminders - List Widget Customization_12.18.26/w=1920,quality=90,fit=scale-down)
118. Whereby - Pricing Step on Sign Up_06.19.15_p._m..png&w=1920&q=90)
3. Apple Safari - Search Options on Focus
99. Letterboxd - Topbar Dropdown Menu_10.36.09_p._m..png&w=1920&q=90)
109. Native Long-press Menu
55. Contextual Form Input Errors_03.59.07_p._m..png&w=1920&q=90)
170. Figma - Fixed Form with Steps
170. Figma - Fixed Form with Steps
83. Rewards Notification on Topbar_23.36.31/w=1920,quality=90,fit=scale-down)
185. Bottom Action Menu
78. Apple iOS - Dark & Light Color Themes
86. Table Column Slicer
25. Apple - Two-factor Auth_01.18.51_p._m..png&w=1920&q=90)
2. Youtube - Feed Filter Tabs_11.42.00_p._m..png&w=1920&q=90)
54. Modal for Language & Region Picker_16.58.20/w=1920,quality=90,fit=scale-down)
159. Wix - Natural Language Form_14.57.25/w=1920,quality=90,fit=scale-down)
23. Suscription gimmicks
110. Vertical Perspective Grid
69. Uber EATS - Tab Menu Navigation
11. Intercom - Likert in chat
196. Video Story on Website
119. PrestaShop - Site Cookie Management_05.22.43_p._m..png&w=1920&q=90)
66. Products Discounts
24. Window Maximize Options
39. Youtube - Dismissed Bottom Popup_10.22.23_p._m..png&w=1920&q=90)
126. WeTransfer - In-front Site Terms_16.08.33/w=1920,quality=90,fit=scale-down)
66. Actionable Empty State_19.04.51/w=1920,quality=90,fit=scale-down)
38. Youtube - Video Statusbar_02.05.03_p._m..png&w=1920&q=90)
85. Bottom Popup Secondary_06.44.52_p._m..png&w=1920&q=90)
60. MercadoLibre - Ecommerce App Searching (3)
104. Slack - Creating & Customization Workspace_18.45.21/w=1920,quality=90,fit=scale-down)
80. Contextual Input Status_12.12.09_p._m..png&w=1920&q=90)
135. Stories From Network_11.48.24_a._m..png&w=1920&q=90)
58. Getting on Fitness
47. Notion - Workspace Types_09.48.53_p._m..png&w=1920&q=90)
41. Context Banner Card
42. Modal for Tags Editing_02.04.21_p._m..png&w=1920&q=90)
21. Apple MacOS - Advanced Color Picking_13.57.49/w=1920,quality=90,fit=scale-down)
75. Notification Recommendation
22. Mailchimp - First Mailing Campaign
172. Contextual Popup for Service Upgrade
84. Pandemic Warning Message on Map_01.20.51_p._m..png&w=1920&q=90)
37. Branded Illustrations for Reinforcement
35. Do Not Leave Popup_04.17.01_p._m..png&w=1920&q=90)
156. Figma - Keyboard Navigated Menu