Материальный дизайн был создан Google для унификации интерфейсов сервисов и приложений компании. Воплощение подобной концепции помогло корпорации представить себя как поставщика данных и единую цифровую среду, а не просто поисковик с разнобойными сервисами.
Разработчики Google подчеркивают инновационность материального дизайна:
«Мы поставили себе цель создать визуальный язык для пользователей, который объединит классические принципы хорошего дизайна с возможностями науки и технологий».
Метафора материального дизайна – это проекция бумаги в трехмерном пространстве. Ее движение используется для демонстрации функционала и навигации сайта или приложения.Новый дизайн Google адаптирован под различные виды устройств и операционные системы.
Скевоморфизм против плоскости
Много лет для разработки интерфейса сайтов или мобильных приложений дизайнеры ориентировались на реальные объекты. Это явление получило название скевоморфизм. Оно полностью отвечало требованиям эргономики. Пользователю было проще видеть понятные объекты на экранах техники. Даже терминология базировалась на принципах реалистичности: рабочий стол, документы, папки, файлы, блокнот, ножницы и панель управления. Дизайн иконок постепенно начал стремится к трехмерности с глубокой перспективой и хорошо проработанной светотенью.
С 2010 года начинается набирать популярность плоский дизайн. Он разрабатывался как альтернатива скевоморфизму. Прообразом нового дизайна стал минимализм, швейцарский типографический стиль и баухаус в архитектуре. Дизайнеры начали убирать объем, тени и перспективу из интерфейса сайтов и приложений. Элементы становились плоскими и одноцветными.
Это значительно подняло производительность техники и аппаратуры, расход энергии уменьшился. С 2014 года плоский дизайн стал новым стандартом для оформления дизайна сайтов и мобильных приложений.
Плоский дизайн, несмотря на лаконичность и адаптивность, создает трудности для многих пользователей, которые не привыкли к подобному интерфейсу. Они тратят время на поиск необходимой функции или приложения из-за исчезновения кнопок в фоновом режиме.
Многие разработчики и пользователи спорят, какой дизайн интерфейса лучше? Вы можете выбрать свою сторону в этой борьбе:
Найден компромисс – это материальный дизайн
Материальный дизайн Google воплощает многие элементы плоского дизайна - минимализм, геометрию, модули и яркие цвета. В то же время он близок к скевоморфизму благодаря использованию трехмерного пространства и теней.
Такой дизайн удобный для пользователей, ведь он стоит на рубеже двух концепций. Материальный дизайн использует лаконичность (сохраняет высокую производительность техники) и анимацию (оживляет интерфейс сайта или приложения и помогает пользователю понимать навигацию).
3 киты материального дизайна
Тактильные поверхности
Интерфейс материального дизайна состоит из нескольких слоев «бумаги». Слои расположены на разной высоте и отбрасывают тени друг на друга, создавая объемное пространство. Это помогает пользователю лучше взаимодействовать с интерфейсом.
Полиграфический дизайн
Продолжая концепцию «цифровой бумаги», в материальном дизайне используется традиционная полиграфия. Создается контраст между кегелями шрифта заголовка и текста. Задается структура контента с помощью основных и акцентных цветов. Более яркие цвета используются в элементах управления: плавающей кнопке, индикаторах и полосках. Создать свое собственной цветовое решение можно здесь.
Осмысленная анимация
Анимация нужна для демонстрации работы интерфейса, пользователь должен знать, что система приняла и обрабатывает его действие. Это важное правило эргономики. Например, с помощью анимации списки и события раскрываются в отдельные листы с подробной информацией.
Сайты для вдохновения
№ 1. Google Design
Это лучшая демонстрация материального дизайна в действии. На сайте можно прочитать статьи и обзоры новинок в мире дизайна, оценить победителей Material Design Awards. Разработчики сайта любезно предоставили кучу полезных линков на инструкции, уроки и гиды по созданию материального дизайна. Сайт дает возможность скачать цветовые палитры, стикеры, шрифты, иконки.
№ 2. Material Design Blog
Раскрывает основы теории построения интерфейса в материальном дизайне. Удобная навигация позволяет быстро найти необходимую информацию. Предоставлены ссылки на скачивание элементов: иконок, тематических фонов, цветовых палитр.
№ 3. Uplabs
На этом сайте самая удобная навигация и построение категорий. Проекты сортируются не только по операционным системам и сферой применения, но и по стилю шрифта. Пользователи активно публикуют здесь свои работы. Система чата позволяет автору быстро отвечать на вопросы и критику.
№ 4. Behance
Один из самых популярных дизайнерских сайтов. Предоставляетудобную сортировкуматериала. На запрос о материальном дизайне выбрасывает огромную подборку материала, но в ней достаточномного проектов не по теме. Есть возможность оценить работу, подписаться на обновления от автора и взаимодействовать с другими пользователями. Подобные сервисы предлагает также Dribbble.
№ 5. Pinterest
Фотохостинг предлагает подборку материалов по материальному дизайну. Иллюстрации в хорошем качестве здесь найти достаточно трудно. Линки под изображениями предлагают перейти на веб-страницы, о которых уже говорилось выше. Pinterest подходит для быстрого просмотра максимального количества изображений о материальном дизайне.
Студия KOLORO – это инновационные решения для реализации проектов.Шагайте в ногу со временем вместе с нами.Начните общение с менеджерами прямо сейчас. Контакты:
