Go to Source
It’s always great to have a little toolbox with just the right tools waiting for you when you need them. What if you are about to start working on a new project which should apply the material design language introduced by Google last year? What if you had just a good starter kit with everything you need to dive into the creative process without being distracted by routine tasks?
We’re here to have your back — with a little selection of handy goodies, icons, templates and tools to help you get off the ground faster. This post is one of our first shorter “Sideblog”1 pieces where we highlight some of the more useful and helpful snippets and goodies every now and then. We’d love to hear your feedback in the comments to this post.
Material Design, The Visual Language
Intended by Google primarily for Android apps running on phones, tablets and everything in between, material design raised awareness of the delightful details that can make up an interface — from subtle transitions and animations to colorful interfaces with bold, vibrant typography. Experiences crafted with material design in mind are bright and appealing; if well crafted, they’re smooth and accessible as well. No wonder that the visual language found its way through to a brave new mobile world in native apps, hybrid apps and also websites.
The visual language is based on strong color schemes, clarity and space. Shadows play a central role in creating a three-dimensional feeling on 2-D screens, and support consistency and continuity when used with animations in the user experience. It’s more than an extended style guide, though. There are many freely available resources dedicated to material design and you can use them for your project right away. Material design is well documented4 and elaborated to the last detail.
Yet whenever we talk about aesthetics and interaction, we ought to have a conversation about performance, too. Even performant animations can prove an enormous bottleneck when every DOM element is supposed to move, animate and transition from one state to another. Performance matters more than ever before and we have to find the delicate balance between smooth interactions and getting content to the user fast.
More weight doesn’t mean more wait9, so we could treat animations as progressive enhancement, acknowledging that the experience isn’t going to match the material design culture for everybody. That’s when responsive animations — the concept we haven’t been thinking about a lot yet — might become important as well (not to be mixed up with animations in responsive design10, which can be delightful as well).
What can be adopted, though, are colors, spacing, fonts and icons. In fact, there are quite a few resources you can use to get just what you need quickly, when you need it.
Material Design Fonts
If you look into the material design typography guidelines11, Google actively promotes just one main typeface: Roboto12, a neat reference to the Android robot. When crafting user experiences dedicated to the Asian market, you can also use Noto, whose vertical metrics are compatible with Roboto. Both fonts are, of course, available on Google Fonts13, Roboto’s source is available on GitHub14, and the typeface has been released under Apache License 2.015.
Obviously, Roboto has been extensively crafted to fit the purpose of material design, so it’s highly versatile and fully supports Cyrillic, Latin, Greek and Vietnamese (extended character sets, of course). The typeface is available in a variety of weights, from thin and light, to normal and medium, to bold and black (100–300–400–500–700–900); the same goes for italic variants, too. The family can be used alongside the Roboto Condensed family and the Roboto Slab family.
Material Design Colors
When it comes to color, Google also provides extensive guidelines17. Colors are clearly defined, and we’ve prepared a little color palette for Photoshop and Illustrator (ZIP)18 that you can use right away. You can also use a very handy material palette generator19 which will help you create your own custom color schemes.
While Google has suggested a few valid
restrictions
constraints when designing Android apps, you can still fit in enough space for creativity to play with the aesthetics of your interface.
Material Design Icons
Iconography is tricky, simply because it can be ambiguous. But in material design, the visual side of user experience is critical, and it’s highly encourage that icons are used extensively. In fact, Google has open-sourced a comprehensive material design icon set25. You can also download all icons individually at MaterialUp2926, and even integrate them into your WordPress theme27.
Iconography is an important factor, but often it can’t exist alone: for a stronger visual impact, it needs supporting photography or illustrations. Furthermore, Google also encourages30 using (and mixing) illustrations and photos to enhance the user’s experience — with predictive, specific and relevant images, and potentially with an interactive overlay to hide them when they aren’t needed.
The Physical Side Of Material Design
Unlike flat design33, material design widely uses the so-called paper shadow. This shadow is supposed to act like a sheet of paper lying on a bright surface. It emulates a 3-D presence for a digital object. Material design is derived from the material world. Probably the most well-known example is the Gmail icon, which uses lighting effects to make you think of a conventional envelope.
Aside from Google’s official icon set, designers have taken the approach further by crafting their own icons and adapting the visual languages to their needs. That might not exactly correspond to the original idea behind material design, but it doesn’t mean that it can’t work well. For example, Muhammad Yasir from Dubai has released a free PSD material icon set36. There are many37more38icons39available40 free, too.
Cards
With material design, content is always presented in cards43 which use hierarchy, background images and content to “provide context and an entry point to more robust information and views.” Indeed, cards work well as they are supposed to put just the right amount of information in a compact overview, enhanced and supported by visual elements. There are several variations of cards, depending on the content you want to fill in, but usually you will either have an action displayed or provide information in a content block.
In material design, Google also advocates launch screens45, which might sound like a good ol’ splash screen from the sweet and sour Flash times. However, the context might require them: for example, during the in-between time, when your application needs a few moments to fetch data or provide feedback. It might also be useful for onboarding46.
Animations In Material Design
Smooth experiences with material design are achieved with animations47. There are many interesting material design animations48, and often they are quite subtle, but when put together they establish a sense of continuity and delight.
You can find a few examples and freely available samples below:
Material Design: Animation Examples51
Keynote Material Design Animations Template52
Material Design Animations Collection53, with HTML/CSS/JavaScript, on CodePen
Material Design: Free After Effects Project File54
Polymer Starter Kit55
Polymer Material Design Elements56
Polymer Material Design Playground Demo57
Animations in action58
Button Demo page59
A demo page60 for the Ripple effect.
If you’re looking for further tutorials and examples, search for “Polycasts”, a series of videos produced by Google.
HTML/CSS/JavaScript Components
Google has just launched Material Design Lite61, an extensive set of components, templates and styles which have been heavily optimized for performance, speed and accessibility. The components do not rely on any JavaScript frameworks and fall back to a basic experience in legacy browsers. Among the templates, the library also has a “blog” template — at just 159KB, it’s a lightweight template containing built-in patterns for subscription call-to-action, comments, comment ratings, and more.
Besides the blog template, Google has also released a lite version of the current Android.com website. Its basic weight without web fonts is just 27KB, and contains a search field, navigation, and a carousel.
There’s much more useful stuff66 available at the Material Design Lite site67, such as other page templates68, and a great variety of components69 (buttons, cards, tables, etc.). If you need an HTML/CSS library to get going, that’s the place to start.
There are also other kits provided by other members of the community, including the Material UI kit for React.js72 (yes73, React.js74), Angular.js Material75, Bootstrap Material76, Ionic Material77, and LumX78. Just keep in mind that in many cases you might not need a framework altogether79.
Material Design User Interface Kits For Free Download
The Designtory UI Kit (PSD)
The Ultralinx Material Design Kit (PSD)
Okilla Material Design Kits (PSD)
InVision’s Sketch UI Kit (.sketch)
Google’s Sticker Sheet Material Design UI Kit (.sketch, .ai, .psd)
Where To Go From Here
Trends aren’t important, but techniques are. Whatever flavor of material design you select for your project, keep in mind that it’s all about conforming to the culture of the device your users are using, yet also creating a distinctive, memorable, delightful experience for your users. We can, of course, achieve it without material design, but we can also benefit from some of the qualities and patterns of its rich visual language.
One way or another, at this point you should have a few tools in your toolbox to approach that project head-on, without losing time, and focusing on crafting those websites that your users will love and keep returning to.
Did you like this “Sideblog” piece? Would you love to see more posts like this one on the future? We’d love to hear your feedback in the comments to this post.
Related Resources
“Google’s material design explained: Continuity of experience90“
Material Design as Fast As Possible (video)91
Growing repository of material UI components92
“Introducing Material Design Lite93” by Addy Osmani
“Sketch With Material Design94” by Patrick Keenan
Making Material Design (video)95
Daily material design updates on MaterialUp.com96
This article was written by Sven Lennartz97, co-founder of Smashing Magazine. It was first published in German98, and then extended and edited by Markus Seyfferth and Vitaly Friedman.
Footnotes
1 http://www.smashingmagazine.com/what-if-we-started-a-smashing-magazines-sideblog/
2 http://www.smashingmagazine.com/wp-content/uploads/2015/07/Ultimate-Material-Lollipop-Collection1.png
3 https://plus.google.com/u/0/102898026333733818285
4 http://www.google.com/design/spec/material-design/introduction.html
5 http://www.smashingmagazine.com/wp-content/uploads/2015/07/material-design-rainbow1.png
6 https://plus.google.com/u/0/102898026333733818285
7 http://www.smashingmagazine.com/wp-content/uploads/2015/07/material-design-principles1.png
8 https://www.google.com/design/spec/material-design/introduction.html#Principles
9 https://www.filamentgroup.com/lab/weight-wait.html
10 http://valhead.com/2015/06/19/screencast-animation-in-responsive-design/
11 https://www.google.com/design/spec/style/typography.html#typography-typeface
12 https://www.google.com/fonts/specimen/Roboto
13 https://www.google.com/fonts
14 https://github.com/google/roboto
15 https://www.google.com/fonts/specimen/Roboto
16 http://www.smashingmagazine.com/wp-content/uploads/2015/07/roboto-typo1.png
17 http://www.google.com/design/spec/style/color.html
18 http://www.smashingmagazine.com/wp-content/uploads/2015/07/color_swatches.zip
19 http://www.materialpalette.com/
20 http://www.smashingmagazine.com/wp-content/uploads/2015/07/palette-preview1.png
21 http://www.materialpalette.com/
22 http://www.smashingmagazine.com/wp-content/uploads/2015/07/color-palette1.png
23 http://www.materialpalette.com/
24 http://www.materialpalette.com/
25 https://www.google.com/design/icons/
26 http://www.materialup.com/tools/icons
27 https://wordpress.org/plugins/material-design-icons/
28 http://www.smashingmagazine.com/wp-content/uploads/2015/07/material-icons1.png
29 http://www.materialup.com/tools/icons
30 http://www.google.com/design/spec/style/imagery.html#imagery-principles
31 http://www.smashingmagazine.com/wp-content/uploads/2015/07/style_imagery_principles2.png
32 http://www.google.com/design/spec/style/imagery.html#imagery-principles
33 http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/
34 http://www.smashingmagazine.com/wp-content/uploads/2015/07/material-design-prototype1.png
35 https://www.google.com/design/spec/style/icons.html#icons-product-icons
36 https://www.behance.net/gallery/24629579/Free-Material-Icon-Set
37 https://materialdesignicons.com
38 https://www.behance.net/gallery/22868911/Material-Design-Icon-Set
39 https://icons8.com/android-L
40 https://dribbble.com/shots/1686164-Material-Design-Free-Sketch-Template-Icons
41 http://www.smashingmagazine.com/wp-content/uploads/2015/07/material-icon-set1.png
42 https://www.behance.net/gallery/24629579/Free-Material-Icon-Set
43 https://www.google.com/design/spec/components/cards.html#cards-content
44 http://www.smashingmagazine.com/wp-content/uploads/2015/07/cards.png
45 https://www.google.com/design/spec/patterns/launch-screens.html
46 http://www.materialup.com/posts/onboarding-process-for-google-app-on-ios
47 https://www.google.com/design/spec/animation/
48 https://dribbble.com/gn0me/buckets/223081-Material-Design
49 http://blog.webbb.be/material-design-animation-examples/
50 https://dribbble.com/brettbrdls
51 http://blog.webbb.be/material-design-animation-examples/
52 https://vimeo.com/100377108
53 http://codepen.io/collection/amheq/
54 https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File
55 https://github.com/PolymerElements/polymer-starter-kit/releases
56 https://elements.polymer-project.org/
57 http://ebidel.github.io/material-playground
58 http://material.cmiscm.com
59 https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html
60 https://elements.polymer-project.org/elements/paper-ripple?view=demo:demo/index.html
61 http://www.getmdl.io/index.html
62 http://www.getmdl.io/templates/blog/index.html
63 https://github.com/google/material-design-lite/tree/master/templates/blog
64 https://github.com/google/material-design-lite/tree/master/templates/android-dot-com
65 https://github.com/google/material-design-lite/tree/master/templates/android-dot-com
66 https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031
67 http://www.getmdl.io/
68 http://www.getmdl.io/templates/index.html
69 http://www.getmdl.io/components/index.html
70 http://material-ui.com/
71 http://material-ui.com/
72 http://material-ui.com
73 https://aerotwist.com/blog/react-plus-performance-equals-what/
74 https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/
75 https://material.angularjs.org/latest/#/
76 http://fezvrasta.github.io/bootstrap-material-design/
77 http://ionicmaterial.com/
78 http://ui.lumapps.com/
79 http://www.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/
80 http://www.designtory.net/free-psd/free-material-design-ui-kit
81 http://www.designtory.net/free-psd/free-material-design-ui-kit
82 http://theultralinx.com/2014/11/material-design-ui-kit-free-download/
83 http://theultralinx.com/2014/11/material-design-ui-kit-free-download/
84 http://www.okilla.com/1371/mobile-ui-android-l-5-0-ui-kit-psd/
85 http://www.okilla.com/1371/mobile-ui-android-l-5-0-ui-kit-psd/
86 http://www.okilla.com/
87 http://www.webdesignerdepot.com/2015/04/free-download-sketch-ui-kit/
88 http://www.webdesignerdepot.com/2015/04/free-download-sketch-ui-kit/
89 http://www.google.com/design/spec/resources/sticker-sheets-icons.html
90 https://gigaom.com/2014/11/18/googles-material-design-explained-continuity-of-experience/
91 https://www.youtube.com/watch?v=8AkLfYOgIrE
92 http://material-ui.com/#/
93 https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031
94 http://www.smashingmagazine.com/2015/05/15/sketch-with-material-design/
95 https://www.youtube.com/watch?v=rrT6v5sOwJg
96 http://www.materialup.com/posts/
97 http://www.smashingmagazine.com/author/sven-lennartz/
98 http://conterest.de/material-design-google/
The post Material Design Icons, Goodies and Starter Kits appeared first on Smashing Magazine.
Go to Source