{"id":19706,"date":"2016-12-22T19:00:57","date_gmt":"2016-12-22T16:00:57","guid":{"rendered":"https:\/\/www.koloro.ua\/blog\/bez-kategori%d1%97\/material-design-5-sites-for-inspiration\/"},"modified":"2024-10-10T21:55:18","modified_gmt":"2024-10-10T18:55:18","slug":"material-design-5-sites-for-inspiration","status":"publish","type":"post","link":"https:\/\/koloro.ua\/en\/design\/material-design-5-sites-for-inspiration\/","title":{"rendered":"MATERIAL DESIGN: 5 SITES FOR INSPIRATION"},"content":{"rendered":"\n

Material design<\/strong> was created by Google to unify the interfaces of the company’s services and applications. The embodiment of such a concept helped the corporation to present itself as a data provider and a unified digital environment, rather than just a search engine with disparate services. <\/p>\n\n

Google developers emphasize the innovativeness of material design:<\/p>\n\n

\n

“We set out to create a visual language for users that combines the classic principles of good design with the possibilities of science and technology<\/em>.”<\/p>\n<\/blockquote>\n\n

The metaphor of material design is a projection of paper<\/strong> in three-dimensional space. Its movement is used to demonstrate the functionality and navigation of<\/strong> a website or application.Google’s new design is adapted for different types of devices and operating systems. <\/p>\n\n

\"material<\/figure>\n\n

Skevomorphism vs. plane<\/strong><\/h2>\n\n

For many years, designers have focused on real-world objects<\/strong> to develop the interface of websites or mobile applications. This phenomenon was called skevomorphism<\/strong>. It fully met the requirements of ergonomics<\/strong>. It was easier for the user to see clear objects<\/strong> on the screens of technology. Even the terminology<\/strong> was based on the principles of realism: desktop, documents, folders, files, notepad, scissors and control panel. Icon design gradually began to strive for three-dimensionality<\/strong> with deep perspective and well-defined light shading. <\/p>\n\n

\"icons-for-applications\"\/<\/figure>\n\n

Since 2010,<\/strong> flat design<\/strong> has been gaining popularity. It was developed as an alternative to <\/strong>skevomorphism. The prototype of the new design was minimalism<\/strong>, Swiss typographic style and Bauhaus<\/strong> in architecture. Designers began to remove volume, shadows and perspective from the interface of websites and applications. Elements became flat and monochromatic. <\/p>\n\n

\"flat<\/figure>\n\n

This has significantly increased the performance of<\/strong> machinery and hardware, and energy consumption has decreased. Since 2014,<\/strong> flat design has become the new standard<\/strong> for website and mobile app design.<\/p>\n\n

\"skeuomorphism-vs-flatdesign\"\/<\/figure>\n\n

Flat design, despite being concise and adaptive, creates difficulties<\/strong> for many users who are not used to<\/strong> such an interface. They waste time<\/strong> searching for the necessary function or application due to the disappearance of buttons in the background. <\/p>\n\n

Many developers and users argue which<\/strong> interface design is<\/strong> better<\/strong>? You can choose your side in this fight: <\/p>\n\n

\"skeoformism-flat<\/a><\/figure>\n\n

The compromise found is <\/strong>material design<\/strong><\/h2>\n\n

Google’s <\/strong>Material Design embodies many elements of flat design<\/strong> – minimalism, geometry, modules and bright colors. At the same time, it is close to skevomorphism through the use of three-dimensional space and shadows. <\/p>\n\n

This kind of design is user-friendly, because it stands at the intersection of<\/strong> two concepts. Material design uses brevity<\/strong> (keeps the performance of the technique high) and animation<\/strong> (brings the interface of a website or application to life and helps the user understand navigation). <\/p>\n\n

3 whales of material design<\/strong><\/h2>\n\n

Tactile surfaces<\/strong><\/h3>\n\n

The material design interface consists of several layers of “paper”. The layers are at different heights and cast shadows on each other, creating a three-dimensional space.<\/strong> This helps the user to better interact with the interface. <\/p>\n\n

Print design<\/strong><\/h3>\n\n

Continuing the concept of “digital paper”, the material design utilizes traditional typography.<\/strong> A contrast <\/strong>is created between the kegels of the header font and the text. Content structure <\/strong>is set using primary and accent colors. Brighter colors are used in controls<\/strong>: floating button, indicators and bars. You can create your own color scheme here<\/a>. <\/p>\n\n

Meaningful animation<\/strong><\/h3>\n\n

Animation<\/strong> is needed to demonstrate<\/strong> how the interface works, the user must know that the system has accepted and is processing his action. This is an important rule of ergonomics<\/strong>. For example, with the help of animation, lists and events are expanded into separate sheets with detailed information. <\/p>\n\n

\"material-design<\/figure>\n\n

Websites for inspiration<\/strong><\/h2>\n\n

\u2116 1. Google Design <\/strong><\/a><\/h3>\n\n

This is the best demonstration of material design in action. On the site you can read articles<\/strong> and reviews of novelties<\/strong> in the world of design, evaluate the winners of Material Design Awards<\/strong>. The developers of the site have kindly provided a bunch of useful links to instructions<\/strong>, tutorials and guides on creating material design. The site gives the opportunity to download<\/strong> color palettes, stickers, fonts, icons. <\/p>\n\n

\"google-design\"\/<\/a><\/figure>\n\n

\u2116 2. Material Design Blog <\/strong><\/a><\/h2>\n\n

Covers the basics of the theory of <\/strong>interface construction in material design. Convenient navigation <\/strong>allows you to quickly find the necessary information. Links to download elements<\/strong>: icons, thematic backgrounds, color palettes are provided. <\/p>\n\n

\"material-design\"\/<\/a><\/figure>\n\n

\u2116 3. <\/strong>Uplabs<\/strong><\/a><\/h2>\n\n

This site has the most user-friendly navigation and category building<\/strong>. Projects are sorted not only by operating system and application, but also by font style<\/strong>. Users actively publish their works here. The chat system<\/strong> allows the author to quickly answer questions and criticism. <\/p>\n\n

\"up-material-design\"\/<\/a><\/figure>\n\n

\u2116 4. <\/strong>Behance<\/strong><\/a><\/h2>\n\n

One of the most popular design sites. Provides a convenientsorting of material<\/strong>. At the request of material design throws out a huge selection of material, but it is enoughprojects not on the topic<\/strong>. There is an opportunity to evaluate the work, subscribe to updates from the author and interact with other users. Similar services are also offered by Dribbble<\/a>. <\/p>\n\n

\"\"\/<\/a><\/figure>\n\n

\u2116 5<\/strong>.<\/strong> Pinterest<\/strong><\/a><\/h2>\n\n

Photo hosting offers a selection of<\/strong> material design materials. Illustrations in good quality are quite difficult to find here. The links under the images offer links to the web pages mentioned above. Pinterest is suitable for quickly browsing the <\/strong>maximum number of images about material design. <\/p>\n\n

\"pinterest-material-design\"\/<\/a><\/figure>\n\n

KOLORO<\/strong> studio is innovative solutions<\/strong> for the realization of projects.Keep up with the times with us.Start communication with managers right now. Contacts:<\/p>\n","protected":false},"excerpt":{"rendered":"

Material design was created by Google to unify the interfaces of the company’s services and applications. The embodiment of such a concept helped the corporation to present itself as a data provider and a unified digital environment, rather than just a search engine with disparate services. Google developers emphasize the innovativeness of material design: “We […]<\/p>\n","protected":false},"author":21,"featured_media":9495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[100],"tags":[],"skvoznaya_taxonomy":[],"class_list":["post-19706","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/posts\/19706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/comments?post=19706"}],"version-history":[{"count":1,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/posts\/19706\/revisions"}],"predecessor-version":[{"id":19708,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/posts\/19706\/revisions\/19708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/media\/9495"}],"wp:attachment":[{"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/media?parent=19706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/categories?post=19706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/tags?post=19706"},{"taxonomy":"skvoznaya_taxonomy","embeddable":true,"href":"https:\/\/koloro.ua\/en\/wp-json\/wp\/v2\/skvoznaya_taxonomy?post=19706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}