My name is Kirill Grouchnikov, I've been at Google for the last five years,
and I do client work, UI work, on the Play store.
>> Okay, awesome, and what do you like about it?
>> Well, I always liked writing code and seeing pixels light up on the screen.
So this is the Play App, Google Play App.
Starting from top to bottom, we have the search box, and we have these,
what we call quick links, to go to various subsections of the app,
and of the store.
And then we have different content here, so we have clusters of cards.
We have this,
we call a banner, that gets you into some other place in the app.
You can go into the details page of a certain item,
let's say Angry Birds Telepods, and this is what we're showing here,
kind of the mix of information that the developer has provided.
We have the video of the app.
Then we have the short description of the app's screenshots.
Then we have the user provided content, reviews and ratings of that app.
A little bit more related content.
And then here, a couple of links.
And you can go also from the details page.
You can start the install process.
This is the permissions.
And then you go and accept them.
And it starts.
So you can see over here, it starts installing it.
So the students have been learning about text views, image views, buttons.
Can you point out a couple of those in apps?
>> Yeah, so back to the cards, if we look at this Star Wars Rebels.
So the card itself is an extension of a view group.
But it can be as simple as a extension of our elegant layout, and
then we have this thumbnail is an image view.
Then we have this,
Star Wars Rebel is a text view that goes to a maximum of two lines.
Rating bar is, well, rating bar.
The free is text view, and the overflow dots is an image view with
a source set to a certain PNG that looks like three dots,
and then the same for the quick links, so
it is a relative layout with the image view on the left.
And then the text view in single line mode going to right of that image view,
and extending however much it needs.
And it has its background
set to a certain drawable that has a green background with rounded corners.
So essentially, as you say, it boils down to taking these very basic building
blocks, text views, image views, sometimes rating bar,
progress bar, spinner, check box, radio button.
And combining them based on what your design shows on a particular screen.
>> Yeah, that's so cool because the students are learning this in their very
first lesson of Android and you're using this every day in the Google Play app.
You mentioned working with a designer.
So can you describe what that process is like?
>> So, it starts from the product people, and
then it goes into discussions with design and
engineering on what are the screen surf we are talking about and
how, hopefully, already at that point of the design site,
we start thinking about how we'd adapt to smaller screens, to larger screens.
And after that, we do these kind of iterations
on putting something on the screen, and start validating the overall approach.
Because sometimes you have a static mark or maybe a motion mark
from after effects or whatever tools the designers are using.
And you see it on your desktop screen,
and then you put it on the phone and it feels quite different.
Because you have a smaller screen.
Or because it's a tight interaction, or maybe because you
are depending on all these great big images, but the network is slow.
And so, you start with this screen that five seconds doesn't display anything.
And so, hopefully throw out this iteratic process, where.
We put something on the screen, not necessarily pixel perfect,
then we can go back into the product level discussions and see, okay,
what do we need to tweak?
>> So, for developers who don't have a designer to work with,
do you have suggestions on what they can do to make their app look better?
>> I would suggest to going to the website for
material design and get acquainted.
Not necessarily with the finer parts of motion arcs or
all those interpolators, but focus on the bigger picture.
So to have consistent grade across the entire app,
what we call key lines or what the design calls key lines.
Vertical and horizontal, where elements align to certain visual rhythm
and they don't feel just randomly thrown onto the screen.
And so you have your toolbar.
You have, maybe other parts of your Chrome,
like the navigation elements on your screen.
And then you have the content itself, so it's great when it all aligns to
the same grid, and you have a little bit of margins on the sides.
And things are not too close to each other.
Then you have typography.
Which is a great way to visually
convey the relative importance of different things.
So if you talk about something like inbox, or Gmail, or an email app.
So if everything has the same typographical language.
If everything is the same color, the same size and the same style,
then it's not really easy to scan it.
So maybe you would want the RQ make the sender.
A little bit bigger, like the sender name, or maybe the title,
or the first few words of the subject to be bold.
And that would allow the user to more quickly scan.
It depends, once again, on your content.
But I wouldn't recommend necessarily going with too many styles,
or too many sizes.
Three, four styles used consistently across
multiple screens allow the user to kind of get, even on a subconscious level.
To get kind of a picture of how to get things done in your app,
and necessarily fight to understand where the information is that he or
she is looking for.
And the last thing, colors.
Use a little bit of, especially with material.
It kind of leans toward using big splashes of saturated colors,
which looks great, especially if it goes into the status bar on Lollipop devices.
Identify what we call the accent colors and primary colors.
Identify a couple of colors.
And use them to, kind of, you know, to style the chrome of your app,
so like status bar, action bar, maybe a little bit in the navigation drawer.
And use and highlight so X sends for the floating action button or
maybe to draw attention to a certain,very important element,
what you consider a very important element.
And I think these three go along way towards
emphasizing a little bit more the visual style of the app.
And of course,
if you have an opportunity to team up with a designer, that's always great.