Posted by Summers Pitman – Developer Relations Engineer, and Ivy Knight – Senior Design Advocate
Widgets can deliver extra productive, pleasant and customised experiences to customers’ house screens, however they are often tough to design to make sure a top quality targeted expertise. On this weblog put up, we’ll cowl how simple Widget Canonical Layouts could make this course of.
However, what’s a Canonical Format? It’s a frequent structure sample that works for numerous display screen sizes. You should utilize them as a place to begin, ready-to-use compositions that assist layouts adapt for frequent use instances and display screen sizes. Widgets additionally present Canonical Layouts to get began crafting larger high quality widgets.
The Widget Canonical Layouts Figma makes previewing your widget content material in a number of breakpoints and structure varieties. Be a part of me in our Figma design useful resource to discover how they’ll simplify designing a widget for one among our pattern apps, JetNews.
1. Content material to adapt
Jetnews is a pattern information studying app, constructed with Jetpack Compose. With the expertise in thoughts, the first consumer journey is studying articles.
- A widget must be glanceable, so displaying a full article wouldn’t be a very good use case.
- Since they’re well timed information articles, surfacing newer content material may very well be extra productive for customers.
- We’ll need to give a condensed model of every article much like the app house feed.
- The addition of a bookmark motion would permit the consumer to avoid wasting and skim later within the full app expertise.
2. Selecting a Canonical Format
With our content material and consumer journey established, we’ll take a look at which canonical layouts would make sense.
We need to present at the very least a number of new articles with a headline, truncated description, and attainable thumbnail. Which brings us to the Picture + Textual content Grid structure and possibly the checklist structure.
Inside our new Figma Widget Canonical Format preview, we will add in some mock content material to take a look at how these layouts will look in numerous sizes.
3. Adapting to breakpoint sizes
Now that we’ve previewed our content material in each the grid and checklist layouts, we don’t have to decide on between only one!
The grid structure higher shows our content material for bigger sizes, the place we’ve got some extra room to make the most of a number of columns and a bigger thumbnail picture. Whereas the checklist is working properly for smaller sizes, giving a one column structure with a smaller thumbnail.
However we will adapt even additional to permit the consumer to have extra resizing flexibility and anticipate totally different OEM grid sizing. For JetNews, we selected a further additional small structure to accommodate a smaller grid dimension and vertical peak whereas nonetheless utilizing the Record structure. For this dimension I made a decision to take away the thumbnail all collectively to offer the title and motion area.
Take into account these in-between design tweaks as wanted (between any of the breakpoints), that may be utilized as common guidelines in your widget designs.
Listed below are a number of pointers to borrow:
- Set up a content material hierarchy on what to cover because the widget shrinks.
- Use a kind scale so the kind scales persistently.
- Create some parameters for picture scaling with facet ratios and cropping strategies.
- Use element presentation adjustments. For instance, the title bar’s FAB will be lowered to a typical icon.
Final, I’ll swap the app icon, spherical up all of the breakpoint sizes, and supply an possibility with model colours.
These are able to ship over to dev! Tune in for the code alongside to take a look at easy methods to implement the ultimate widget.
Go attempt it out and discover extra widgets
You will discover the Widget Canonical Layouts at our new Figma Group Web page: figma.com/@androiddesign. Keep tuned for extra Android Figma assets.
Try the official Android documentation for detailed info and finest practices Widgets on Android and extra on Widget High quality Tiers, and be part of us for the remainder of Widget Highlight week!
This weblog put up is a part of our collection: Highlight Week on Widgets, the place we offer assets—weblog posts, movies, pattern code, and extra—all designed that can assist you design and create widgets. You’ll be able to learn extra within the overview of Highlight Week: Widgets, which will likely be up to date all through the week.