Материальный дизайн: яркий тренд от компании Google

Материальный дизайн

В 2014 году корпорация Google представила на суд общественности новый дизайн. Первоначально он использовался, чтобы персонализировать продукты компании, однако другие разработчики стали использовать его принципы при разработке своих сайтов, и он быстро набрал популярность.

Принципы материального дизайна

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

Остановимся на этих моментах подробнее.

Цифровая бумага

Материальный дизайн основывается на идее о том, что цифровая реальность состоит из бумаги, размещенной в трехмерном пространстве. Эта бумага должна быть максимально простой, ей не нужны градиенты, реалистичные текстуры или замысловатые углы.

Тени

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

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

Тени в материальном дизайне

Анимация

Удобство использования выходит на первый план. Все элементы и эффекты должны подсказывать пользователю, как управлять приложением или ориентироваться на сайте.

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

Цвет

Цветовая гамма очень отличается от представленной в плоском дизайне. Если там мы привыкли к спокойным, приглушенным тонам, то материальный дизайн порадует нас яркими, насыщенными красками.

Для привлечения внимания используются основной и акцентный цвет. В основной окрашиваются большие площади, а для выделения какого-либо элемента (к примеру, привлечения внимания к кнопке) берут акцентный цвет.

Поощряется использование красочных иллюстраций и фотографий.

Типография

Большое внимание уделяется типографии. Информация должна быть четко структурированной. Заголовки намного крупнее основного контента, важная информация выделяется более насыщенным цветом по отношению к второстепенной. Шрифты применяются простые, например Roboto.

Типография в материальном дизайне

Отступы

Обилие свободного пространства помогает пользователю ориентироваться на сайте или в приложении, не отвлекая его внимания на второстепенные детали.

Адаптивность

И, разумеется, материальный дизайн всегда адаптивен. Все принципы такого дизайна должны быть одинаково представлены не только на компьютерном мониторе, но и на экране планшета и мобильного телефона.

Материальный дизайн на мобильном телефоне

Материальный дизайн – яркий, сочный, с обилием теней и плавных анимаций обладает дружественным интерфейсом, является современным трендом и сразу привлекает внимание.


Назад