Design Widgets

Focus on the important content

Focus on bringing the important features of your app as a widget. It would be best if you design it in this way so that it is beneficial to the users. In short, you are displaying key information that people can view without opening your app.

Avoid mirroring your widget’s appearance within your app. It is essential to design the widget with the key elements that help users to access the right information without any constraints.

Sizes & Styles

Design your widgets in multiple sizes to show required information. Avoid designing widgets of different sizes with the same data. It's necessary to create widgets in a size that perfectly displays necessary information.

• Small - Show key information
• Medium - Show information with little data
• Large - Show detailed visualizations of the data

Make sure to provide your app widget in multiple sizes with the right type and amount of content. It is more important to give options to the users so that they can pick the one that suits their needs.

Interactive

Your widget must be functional. Making the widget interactive is vital but make sure not to overdo it. Don't make it crowded, meaning not to have too many tap targets as the widgets pack much information in a tight space.

Attention to details

It is important to put more attention to the smaller details and design with good visual treatment. Bring in delightful and surprising elements to make your widget more personalized. As you can see in the example, the clock widget has the background according to the time of the day same with the weather widget.

Configure

Making your widget configurable is crucial, so let the users choose the specific information that they want the widget to display. For example, to choose a specific folder to be displayed or a particular location for a Weather.

Dynamic Content

For the widget to be relevant and useful it must periodically refresh and update the information being displayed. If you are displaying shortcuts this may not be necessary but make sure to open the app with the right location.

Personalized

The important aspect of designing your widget is to make use of the same branding elements such as colors, typeface, and stylized icons so that it feels more consistent with your app.

Try not to show a logo, wordmark, or app icon in your widget but if necessary subtly display a small version of your logo at the upper-right corner of the widget.

Adpativity

Design your widgets for both Light and dark mode. Also make sure that your widget's content scales and adapts to different screen sizes and devices. For example, the image on your widget may appear differently on a screen size of 320x568 pt as SwiftUI resizes the image to look good. So provide the assets in different scales.

Apple's Human Interface Guide on designing widgets

There are many exciting guides and videos in Apple's Human Interface Guidelines that explain the Widget's development and design process in detail. Videos like Design Great Widgets and Meet WidgetKit are perfect to start working on Widgets.