Are you in love with Google’ material design like myself? Here is the collection of free material design resources for you.
By now, Google’s Material design has captured the eyes and ears of everyone in the design and development industry. It hit the web last year with the introduction of Android Lollipop and many designers have adopted it in some way. Material design fans are on their toes whenever the visual language is mentioned, and it’s safe to say that Google’s latest visual language was a success.
Since the design language is still afresh, you won’t find as many resources as you would for an older design language. Nevertheless, we managed to hand-pick some of the best resources that do justice to this genius design language. Don’t worry they are all free!
Call-Em-All team came up with this amazing framework inspired by Material Design. It uses CSS in combination with a set of React components to achieve the desired look. The UI is composed of buttons, drop down menus, dialog boxes, Icons, Switches, Inputs, toolbars and more — all based on the Material Design.
Material Design UI Kit
This one is offered by ultralinx and is free to download. This Material UI kit is a complete package that includes all the necessary Material design UI elements, from navigation, menu, buttons, cards, icons to color palettes.
Material Design Buttons
A web design is incomplete without a good set of buttons. Material Design has a range of flat, vibrant colored buttons with subtle effects. This resource includes buttons in four different styles: square, rounded, color filled, and color outlined. What makes these buttons more fun is the darker shade ripple effect upon clicking on it.
Android L Icon Grid System
If you’re working on some new app and want to quickly design an icon for it, then this is the one you need. Tobia Crivellari brings you icon templates making it easier for you to create your own icons for Android L OS. The source provides three shapes of icons: rectangle (vertical and horizontal), circle, and square. Play around with these Material Design like icons to develop your fabulous new app icon.
Android L PSD Kit
Eldar Burnashev brings you PSD Kit for browsing albums on Android L. The template is available on his Dribbble profile. You can use this template to create your album browser app for Android L phones or even implement it in your web design.
L Bootstrap Freebie – UI Kit Inspired by Android L
Here’s what you need to grab a hold of to create your very own Material Design or Android L inspired web design. Vitaly Chernega brings you L Bootstrap, a complete UI Kit that contains all the elements of material design. The UI kit features 28 Fully Layered Adobe Photoshop PSD files, well Organized Layers, all Elements and Components of the Bootstrap 3.2.
Android L Keyboard
Sander Värv created and shared this brilliant material design based keyboard inspired by Android L keyboard. You may use these designs for mockups of your design projects. The download contains various sizes such as MDPI, XHDPI, XXHDPI.
Material Design Blog
The Material Design Blog is your one stop source for all your material design needs. The blog is focused on putting forward and highlighting material design apps, templates, mockups, freebies, websites other resources and inspirational designs. This definitely a blog you want to bookmark – especially if you are into material design. According to the Material Design Blog, “Over 80,000+ people come to MDB every month, generating over 170,000+ page views, and the community is just getting bigger”. You can also submit your design to the “showcase”.
Material Design Icon Pack
Here’s a large pack of Material Design icons. No, these were not designed by a novice mimicking the language. These are the official icons created by Google that were simply collected and bundled together by Benjamin. These icons are available as separate SVG files and a Sketch file, all files aligned neatly in separate grids. The icons are free for personal and commercial use. The base size is 18 by 18 px and would have to be converted to PNG format for larger sizes.
Material Design UI Template and Icons
Here’s a bag of goodies for those of who want to build a mobile UI on material design. These .sketch template and icons are created by a Kyle Ledbetter, who is head over heels for Google’s latest Material Design and Polymer Project. This sketch template includes 424 Android L Icons (available in separate zip also), desktop, tablet & mobile layouts (using the Polymer HTML5 syntax for organization), and all the Polymer Project web component elements. The developer also advises users to download Roboto and Roboto condensed fonts as they are the standard material design font.
Learn More: Free Apple Watch Design Resources