Как устроена дизайн-система Material Design от Google

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

Если вы думаете над созданием дизайн-системы для бренда, из нашей статьи можно почерпнуть много принципов и идей для вдохновения. Приходится всем, кто работает с продуктовым и UX/UI-дизайном — маркетологам, дизайнерам и разработчикам и менеджерам.

Как появилась Material Design

До 2014 года в Google не было единых правил оформления — поиск в сети, карты, почта и другие сервисы выглядели по-разному. Например, логотип YouTube уже тогда был «плоской» кнопкой, а Google Диск наоборот, отличался объемом и жесткими тенями внутри и вокруг элемента. Помимо дизайна, логика интерфейсов каждого сервиса тоже была своя. 

Единственное, что их объединяло — расположение на главной Google. Такая хаотичность в дизайне мешала и узнаваемости компании, и удобству пользователей.

В 2014 году в Google решили переосмыслить подход к интерфейсам. Компания опубликовала первую версию своей дизайн-системы. Название Material Design появилось не случайно — внутри документа собрали принципы, по которым цифровые элементы выглядят реальными, осязаемыми, «материальными». Плашки должны были напоминать листы бумаги, которые наслаиваются друг на друга и отбрасывают легкие тени. Эта идея (да и в целом единый стандарт оформления интерфейсов) выглядели как революционное решение. 

В 2018 году в Material Design появились более проработанные компоненты и фирменный шрифт Google Sans, в 2021 — рекомендации по пользовательским настройкам. Последний раз систему обновили в 2025 году — об этом чуть позже.

Как устроена дизайн-система

Material Design — пример грамотной современной дизайн-системы, она отражает то, что сейчас считается стандартом индустрии и реально нужно пользователям любого интерфейса. Посмотреть актуальную версию от 2025 года можно на главной.

Дизайн-система включает в себя общие принципы интерфейса:

• Понятность для любого пользователя.
• Доступность даже с ограниченными возможностями.
• Согласованность дизайна и продуманные микровзаимодествия (анимация, которая возникает в ответ на клики или движения курсора).

Особое внимание в дизайн-системе уделяют мобильным приложениям: они должны органично встраиваться в интерфейс самого смартфона. В Google предлагают добавить основные функции в панель навигации внизу экрана. При загрузке пользователь должен видеть индикатор прогресса. Чтобы пользоваться сервисом было удобно, нужно согласовать его работу с режимом фокусировки, полета, экономии заряда батареи. 

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

Что изменилось в 2025 году

В последнем обновлении от 2025 года Material Design 3 Expressive сосредоточился на эмоциях пользователей — интерфейс должен вызывать радость, интерес, удивление, а не быть просто функцией. 

Компания достигает этого за счет четырех адаптивных решений — «подстраивающихся» под действия и предпочтения пользователя.

Физика движения. Новая система предлагает естественный моушн-дизайн — каждый элемент подчиняется физике реального мира. Например, переключатель быстро набирает скорость, но замедляется перед остановкой в положении «вкл» или «выкл». Эта логика передает ту самую «осязаемость» или «материальность».

Источник

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

Больше типографики. Теперь не только на главной Google, но и в приложениях можно увидеть больше названий с подходящими шрифтами — в дизайн-системе 15 базовых и 15 акцентных. Например, для заметок подошли бы — Roboto Flex или Roboto Serif. Все варианты легко прочитать.

Если хотите разобраться в нюансах подбора шрифтов и выстраивания интервалов, читайте наш гайд по типографике.

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

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

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

Как использовать дизайн-систему

Каждый бренд создает собственную дизайн-систему. Но принципы и фишки Material Design будут полезны всем, кто только изучает пользовательский интерфейс или уже работает с UX/UI. Material Design выходит с открытым исходным кодом, то есть на сайте не только картинки, видео и описания, но и готовые фреймворки и элементы в Figma.

Если вы только учитесь. Рекомендуем перейти на страницу «Начало работы», затем изучить «канонический» дизайн — это поможет глубже понять, как строится система в целом и отдельные макеты внутри нее.

Если вы UX/UI-дизайнер. От Material Design можно оттолкнуться, чтобы избежать страха чистого листа. Можно сразу перейти к макетам от Google, скопировать их себе в Figma, а потом вносить правки в элементы, чтобы придать им уникальность и согласовать с брендбуком.

• Material 3 Design Kit — готовые компоненты системы и общий гайд по принципам.
• Material Theme Builder — плагин для работы со стилем, с которым можно настроить динамические цвета и выбрать шрифт.

Если вы разработчик. Откройте раздел Develop и выберите свое направление. Например, веб-сайт или приложение на Android. Внутри будут инструкции, обучающие видео и код на Github.

Если вы UX-копирайтер. Можно применить свои знания и достаточно быстро создать прототип экрана для любого приложения. Например, открыв те же материалы в Figma или предложив нейросети создать продуманный макет.

Material Design помогает строить понятные, воспроизводимые, масштабируемые системы. Если учесть ее принципы, в интерфейсе не будет хаотичности или случайных решений. Но важно представить пользователям уникальный опыт, создавать собственный дизайн, а не слепо копировать решения.

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