Posted by Summers Pitman – Developer Relations Engineer, and Ivy Knight – Senior Design Advocate
Widgets can deliver extra productive, pleasant and customised experiences to customers’ dwelling screens, however they are often difficult to design to make sure a top quality centered expertise. On this weblog put up, we’ll cowl how straightforward Widget Canonical Layouts could make this course of.
However, what’s a Canonical Structure? It’s a frequent structure sample that works for varied 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 greater 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 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 person journey is studying articles.
- A widget needs to be glanceable, so displaying a full article wouldn’t be an excellent use case.
- Since they’re well timed information articles, surfacing newer content material may very well be extra productive for customers.
- We’ll wish to give a condensed model of every article much like the app dwelling feed.
- The addition of a bookmark motion would enable the person to avoid wasting and browse later within the full app expertise.
2. Selecting a Canonical Structure
With our content material and person 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 potential thumbnail. Which brings us to the Picture + Textual content Grid structure and possibly the listing structure.
Inside our new Figma Widget Canonical Structure preview, we will add in some mock content material to take a look at how these layouts will look in varied sizes.
3. Adapting to breakpoint sizes
Now that we’ve previewed our content material in each the grid and listing layouts, we don’t have to decide on between only one!
The grid structure higher shows our content material for bigger sizes, the place now we have some extra room to reap the benefits of a number of columns and a bigger thumbnail picture. Whereas the listing is working properly for smaller sizes, giving a one column structure with a smaller thumbnail.
However we will adapt even additional to permit the person to have extra resizing flexibility and anticipate completely different OEM grid sizing. For JetNews, we selected an extra additional small structure to accommodate a smaller grid dimension and vertical peak whereas nonetheless utilizing the Checklist structure. For this dimension I made a decision to take away the thumbnail all collectively to present the title and motion area.
Think about these in-between design tweaks as wanted (between any of the breakpoints), that may be utilized as basic 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 kind scale so the sort 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 might 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 tips on how to implement the ultimate widget.
Go attempt it out and discover extra widgets
You’ll find the Widget Canonical Layouts at our new Figma Neighborhood Web page: figma.com/@androiddesign. Keep tuned for extra Android Figma sources.
Take a look at the official Android documentation for detailed data 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 sequence: Highlight Week on Widgets, the place we offer sources—weblog posts, movies, pattern code, and extra—all designed that will help you design and create widgets. You may learn extra within the overview of Highlight Week: Widgets, which might be up to date all through the week.
