Learning to speak Designer – Google I/O 2016

Learning to speak Designer – Google I/O 2016

RICH FILCHER: Good morning. AUDIENCE: Good morning. RICH FILCHER: Thank you. Welcome to Learn
to speak Designer. My name is Rich Fulcher, I am a
design manager on the material design systems team. ROB GIAMPIETRO: And
I’m Rob Giampietro. I’m a visual designer on
the material design team. RICH FILCHER: Thanks
for coming this morning. When you talk to
designers, it may often feel like they’re speaking a
completely different language. And even when you can kind
of follow along in context, and get some of the
meaning, the precise kind of vocabulary that
they use may elude you. So we’re here today to help kind
of translate some of the things designers say. And to do that, we’re
going to give you a little bit of a view
of the design process. And how several different
forms of designers approach their work. So the language of
design is wide ranging. There are terms that
literally go back centuries in their usage. And there are newer formulations
from this modern digital age. And there are things that
are just outright slang. Both Rob and I are part
of the material UX team. So much of our work involves
building and evolving the material design system that
was first revealed up there two years ago. But more broadly, our
mission is to empower designers and developers
to do their best work. And that’s why we have tools
like the material design guidelines themselves, other
tools like the icon library, and even discussions
like the one we’re having today all
try to pursue that goal. ROB GIAMPIETRO: So
it’s natural to ask, why is learning design
terms important? And there’s a lot
more collaboration happening between
designers, engineers, developers in team
based environments. So it’s important to have
a shared vocabulary there. And there’s also more
individual engineers that are wearing designer hats. And so being able to
think like a designer is really useful in order to
toggle between those roles. And yet designers
and developers often come from different backgrounds. They have different education,
they have different training, they have different
jobs, and even workflows. Our goals with this
talk is to just have simpler, better
understanding between designers and developers, and
improve collaboration. So to start, we want to sort of
dive into the design process. And that means by learning
about this process, we can have a little bit more
context for what’s to come. And a little bit
later in the talk we’ll look at some more
technological terms and advanced concepts
and principles. So much of the design process
is a little bit invisible when you see the final output. When you see this
brand launched– this is an example from our
own practice, the logo for GV, or Google Ventures–
you don’t have a lot of context about
what went into making this. Few people see all the
different variations. Iteration after iteration. And there are lots of dead
ends and false starts. And files that are
saved over and over. You may know final,
and final final. The design process often expands
to the time that you have and the resources
that are available. So it’s very scaled and
it’s never really done. So that’s what
the design process looks like from an asset
point of view, for the logo. But let’s take
another look at how it looks if we visualize it. If we visualize the process,
the final grooming of the logo might start to get
linear, and really drive towards a conclusion. But if we go back
in time, we might see some more twists and
turns and waves along the way. And ultimately we kind of
realized that, well, design is really not a linear process. You might even think we have
no idea what we’re doing. RICH FILCHER:
Fortunately, designers do have a term for this
hairball of confusion that’s happening over
here, and that’s ideation. You might think
of this as really similar to brainstorming. You’re trying to generate
as many ideas as possible and the emphasis is
quantity not quality. But I think what happens
is people here brainstorm, and they think of something
that’s a lot more contained. They think, OK we’re going to
go in a room for a half hour, we’re going to brainstorm
and we’re going to be done. But for designers, this process
happens over a much longer time scale. You’re not just kind of putting
a thought onto a sticky note and being done. You’re taking that idea and
you’re starting to express it. You’re starting to sketch it. Maybe do one sketch,
or multiple sketches. You might do a study. And you’re just trying
to explore the idea in a little bit more detail. See if there’s
something useful there. Make sure that there
isn’t something. And generate new ideas. Kick you off into new directions
and kind of keep exploring. And as these ideas
develop, they’re going to take different forms. Early on they might
be diagrams, trying to capture how the different
parts of the system relate to each other. Or how different roles
within the system might collaborate to
achieve a bigger goal. And they might eventually
take the form of wire frames. Starting to explore what
individual screens might look like. And note, the sketchiness
of wire frames at this level is a feature, not a bug. You’re trying to focus on just
the most important elements. It’s OK to be kind of hand-wavy
about secondary things on this screen. And this is why
designers sometimes gravitate toward tools,
like whiteboarding or using big chunky markers to draw. By selecting a tool like
that– that gives them limited fidelity–
they’re actually kind of keeping that level of
unspecificity, which is desired at this point in the process. Now eventually you
do get into kind of higher and higher
fidelity versions of this. Especially as you gain
confidence in the idea and you want to really
make sure it’s working, and really connect
everything together. Now this isn’t strictly
linear, even though we did the line at the end. There’s plenty of
room for revisiting what’s gone before, of going
back and ideating one more time. And as a developer, you may
not see all of this work. You may just see some of the
tangible outputs of this. Things that we call artifacts,
we should define that one. Artifacts are just
design documents. It’s a fancy way of saying it. It’s maybe a little
philosophical, but it’s important to note that
these aren’t the design itself. These are the things
that are created as a byproduct of
the design process. This is how designers try
to capture the thinking that they’re doing,
and putting it into a tangible, shareable form. And no one artifact
captures everything. They’re together. You can put a lot of
different artifacts together and hopefully get
to a more and more complete embodiment, or
specification, of the design. So just as there are
many styles of artifacts, there are many
styles of designer. We’re going to look
at a few today. We’re going to
focus on interaction design, visual design
and motion design. I’ll start with interaction
design, that happens to be my specialization. I still think back
to my first day of my first class
about [INAUDIBLE] years ago, when I started
learning about design. And back then, it
wasn’t even UX, it was called Human
Computer Interaction, HCI. But fortunately I’m
not quite old enough that was called Man
Machine Interaction, which is what happened before. In that first class, the
core definition of design boiled down to just five words. Users. Context. Tools. Tasks. And goals. What we do in
experience design, is that we study users who
have a certain context. We create tools for them
to perform tasks in order to achieve higher level goals. Users. Context. Tools. Tasks. Goals. And speaking of things you
learn on your first day, there is this artifact that
every new employee at Google gets to read on their first day. It’s called “The 10 Things
We Believe To Be True”, and this is Google’s
way of trying to capture some of their culture
of what makes something Googly. And number one on that
list is focus on the users, and all else will follow. Now when we focus
on the users, we work closely, as designers, with
user experience researchers, or user researchers. They help us to understand
the users, who are they, what are they like, their context. And that’s kind of broadly
their technical, physical, interpersonal
environment that might inform the way that they act. And of course their goals. Why are they doing the things
that they’re doing here? What is the kind
of bigger purpose they’re trying to achieve? Now our research colleagues
have just as big a vocabulary. And we can’t possibly do service
to all of that in this talk today. But if you really wanted, clamor
for a sequel in your space or in the YouTube comments. So coming back to design,
interaction design focuses on the
tools and the tasks. We’re building the tools to
help accomplish the tasks. So as an example, I’m going to
take one of our newest tools to walk through how the
design process worked. There’s another kind of
Google statement, our mission statement, that I think most
people are quite familiar with. “To organize the
world’s information and make it universally
accessible and useful.” I think a lot of times
when people read this, they focus on those
first five words. Oh, organize all the world’s
information and kind of stop there. But making things
“universally accessible”, taking it and kind of
bringing it to all the users is a very important
responsibility for the designers in particular. To that end, we’ve
recently introduced a tool for Android called,
Accessibility Scanner. You may have already used this. The goal of this
tool, or the types of things we wanted
to support were, we wanted to make
it easier for a team to evaluate how their
app was performing with regard to accessibility. It could flag some
common issues. A touch target that’s too small. A case where text contrast,
relative to its background, was too low and a
bit hard to read. Or images that would be lacking
content descriptions for people that are relying on screen
reading technologies. The goals of the project
when the designer started work on this were
they wanted to do something that
would fit smoothly into the user’s workflow. You want to make it easy for
someone to use this tools, so that it doesn’t
feel like a burden to their existing process. You want it to reinforce
the types of guidance– we already gave them the
material design guidelines. And we want to educate users
about why these issues are actually important. So where does a designer get
started on an app like this? Well in this case, she
started with the users. Who is this product for? And user is a shorthand. It’s not a single
user, there’s not some perfect hermetically
sealed individual we go to and we can test. User is many, many
different types of users with many
different characteristics. So this designer,
she goes and she talks to some of those users. She talks to developers,
designers QA testers, product managers. They may all have roles
to play in ensuring that these apps get to
better and better levels of accessibility. Now one way that she can
capture that information is through something called,
The User Need Statement. This is just a way of
capturing the who, the what, and the why about a
user’s relationship with this kind of
proposed design. So the who is actually
a name in these cases, that’s surprisingly handy to
refer back to people later. The role they serve. The what is what do
they need to do, what is their need in this situation? And the why is why are
they doing that thing? What are they valuing? Why is this important for them? When you have
these insights, you can use them in a lot
of ways as a designer. Some of it’s
subconscious, where you’re just kind of aware of
this work that you’ve done and it informs what
happens going forward. But you can also turn
it into tangible things, you can turn into
design principles. It can help you
prioritize the features as you discuss with
the larger team what this product is going to be. So once we have a
sense of the user, we can start to
structure the experience. The interface
designer sketches out how the different functions
relate to each other. And again, this isn’t just
one sketch, this is many, we’re ideating through this. And you are trying
to understand how all of these different users,
all of these different tasks can interrelate. So the name for this
phase is traditionally information architecture, or IA. And this name is
no accident, IA has a lot in common with
traditional architecture. It is both an art and a science. It is creative and technical. Its focused on thinking
about spaces broadly, spaces like this space. How they’re structured. What does a user do in
each of those spaces? How does the user move
between those spaces? And it also takes advantage
of established principles, common patterns. So just like
software architecture will define the
structure of a system, information architecture defines
the structure of an experience. So let’s come back to
Accessibility Scanner. Even as we’re refining the IA,
there’s still more sketching happening. There’s more work being done. And you’re starting to
get sketches that look more and more like screens. So the designer, she’s going
past the high level structure of this, and indicating
how each room– back to the architecture– will work. She’s thinking about many
different users here. How does a first
time user enter? What are some of the
high traffic areas that all users are
going to go through? For a frequent user,
how do they go back and retrieve an older
archive report they may have generated a while ago? Now over time these sketches
become more detailed. When you take one
particular designer, or one particular user, and you
sketch out a sequence of steps through the app– In this
case, opening the app, activating the checker,
going to the app they want to run the checker on,
generating report, reviewing a report. This specific presentation is
something we call a storyboard. And this practice isn’t
unique to UX at all. This is long used as a
pre-visualization technique for film and for
video production. The idea is you want to
get the sense, or the feel, of the experience
without actually having to build it or pay for
it, and those types of things. So as you get to the
next level of detail, you start to focus on all of
the individual elements that shape the room. You’re moving from
architecture to interior design at this point. So the designer has
to be very specific about the individual
controls that will appear. And which buttons, which icons,
what options are in the menu. And collectively we call all
of these different things affordances. You want to be able to
readily perceive how something works just by looking at it. And in the physical world, we
see plenty of examples of this. You’re all sitting conveniently
on these affordances, called chairs. You walk up to a chair. You look at it. You’re like, I know what to do
with that, my butt goes there. That’s a chair. Door handles are the same way. You look at it, OK
it opens, it closes. Buttons on the interface,
whether I’m going to click it, or whether I’m
going to touch it. There should be something
about the object that indicates to any user how
it’s meant to be used. Now affordance
isn’t a guarantee. We’ve all walked up
to a door and pushed when we should have pulled. But it should at
least be a signal, that idea of kind of perceived
interact ability of that object is really important. So we’re going to
shift our emphasis now from interaction to visual. We’re going to talk about
how the brand identity, how the stylistic distinction
can develop and further support that interaction. And further guide users. And of course as I pass the
mic, or the clicker here, the process is actually a
lot more fluid and a lot more interconnected than that. There’s lots of
parallel thinking, lots of back and forth. And there are in
fact many designers that are kind of comfortable
in both of these camps and can move very
fluidly between them. You never really just
stop thinking about one and move to the other. ROB GIAMPIETRO: So thanks, Rich. So while Rich specializes
in interaction design, my focus on the team
is a little bit more on the visual design side. And there are some
fundamentals and principles that you can master
to better understand this aspect of the
design process. Today we’re going
to cover layout, art direction, and typography. And being more aware
of these steps, will help you better communicate
with designers on your team. And maybe even think more
like a designer yourself. So with visual design,
there’s not just one way to approach it. There’s many methods,
there’s many styles. And it really needs
to fit closely to the content and
the problem at hand. There are now more than
a million material apps in the Play Store, which
is an amazing number. Lots of variation
and richness there. And that’s because
material is designed to be a flexible system. And this richness
is created in part by the application of a brand
to the interactive elements that Rich described earlier. So we’ll touch on
some of this today, but there’s also an article on
Google Design, our design blog, called “Expressing
Brand in Material”, that also touches on
some of these things. And Google Design, in
general, is a great place to go if you’re thinking
about going material or if you just want to
learn a little bit more about how to think
like a designer. So one way we would
design material to be flexible for
brands is that we stress test it using fictional
brands in different contexts. And these are three of
our fictional brands. One is called Shrine,
and it’s a shopping app. Another is called
The Fortnightly, and it’s a news app. And the third is called Pesto,
and it’s a cooking and recipe ideas app. So you can see already
on their logos, how visual design communicates
the nature of these apps. And we’ll dive a little bit
more into Shrine to start. And talk a little bit
about layout hierarchy and art direction. So any time you’ve got
an array of products, it’s helpful to have a
system to organize them. And that is where it’s
useful to meet the grid. Grids might seem basic,
but they’re actually a foundational principle of
design with a rich history that goes way back to some of the
most iconic and beautiful works of modern design, more
than a century ago. Users know grids,
they understand grids, and grids allow them
greater speed and confidence in browsing. And they allow designers
greater speed and confidence in designing. So they’re a really important
part of material design. You shouldn’t dismiss the
terms you think you know. Let’s dive in and
define grid a bit. It’s really the tool that helps
you solve a visual problem, and organize information. And as the definition
says, grids communicate order,
economy, and consistency. And they provide a common
structure and some flexibility to support different templates
and organize content. Grid systems include things like
margins, shown here in green. And margins are both
functional and aesthetic. They enhance the pleasure of
reading a page on the screen. They also provide an area
of safety for the content and the elements. So if you have a book and
the margins are too small, your thumbs might
obscure the text. If you have a screen
and the margins are too small you might be
pushing interactive elements out to the edges where
users can’t easily touch them and use them. Gutters are another
part of any grid system. And they’re similar to margins,
but they denote the space between the columns, instead
of outside the content area. The gutter, the
margins, and the grid, help define how images and
text will align, or layout, on the page. This is where we
get the term layout. And in Shrine’s case, the
layout is clean, it’s orderly, and it keeps with the sort of
polished look of this brand. The grid is not just
implied, in this case, it’s emphasized with cards. And again, this
really helps Shrine feel locked up, put together,
kind of buttoned up, clean– It retains that clean look at
every resolution from phone to tablet, regardless
of the number of items. So if you have a really
well-designed grid, you can actually do this. This grid scales responsively. And in order to do this, we have
paid really careful attention to the breakpoints, and also
the image aspect ratios. Hold on, what’s an aspect ratio? Let’s define it. An image or graphic
has an aspect ratio of 2:1, that means its width
is twice as long as its height. So this is what we
mean by aspect ratio. And we can see how as the
aspect ratios shift in Shrine, some of the images get more or
less white space around them. Let’s define white space
too, because that’s another one of those terms
that’s easy to gloss over. It’s deceptively simple. It’s not blank space, it’s
actually an important design element. It helps to balance
between the positive and the negative space. And really help a user move
through, or navigate around all those elements with ease. And when the products in
Shrine have enough white space, it helps them feel uncluttered
and it really elevates them, and makes them feel special. And makes people want
to take a closer look. This is because white space
is playing the right role within the hierarchy
of the layout. So when I talked earlier
about margins in gutters. Margins might be
bigger than gutters because of the hierarchy
between those different spatial elements. Hierarchy is a designer’s
word for priority level. It includes text. It includes images. It even includes white space. And it basically helps us
to say, what’s important? What should someone see first? What should someone see last? And it ties back to
that user experience, that you want the user to have
all the way in the beginning of the design process. So here are two layouts. And on the right, we’ve
tweaked the hierarchy just a little bit. The headlines a little
bit more prominent, a little bit more
design forward. The logo’s not getting lost,
we know which app we’re using. The product descriptions are
a little bit more present. And the price and everything
is a little bit easier to read. So things have gone from
feeling sort of bland, and even, and all the same size
to maybe a bit more considered, like this app has
a point of view. And more engaging. When we were working on Shrine,
we often used the re-sizer. And this is a tool that helps
us to visualize and test how this app, and many apps
respond to various break points. On desktop, and on
mobile, and on tablet. And it’s a great tool. We’ve shared it with everyone. So you can go ahead
and try it yourself, on your apps, or your
websites at design.google.com. Let’s shift now from
layout into art direction. So now we’re talking about
the images, the illustrations, or in this case, the photos, and
why they come to look that way. So let’s look at the images
on screen from Shrine. They’re shot in a studio,
they’re silhouetted, you can see the
outlines of the shapes. They’re not on models. They’re not candid snapshots. And the shoes are styled to
be a little bit playful, even kind of humorous. Each one of these things reveals
a decision that someone made, and that person is
called an art director. At Google we use art
direction all the time, even in some places that
you wouldn’t expect. These are actually photographs,
these iconic images from material design
as our backgrounds. And there’s a great article
on design.google.com about how we did these Android
wallpapers, written by Rachel Been, one of our art directors. And she walks you
through the process of collaborating with
photographer Carl Kleiner, to commission these paperscapes
and how they came to be. So because art directors are
constantly giving feedback to their team, and
to photographers, and other
collaborators, you might say that they have their own
set of phrases and terminology. And they’re a little
bit more just gestural. Make it bigger, zhoosh it up! So these are some of the
terms you might hear art directors using on the team. So we talked a
little about Shrine, now let’s shift our focus to
the news app, The Fortnightly, to talk a little bit
about typography. So typographers both
use type in a layout, and make typefaces for use. So there’s a really
broad skill set, even under the term typography. But whenever I look at a
typeface, I like to ask myself three simple questions, sort
of going back to Rich’s basics. What is a typeface is history? How can I describe its forms? And what is it used for? So the history, the
forms, and the use. And this really helps you
kind of x-ray a typeface and understand it more quickly. So let’s start with forms. If you really want to
speak fluent designer, you definitely don’t want to mix
up the difference between serif and sans serif. The sans part is
easy, that’s just the French word for without. But serifs are
the little strokes on the end of the letter. And they help make the
letters come together into a word shape that
makes them more readable, and a little bit
easier on the eye. Sometimes typefaces
with the same name, have slab or serif variations. And so in this case, we have
Roboto Sans and Roboto Slab. And the slab is just the type
of the serif in this case. It’s not tapered, it has
blunt rectangular ends, which are called terminals. So serifs are an aspect
of typeface’s form, but serif typefaces also
vary along other aspects that I mentioned earlier,
their history and their use. And different faces have
different visual impact. So here we’ve made a
grid of four faces, to have as a comparison. But I’m going to talk a little
bit about the lower right hand corner, about Times New Roman. When you’re picking a
typeface, it depends on how, or where you’re
going to be using it. If you’re going
to be using it on print, on the screen, or both. And for The Fortnightly,
Times New Roman is a great example, compared
to the other typefaces here. It has a great, rich
history of newspaper design. It was actually designed for
The Times of London in 1923. And therefore its
use was designed to be used in situations like
low contrast newsprint, where the ink and the paper– it’s
not a bright white paper, so you need a bolder typeface. And also that means
it translates really well to screens, that are
coarser in their resolution. So its use in print has actually
extended its use on the screen. And it has another use too. It needs to get
lots of words in. So this means that the ascenders
and the descenders are short, and the X height is high. So we can really set it
very closely together and get lots of
words on the page. So I’ve used a bunch
of design terms here. I’ve talked about ascenders
like the K of quick, I’ve talked about descenders
like the G of dog. And also about the X height. Let’s zoom in to a few of these. I mentioned descenders
earlier, these are letters that drop
below the baseline. Baselines are essential for
aligning text and images across columns
pages, or websites. And well-designed baseline
grids help give a rhythm and a sense of proportion,
and order to a design. The other two lines
you see on this slide are the top line, where
the ascenders like the N L hit and the mid line, and that
helps to define the X height. The X height is really just the
height of the lowercase letter X. And it gives a
sense of proportion to the letter forms
of a typeface. So if I’m a really short person
and I wear a really long shirt, then that’s going to make
my legs look shorter. You’re viewing my entire body
in proportion to the elements within it. A typeface is the same. So if it has a
very high X height and very short ascenders, that
will make the letter forms, the counter forms, the shapes
within the O’s seem very big. And that can be very
helpful for readability. Leading measures the space
from baseline to baseline, so between lines of text. And kerning measures the space
between the letters themselves. So if you have two sort
of irregular letter forms like a capital
W and a lower case A, you might want to kern
them closer together, or scoot them closer together. Earlier I noted
that Times New Roman was a really good
fit for Fortnightly, and we see it here
in the headlines. And it really gives
it that newsy feel. But if we look a little
bit more closely, there’s actually another
typeface being used here too, it’s Roboto. And it looks great at all
sizes here below the headline. It could just as easily be
something like Helvetica, or something else. You can use lots of
fonts in material design, but using a contemporary
sans serif, like Roboto, gives this historically
inflected design a subtle and contemporary twist. So here we’re using Roboto
in the deck and the body. And these are actually
editorial terms that designers sometimes use. And they can refer
to multiple things. So they can refer
to the size, usually the body is the smallest of the
head, the deck, and the body. They can refer to the hierarchy,
the body is usually read last. Or they can refer to
function, the deck usually explains the headlines. So this is a situation
where those vocab terms have multiple meanings. You might notice also
that the body copy is in a different language. And it’s intentional. Lorem ipsum is
placeholder copy or text, and designers use it frequently
to see how a layout will look, before the final
copy is in place. And lorem ipsum basically
says to everyone on the team, don’t read me, just look at me. It’s the design of the
type, the typography here that’s important. So as you can see, visual design
is a really iterative process. If you think back to that
hairball of confusion we talked about
at the beginning, you really have to go through
a lot of different things and explore them. But there are a lot
of traditional terms that we can fall back
on, and traditions that we can use to help
solve those problems. So there were lots
of timeless ideas we use in material
design, but there are new terms and techniques
coming all the time. And to talk about one
of them, here’s Rich. RICH FILCHER: Thanks Rob. I want to close out with
talking about motion. Kind of the last of the
three big pillars of design. And we’ll spend the least
amount of time on this. There is a great
other talk– that was last night–
from I/O this year, you should try to
catch up on it later. Motion is where interaction
design and visual design come together. This is where what
you’re seeing and how it behaves come
together in motion and kind of the animation
of the interface. We recently updated the
guidelines around motion in the material design spec,
and the talk from last night covers some of that. If you stay tuned to our
Twitter feed @GoogleDesign, we’ll let you know when that
YouTube video is available. So there’s just
two concepts I want to hit quickly when
it comes to motion. The first is
responsive interaction. How does an affordance
respond when it’s been triggered,
or touched, or tapped? So in material, we try to
encourage the use of motion to tell a little micro
story about what’s happened. To answer that user
question of well, what happens when
I touch this thing? And in this case,
the example here, you’re tapping on one of
two images in this grid. And a few things are happening. You’re getting rid of
all the other images. But they’re not just all
disappearing at the same time, they’re just kind of
washing away, directionally emanating from the point
where the user touched. Now that’s a story that
happens like in under a second, it’s a really short story. But it’s also a way of
communicating to the user, OK, there is still
something important here. These things that are moving
away are less important. And maybe it’s opening up
space to give more details about that thing that
you’ve clicked on. We always want these types of
interactions to be thoughtful and never distracting. Which leads to the
second concept, which is that motion
should always feel natural. This is one of the big
things we emphasize in the guidelines
for material design, is that motion should
contribute to the feeling that you’re manipulating
pieces of paper. That you’re kind of
physically dragging surfaces. And along those lines,
it means that things should accelerate, and
decelerate, and change direction in natural ways. When things don’t
behave naturally and you have an abrupt
stop, or an abrupt begin, or a sudden change of
direction, the user notices it. It’s distracting. And we wouldn’t be doing
a service to motion if we didn’t give them at
least one vocabulary term, so we’ll do the oft
used adjective, janky. [AUDIENCE LAUGHTER] This is
anything that’s unnatural. This is motion that stands
out and gets its attention, but not in a good way. It’s when motion goes bad. As the Supreme Court would say,
you’ll know it when you see it. Now motion is where
design becomes most essentially code based. You will see very tight
overlap between designers and developers here. And some of those designers
are very fluent and comfortable on both sides of that. And it’s this collaboration
between design and engineering that brings this
experience to life. So we talked
process, we’ve talked interaction visual
motion design. Let’s pull it all together
in a quick example. We’re going to do lightning
round design review, showing three
stages of a product. And for this one we’re going
to use Pesto, one of the brands that Rob mentioned before. That’s the cooking
app, where the goal is to have this beautiful,
richly illustrated cookbook style experience. All right Rob, take it. ROB GIAMPIETRO: OK, this
is an interesting start. It’s pretty good, but I
feel like it’s missing color and the brand feels
a little bit weak. I also think that
grid is super dense. I mean this is a lot of
recipes, more than I could ever cook in a week. And the pencil is
really important there, let’s bring that into
more of a primary action. RICH FILCHER: That sounds
good, so next version. Well we get a little
bit closer here. We’re starting to bring the
identity more into play. You’re starting
to see color take its presence within the app. We pulled that Edit
icon out to put it onto a floating
action button, so it’s a little bit more prominent. I wish it saw a little bit
more color and felt connected, I can’t really tell if
that’s enabled, or disabled. Or if it wants me
to click it, or not. And the grid’s a
little bit closer, but I’m not getting
it from the type. I feel the art direction
is a little soft here. ROB GIAMPIETRO: Oh, wow! This is really looking good now. We’ve got much better branding,
some really featured things. The typography is
all integrated, we’re using Futura everywhere. And that pencil button really
has a little bit of zing. I think now we’re looking great. RICH FILCHER: So that was
obviously somewhat accelerated. But this is the
kind of engagement the designers are
doing all day long. Whether they’re having this
discussion with themselves, whether they’re
talking to a peer, they’re doing it casually,
they’re doing it formally, this process of review, of
critiquing, is core to the work that designers do. OK, so we’ve given you
some foundational elements. We’ve given you some vocabulary. Hopefully you can
go out and you can engage in more of these
design conversations. And maybe you’ll also be aware
of the own coded language that your discipline might bring
to bear, and just maybe help define a little bit
of that for designers. If you’re hungry for more– ROB GIAMPIETRO: Yeah, please
start at Design.Google.com. We have the material
guidelines there, as well as resources, tools,
articles, videos, and more. And you can follow us on
lots of social media as well. [MUSIC PLAYING]

12 thoughts on “Learning to speak Designer – Google I/O 2016

  1. I'd like to know :
    1. how to tell the designers, how to use Photoshop so that they would work with DP and not pixels.
    2. creating vectorDrawable, since currently they create SVG file that I need to convert via online tool
    3. creating small-space images files (png and WebP), right within their tools. It's quite annoying to do it manually

  2. I think the definition of 'affordance' in the presentation (15:10) is mixed with the definition of 'signifier'. Looking up the word 'affordance' you can find a different and important design concept, 'affordance': relation between an object and a person that affords the opportunity for that person to perform an action.

    Nice talk, very useful things to learn!

    Very related to the topic I recommend these articles about design in an Android world: https://uxdesign.cc/the-absolute-minimum-android-developers-need-to-know-about-ux-part-1-of-5-cab50bbcf787#.h705ldswz

  3. Design is less to do with the implementation and more to do with the planning. Engineering is more the implementation, less so of the pre-planning stuff.

  4. it would be a good start if people stop using the damn termn „UX“ in the first view sentences and then want to talk about design and its language. The strict language in design is there to avoid vague and almost esoteric terms such as „experience“

Leave a Reply

Your email address will not be published. Required fields are marked *