Flexing the rules of material design
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 46 | |
| Author | ||
| License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47197 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
droidcon Berlin 20153 / 46
5
7
10
13
16
18
20
21
23
26
31
34
35
36
41
42
45
00:00
Hill differential equationRule of inferenceAndroid (robot)Office suiteVisualization (computer graphics)Software developerCycle (graph theory)Disk read-and-write headComputing platformDesign of experimentsProjective planeProduct (business)BitClient (computing)Lecture/Conference
01:54
Software developerMultiplication signObject (grammar)Lecture/Conference
02:28
Real number1 (number)Software developerObject (grammar)Lecture/Conference
02:47
Inclusion mapSoftware developerMobile appRadio-frequency identificationFormal languageLecture/Conference
03:25
Sheaf (mathematics)Product (business)Element (mathematics)Mobile appPattern recognitionLine (geometry)Point (geometry)BitAmsterdam Ordnance DatumLecture/ConferenceMeeting/Interview
04:22
Graph coloringElement (mathematics)Mobile appRight angleReal numberLecture/Conference
05:00
EmailRootDirected graphExecution unitInclusion mapConvex hullRule of inferenceGoodness of fit
05:23
Digital filterNetwork topologyNavigationRule of inferenceGoogolText editorAxiom of choiceHidden Markov modelLecture/Conference
05:46
File viewerGraph coloringProcess (computing)Googol
06:08
Product (business)Mobile appINTEGRALAndroid (robot)Identity managementLecture/Conference
06:38
Point (geometry)Product (business)Functional (mathematics)Lecture/Conference
07:16
Duality (mathematics)Product (business)Mobile appSoftware developerINTEGRALPoint (geometry)Context awarenessVector potentialLecture/Conference
08:01
Slide rule2 (number)Lecture/Conference
08:25
Context awarenessProjective planeTape driveComputer animationLecture/Conference
09:06
Multiplication signMereologyElement (mathematics)Product (business)WebsitePlastikkarteComputer animationLecture/Conference
10:00
Bit error rateComputer fontMedical imagingElectronic program guideBlock (periodic table)BuildingMoving averageTape driveProduct (business)Graph coloringComputer animationLecture/Conference
10:24
Tape driveTape driveContext awarenessSampling (statistics)Computer animationEngineering drawing
10:38
Core dumpGoogolTelecommunicationLecture/Conference
11:16
Element (mathematics)Maxima and minimaBit error rateMathematicsVisualization (computer graphics)TelecommunicationBitElectronic program guideElement (mathematics)Uniqueness quantificationMaxima and minimaContext awarenessLecture/Conference
11:58
Product (business)Client (computing)Square numberProduct (business)Software developerLecture/Conference
12:51
Scale (map)Core dumpObject (grammar)Acoustic shadowFormal languagePattern languageObject (grammar)Pattern languageScaling (geometry)Formal languageProduct (business)Speech synthesisPhysicalismRule of inferenceCore dumpBit2 (number)Letterpress printingMultiplication signAcoustic shadowLecture/Conference
14:05
MereologyPattern languageLecture/Conference
14:30
Context awarenessInheritance (object-oriented programming)Tape driveComputer iconContext awarenessCuboidElement (mathematics)PlastikkarteMoving averageComputer animationLecture/Conference
15:15
RepetitionMaxima and minimaMereologyDivergenceProduct (business)Graph coloringLecture/Conference
15:44
Green's functionMaxima and minimaGraph coloringProduct (business)CASE <Informatik>Computer fontLecture/Conference
16:01
Computer fontRegular graphMenu (computing)Computer fontProduct (business)CuboidGoogolXMLLecture/Conference
16:40
Element (mathematics)Product (business)Element (mathematics)BitClient (computing)Point (geometry)Lecture/Conference
17:10
Product (business)Disk read-and-write headLecture/Conference
17:35
Rule of inference1 (number)Mobile appStandard deviationCuboidTwitterLecture/Conference
Transcript: English(auto-generated)
00:06
Hi, everyone. Thank you, Matthias. So, as he said, my session is called flexing the rules of material design. I am a product designer at Carbon 5.
00:22
Carbon 5 is an agile product design and development shop based in California. We have offices in San Francisco, Los Angeles, and we also have another office in Tennessee, in Chattanooga. I'm out of the Los Angeles office. We believe in flexibility in product development,
00:43
short development and design cycles, and user-tested development and design. A little bit about me. I'm a product designer there. My role is quite broad as far as designers go. I do design facilitation, user experience design, visual design,
01:02
and a bit of branding when we have clients that also need to be adapted to a different platform. My background is in branding and advertising, so I have been ingrained with the idea in my head that you need to recognize the importance of the brand voice
01:20
and the brand visuals, so that you feel like you and nobody else. So, about a year ago, I had the opportunity to work on my first Android project. I was new to the landscape, so I wanted to learn as much as I could,
01:41
and I thought, what better place to start than reading the material design guidelines. So I had a better understanding of what design for that platform was. Just out of curiosity, who here has read the design guidelines? OK, so that's pretty much all of the room.
02:01
Also, who here is a developer? Most developers. Any designers in here? OK, nice. So I really... I fell in love with their use of material as the metaphor, which tells us that material is really grounded in tactile reality.
02:22
I think it makes sense. You have a really easy time envisioning it, and I think it's really easy to understand that it's digital objects that are behaving like physical ones, that are in the real world. Also, I fell in love with how these guidelines make design accessible to all,
02:40
so as developers, did you guys feel like this was an easy thing to understand, even though you weren't designers? Any? Yeah. From a designer standpoint, I felt like it was really like the foundation that every designer should know, and it helps when you're on development teams with others that also speak that language.
03:04
So my one thing, though, was that as an ex-branding designer, I wanted to know how would the app that I was working on, how will I allow my brand or app to feel like itself? The guidelines are pretty rigid.
03:22
From font suggestions of what you should use, button suggestions of what you should use, everything's really prescribed, which is great if you are new to design, but at some point it starts to look more like Google's product than your own, and that sometimes becomes a little bit of a blurry line.
03:45
So in asking this question, I wanted to answer, what are other apps doing out there on the marketplace? Who was getting recognition for using material design, and why were they getting that recognition? So while I was researching, the first thing that I came across
04:04
was that most apps are using it as a colouring book. So the sticker sheet that Google gives you to apply elements into your designs is being used just as a colouring book. So on the left-hand side is an app in the Google Play Store.
04:26
On the right-hand side is a design that I was able to put together in under two minutes with the exact same elements, just the colours are changed. So that was the first thing I noticed, that it was just a colouring book.
04:42
Again, another experimentation, left-hand side, real-world app, right-hand side, just elements from the material design guidelines. But then I asked, other people are clearly doing it well, they're being acknowledged, let's find out who those people are. The first one I came across was the New York Times.
05:03
They get recognised by Google, and they actually got awarded in the material awards, for elegant use of typography. They do not use Roboto, very briefly do they use it. So that was like, okay, all right, so you're recognising someone for a rule that they broke, that's good.
05:24
Another one is Airbnb. They're quite popular and they get recognised really well, they're on the editor's choice, and they are not using the navigation drawer at all. They've done away with it. So, and Google says use the nav drawer.
05:41
So, again, I was like, hmm, maybe some rules are meant to be broken. The third one is the weather timeline. It's recognised for crafted simplicity. Google suggests using two colours, a primary and a secondary colour. They're using four different colours as a primary colour.
06:01
So, again, it's a little give and take. So, based on what I'd learned through this process, I identified five different steps to help make sure that we maintained the integrity and identity of the app that we were creating.
06:20
They're kind of like bowling bumpers for the Android design world. So, without further ado, the first one is reset your thinking. So, a lot of us have been working on a product for a while, and are pretty familiar with what it is, and we think we know it.
06:44
So, in that, I would say the first thing that you should do is zap that out of your brain and pretend like you didn't know anything about this brand at all. Act like it's the first day that you're learning about it, and identify and document who is it for,
07:02
so who's your primary user, really? What's the primary function? What goal is your user trying to achieve by using your product? And why does your customer need it? Is it addressing a pain point that they have? How will it be used?
07:21
In what context is your customer using this app? These are really important things to note, and as a designer, I work pretty closely with the development team to see that these things are kind of manifested, and we recognise these things, so we always know who we are.
07:41
We have that integrity. The reason why we do this is to gain an understanding of tonality and context of what we're doing, and when I say tonality, I mean, what are your product communicates to customers and potential customers? What do you want it to be saying?
08:01
When somebody looks at you, what's that one thing you want them to take away? And by tonality, sorry, sorry, one second. I have gone off the slide list. And by context, I mean what people see, hear and think about a brand.
08:27
Again, you want to make sure this is clearly you, so that when you come up to these challenges where you're adapting pieces of a sticker sheet, you know what's you and what's Google. You can separate those two things.
08:43
And then the thing that we always do is we grab some tape and we put up the things that we found up in a room. So we normally have a room devoted to each project that we do, and we make sure that the artefacts that we gather that really tell us about the work that we're doing are up around our team, so that we're always able to refer back to it.
09:07
Step two is really work with what you've got. In the start-up world, as a designer, a lot of times you inherit products with existing designs, whether it's a marketing site, a logo on a business card,
09:24
somebody decided to go happy on 99designs and buy themselves a $99 logo. It's something that you might have. And you have to decide whether those elements are working for your project or they're not, and what parts of it you can maintain and keep and use.
09:43
Because chances are, if you're working in an agile style, you won't have the time to do a fully branded product, but you will have the time to adapt to make it the best that it can be as quickly as possible.
10:02
So start by making a minimal style guide of assets your brand already has. So make sure that your team is gathering logos that may exist, images that may exist for this brand, fonts, colours, these are kind of the building blocks for what can then quickly become a product.
10:23
And then again, grab a roll of tape and put it up. If you don't have a brand that has these assets, I would say pick up things that are visual samples that meet your context and tonality and just put them up, because that can be referenced and those are things that can be adapted.
10:45
Look at what you've put up and identify what makes you unique when compared with Google's material design guidelines. Are there things that they're telling you that you should do that then you're like, that is the core of what I look like, I can't do that.
11:01
Sometimes you might want to keep those things. You also want to see if your current visual aesthetic, communicates the elements you identified in step one.
11:20
So is it really meeting the tonality and context you identified? And if it's not, the answer could very easily be no. What are the minimum visual changes you can make to have your style guide meet the criteria you've set up with your tone and context? The third step is what would paper do?
11:42
And this is really where I feel like your brand has a chance to shine as something unique. This is something that we do at Carbon 5 quite a bit and we sketch. We sketch out, we do 6-up sketching. Who knows what 6-up sketching is in here?
12:01
Only carbon fibers. So 6-up sketching is we get a tabloid-sized piece of paper, we divide it into six squares, we have six minutes and we ideate six different things. So it could be we're ideating what a button could look like. And everybody participates, the client participates,
12:20
the developers participate, the designers participate, the product people participate. So again, it becomes a way, an exercise for you to be divergent and really see what your brand's about. So in understanding that exercise, there are a few key things that are very material design
12:42
that I would say don't step away from, always maintain. The first one is that material design is a physical way of viewing a digital product. So the three core principles that go with that are that you should really respect the ratios. Like most things, based on paper and print,
13:01
material design utilizes incremental growth in both typography and scale. Things grow very proportionally to one another. If there's one rule that you should maintain, this is the golden one. Because this is the one where they've just set up the grid work for you so well that that's a place that you can really easily just adapt and not fail.
13:27
The second is that in talking about what really material design is, it's physical objects and physical objects have shadows. Paper is a physical object, and that's what they're referring to.
13:41
The last thing that I will say, and I will say it with a little bit of a caveat, is respect as much of the pattern as you can, because it's the language that your customer speaks. So the way that a customer flows through a product is very much... They don't even read half the time,
14:01
it's just that it's a pattern that they're used to following. So that is very much part of it, but I say as much of it as you can. If there is a part where it doesn't feel logical, abandon the pattern. So, keeping in mind these three principles,
14:23
we'll end up sitting out and sketching. And then we'll put things up and we'll look at them. It's a really easy way of like just doing things super quickly and looking at what you can do to step outside of the box.
14:41
We'll sketch out basic UI elements like buttons, icons, cards. And we'll always consider at the end when we put all of this stuff up, is that the tonality and the context that we identified in step one, what our brand is really about, is always in the top of our minds.
15:03
And again, we'll grab a roll of tape and put this up. It's always important to keep stuff around you, because it's really easy to just forget the things that you did. Again, we do that because it's a divergent exercise and it's really easy to like,
15:20
not just adapt something from a sticker sheet and change the font or change the colour, you step outside and you do something that's totally different. So, that being said, the fourth part is really the minimum viable design customisation. This is the first thing that we'll do, because it's the easiest thing. And sometimes you'll see in products, this is where people abandon after this step.
15:46
So this can get you to market really quickly. And the minimum viable design customisation you can do is what we see in most products. It's customise your colour palette. So, in this case, you can just adapt your primary and your secondary colours.
16:03
Customise your font. This doesn't get done as much, but if there is one piece of quick value that you can get from differentiating your product, is use a different font. It's a great way of looking like your brand and not Google.
16:21
It's something that goes unnoticed, but the font is really the thing that sets you apart. But, again, keeping the incremental growth of the fonts the same. Customise your buttons. This is what you get out of the box. This could also be a button.
16:42
And then, last but not least, I would say introduce an element of delight. Again, go back to sketching. Go back to something that you could do as a team and say, what's the pain point our client is trying to, our customer is trying to address? How can we make this a little bit more exciting for them and more interesting for them?
17:03
What could you do to add a little bit of delight to your product and be uniquely you? And this, I can only leave it a question, because it's only something that you and your product team can get together and visualise. And, again, go back to sketching. It's the best way.
17:22
It's what we did as children and it's the best way of getting out what's in our heads. It doesn't have to be perfect, it just needs to communicate. So, don't be afraid of sketching. So, I guess what I really wanted to be the takeaway from this is that you should be compliant, but not a copycat,
17:42
when it comes to material design guidelines. It's pretty clear from the research that I've done that they reward people that have stepped outside of the box, even though they're prescribing a very stock-standard way of doing it. When you really look at the apps that are getting rewarded and recognised,
18:01
they're the ones that have been not afraid to break a couple of the rules. Thank you again. My name is Yasmin. You can find me on Twitter, Yasmin Malavi. I'm from Carbon 5. Thank you for listening.