We optimize our effort when developing an application in Google Material Design

This material can be useful as a professional interface designers, as well as developers, whose knowledge in graphics packages are below the level of “advanced user”.

So, we have a task: relying on ready-made solutions in open access, to maximally optimize the work expended on developing an application in the style of Google Material Design.

By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers can create beautiful applications on their own, and the Timlids run sprints faster using ready-made design systems for teamwork.
')
And if you have a serious project, our team is ready to deploy a design system within the organization based on our developments and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken

Stage times: prototyping

It is necessary, at least, to represent the volume of the application and the composition of the screens. It helps a lot in thinking about tap / click-paths (transitions between screens). I prefer Axure, because Many hot-keys are made 1 in 1 as in Adobe Photoshop (for other similar products read in other articles (in the “Design” section every third post on this topic).

You need to install three libraries into it:

Android_MaterialDesignV1.1 (Y.disk)

Enough library that will allow you to make a prototype for all GMD guidelines. Feature: many elements are already “brought into action”. For example, pull to refresh works immediately in compiled html. I think it is more suitable for those who want to “click on” in the prototype.


material-design-8 (Y.disk)

Easier and simpler library. There is a minimum of ready-made components, but everything is basic: black and light themes, lists, cards, buttons, tabs, dialogs, sliders, etc ... I prefer it, because the less choice there is, the faster the necessary element is found and overtightened into the prototype.


google-material-design-icons (ya.disk)

~ 750 vector icons from google. Of course, you can use the default for Axure: Font awersome. However, real icons will give reality to the prototype.

upd: comrade ShLShepherd shares its own collection of vector material icons (taken from kamentov)

Stage Two: Design

As I mentioned above, I prefer Adobe graphics packages. So you need to appeal to the design community. It is worth looking for enthusiasts who have already assembled the GMD UI kit, in which the elements are arranged and look in accordance with the Google specification. Indents, fonts, sizes, etc. Of the free ones I liked two:

sepia_ui_kit (ya.disk 142mb)


There is everything you need, but few custom ideas. Nevertheless, all the screens 1 in 1 are drawn, which Google itself used in its official documentation on GMD. The only drawback is that for a long time to search through the subfolders the desired item in its own separate source code.

Cooking (Ya.disk 434mb)


On the contrary, this ui kit is overly rich in custom ideas. But the authors have slightly exceeded the bar. The explicit pedant in this source will notice that at least the font intensity in some places does not coincide with the documentation. There are some graphs, frivolous buttons. It will help “flatten” your own element, but remain in style.
Super navigation: from the first there is a link to a separate source for each screen. Just double click. Just great!

Stage Three: Development

Your irresponsible designer does not want to give all the icons to individual files strictly according to the specifications? I understand you very much. Go to materialdesignicons.com and calmly download either the SVG with the desired icon, or a full-fledged zip archive with png for all smartphone resolutions. You can find not only the sets of Google native icons. The base is a lot of custom icons made by members of the design community. As the saying goes, “It's Free, and it will always be Free.” Directly for developers it was generally possible to find a holiday of ready-made solutions (github) . For example:


Or these:


Should be enough ...

Glad if you found this post useful! Well, if you want to read how I projected GMD onto a desktop product and what conclusions I made, then start with the first part (there are four of them) .