Всем доброго времени суток. Сегодня хотим поговорить о нашумевшем в последнее время на просторах интернета Material Design (Материал Дизайн).

material

В своей статье мы не будем залазить в дебри профессиональных терминов и разбирать все тонкости и сложности. Просто хотим простыми словами объяснить, что такое Material Design и для чего он нужен, и нужен ли вообще.

Что нам говорит всезнающая Википедия про Материал Дизайна от Google.Material_Design_music

Material Design (рус. Материальный дизайн) — дизайн программного обеспечения и приложений операционной системы Android от компании Google. Впервые представлен на конференции Google I/O 25 июня 2014 года. Идея дизайна заключается в приложениях, которые открываются и сворачиваются как карточки, используя эффекты теней. По идее дизайнеров Google, у приложений не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно.

Все понятно? ))) Обычному человеку не очень. Начнем по порядку. Давным-давно, году в 2012, одинаковые приложения и программы выглядели по-разному на разных типах устройств. Тот же Gmail. Вот так это было.

gmail-staryj-dizajnandroid-staryj-dizajnmobail-staryj-dizajn

 

 

 

 

 

 

То, что сейчас Gmail или YouTube на всех устройствах выглядят стилистически одинаково знают все. И не только выглядят, у них полностью одинаковый функционал.

Компания Google продемонстрировала всему миру как должен выглядеть интерфейс и дизайн. Это и есть Material Design. Цель Материал Дизайна от Google, объединить и сделать общей для всех сервисов и приложений логику работы и внешний вид для удобства пользователей.

Самое главное в этой концепции это то, что свойства объектов и их поведение на экране должны быть так же понятные и предсказуемы как обычные события в жизни человека. Нажатие кнопки должно вызывать действие которое затрагивает полностью весь интерфейс, независимо от размера устройства и диагонали экрана.

screen-shot-2014-10-15-at-12.27.45-pm

Опираясь на очевидные и понятные всем законы, компания Google решила применить реальный, живой, мир в качестве фундамента для своего Материал Дизайна.

Google решил не просто провести какие-то аналогии для лучшего понимания. Цель компании — разъяснить пользователю, что совершается, когда тот или иной элемент интерфейса появляется или исчезает с экрана.

Если по-простому — Material Design это интуитивно понятный дизайн для всех. Что бы пользователь не думал где какая кнопка и что она делает на разных сайтах и сервисах. Все везде понятно и помогает пользователю.

Material DesignНо так как это все придумали в Google, и применяют в своих сервисах, то есть и такое мнение. Material Design – это корпоративный стиль компании и подражать ему не стоит. Но это решать вам, стоит использовать стиль Материал Дизайн при создании сайта, приложения  или нет.

Подробно изучить Material Design можно на сайте Google.

Там очень много всего и очень интересно. Там полностью разработана концепция Material Design. После изучения становится понятно, что это не только дизайн, это новая философия современного цифрового мира.

Три кита Material Design.

  • Материал есть метафора. Метафора  Материала является объединяющей теорией рационализирующей пространство и систему  движения. Материал основывается на тактильной реальности, вдохновлен изучением бумаги и чернил, и открыт для фантазии и магии. Поверхности и края материала обеспечивают визуальные подсказки, которые основаны на реальности. Использование знакомых тактильных атрибутов помогает пользователям быстро понять идею. Тем не менее, гибкость материала создает новые идеи, которые отменяют идеи в физическом мире, не нарушая правил физики. Основы света, поверхности и движения являются ключевыми для отображения движения, взаимодействуют между собой, и существуют в пространстве и по отношению друг к другу. Реалистичное освещение показывает тени, делит пространство, и указывает на движущиеся части.
  • Полиграфический дизайн. Основополагающие элементы печати на основе дизайна — типографика, сетки, пространство, масштаб, цвет. Эти элементы не только радуют глаз. Они создают иерархию, значение и фокус. Умышленный выбор цвета, изображения от края до края, крупные шрифты, а также намеренное белое пространство создают смелый и графический интерфейс, в который пользователя погружается полностью. Акцент на действиях пользователя делает основные функциональные возможности, которые сразу бросаются в глаза и обеспечивают путевые точки для пользователя.
  • Действие предусматривает смысл. Движение уважает и укрепляет пользователя в качестве первичного двигателя. Первичные пользовательские действия являются точками перегиба, которые инициируют движение, изменяя всю конструкцию. Все действие происходит в единой среде. Объекты представляются пользователю, не нарушая непрерывность опыта, даже по мере преобразования и реорганизации.

В заключение посмотрите несколько примеров сайтов которые сделаны в Material Design.

www.nimbusnine.co

Nimbus 9 Home - Google Chrome

 

jetradar.com

Search and compare flights on JetRadar. Well help you find best airfares - Google Chrome

 

angular.io

One framework. - Angular 2 - Google Chrome

 

varunmalhotra.xyz

Varun Malhotra HOME - Google Chrome

android-kiosk.com

Kiosk Browser Software for Android Kiosk Browser Lockdown for Android - Google Chrome