title: [[WWDC 2020]]: Design Great Widgets --- title: [[WWDC 2020]]: Design Great Widgets --- - **Metdata** - Date: [[June 26th, 2020]] - Conference: [[WWDC 2020]] - Speaker(s): - [[Mac Tyler]] - [[Christan Dalonzo]] - Video: https://developer.apple.com/videos/play/wwdc2020/10103/ - Slides: - Tags: [[Talks]] - Design Great Widets - New - Home Screen Support - Smart Stacks - Adapt and Change based on how you use them - Process - Ideation - Principles - Personal - Informational - Contextual - Examples - Calendar - Shows day of the week and current date - Next Event - Start Time - Location - Collapse Less Relevant Information If you’re buys - Instead of a blank widget, it shows tomorrow’s event - Holidays - Present glyph - Photos - Memories from years past - Weather - Current location - High - Low - Current - Unique weather events - Rain reminders - Up to the minute weather data when that’S the case - Maps - When you’re not at home, shows parked car - Scheduled event location - Route to get home - Editing - Tap to Flip in Jiggle Mode - Weather - You can pick location - You can add multiple of the same widget with different settings - Multiples - Stocks - List - Individual Stocks - Notes - Creation - Sizes and Interactions - Small - Single Tap Target - Deep Link to the content the widget is showing - Medium - Multiple Tap Zones - Large - Multiple Tap Zones - 3 tap styles - Fill Style - Cell Style - Things that Live in the own shape - Content Style - Uncontained content - Content and Personality - What are people looking for when they launch my app? - Inspiration for UI - Tint Color - Icon Color - UI Color - News Stories - Layouts - 2 best practices - Expands Across Sizes - Completely Different Across Sizes - Don’t **just** scale your widget in different sizes - It’s okay to only support specific sizes - Small - Max of 4 pieces of information - Widget Patterrns - See Human Interface Guidelines - 16 point margins - 11 points for tighter ones - Concentric Corner Radius Views - Typography - SF Pro - Light and Dark Modes - Use `isPlaceholder - Tips - Only use a logo if it’s an aggregator from different sources - Logo should always be top-right - Don’t put app Icon or App Name in Widget - Don’t use instructional text - Don’t use "Last Updated" or "Last checked"