12 outstanding cases of foreign material design website

See 2017 is almost over, you are not fully understand material design it. It is too long to explain the document, or feel that their English is not good. It doesn't matter, small make up today to everybody to tidy up a dry goods full of study notes, and listed some foreign materialdesign excellent case and resources website, I believe you will look at Google's material design of the main specifications have a more profound, comprehensive understanding, don't miss it.

The core idea of Material design

Material Design (also known as "Material Design", hereinafter referred to as MD), is created and published by Google is a language designed to bring the experience of the physical world into the screen, which removes the reality of impurities and randomness, only to retain its most original pure form, change and transition, The final reduction is closest to the real user experience and achieves a simple and intuitive effect.

As one of the main popular design trends in the 2017 and 2018, Material has been used more and more in Web sites, app development and design. Google introduced material design as "The Art of creation, and our goal is to meet different human needs." People's needs will evolve over time, and our design, practice, and philosophy will also rise. We challenge ourselves to create a visual language for our users that incorporates the classic principles of good design and innovation in science and technology. This is material design. ”

Material Design case and resource website

1. Rumchata

Website:http://www.rumchata.com/age-gate

Combined with the physical aesthetic style of MD design, this site provides users with a simple, colorful but seemingly straightforward experience by creating a similar appearance and function in real things.

2. DropBox Business

website:https://www.dropbox.com/business/

Dropbox business early began to use the MD design concept, can be said to use color to maintain the brand image of the typical case. Can see, it chooses the blue as the website main color, simultaneously uses the black, the white as the auxiliary color, such color collocation just with own "simple efficiency" the product idea is the perfect union.

3. waaark.com

website:https://waaark.com/

MD attaches importance to animation effect, it repeatedly emphasizes one point: animation is not only decorative, it has meaning, and can express elements, the relationship between the interface, at the same time have functional role. The homepage of this site animation, you can move with the mouse intelligent switch, like the screen flow of waves, but the movement and changes are by the acceleration and deceleration process, but also follow the real World Movement law. Interested in the small partner, you can open the site to see the specific effect oh.

4. serioverify.com

website:https://serioverify.com/

MD introduces the concept of the z axis perpendicular to the screen, which is used to represent the relationship of elements, all of which have the default altitude, but all of them are 1dp thick. Serioverify This site has the default altitude, the operation will increase its altitude, but we can note that the same element, the same operation, the height of uplift is the same. In this way, developers can also use a value to control the elevation and projection of the element.

5. Pumperl Gsund

website:https://www.pumperlgsund-bio.de/

Contrary to Dropbox business, the site uses two different shades of green to add some less conspicuous colors to the background color, while the rest is predominantly black and white. It looks a bit "anti-bingo", but it does not affect the overall beauty and ease of use of the site.

6. Behance

website:https://www.behance.net/

Behance is one of the most famous design websites abroad, providing a wide range of reference Web pages, app design cases, it also makes use of the MD in a variety of space, buttons, text typesetting and other norms, so that people look pleasing, and have a good interactive experience.

7. Codepen

website:https://codepen.io/

Like its name, Codepen is a biased development class site, which can be said to be the "playground" of the front-end developers, and developers can dig a lot of practical materials about MD. Not only can you see a lot of cool MD design cases, you can also find css,html or JavaScript that developers use to build the bottom of a design or animation.

8. Mockplus

Website:https://www.mockplus.com/resource

As a full platform of prototype design tools, Mockplus also continues to provide a range of good-looking and practical free materials, including materialdesign, Flat design, interactive and card design, and so on, to support the free download and use. At the same time, the use of its packaged components, icon resources and page templates, you can quickly design, create various prototype projects, Web page/app/desktop prototype without pressure switching.

9. dribbble

Website:https://dribbble.com/tags/material_design

This is a popular platform for foreign designers, developers, or artists engaged in visual creativity or related fields. If you search MD on this platform, you will find that MD is quite popular, and you can find all kinds of pages and app's exquisite design cases, from simple icons to fully functional sites.

Materialup

Website:https://www.uplabs.com/search?q=material%20design

Materialup's Web site theme is about materialdesign design, from sample sites, mobile app screenshots, tools, tips, and more. In addition, its interface looks a bit like Google Drive, the overall design style is also using a variety of material design techniques, itself is a good design case.

Reddit.

website:https://www.reddit.com/r/materialdesign/

Reddit may not be the best choice for you to directly look for design resources or inspiration, but if you want to talk to a group of like-minded people and talk about design ideas, you're right on the site.

Tumblr

website:http://matesign.tumblr.com/

Whether it's a Web page, an Android application, or an iOS app, if you're interested in learning more about MD design, be sure to go to Tumblr and get a lot of inspiration for the next project.

It's written in the back.

In summary, Material design has been widely used in most Web pages, including app designs, and it puts forward a more reasonable mix of various UI materials based on ease of use, hoping to read this article to your benefit. But as the saying goes, "Ching", if there is no good tool, then even if there is more theoretical study and accumulation, it is difficult to actually ground the idea. As a designer, product manager from the entry to the master of the necessary tools, Mockplus is your choice.