Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Material Design Icons, Goodies And Starter Kits

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.

Material Design, The Visual Language Link

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.

An example of Material Design Artwork1

Google’s material design probably isn’t for friends of black and white art. (Image source)2

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 documented3 and elaborated to the last detail.

A typical color scheme of Google's material design4

A rainbow color palette of material design. (Source5)
An example of material design artwork6

Material design loves and lives the details. Not everybody will like it, but it stands out in its own way and should be respected. (Image source)7

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 wait8, 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 design9, 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 Link

If you look into the material design typography guidelines10, Google actively promotes just one main typeface: Roboto11, 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 Fonts12, Roboto’s source is available on GitHub13, and the typeface has been released under Apache License 2.014.

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.

A few variations of the Roboto font15

6 non-italic variations of the Roboto font.

Material Design Colors Link

When it comes to color, Google also provides extensive guidelines16. Colors are clearly defined, and we’ve prepared a little color palette for Photoshop and Illustrator (ZIP)17 that you can use right away. You can also use a very handy material palette generator18 which will help you create your own custom color schemes.

A range of colors between red and amber19

An app-like preview of the custom color palette. (Image source20)

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.

A range of colors between red and amber21

A range of colors between red and amber. (Image source)2322
A typical of colors in Android

A typical color pattern in Android. (Image source)2322

Material Design Icons Link

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 set24. You can also download all icons individually at MaterialUp2825, and even integrate them into your WordPress theme26.

A set of Material icons27

A set of icons from MaterialUp2825.

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 encourages29 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.

An example showing how to merge photos and information30

An example showing how to merge photos and information. (Image Source31)

The Physical Side Of Material Design Link

Unlike flat design32, 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.

How the Gmail icon was derived from a conventional envelope33

How the Gmail icon was derived from a conventional envelope. (Image source34)

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 set35. There are many36 more37 icons38 available39 free, too.

A handy icon set for material designers40

A handy icon set for material designers. (Image source41)

Cards Link

With material design, content is always presented in cards42 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.

Cards are the new Style Tiles43

Cards are the new style tiles.

In material design, Google also advocates launch screens44, 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 onboarding45.

Animations In Material Design Link

Smooth experiences with material design are achieved with animations46. There are many interesting material design animations47, and often they are quite subtle, but when put together they establish a sense of continuity and delight.

The Polymer starter kit to create app-like animations for the web48

A material design illustration by Jovie Brett on Dribbble. Jovie on Dribbble.49

You can find a few examples and freely available samples below:

If you’re looking for further tutorials and examples, search for “Polycasts”, a series of videos produced by Google.

HTML/CSS/JavaScript Components Link

Google has just launched Material Design Lite60, 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.

A beautiful and clean blog template61

A beautiful and clean blog template. View it on Github.

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.

A lightweight skin of the current android.com website62

A lightweight skin of the current android.com website. Available on Github63.

There’s much more useful stuff64 available at the Material Design Lite site65, such as other page templates66, and a great variety of components67 (buttons, cards, tables, etc.). If you need an HTML/CSS library to get going, that’s the place to start.

The Material UI kit at material-ui.com68

The Material UI kit at material-ui.com69.

There are also other kits provided by other members of the community, including the Material UI kit for React.js70 (yes71, React.js72), Angular.js Material73, Bootstrap Material74, Ionic Material75, and LumX76. Just keep in mind that in many cases you might not need a framework altogether77.

Material Design User Interface Kits For Free Download Link

The Designtory UI Kit (PSD) Link

The Designtory UI kit78

A material design UI kit79 created for quick’n’easy web design projects.

The Ultralinx Material Design Kit (PSD) Link

The theultralinx.com design kit80

A free material design UI kit available at theultralinx.com81.

Okilla Material Design Kits (PSD) Link

Many useful ressources at okilla.com82

Apart from the material UI kit83, there are many other useful resources available at okilla.com84.

InVision’s Sketch UI Kit (.sketch) Link

A sketch for an email app.85

A design for an email app that doesn’t look like a Gmail clone. Sign-up required at webdesignerdepot.com86.

Google’s Sticker Sheet Material Design UI Kit (.sketch, .ai, .psd) Link

Sticker sheet detail.87

The sticker sheet includes the elements that make up layouts, like light and dark symbols, app bars, bottom toolbars, cards, drop-down menus, search fields, dividers, side navs, dialogs, floating action buttons, and other components.

Where To Go From Here Link

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.

This article was written by Sven Lennartz95, co-founder of Smashing Magazine. It was first published in German96, and then extended and edited by Markus Seyfferth and Vitaly Friedman.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2015/07/Ultimate-Material-Lollipop-Collection1.png
  2. 2 https://plus.google.com/u/0/102898026333733818285
  3. 3 http://www.google.com/design/spec/material-design/introduction.html
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2015/07/material-design-rainbow1.png
  5. 5 https://plus.google.com/u/0/102898026333733818285
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/07/material-design-principles1.png
  7. 7 https://www.google.com/design/spec/material-design/introduction.html#Principles
  8. 8 https://www.filamentgroup.com/lab/weight-wait.html
  9. 9 http://valhead.com/2015/06/19/screencast-animation-in-responsive-design/
  10. 10 https://www.google.com/design/spec/style/typography.html#typography-typeface
  11. 11 https://www.google.com/fonts/specimen/Roboto
  12. 12 https://www.google.com/fonts
  13. 13 https://github.com/google/roboto
  14. 14 https://www.google.com/fonts/specimen/Roboto
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/07/roboto-typo1.png
  16. 16 http://www.google.com/design/spec/style/color.html
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/07/color_swatches.zip
  18. 18 http://www.materialpalette.com/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/07/palette-preview1.png
  20. 20 http://www.materialpalette.com/
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/07/color-palette1.png
  22. 22 http://www.materialpalette.com/
  23. 23 http://www.materialpalette.com/
  24. 24 https://www.google.com/design/icons/
  25. 25 http://www.materialup.com/tools/icons
  26. 26 https://wordpress.org/plugins/material-design-icons/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/07/material-icons1.png
  28. 28 http://www.materialup.com/tools/icons
  29. 29 http://www.google.com/design/spec/style/imagery.html#imagery-principles
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/07/style_imagery_principles2.png
  31. 31 http://www.google.com/design/spec/style/imagery.html#imagery-principles
  32. 32 https://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/07/material-design-prototype1.png
  34. 34 https://www.google.com/design/spec/style/icons.html#icons-product-icons
  35. 35 https://www.behance.net/gallery/24629579/Free-Material-Icon-Set
  36. 36 https://materialdesignicons.com
  37. 37 https://www.behance.net/gallery/22868911/Material-Design-Icon-Set
  38. 38 https://icons8.com/android-L
  39. 39 https://dribbble.com/shots/1686164-Material-Design-Free-Sketch-Template-Icons
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/07/material-icon-set1.png
  41. 41 https://www.behance.net/gallery/24629579/Free-Material-Icon-Set
  42. 42 https://www.google.com/design/spec/components/cards.html#cards-content
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2015/07/cards.png
  44. 44 https://www.google.com/design/spec/patterns/launch-screens.html
  45. 45 http://www.materialup.com/posts/onboarding-process-for-google-app-on-ios
  46. 46 https://www.google.com/design/spec/animation/
  47. 47 https://dribbble.com/gn0me/buckets/223081-Material-Design
  48. 48 http://blog.webbb.be/material-design-animation-examples/
  49. 49 https://dribbble.com/brettbrdls
  50. 50 http://blog.webbb.be/material-design-animation-examples/
  51. 51 https://vimeo.com/100377108
  52. 52 http://codepen.io/collection/amheq/
  53. 53 https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File
  54. 54 https://github.com/PolymerElements/polymer-starter-kit/releases
  55. 55 https://elements.polymer-project.org/
  56. 56 http://ebidel.github.io/material-playground
  57. 57 http://material.cmiscm.com
  58. 58 https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html
  59. 59 https://elements.polymer-project.org/elements/paper-ripple?view=demo:demo/index.html
  60. 60 http://www.getmdl.io/index.html
  61. 61 http://www.getmdl.io/templates/blog/index.html
  62. 62 https://github.com/FezVrasta/bootstrap-material-design
  63. 63 https://github.com/FezVrasta/bootstrap-material-design
  64. 64 https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031
  65. 65 http://www.getmdl.io/
  66. 66 http://www.getmdl.io/templates/index.html
  67. 67 http://www.getmdl.io/components/index.html
  68. 68 http://material-ui.com/
  69. 69 http://material-ui.com/
  70. 70 http://material-ui.com
  71. 71 https://aerotwist.com/blog/react-plus-performance-equals-what/
  72. 72 https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/
  73. 73 https://material.angularjs.org/latest/#/
  74. 74 http://fezvrasta.github.io/bootstrap-material-design/
  75. 75 http://ionicmaterial.com/
  76. 76 http://ui.lumapps.com/
  77. 77 https://www.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/
  78. 78 http://www.designtory.net/free-psd/free-material-design-ui-kit
  79. 79 http://www.designtory.net/free-psd/free-material-design-ui-kit
  80. 80 http://theultralinx.com/2014/11/material-design-ui-kit-free-download/
  81. 81 http://theultralinx.com/2014/11/material-design-ui-kit-free-download/
  82. 82 http://www.okilla.com/1371/mobile-ui-android-l-5-0-ui-kit-psd/
  83. 83 http://www.okilla.com/1371/mobile-ui-android-l-5-0-ui-kit-psd/
  84. 84 http://www.okilla.com/
  85. 85 http://www.webdesignerdepot.com/2015/04/free-download-sketch-ui-kit/
  86. 86 http://www.webdesignerdepot.com/2015/04/free-download-sketch-ui-kit/
  87. 87 http://www.google.com/design/spec/resources/sticker-sheets-icons.html
  88. 88 https://gigaom.com/2014/11/18/googles-material-design-explained-continuity-of-experience/
  89. 89 https://www.youtube.com/watch?v=8AkLfYOgIrE
  90. 90 http://material-ui.com/#/
  91. 91 https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031
  92. 92 https://www.smashingmagazine.com/2015/05/15/sketch-with-material-design/
  93. 93 https://www.youtube.com/watch?v=rrT6v5sOwJg
  94. 94 http://www.materialup.com/posts/
  95. 95 https://www.smashingmagazine.com/author/sven-lennartz/
  96. 96 http://conterest.de/material-design-google/

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing Science-Fiction and at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing — all in German.

  1. 1

    Nice article and resources. I created an open source Gem to integrate Google Material Design icons on Ruby on Rails projects. I think it can be helpful :).

    https://rubygems.org/gems/material_icons

    3
  2. 2

    Good post, full of beautiful resources. I’m gonna dive into Material Design.

    0
  3. 3

    Nicolas Camacho

    July 13, 2015 10:42 pm

    Great Article!! Very useful information

    0
  4. 4

    Thanks for the article! For mockup creation, I´d like to suggest a must-have plugin for building nicer animations in After Effects: http://ianhaigh.com/easeandwizz/ .

    0
  5. 5

    Andrea Paiola

    July 19, 2015 12:54 pm

    I did a comparison of Materialize CSS and Material Design Lite: http://andreapaiola.name/2015-07-materialize-css-vs-material-design-lite/

    I hope it helps!

    0
  6. 6

    Thanks for featuring my Dribbble bucket :)

    0
  7. 7

    Awesome!

    1

↑ Back to top