Как сделать стиль material design
Я собрал в одном месте всю информацию о материальном дизайне: объяснение, ссылки на официальные руководства для дизайнеров и разработчиков, исходники и неофициальные вспомогательные материалы.
Что такое материальный дизайн
Материальный дизайн (material design) — это дизайн-язык и стиль компании Гугл, выпущенный 25 июня 2014 года. Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна — плоская бумага, находящаяся в трехмерном пространстве.
Зачем нужен материальный дизайн
Он служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для Андроида. После засилья скеоморфизма веб и интерфейсы шатнулись в сторону радикального уплощения, но это оказалось просто ещё одной крайностью. В гугле решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тени, скорость движения, ускорение. Но бумага «квантовая», не настоящая. Она подчиняется физическим законам, но имеет и волшебные свойства. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит.
Чем материальный дизайн отличается от плоского дизайна (flat design)
Плоский дизайн стал противофазой скеоморфизму. Реакцией на засилье имитации реальных объектов в интерфейсах. Когда пользователи более менее привыкли к экранным интерфейсам, дизайнеры стали уплощать свои интерфейсы, убирать из них весь объем и реалистичность, сводить к плоскости экрана. Материальный дизайн, это следующий шаг этого маятника — небольшой шаг назад к реалистичности, при помощи метафоры плоской бумаги. Она вроде и реалистичная, но обладает магическими свойствами.
Исходники из официального гида материального дизайна
Ниже представлены прямые ссылки на скачивание исходников из официального гида:
Официальные руководства материального дизайна
Официальное руководство — главный и лучший источник информации о материальном дизайне. Оно прекрасно структурировано и проиллюстрировано. Для каждого пункта подобраны очень наглядные примеры, как положительные так и негативные (dos and donts). Сайт, кстати, сделан с привлечением агентства Хьюдж. Вот некоторые примеры:
30 инструментов и ресурсов в стиле материального дизайна
Вот уже несколько лет Материальный дизайн находится среди лидеров мировых трендов веб дизайна. И совсем не удивительно. Ведь, именно он смог объединить простоту, логику работы и удобный внешний вид, и при этом создать продуманный и интуитивно-понятный интерфейс для пользователей. Простор, никакого нагромождения деталей, чистота и отсутствие избыточного украшения экрана. Основной принцип материального дизайна фокусируется на юзабилити, а не только на хорошем дизайне, что и покоряет сердца благодарной аудитории свои изяществом и удобством.
Популярность тренда объясняется огромным количеством ресурсов и инструментов для дизайнеров, кстати, как платных так и бесплатных. К примеру, сегодня предлагаю полезную подборочку наполненную 30 вдохновляющими бесплатными и платными ресурсами для дизайнеров в стиле материального дизайна. С каждым днем выходят всё новые приложения и проекты в стиле Material Design. Не отставайте. Узнайте полезности, которые помогают дизайнерам каждый день справляться с нелегкими задачами и добиваться успехов. Помогите будущему проекту блеснуть материальным дизайном.
Полезности для дизайнера. Коллекция 30 бесплатных и платных инструментов и ресурсов в стиле материального дизайна.
1. 40+ Бесплатных фонов в стиле материального дизайна
Разве это не прекрасно найти целую коллекцию 40+ бесплатных фонов в стиле материального дизайна в одном месте? Выполнены в высоком расширении, они точно вдохновят на реализацию веб-проекта или другого печатного замысла. Большое количество различных форм и цветов привлечет внимание даже самого требовательного дизайнера.
2. 10 Бесплатных фонов
3. 30 фонов для проекта в стиле material
Еще одна отличная подборочка высококачественных фонов для проекта в стиле материального дизайна. Выбирайте из 30 различных дизайнов, наполненных дополнительными формами, такими как квадраты, треугольники и круги, и придайте своему проекту хендмэйд оттенок. Доступны бесплатно в .png и .ai форматах.
4. 12 Бесплатных промо фонов в стиле материального дизайна
Хочется чего-то новенького? Пожалуйста. Ознакомьтесь с коллекцией 12 новинок в стиле материального дизайна в высоком разрешении. Отличная новость — коллекцию можно использовать как для персональных так и для коммерческих целей, т.к. продукты лицензированы Creative Common Zero, а значит проверены и готовы к применению. Форма бриллианта в центре фона служит для привлечения внимания к продукту. Доступны для скачивания в .png и .jpg форматах.
5. Набор узорчатых фонов
Не упустите подборочку из ярких и качественных фонов выполненных в плиточном дизайне. Файл содержит в себе файлы .png, photoshop и формат illustrator vector, а это значит, что можно самостоятельно настраивать цветовую гамму согласно требованиям. Используйте бесплатно в любом размере и без потери качества.
6. Бесплатные баннеры
Здесь находится набор из 5 баннеров в стиле материального дизайна с разрешением в 1140x600px. Отлично подходят для акцентирования внимания хедеров, изображений или отдельных секций в любом веб-проекте.
Инструменты для мобильной разработки
7. Бесплатный набор инструментов для мобильного дизайна
Отличная подборка, которая не останется незамеченной для пользователей Photoshop и Sketch. Вниманию представлен набор различных компонентов для материального дизайна, которые смогут придать веб-проекту достаточно активную энергетику. Отличный вариант для создания музыкального приложения или мобильной версии сайта.
8. Edacious UI KIT
Набор пользовательского интерфейса, созданный для ускорения вашего рабочего процесса.
9. DO — объемный App UI Kit. Бесплатно
Do — это настоящая находка для всех, кто интересуется созданием различного рода приложений в материальном дизайне. Do — это 130 дизайнов, 10 уникальных тем и более 250 UI элементов для создания гибких и Retina ready дизайнов. Здесь точно можно найти простор для экспериментов. Сделайте свой выбор в пользу современного красочного дизайна.
10. Набор бесплатных UI элементов для создания музыкальных приложений
Откройте для себя коллекцию бесплатных UI элементов в .psd формате, которые отлично подойдут для создания музыкальных приложений. Кстати, феминистический дизайн будет гармонично подчеркивать различные бьюти веб-проекты.
11. Набор бесплатных UI элементов в стиле материального дизайна
Для тех, кто все еще сомневается с выбором инструментов и ресурсов в стиле материального дизайна, советую остановить свое внимание на коллекции Material Design UI Kit. С помощью различных .psd элементов, которые кстати легко адаптировать под свои потребности в Photoshop, можно сэкономить время и усилия еще на этапе запуска проекта. Добавьте себе в коллекцию отличный материал для создания быстрых проектов и приложений по принципу материального дизайна.
Иконки
12. Коллекция иконок Google в стиле материального дизайна
Начните поиск подходящих иконок для веб-проекта или приложения с коллекции Google Material Icons. Набор содержит всевозможные варианты иконок для различных приложений как медиа ресурсов воспроизведения, коммуникации, редактирования контента, и т.д. Загрузите zip archive (
57MB) и наслаждайтесь отличным материалом, который нужен под рукой каждому дизайнеру.
13. Коллекция бесплатных иконок
Material Design Icons — это коллекция бесплатных иконок в стиле материального дизайна, которые можно загрузить в нужном формате, размере и цвете в зависимости от требований проекта. Перетаскивайте иконки в Иллюстратор, фотошоп или Visual Studio, смените цвет и ваша иконка готова.
14. Pack: Material Design Icons
15. Material Design Icon
Как на счет коллекции 1000 иконок разделенных на 20 категорий в 7 разрешениях? В результате, получается набор из более 7000 файлов, и всё это выходит за даром. Просто выберите свою категорию и необходимое разрешение, и вуаля — иконка готова. Самое время приступить к просмотру вариантов, что скажете?
Фреймворки
16. Materialize — Адаптивный фронтенд фреймворк на основах материального дизайна
Добавьте себе в коллекцию универсальный инструмент для быстрого прототипирования интерфейса приложений согласно принципам материального дизайна. Так, доступно оформление текста, адаптивная сетка из 12 колонок, стилизация элементов, карточки, блоки, всплывающие элементы, и т.д. Протестируйте фреймворк на собственном проекте.
17. Фреймворк Material Design Lite
Нужен инструмент для облегчения процесса создания сайтов и приложений на основе материального дизайна? Попробуйте Material Design Lite — это универсальный фреймворк, который придерживается принципов материального дизайна, поддерживает мобильные браузеры и помогает создавать адаптивные и минималистичные проекты. Включает в себя различные элементы управления интерфейсом.
18. Фреймворк Material-UI
Имеет опыт работы с React? Material-UI — еще один довольно популярный фреймворк, который состоит из набора компонентов для React. Обширные возможности настройки, поддержка стилей разделенных на отдельные файлы, а также соответствие рекомендациям материального дизайна.
19. Фреймворк LumX
LumX позиционирует себя как фронтэнд фреймворк, основанный одновременно на спецификациях AngularJS и принципах материального дизайна. Дополнительно необходимы jQuery, Velocity и Momentum. Включает в себя большое количество AngularJS компонентов.
20. Фреймворк Material Foundation на основах материального дизайна
Основанный на принципе Zurb Foundation, фреймворк Material Foundation заслуживает внимание как минимум потому, что является бесплатным и самодостаточным. Фреймворк предлагает большое поле возможностей в рамках кастомизации. Включает в себя компоненты React, которые соответствуют принципам материального дизайна.
21. MUI — Фреймворк основанный на рекомендациях Google по материальному дизайну
Довольно простой в использовании фреймворк, который существенно облегчит разработку будущих проектов. Обеспечивает поддержку Angular, React и WebComponents. Легковесный фреймворк обладает базовым набором элементов для ускорения процесса разработки небольших проектов.
22. Фреймворк Angular Material — Набор UI элементов
Фреймворк Angular Material — один из самых популярных фреймворков, поддерживаемых Google. Предлагает работу с полноценным материальным дизайном совместно с различными компонентами, иконками и скриптами. Адаптирован к работе на мобильных, в браузерах и настольных приложениях.
23. Bootstrap Material Design — Набор инструментов для материального дизайна на Bootstrap
Как следует из названия, Bootstrap Material Design — это тема для Bootstrap наполненная полезными фишками из Bootstrap вперемешку с элементами из материального дизайна.
Платные материалы
24. 1100 Artistic Backgrounds — Премиум набор из 1100 фонов для дизайнеров и креативных специалистов
Хотите, чтобы будущий проект отличался от сотен других подобных? С помощью премиум бандла, который содержит в себе 1100 текстур можно выделиться из толпы и создать уникальный дизайн легко и быстро. Предоставлены в различных цветовых гаммах, таких как мрамор, чернила, акриловые тона или акварели, текстуры подойдут по вкусу даже самым не искушенным дизайнерам. Уверен, здесь есть над чем экспериментировать.
25. UTech — Коллекция UI элементов
UTech — это премиум коллекция, которая состоит из различных экранов, макетов и стилей, и служит отличным решением для создания множества стартапов. В придачу, в комплект входит комплект различных экранов для профиля, новостной ленты или страницы-приветствия. Коллекция подходит для таких ниш как финансы, образование, еда, медиа портал или электронная коммерция.
26. Rainy Season – PSD элементы интерфейса для портфолио дизайнера, художника
Стоит отметить, что коллекция премиум PSD элементов отлично подойдет для создания приложений или виджетов. Почему бы не добавить себе в библиотеку набор высококачественных элементов для будущих проектов?
27. Advanced Statistic Cards – Bootstrap элементы интерфейса на тему медицины
С помощью премиум коллекции Bootstrap элементов, можно создавать абсолютно адаптивные макеты в виде карточек. В результате, можно выбрать из 5 различных форм, цветовых гамм и привлекательных дизайнов. Все они сочетаются между собой. Кстати, icomoon icon-fonts также добавлены в набор.
28. Tree Bundle — Элементы инфографики для рекламы
Отдельного внимания заслуживает премиум бандл элементов инфографики Tree Bundle. Можно использовать как в презентациях PowerPoint, так и в брошюрах, годовых отчетах, резюме или в целях бизнеса, рекламы, маркетинга, и др. Таким образом, в комплект входит 4 цветовых EPS и AI файла, с возможностью изменить размер внутри zip файла. Работают лучше с Adobe Illustrator CS5 или более новой версией.
29. Amazing Big Bundle Infographic Elements — Набор элементов инфографики для дизайн студий
Отличная подборка всевозможных элементов инфографики в виде графиков, диаграмм, иконок и других кастомных форм для применения в будущих проектах. Элементы подходят для презентаций, годовых отчетов, рекламы, маркетинга или продвижения товаров с помощью email. Коллекция EPS и AI файлов работает предпочтительно с Adobe Illustrator CS5 или более новой версией.
30. Tonicons – Набор из 2000 векторных иконок
Для тех, кому все еще продолжает собирать свою библиотеку иконок, предлагаю обратить внимание на Tonicons. Как на счет 2000 иконок премиум качества, разбитых на 6 категорий? Согласен, стоит поинтересоваться. К тому же, можно легко редактировать каждую из них согласно своим требованиям, менять размер и другие необходимые детали.
Подводя итоги
Даже если вы новичок в материальном дизайне, с данной подборочкой бесплатных и платных инструментов и ресурсов можно смело окунаться в работу с головой. Возьмите на вооружение все, приведенные выше ресурсы и пользуйтесь ими по мере необходимости. Используя ту или иную библиотеку, каждый из дизайнеров может получить готовое решение для своих нужд быстро, без лишней головной боли. Не забывайте руководствоваться своим опытом, предпочтениями и навыками. Поверьте, это точно поможет в будущем. Если вам есть что сказать и чем дополнить список, упомяните в комментарии.
Примеры материального дизайна
2017-12-07 • 10 мин. читать
25 июня 2014 года Google на собственной I/O конференции анонсировал переход к материальному дизайну всех продуктов компании.
До этого каждый продукт говорил с пользователем на своем языке. И язык этот мог сильно отличаться даже при использовании одного и того же сервиса с десктопа и смартфона, запутывая пользователя и создавая крайне противоречивый опыт.
Потребность в универсальном дизайн-коде с четкой спецификацией и понятными принципами, рост количества мобильных пользователей, эволюция пользовательских сценариев и изменение моделей потребления и создания контента — предпосылок к созданию общего языка было действительно много.
По своей амбициозности и сложности инженеры Google сравнивали эту задачу с полетом на луну, из-за чего разработка получила внутреннее название «проект Кеннеди» в честь президента Джона Кеннеди, с подачи которого стартовала легендарная лунная программа.
Главные принципы материального дизайна
Материал — это метафора.
Пользователь взаимодействует с интерфейсом, как с объектом материального мира. Края объектов, тени, освещение, расположение их на экране — все подчинено привычной логике физического мира, благодаря чему пользователь легко ориентируется в интерфейсе и интуитивно понимает, что нужно сделать, чтобы решить свою задачу.
Типографика, правила сочетания цветов, принципы расположения объектов — за основу взяты привычные принципы печатного дизайна, которые помогают сделать взаимодействие более эффективным и тоже работают на то, чтобы интерфейс воспринимался как физический объект.
Движение создает смысл.
Любое перемещение объектов в интерфейсе выстроено таким образом, чтобы пользователь понимал, что происходит, почему и что произойдет дальше. Движение определяет иерархию и связи отдельных элементов и слоев между собой.
Превратить плоский экран компьютера, ноутбука или смартфона в объект физического мира, с характерными для физического мира принципами взаимодействия между элементами — это и стало основной задачей для Google. В основу новой концепции был заложен опыт, который возникает у пользователя при работе с физическими объектами в реальном мире, в частности — с бумагой.
«В отличие от реальной бумаги, наша цифровая бумага может расширяться и преобразовываться. Она имеет материальные, видимые поверхности и края. Слои и тени дают понимание, чего вы можете коснуться», — Матиас Дуарте, вице-президент Google по материальному дизайну.
По умолчанию толщина каждого слоя составляет 1dp, что примерно равно толщине листа бумаги или 1/96 дюйма. Естественно, это условное значение: экран все равно остается плоским. Но с помощью теней, которые в материальном дизайне не просто задают объем, но и помогают выстраивать иерархию слоев и отдельных элементов в интерфейсе, пользователь получает такой же опыт, как и при работе с привычными объектами физического мира.
Почему это важно
Сейчас уже никто не «ходит в Интернет» — как это было еще 10-15 лет назад, когда было нужно сначала «попищать модемом», а потом еще минут 5 загружать пару сайтов или почту. И все это происходило на выпуклом мониторе с диагональю 17 дюймов и размером с небольшой ящик.
Сегодня мы каждый день взаимодействуем с сайтами, приложениями, сервисами — со смартфона, с компьютера, с ноутбука, с планшета — разными способами и с разных устройств. При этом мы все так же живем в реальном мире, где предметы отбрасывают тени, выглядят естественно и можно быстро навскидку понять, как ими пользоваться. Парадокс в том, что интерфейсы уже воспринимаются как объекты физического мира.
Пользователи ждут, что интерфейс будет одинаково и предсказуемо выглядеть с любого устройства: функции не изменятся, все основные элементы будут доступны на привычных местах, реакция на действие будет предсказуемой.
Материальный дизайн создан специально для того, чтобы сделать универсальный интерфейс для продукта или сайта. И при этом для работы с ним не нужно было привыкать и перестраиваться с привычных паттернов и аффордансов, которые помогают нам взаимодействовать с реальными объектами.
Когда нужен материальный дизайн, если вы не Google
«Material design» чаще всего не предполагает больших вложений в изменение архитектуры или внутренней логики, поэтому переход на него по силам практически любой компании, а не только гигантам вроде Google.
Как использовать принципы «Material design» для вашего проекта
Сделать проект с материальным дизайном — не означает, что нужно слепо скопировать Google и натянуть шаблон на свой сайт. Это история про понимание пользователей и логики их взаимодействия с интерфейсом.
Внедрение даже некоторых отдельных принципов поможет вам сделать интерфейс дружелюбнее и понятнее для пользователя. Для этого часто не нужно кардинально менять сам сайт.
Примеры, которые мы показываем, взяты из шаблонов. Они свободно продаются на Themeforest и стоят от 9 до 70 долларов. Как видите, чтобы перейти на материальный дизайн, не нужно быть огромной корпорацией, тратить много денег и заводить специального вице-президента в штате.
Используйте стандартные иконки
Создавайте иерархию на странице при помощи теней
В этом примере мы видим, как приоритетный тариф с помощью тени выдвигается на первый план. Хотя объекты на экране находятся в одной физической плоскости, с помощью тени создается приоритет для одной из карточек — она как будто находится над остальными вариантами.
Карточки также реагируют на действия пользователя — при наведении курсора бледная полоса под названием тарифного плана окрашивается в более темный цвет. С этим связан еще один важный принцип.
Сделайте так, чтобы интерфейс реагировал на действия пользователя
Кнопка до наведения курсора:
Кнопка, на которую наведен курсор:
Обратите внимание, как выстраивается иерархия в этом случае, и как интерфейс помогает пользователю.
Неактивная кнопка выделена тенью — она находится на переднем плане относительно подложки и текста. Как только мы наводим на нее курсор — тень увеличивается, а кнопка как будто приближается к нам, подталкивая пользователя к совершению целевого действия.
Еще один пример реализации материального дизайна — обычное изображение в галерее:
При наведении курсора появляется тень — объект выдвигается на первый план, появляется стандартная иконка в углу изображения. Мы сразу пониманием, что по клику или при нажатии на нее появится дополнительная информация:
Все действия понятны и предсказуемы. «Материальный интерфейс» помогает пользователю получить дополнительную информацию. Хотя до начала взаимодействия эта возможность не была очевидной.
Делайте четкие края у элементов
Без размытостей, закругленностей и других геометрических излишеств. Принцип прост — чем проще, тем понятнее. И тем более предсказуемым и эффективным будет взаимодействие интерфейса с пользователем.
За счет этого их внешний вид не отличается при переключении между разными устройствами. Однотонные цвета подложек также улучшают восприятие основного текста или изображения. Также с помощью изменения цвета при наведении курсора интерфейс общается с пользователем, реагируя на его действия.
Обратите внимание: в примере цвет блоков меню помогает в навигации на странице. Также цвет может использоваться для определения иерархии объектов на странице наравне с тенями.
Проверьте, как ваши пользователи реагируют на новый дизайн
В идеале нужно проверять и измерять реакцию на внедрение каждого отдельного элемента или принципа.
Мы подробно об этом писали в предыдущих статьях: