Всё о материальном дизайне: объяснение, руководства, иконки и исходники (PSD, AI, HTML и Sketch)

Я собрал в одном месте всю информацию о материальном дизайне: объяснение, ссылки на официальные руководства для дизайнеров и разработчиков, исходники и неофициальные вспомогательные материалы.
Кирилл Олейниченко
Кирилл Олейниченко
Дизайн-куратор. Главный редактор в «Оди» и в «Журналусе»


Что такое материальный дизайн

Материальный дизайн (material design) — это дизайн-язык и стиль компании Гугл, выпущенный 25 июня 2014 года. Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна — плоская бумага, находящаяся в трехмерном пространстве.

Зачем нужен материальный дизайн

Он служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для Андроида. После засилья скеоморфизма веб и интерфейсы шатнулись в сторону радикального уплощения, но это оказалось просто ещё одной крайностью. В гугле решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тени, скорость движения, ускорение. Но бумага «квантовая», не настоящая. Она подчиняется физическим законам, но имеет и волшебные свойства. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит.

icons

Чем материальный дизайн отличается от плоского дизайна (flat design)

Плоский дизайн стал противофазой скеоморфизму. Реакцией на засилье имитации реальных объектов в интерфейсах. Когда пользователи более менее привыкли к экранным интерфейсам, дизайнеры стали уплощать свои интерфейсы, убирать из них весь объем и реалистичность, сводить к плоскости экрана. Материальный дизайн, это следующий шаг этого маятника — небольшой шаг назад к реалистичности, при помощи метафоры плоской бумаги. Она вроде и реалистичная, но обладает магическими свойствами.

Исходники из официального гида материального дизайна

Ниже представлены прямые ссылки на скачивание исходников из официального гида:

components_buttons_usage_dialogs1

Официальные руководства материального дизайна

Официальное руководство — главный и лучший источник информации о материальном дизайне. Оно прекрасно структурировано и проиллюстрировано. Для каждого пункта подобраны очень наглядные примеры, как положительные так и негативные (dos and donts). Сайт, кстати, сделан с привлечением агентства Хьюдж. Вот некоторые примеры:

Для разработчиков Андроид-приложений есть отдельный сайт с официальными руководствами и уроками.

Для разработчиков на Angular.js есть официальный порт стилей.

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

Бесплатные HTML-исходники

PSD-исходники

Sketch.app исходники

Дополнительно

Ещё 615 иконок для материального дизайна (неофициальные)

Комплект исходников для Акшур

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

Бесплатные обои

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

Что ещё почитать по теме

Видео напоследок (концепт Инстаграма в материальном дизайне):

Добавлено позже:

  1. Генератор палитр в стиле материального дизайна
  2. Блог с ежедневными обновлениями про приложения и сайты в стиле материального дизайна
Поделиться
Отправить
Запинить

Обсуждение