VIKTOR PERSSON: I'm Viktor.

HANNAH CHO: Hi, I'm Hannah.

CHRISTIAN ROBERTSON: And I'm Christian.

And we're designers that have been working on this material

design project, helping our various products at Google

to bring the material designed to it.

So yesterday in our keynote, we introduced this concept

of material design.

And it's a system that uses the classical tools

of print-like graphic design, along

with some new dynamic surfaces that

appeal to our innate understanding of physics

and material.

Today we're going to talk about how some of the visual design

concepts help to define that system.

So, it's not often recognized about design

that a good portion of it happens behind the scenes.

People don't actually recognize-- or notice

actively-- a lot of the choices that we make as designers.

Sometimes even people thinking about visual design

think of it as a skinny, or covering,

that's kind of happened at the very last moment.

And today we want to show that beauty isn't skin deep.

We're going to challenge the idea of visual design

as a skin.

We want to talk about the visible and invisible

structures that make the material UI work.

So, we'll show how invisible grids

can hold the structure together.

We'll talk about the rules behind the scenes that

can help us have better imagery, and we'll pull the camera back

to show the lighting and the shadow systems.

So, I'll start with one of the more invisible, yet visible

everywhere, design practices-- typography.

Typography's a lot more than just the choice of typeface,

but the letter forms are a good place to start.

So, I'll start talking about Roboto.

Roboto's a custom typeface that's

designed with UI specifically in mind.

It's a digital native.

And we're using a new cut of Roboto

as a default typeface for the material UI.

We've extensively reworked the outlines

to make sure that the types work, not just

on mobile and tablet, where we've started using it,

but across the various form factors

that we're now covering.

So, here's some of the changes.

This way you'll be able to pick out the new version

from the old version and impress your type-obsessed friends.

So, we've calmed down some of the more unruly characters.

We also rounded out the squarer sides on the caps,

as well as the dots and the punctuation.

We also completely redrew the numbers.

And, getting into the details, we reworked all of the italics

so that we have better optical correction

to the diagonal strokes.

So, if you look at the right leg of the A versus the left leg

of the A, you might notice a very slight difference.

So, really we treat almost every single glyph

to polish and tune.

There's a lot of changes in the spacing and the metrics.

I'll spare you the rest of the details.

But the typeface itself really is only a part of typography.

In fact, if you call a type designer a typographer,

he'll point out the difference between the two.

Typography is the use of type.

One of our design principles was to enable content that's

bold and graphic and intentional.

And this graphic character starts with the typography.

In fact, when you actually look at UI's, it's

clear that on almost every screen,

type is the primary element.

So, if I block out just the type on the right,

you can see how the screen really

is structured by the typography.

In fact, this is a good exercise--

as you're designing things, just block it out and just

look at the type itself, and see if it contains a structure.

UI design really is typography.

If we're drawing screens, whether we know it or not,

we're typographers.

So, this design system uses really big type

to be expressive, but also to create

clear hierarchies of information.

It's tempting when we're doing UI design to--

just because we're always dealing

with dynamic content-- it's tempting to just

use the smallest size possible, because we don't know

in a music player if the band name is going to be super long,

or we don't know if in a calculator

that we're going to have a calculation that's super long.

Instead, we can use large type and then adjust the size

to accommodate the copy as needed.

So, it's these large display sizes

that are also another opportunity for branding, where

you might consider using a custom type,

commissioning a new type, or even licensing a type.

It's easier than it might seem.

So, to help us manage the sizes, we

use a tool called the typographic scale.

This isn't a new idea.

This has been around in print for a long time.

In fact, the classic typographic scale

uses the same math as the musical pentatonic scale.

It makes sure that there's enough contrast at each step.

And what it really does is it reduces

the amount of distinct sizes on any one screen,

so that information is clear, and you

can tell those differences.

A good rule of thumb is if you're using more than two

or three sizes on one screen, you

should make sure that there's a good reason for it.

And if you are using a size that's

not in the typographic scale, there

should be a really good reason for it.

Ultimately, though, the purpose of type

is to serve the content.

It's to help people quickly parse and communicate

the information.

And while typography uses up a good portion of our screen

real estate in many ways, it's hard to beat imagery--

photographs and illustrations-- for impact.

RACHEL BEEN: So, this epitomizing phrase

that we've been hearing a lot of content

being bold, graphic, and intentional

is especially apparent with the use of imagery in product.

So, we aren't here to encourage specific aesthetic identities.

Product brands range from being subdued and muted

to really bright and colorful.

And our intention isn't to prescribe brand.

What we want to encourage is intentionality and

thoughtfulness concerning imagery, backed

by supported principles and best practices, to make your imagery

and your products come to life and feel really differentiated.

So, we define the main principles

of imagery in a three-part statement--

be personal, be informative, and be delightful.

So personalize the imagery, where

applicable, to make your product feel relevant.

A degree of intelligence is automatically

communicated if imagery accurately reflects the user.

Inform the user with a visual translation of information.

This facilitates comprehension, and allows

for expedited understanding of information.

And delight.

Delight doesn't mean adding superfluous, fluffy imagery

just to fill space.

Delight really implies aesthetic thoughtfulness,

combined with appropriate contextual use.

Delight can make your product feel not only special,

but really considerate of the user.

So, some additional principles to talk through.

Imagery doesn't have to be consistently

conspicuous to feel appropriate.

So, this concept of being immersive, right?

The image above is a great example

of using imagery to create context and interest

without overpowering the primary information.

The artist portrait is a textual background

for the interactive music content,

which is the primary focus.

Use appropriate imagery hinting at contextualization

to create this type of depth and texture in your product.

So, be thoughtfully ubiquitous.

So ubiquitous imagery, similar to delight,

doesn't imply superfluous use without a rationale.

Ubiquity here implies searching for very intentional

visual opportunities, where previously there

might have been disparities.

So, look for these moments to introduce imagery

that supports information personalization and delight.

So, context.

User should feel that, in every instance, imagery is visible.

It feels relevant and appropriate,

and not disorienting or misleading or out of place.

So, this doesn't always mean that imagery

has to be a literal translation of surrounding information,

right?

So, the example above is perfect.

We don't see the literal facade of the location of your event,

rather, a feature image from the location that provides context.

But context in the type of context,

such as cuisine, and the general aesthetic and vibe,

and potentially even the time of day.

So, this contextual accuracy, combined with really beautiful

imagery, will create the best possible experience

for your users.

So, best practices.

I want to touch really lightly on some overarching practices

when creating or commissioning imagery.

From an aesthetic perspective, the main goal

is to create beautiful images, right?

Your users will feel inspired and excited to use

your product.

But beautiful imagery is a somewhat broad and amorphous

term, so here's some overarching tips basically

to point you in the right direction.

Ensure that a clear concept is conveyed in a memorable way

with having a point of focus.

This doesn't necessarily literally

translate as a single point of focus in your image.

Focus more so conveys that there's

clear representation that won't be lost on the user.

The user should be able to parse almost immediately what

the visual represents.

Building narratives take this concept of focus

and adds some flavor, right?

Is the mood of the image aspirational, somber,

celebratory?

So, this example of Miami is not only visually informative--

in terms of the location that the user's travelling

to-- but it's meant to also be an aspirational and immersive

image, creating really positive connotations with

your location.

So, all imagery is an editorialized decision, right?

So make intentional decisions about the narrative

of your product through imagery.

I want to end up this section about imagery speaking

about some UI integration, and how

imagery lives within the material design structure.

So, scale.

Not all assets hold the same visual weight.

An avatar in an account switcher is purposely

smaller than a main hero image, because of information

hierarchy, right?

So, be mindful of these scale differentiations

between imagery types such, as avatars, feature images,

et cetera, as well a similar asset types,

such as thumbnails within a gallery experience.

Scale in a hierarchy imply importance,

and not all of your assets are equal.

OK, So this seems obvious, but make sure

your images are appropriately sized for their containers

and across platforms.

Material designed really emphasizes

large containers, large real estate, and ideally

these assets should not appear pixelated

in your container's cross-platform.

So also, as you can see in many of the vignettes,

a lot of the UI color choices reflect content, right?

So, this was spoken about the keynote.

So, color and imagery and material design

are really symbiotic.

These bold color bars, action bars,

should look to a really intentional color sampling

story.

This not only creates a perceived intelligence

concerning the content, but will make your product feel unique.

We're building a support library called Palette, which was also

mentioned in the keynote, which is part of the Android support