Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³ Π² 2020 Π³ΠΎΠ΄Ρƒ - бСсплатноС ΠΈ простоС руководство ΠΏΠΎ созданию сайта

Google Material Design: ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΈ для 2018 Π³ΠΎΠ΄Π°

Π‘ запуском Π½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Gmail ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ Π½ΠΎΠ²Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Snooze ΠΈ Smart Reply. Но наряду с этими измСнСниями особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ ΡƒΠ΄Π΅Π»Π΅Π½ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ².

Google Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π» Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Π² 2014 Π³ΠΎΠ΄Ρƒ, создав Google Now. Π₯отя сСрвис Now ΠΎΡ‚ΠΎΡˆΠ΅Π» Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠ»Π°Π½, систСма проСктирования Π±Ρ‹Π»Π° усилСна.

ЀактичСски, с ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° своСго запуска Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Google сильно повлиял Π½Π° Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΠΊΠΈΠ΅ сайты, ΠΊΠ°ΠΊ Dropbox, Tumblr ΠΈ Reddit, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ элСмСнты Material Design Π½Π° сайтах.

Π­Π»Π΅Π³Π°Π½Ρ‚Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ Material Design Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ экрану ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠΈΡ€Π°. БочСтая Π»ΡƒΡ‡ΡˆΠ΅Π΅ ΠΈΠ· интСрактивности ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ чувствуСт сСбя Π±ΠΎΠ»Π΅Π΅ заинтСрСсованным Π² использовании Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°.

Как объяснил ΠœΠ°Ρ‚ΠΈΠ°Ρ Π”ΡƒΠ°Ρ€Ρ‚Π΅, Π²ΠΈΡ†Π΅-ΠΏΡ€Π΅Π·ΠΈΠ΄Π΅Π½Ρ‚ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π² Google

Mix ΠΈ Maxing

ИспользованиС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π° основС сСтки, эффСктов Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Π±Π»ΠΈΠΊΠΈ ΠΈ Ρ‚Π΅Π½ΠΈ, анимация ΠΈ пустоС пространство, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ ΠΈ красивыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

Material Design Ρ‚Π°ΠΊΠΆΠ΅ поощряСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ стили слоСв. Π―Ρ€ΠΊΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ элСмСнтам Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ.

ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт Material Design – это ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄ ΠΈ принятиС сообщСством стандартов проСктирования, созданиС шаблонов, Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ мноТСства срСд проСктирования, доступных Ρ‡Π΅Ρ€Π΅Π· GitHub.

Π˜Π½Π½ΠΎΠ²Π°Ρ†ΠΈΠΈ Π² Google Material Design Π² 2018 Π³ΠΎΠ΄Ρƒ

На Π½Π΅Π΄Π°Π²Π½Π΅ΠΌ фСстивалС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² устройств Π²Π²ΠΎΠ΄Π° / Π²Ρ‹Π²ΠΎΠ΄Π° Google (ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΠΌΠΎΠΌ Π½Π° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΌ Π²ΠΎΠ·Π΄ΡƒΡ…Π΅ Π² Mountain View CA) Google объявил ΠΎ Π½ΠΎΠ²Ρ‹Ρ… возмоТностях для своСго рСсурса Material.io. НовыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Π½Ρ‹Π΅ Π² Google I / O:

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Theming ΠΎΠΆΠΈΠ²Π°Π΅Ρ‚ с Π½ΠΎΠ²Ρ‹ΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ Ρ‚Π΅ΠΌ, Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Sketch Design Toolkit. Π­Ρ‚ΠΎ позволяСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ свои Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹, ΠΏΡ€ΠΈ этом слСдуя рСкомСндациям ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ².

Google Ρ‚Π°ΠΊΠΆΠ΅ анонсировал Π½ΠΎΠ²ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Они сгруппированы Π² ΠΏΡΡ‚ΡŒ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ (Ρ€Π΅Π·ΡŽΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅, ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅, Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΈ Ρ€Π΅Π·ΠΊΠΈΠ΅), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ рСкомСндациям ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ².

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ всСгда ΠΈΡ‰ΡƒΡ‚ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΈ, ΠΌΡ‹ рассматриваСм эти дополнСния ΠΊΠ°ΠΊ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ шаг Π²ΠΏΠ΅Ρ€Π΅Π΄. Π”ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² становится Ρ‡Π°ΡΡ‚ΡŒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρ‹ сСти сСгодня. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² блиТайшиС мСсяцы Google продвигаСтся Π²ΠΏΠ΅Ρ€Π΅Π΄ с измСнСниями Π² новостях Chrome ΠΈ Google, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ большС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΏΡ€ΠΈΠΌΡƒΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ².

Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ выглядитС ΠΈ чувствуСтС сСбя Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с посСтитСлями Π±ΠΎΠ»Π΅Π΅ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ, ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятной ΠΈ приятной.

Brandastic – компания ΠΏΠΎ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΌΡƒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Ρƒ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π²Π΅Π±-сайтов, располоТСнная Π² ΠΎΠΊΡ€ΡƒΠ³Π΅ ΠžΡ€ΠΈΠ½Π΄ΠΆ, ΡˆΡ‚Π°Ρ‚ ΠšΠ°Π»ΠΈΡ„ΠΎΡ€Π½ΠΈΡ. ΠœΡ‹ ΠΏΠΎΠΌΠΎΠ³Π°Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±Ρ€Π΅Π½Π΄Ρ‹ ΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ эффСктивными. ΠŸΡƒΡ‚Π΅ΠΌ Ρ€Π΅Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π°, измСнСния Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π΅Π±-сайта вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ свой ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π».

Table of Contents