В 2014 году корпорация Google представила на суд общественности новый дизайн. Первоначально он использовался, чтобы персонализировать продукты компании, однако другие разработчики стали использовать его принципы при разработке своих сайтов, и он быстро набрал популярность.
Принципы материального дизайна
Яркие краски, выразительные тени, плавные анимации и четкая иерархическая структура являются отличительными особенностями материального дизайна. Удобство для пользователя сочетается с красотой оформления, при этом такое решение не перегружено второстепенными элементами. Активно используется при разработке лендингов.
Остановимся на этих моментах подробнее.
Цифровая бумага
Материальный дизайн основывается на идее о том, что цифровая реальность состоит из бумаги, размещенной в трехмерном пространстве. Эта бумага должна быть максимально простой, ей не нужны градиенты, реалистичные текстуры или замысловатые углы.
Тени
В отличие от плоского дизайна, материальные объекты имеют четко выраженную тень. Этого достаточно для представления необходимой глубины и объема.
Объекты могут накладываться друг на друга, но так, как каждый имеет свою тень, итоговая композиция обладает четко выраженной иерархией. Чем выше расположен объект, тем большая у него тень.
Анимация
Удобство использования выходит на первый план. Все элементы и эффекты должны подсказывать пользователю, как управлять приложением или ориентироваться на сайте.
Немаловажную роль в этом играют анимации. Цифровые объекты плавно перемещаются, переходят из одного состояния в другое. Но в отличие от других видов дизайна, например, плоского, анимации происходят намного быстрее, без классического замедления в начале и конце. В результате пользователю нужно меньше ждать отклика приложения.
Цвет
Цветовая гамма очень отличается от представленной в плоском дизайне. Если там мы привыкли к спокойным, приглушенным тонам, то материальный дизайн порадует нас яркими, насыщенными красками.
Для привлечения внимания используются основной и акцентный цвет. В основной окрашиваются большие площади, а для выделения какого-либо элемента (к примеру, привлечения внимания к кнопке) берут акцентный цвет.
Поощряется использование красочных иллюстраций и фотографий.
Типография
Большое внимание уделяется типографии. Информация должна быть четко структурированной. Заголовки намного крупнее основного контента, важная информация выделяется более насыщенным цветом по отношению к второстепенной. Шрифты применяются простые, например Roboto.
Отступы
Обилие свободного пространства помогает пользователю ориентироваться на сайте или в приложении, не отвлекая его внимания на второстепенные детали.
Адаптивность
И, разумеется, материальный дизайн всегда адаптивен. Все принципы такого дизайна должны быть одинаково представлены не только на компьютерном мониторе, но и на экране планшета и мобильного телефона.
Материальный дизайн – яркий, сочный, с обилием теней и плавных анимаций обладает дружественным интерфейсом, является современным трендом и сразу привлекает внимание.
