Adaptive Icons: Case Studies & Principles of Design
summary
Android O enforces two-layer Adaptive Icons behind an arbitrary mask so designs must prove they read across circle square and the inscrutably named skwerkel masks. Workflow details: build background + foreground as Figma components, export largest size, test motion with Marius Clarett’s adaptive-icon.io and iterate. Claims and pain points: about nine client icons get converted, launchers pick masks and motion is undefined, shadows and parallax break tight compositions.
AI-written summary · about
chapters (25)
- 0:00Intro
- 1:31Adaptive Icons
- 3:17Android Masking
- 4:24Consistency
- 8:18Oof
- 13:46Workflow
- 16:03Adaptive ConIO
- 18:09Simplicity of Form
- 19:31Simple Form Examples
- 20:56Masking
- 22:10Boundaries
- 23:10Overlapping
- 24:16Building Relationships
- 25:56Parallax
- 26:55Ideal Adaptive Icons
- 28:19Sizing to Fit
- 30:25Conflict
- 31:17Elevation Lighting
- 31:46Long Shadows
- 33:24Faded Shadows
- 34:40Bucket List
- 35:47Icon Banners
- 37:40Icon Triple Layers
- 39:50Transparency
- 42:12Movement
related talks
46mLets Design an Icon Set
22mCrafting better App Icons
47mThe Icon Design Process
29mThe Future of Design is Still Personal: Reaching Toward True Adaptation
44mIcons and How They Are Prepared
16mTROUBLESHOOTING YOUR DESIGNER'S, AND VECTOR GRAPHICS_DONT
12mDesigning a high quality app with the latest Android features
23mThe Past, Present, and Future of Favicons