[MUSIC PLAYING] ANNA PFOERTSCH: Hi, everyone. I'm Anna. I'm a Product Manager
on Material Design where I lead adaptivity. We adapt our design to
every platform and device. This year, we've been focusing
on making sure our apps look good on large screens. So I'm going to
share some updates and show you what we are
currently working on. I'm so excited about the new
hardware we're releasing, and I'm sure you are too. We've been working on ways to
help you build for tablets, foldables, and desktops. I'm sure you've
been wondering how your favorite app or
the app you're building will look on a larger
display or display that can change its size. Today, we want to
share some things we've been working on that will
help you make beautiful apps on large screens. I will give an overview
of our window class, and after that, Ryan will
offer some guidance for layout and a glimpse at future design. We'll show you how this
design affects Google Apps and what you as a
designer or developer can aspire to to make
sure your apps look amazing on any new
hardware coming your way. Let's start with an overview
of our window classes. Devices come in all
sizes and shapes, so rather than designing for
an ever increasing number of display states, we created
window width size classes to ensure layouts work
across a range of devices. We defined three window
with break points by looking at what kinds
of experiences people were having and cataloged
all screens across platforms in our ecosystem. Window with size classes,
or window classes for short, are a set of opinionated
viewport breakpoints that help determine when
a layout needs to change. For starters, devices
are classified into one of these three window classes-- compact, medium, or expanded,
based on the device's width and whether they are in portrait
or landscape orientation. This means that Pixel 7, in
portrait with a width of 412dp, is considered compact. However, when it's
rotated into landscape, it has a width of 892dp,
so in that orientation, it is considered expanded. The compact window class
includes more narrow device widths like phones and the
front screen of a foldable in portrait orientation. Anything larger than the
compact window class, meaning anything wider than
your typical mobile phone held vertically, we
count as large screen. Our next window class is medium. Included in this are tablets
and unfolded foldables, both in portrait orientation. And lastly, we have expanded. The expanded window
class captures phones in the
landscape orientation, unfolded foldables,
tablets, and desktops. Our talk today focuses on these
medium and expanded sizes, helping you get the most out
of that added large screen real estate. These days, devices
aren't only scaling up to get more screen
real estate for users, but are also shifting between
what window class they are. Users are free to resize windows
and devices such as foldables, which can transform from compact
to expanded within seconds, like opening up your Pixel Fold. A larger screen means
more screen real estate. However, more real estate
doesn't mean more space to pack with
excessive information. We can use established
print design concepts to create an easier, more
engaging, and emotive reading experience employed to
draw the user's attention, help them orient themselves,
navigate the page, and make tasks
easier to complete. Some of these principles utilize
a more pronounced hierarchy through bolder
typographic expression, increased scale and contrast
between elements, composition tension, and
emphasized wayfinding. Now, I'll focus specifically
on large screens, our medium and expanded size classes. In 2011, we debuted Android
Honeycomb, focused specifically on tablets. Today, we bring you an
evolution in our design language for large screens,
going back to our roots. Material Design
has been informed by the principles of print
design since its inception. With the latest version,
Material You, these principles emerge in bolder
and more vivid ways. One of the key
goals of Material 3 is to encourage its designers
to be more expressive. With larger screens,
you can draw on the powerful and dynamic
techniques of large format print, like poster
design, and take advantage of concepts such as tension,
asymmetry, composition, and hierarchy. By leveraging these
ideas, you can create visually powerful designs
that convey their message. We think of large
screen optimizations as part of an adaptive design. We'll format it for
larger displays. If you're starting
from mobile, we want to help you set up your
space on a large screen. To make apps unique
and differentiated, you should utilize
design practices like layout and expression. Now, here's Ryan to talk about
some best practices to take advantage of on large screen
UIs and some past concepts that are informing our future. [MUSIC PLAYING] RYAN KILEY: Thanks, Anna. Hey, everyone. I'm Ryan. I'm a Design Lead on Material. Anna introduced you to
our three window classes. Now, let's start by breaking
down the anatomy of the screen. There are two key parts
to consider in setting up an adaptive layout-- navigation and body regions. The navigation region holds your
primary navigation components. This includes the navigation
bar, rail, and drawer. Using the best navigation
component from Material balances design and ergonomics. It's how you meet
user expectations without overextending
the component beyond its intended design. Here are our top
recommendations. Use the navigation bar for
compact window classes, navigation rail on medium,
neither navigation rail or standard navigation
drawer on expanded. If additional
navigation is required, a modal navigation drawer
can provide support. Now that you have your
navigation component, let's look at the body region. The body region is grouped
into one or more panes and contains most of
the content in an app. In the compact window class,
we recommend one pane. For medium window classes,
we recommend using one or two panes to organize content. Our research shows that one pane
is usually what users prefer. However, for low density
apps, like Android settings for example, two panes
might work best for users. For expanded window classes
like a tablet in landscape mode or desktop, two
panes are a great way to make functional use
of that extra space. It's also useful to
keep in mind for phones in landscape orientation which
are also in the expanded window class. It's common for apps
to lock a layout to portrait mode
on mobile phones, but it's simple and worthwhile
to incorporate the landscape mobile adaptation. If a user wants to lock
the display to portrait, they can disable
system auto rotate, but it's best to
give them the choice. Panes can help you
organize your content and create explicit
scaffolding for components. They can be fixed or flexible. They hold persisting components,
like top app bar and search bar, and more context
specific components, like images, text, lists,
cards, and buttons. Content in a pane can
be aligned and displayed in multiple columns. Columns are exclusive to
a pane and they're not used at the window level,
giving you more granular control of a layout within a pane. Lastly, some hardware
considerations-- with folding hardware, a display
hinge distinctly segments the screen into halves. Some devices, like
the Surface Duo, do not have display
hardware in this region, so the screen will operate
as two distinct panes. When unfolding a
foldable, an app will transition from the front
screen to the unfolded screen automatically. Display cutouts, such as
for a front-facing camera, might obstruct some
of your design. In these scenarios, you
should offset the body region to make sure no part
of the UI is obscured. Now that we've covered what
you can do to get started, we'd like to give you a
little preview of what we have planned
for our Google Apps on large screen in
the next few years. This is a continuation
of Material 3's design language grounded
in our principles-- expressive, spirited,
and personal. And while these ideas are
still a work in progress, it's been exhilarating to see
a fresh wave of ideas coming from design teams all
over Google that continue, enhance, and evolve the
direction we started with M3. Here's a sneak
peek at what people are making to keep the
excitement building. Starting with
expressive, my favorite. Large screens are a moment to
bring that bold expressiveness that a smaller device
doesn't have the space for. Icons that are reactive
underneath your finger, built on Material symbols. Expanding the canvas size
allows for a broader range of typographic
expression and, when combined with variable fonts,
facilitates smooth transitions between wide to narrow or
thin to extra bold states, dynamically adapting to
changing layouts and panes. Rather than centering
icons inside a button, offsetting them
can draw attention to a particular action
like page navigation. A screen with a greater
range of expression-- quiet when extra focus
is needed or loud when you want to turn up the volume. The next focus was
creating a spirited UI. Shape is one of the most
iconic and extensive aspects of M3's visual language. Shapes in motion can
add emotion, feel fun, and add a liveliness to the UI. They can make a product feel
far more human and alive and engaging. Shape transitions,
particularly when changing the relative
size of components or applying a unique shape,
can communicate the change and hierarchy of the UI and
draw the user's attention to the important
element effectively. Shapes can accentuate UI
responses in unique ways, delivering a spirited
feeling and aliveness. Lastly, with a larger
screen, we wanted to make the UI more
personal and tailor made. Enlarging tap targets,
like these in call buttons, giving them a little more space
to separate their functions, adjusting a pane to create
a more focused workspace, or pinch zooming for a little
more intimate conversation with a friend. A malleable UI allows users to
customize their environment. And here, ergonomic
placement of controls, right where you're
holding your device, right where you're typing. And flexibility for
a user to remake the UI to fit their needs. Thank you for
listening, and we hope you'll take away a little bit
of inspiration on where we're going and take
advantage of new ways to build for large screens. ANNA PFOERTSCH: We're so excited
for this continuation of M3 design, and I hope
you all are too. Earlier this year, we made a big
update to our layout guidelines on Material.io. If you haven't
been back recently, you can check them out at
goo.gle/material-layout. And be sure to check out the
What's New in Material Design talk to learn what
else we've been up to. Thank you for joining us today. [MUSIC PLAYING]
