Posted by Summers Pitman – Developer Relations Engineer, and Ivy Knight – Senior Design Advocate
Widgets can carry extra productive, pleasant and customised experiences to customers’ dwelling screens, however they are often difficult 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 sizes. You should use them as a place to begin, ready-to-use compositions that assist layouts adapt for frequent use circumstances and display 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 part of me in our Figma design useful resource to discover how they will simplify designing a widget for one in every of 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 use case.
- Since they’re well timed information articles, surfacing newer content material might be extra productive for customers.
- We’ll wish to give a condensed model of every article just like the app dwelling feed.
- The addition of a bookmark motion would enable the consumer to avoid wasting and browse 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 wish to present a minimum of a couple of new articles with a headline, truncated description, and doable 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 are able to 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 have now some extra room to benefit from 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 are able to adapt even additional to permit the consumer to have extra resizing flexibility and anticipate completely different OEM grid sizing. For JetNews, we selected a further further small structure to accommodate a smaller grid dimension and vertical top whereas nonetheless utilizing the Listing structure. For this dimension I made a decision to take away the thumbnail all collectively to provide the title and motion house.
Think about these in-between design tweaks as wanted (between any of the breakpoints), that may be utilized as normal guidelines in your widget designs.
Listed below are a couple of pointers to borrow:
- Set up a content material hierarchy on what to cover because the widget shrinks.
- Use a sort scale so the kind scales constantly.
- Create some parameters for picture scaling with side ratios and cropping methods.
- Use element presentation modifications. For instance, the title bar’s FAB could be diminished to a typical icon.
Final, I’ll swap the app icon, spherical up all of the breakpoint sizes, and supply an choice with model colours.
These are able to ship over to dev! Tune in for the code alongside to take a look at learn how to implement the ultimate widget.
Go strive it out and discover extra widgets
You’ll find the Widget Canonical Layouts at our new Figma Group Web page: figma.com/@androiddesign. Keep tuned for extra Android Figma sources.
Try the official Android documentation for detailed data and finest practices Widgets on Android and extra on Widget High quality Tiers, and be a 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 sources—weblog posts, movies, pattern code, and extra—all designed that can assist you design and create widgets. You possibly can learn extra within the overview of Highlight Week: Widgets, which can be up to date all through the week.
