Яндекс.Метрика

Материальный дизайн: 5 сайтов для вдохновения

Категория: Дизайн
Дата: 22. Дек. 2016 в 13:46

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

 

Разработчики Google подчеркивают инновационность материального дизайна:

 

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

 

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

 

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

 

Скевоморфизм против плоскости

 

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

 

иконки-для-приложений

 

С 2010 года начинается набирать популярность плоский дизайн. Он разрабатывался как альтернатива скевоморфизму. Прообразом нового дизайна стал минимализм, швейцарский типографический стиль и баухаус в архитектуре.  Дизайнеры начали убирать объем, тени и перспективу из интерфейса сайтов и приложений. Элементы становились плоскими и одноцветными. 

 

плоский дизайн

 

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

 

skeuomorphism-vs-flatdesign

 

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

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

 

скеоформизм-плоский-дизайн

 

Найден компромисс – это материальный дизайн

 

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

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

 

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

 

Тактильные поверхности

 

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

 

Полиграфический дизайн

 

Продолжая концепцию «цифровой бумаги», в материальном дизайне используется традиционная полиграфия. Создается контраст между кегелями шрифта заголовка и текста. Задается структура контента с помощью основных и акцентных цветов. Более яркие цвета используются в элементах управления: плавающей кнопке, индикаторах и полосках. Создать свое собственной цветовое решение можно здесь.

 

Осмысленная анимация

 

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

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

 

Сайты для вдохновения 

 

№ 1. Google Design

 

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

 

google-design

 

№ 2. Material Design Blog

 

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

 

material-design

 

№ 3. Uplabs

 

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

 

up-material-design

 

№ 4. Behance

 

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

 

 

№ 5. Pinterest

 

Фотохостинг предлагает подборку материалов по материальному дизайну. Иллюстрации в хорошем качестве здесь найти достаточно трудно. Линки под изображениями предлагают перейти на веб-страницы, о которых уже говорилось выше. Pinterest подходит для быстрого просмотра максимального количества изображений о материальном дизайне.

 

pinterest-material-design 

 

Студия KOLORO – это  инновационные решения для реализации проектов. Шагайте в ногу со временем вместе с нами. Начните общение с менеджерами прямо сейчас. Контакты: +38 (044) 223 51 20

Фото Екатерина Барановская
Подготовил Екатерина Барановская Копирайтер
10 10 3

Понравилась статья?

Проголосовало: 3, оценка: 10 из 10

comments powered by HyperComments

Присоединяйся к нам в соцсетях

ßíäåêñ.Ìåòðèêà

Запрос на бесплатную консультацию

Отправив запрос, вы получаете:

  • Письмо или звонок от нашего менеджера
  • Оценку стоимости проекта
  • Личную встречу, при необходимости
  • Конфедициальность гарантирована!

Заказать обратный звонок

Ваше имя Ваш номер телефона Удобное время звонка
action="https://api.unisender.com/ru/subscribe?hash=5qxekwn84noxrtxahttk366ammzq79y4do97317e" name="subscribtion_form" onsubmit="return us_.onSubmit(this);" us_mode="embed">

присоеденяйтесь к подписчикам:

присоеденяйтесь к подписчикам:

Спасибо!
Получайте дайджест
практических советов
от опытных специалистов
маркетинга и брендинга!