25 июня 2014 года компания Google представила общественности свое новое видение на дизайн интерфейсов будущего – целый комплекс правил и условий, по которым впредь будут строиться интерфейсы всех продуктов корпорации. Зачем все это понадобилось? Еще пять лет назад все продукты Google сильно отличались друг от друга, в том числе различные версии одного приложения на разных устройствах. Разработчики задумались о создании специальных правил построения и унификации всех разрабатываемых приложений и сервисов, которые позже объединились под общим названием «Проект Кеннеди». Именно этот проект позже развился в Material Design (материальный дизайн ).
Благодаря проекту Кеннеди все крупные сервисы и службы Google получили общие черты дизайна и построения интерфейса. Это позволило унифицировать подходы в создании веб-интерфейсов, а позже и интерфейсов мобильных приложений.
Одной из черт унифицированного дизайна стали карточки с информацией, которые могли размещаться в любой части рабочей области. Исследуя их в приложении Google Now, разработчики задали себе вопрос: «А что находится под этими карточками?». По словам вице-президента по дизайну Google Матиаса Дуарте (Matias Duarte), этот «невинный вопрос зажег мощную искру».
Команда дизайнеров стала рассматривать дизайн не как набор плоскостей и пикселей, а как реальный физический объект. Им хотелось донести то же самое до пользователя, чтобы у него возникло чувство осязаемости интерфейса, что то, что происходит на экране выглядит максимально правдоподобно и логично.
После тотального засилья скевоморфизма (точная имитация реальных объектов физического мира в дизайне) все резко двинулись в противоположную сторону – . Именно его взяла за основу Google, изобретая «материал ». При этом сделав небольшой шаг назад к реалистичности.
Основным элементом материального дизайна является метафора физического объекта по своим свойствам похожего на бумагу и обладающего большинством ее свойств – размер, цвет, толщина. Каждый слой этого метафорического материала располагается в трехмерном пространстве и подчиняется всем физическим законам, поэтому в отличие от классического флэт стиля, может отбрасывать тень на нижние слои. Все слои помещаются на основном нижнем материале.
Из-за свойств, схожих с бумагой, изначально материал называли «квантовой бумагой». Это та же самая бумага, что и в физическом мире, но она обладает целым рядом «волшебных» свойств, например, может изменять свои размеры и плавно перемещаться в пространстве, объединяясь с другими «листочками» или разрываясь на несколько. Квантовая бумага находится чуть выше фона, который чаще всего окрашен в белый цвет. Тень перемещается в зависимости от перемещения самого материала, уменьшается или увеличивается в зависимости от высоты нахождения материала над фоном.
Если «квантовая бумага» предназначена для отражения физических свойств объекта, то все, что находится на поверхности этой бумаги – цвета, изображения, текст, иконки - формируется с помощью «цифровых чернил » - еще одного уникального объекта материального дизайна.
Материальный дизайн использует все наработки полиграфии в дизайне интерфейсов. Но и здесь есть фирменные особенности Google. Например, основной шрифт для использования в материальном дизайне – это Roboto. Однако ничего не мешает компаниям использовать свой фирменный шрифт для поддержания айдентики. В гайдлайнах по использованию материального дизайна представлены примеры для использования различных начертаний и размеров шрифта в интерфейсах.
Но самое главное в графике материального дизайна – это цвет . Цвет является основным выразительным средством на квантовой бумаге и потому играет очень важную роль. Обычно для материального дизайна характерно использовать основной и акцентирующий цвета . А также несколько их оттенков для различных ситуаций.
Обычно основные цвета используются для окраски больших площадей, таких как заголовки, панели действий, строки состояния. Для выделения важных элементов используется акцент-цвет . Например, для визитной карточки материального дизайна - плавающих кнопок действия.
Основные принципы материального дизайна предписывают использовать изображения. Это настолько важный элемент, что рекомендуются к использованию изображения максимального размера без рамок. Более того панели действий становятся прозрачными, чтобы сделать обзор изображения максимальным.
Android поддерживает специальную библиотеку Палитра , которая способна выделять из изображения основной и акцентирующие цвета и динамически менять оформление приложения, подстраиваясь под активное изображение (пример вверху).
Продолжая проводить аналогии с естественным миром нужно отметить, что ничего не исчезает в никуда, как и ничего не берется из ниоткуда. Таким образом в материальном дизайне необходимо в ответ на все действия пользователя плавно изменять существующий интерфейс, чтобы все переходы были логичными и очевидными. Таким образом в материальном дизайне анимация является последствием взаимодействия пользователя и интерфейса.
Активное движение привлекает внимание пользователя, поэтому для достижения эффекта реализма необходимо использовать некоторые правила:
Материальный дизайн – это абсолютно новый способ взаимодействия и построения интерфейсов, который все еще находится в стадии разработки и может быть дополнен в любой момент. Однако уже сейчас можно предугадать его перспективность. Как минимум в разработке приложений для Android он будет доминировать, так как унификация всех интерфейсов положительно скажется на удобстве пользования.
В самом Google разработку материального дизайна ставят в один ряд с такими значительными событиями как разработка оконного интерфейса и управление курсором (Xerox PARC) и создание сенсорных экранов (Apple). Что ж, посмотрим, что из этого получится.
Новый логотип и айдентика Google продвигают идеи материального дизайна
Подробные гайдлайны от разработчика материального дизайна вы найдете здесь -
Вице-президент по дизайну Google Матиас Дуарте (Matias Duarte) в интервью The Verge рассказывает об основных принципах нового дизайна, который получил название Material. Это совершенно иной подход, обеспечивающий унифицированный набор правил, начиная от вида программного обеспечения и заканчивая функциями. Пока дизайн кажется немного странным, и к нему необходимо привыкнуть.
Команда дизайнеров в Google почувствовала необходимость придумать единый внешний вид и функциональность ПО, которые могли бы применяться во всех продуктах: Android, Chrome OS, web-сервисах. Вместо того, чтобы начать с разработки палитры цветов, они начали с вопроса: «Ч то такое программное обеспечение?»
Ответ пришел из отдела проектирования, когда Джон Уайли (Jon Wiley), главный конструктор поисковика Google, и его коллега Николай Житкофф (Nicholas Jitcoff) смотрели на дизайн Google Now. Они смотрели на карточный интерфейс и подумали: «А если сдвинуть карточку, то что находится за ней?»
« Этот невинный вопрос зажег мощную искру!» - Сказал Дуарте . Вся команда начала думать над новым способом взаимодействия с программными элементами. Вместо того, чтобы просто использовать пиксели на экране и абстрактные слои, команда начала рассуждать о дизайне, как о реальном осязаемом объекте. Поэтому карточки должны обладать физическими свойствами. Пришло время придумать правила, которые бы определили то, как все должно действовать и двигаться на экране. Команда разработчиков хотела добиться эффекта, будто пользователь взаимодействует с физическими объектами.
Таким образом, началась работа над метафорическим материалом, напоминающим бумагу - плоскую и белую с реалистичными тенями. Это было семя из которого выросла остальная часть дизайна, реализацию которого можно увидеть в Android L. Material Design - это смелые, яркие цвета, минимализм и чувство последовательности.
Уайли и Житкофф говорят, что это эстетическая эволюция всей философии дизайна компании Google. В 2012 и 2013 годах в стенах штаб-квартиры интернет-гиганта закипела работа над Project Kennedy, который бы унифицировал дизайн всего.
Material Design объединяет все лучшие идеи. Матиас Дуарте воспринимает наш новый стиль в качестве ряда ограничений, которые, по его мнению, упрощают работу дизайнерам приложений, делают её более последовательной. К примеру, жест переворота карточки для того, чтобы увидеть написанное на задней стороне. В обычном мире это невозможно из-за нехватки места. Это как если бы софт представлял собой реальные физические предметы внутри устройств. А на вашем телефоне явно нет места, чтобы перевернуть карточку, поэтому Google ограничивает подобные манипуляции.
Мы сильно зависим от физики, и программное обеспечение часто ведет себя таким образом, что рвет наши представления о мире, как в каком-то научно-фантастическом фильме, нарушающем элементарную логику. Дуарте прямо комментирует новую философию дизайна iOS от Apple.
Мы не мчимся через пространство и время на сверхзвуковых скоростях. Дизайн - это поиск решения в рамках жестких ограничений. Дизайн - это искусство.
Дизайнеры компании Google упорно отказываются называть используемый вымышленный материал. Решение, которое одновременно дает им большую гибкость и добавляет уровень метафизического мистицизма к веществу. Квантовая бумага - так прозвучало в некоторых утечках до Google I/O. Это важно, потому что материал подчиняется физике и он не попадет в ловушку скевоморфизма. Это не имитация физических объектов в точности, как выразился Дуарте, это что-то « волшебное» .
Материал в нашем дизайне может делать то, что физическая бумага не может, например, увеличиваться и уменьшаться с помощью анимаций. Эти анимации важны для Google, потому что они помогают пользователям понять, что они находятся внутри программного обеспечения. Уайли сравнивает ПО с фильмами, где между сценами наблюдаются резкие скачки. Пользователь теряет ощущение времени и пространства. В программном обеспечении важно, чтобы пользователь понимал принципы перехода от одного к другому.
Другая более важная вещь, которую привносит Material Design - унификация. Google работает над алгоритмами для всех продуктов годами, и это стало неотъемлемой частью новой философии дизайна. Вместо того, чтобы пользователь настраивал все сам, Material Design заставляет верить, что на экране они увидят то, что необходимо в нужное время.
Вот почему Android Wear не дает пользователям ничего, кроме взаимодействия с уведомлениями. Алекс Фоборг (Alex Faaborg), дизайнер платформы, говорит:
Вы не тратите много времени на взаимодействие с часами. Вы просто хотите иметь возможность взглянуть на запястье и мгновенно получить нужную информацию или выполнить действие при помощи голосовой команды. Мы проделали колоссальную работу для всей платформы Google.
Google просит слишком много доверия к себе и к его «волшебному» бумажному материалу, но Дуарте уверен, что на это есть веские причины.
Мы сделали так, потому что это наиболее простое решение. Мы хотим спроектировать максимально простой дизайн для пользователя.
За Material Design стоит гораздо больше, чем просто дизайн Android L, Android Wear и всего остального к чему причастна Google. Речь идет об ощущениях при взаимоотношении человека и технологий.
Дуарте говорит, что Xerox PARC проделала блестящую работу, создав принципы работы с привычными для всех окнами и курсором. Это было новаторством, потому что компании удалось создать виртуальную версию реального рабочего стола. Люди понимали то, как компьютер работает и могли комфортно с ним работать. Это касается и того, что сделала Apple с сенсорными экранами.
Теперь Google считает, что ей удалось проделать тоже самое. Уайли говорит, что сегодня у людей имеется множество технологий: сенсорные экраны, жесты, голосовые команды, интеллектуальные алгоритмы. Material Design объединяет все это многообразие в одну интуитивно-понятную вещь. Это поможет без труда пользоваться одним и тем же на Chrome OS, Android или в интернете.
1. Материал - это метафора
Material Design является системой, рационализирующей пространство и движение. Дизайн основывается на тактильной реальности, вдохновленной возможностями бумаги и чернил, но открытой для воображения и магии.
2. Поверхности интуитивно понятны
Плоскости и грани передают визуальные сигналы, основанные на нашем восприятии реальности. Использование знакомых тактильных атрибутов позволяет обратиться к первичным частям нашего мозга и помогает быстро понять «представляемое».
3. Размерность рождает взаимодействие
Основы света, поверхности и движения являются ключевыми для взаимодействия объектов. Реалистичное освещение делит пространство и акцентирует внимание на движущихся частях.
4. Единый адаптивный дизайн
Единый дизайн для всего. Каждое устройство отражает свой взгляд на те же базовые элементы. Каждый вид адаптирован к размеру и взаимодействию для каждого устройства. Цвета, иконография, иерархия и пространственные отношения остаются неизменными.
5. Шрифты, графика, цвета
Отчетливый дизайн создает иерархию, понимание и помогает сфокусироваться. Специально подобранные цвета, использование пространства от края до края, крупные шрифты и нарочитое/умышленное использование белого позволяет полностью погрузить пользователя в процесс взаимодействия, сделать его более ясным и понятным.
6. Первичные действия
Действие пользователя и есть суть дизайна. Первичные действия преобразуют весь дизайн. В них акцент делается на основную функциональность и сразу бросаются в глаза пользователя.
7. Пользователи инициируют изменения
Изменения в интерфейсе происходят от действий пользователя. Движение усиливает опыт первичного действия.
8. Анимационная хореография
Все действия происходят в единой среде. Объекты, которые видит пользователь, не нарушают весь остальной опыт использования даже после преобразований и реорганизаций.
9. Движение обеспечивает смысл
Движение имеет смысл и оно необходимо для привлечения внимания. Переходы эффективны.
Дизайн - это искусство создавать. Наша цель удовлетворить разнообразный спектр потребностей человека. Поскольку эти потребности развиваются, тоже самое должно произойти и с нашими проектами, идеями и философией.
Мы поставили перед собой цель - создать визуальный язык для наших пользователей, который объединит привычные принципы классического дизайна с инновациями.
Вот уже несколько лет Материальный дизайн находится среди лидеров мировых трендов веб дизайна. И совсем не удивительно. Ведь, именно он смог объединить простоту, логику работы и удобный внешний вид, и при этом создать продуманный и интуитивно-понятный интерфейс для пользователей. Простор, никакого нагромождения деталей, чистота и отсутствие избыточного украшения экрана. Основной принцип материального дизайна фокусируется на юзабилити, а не только на хорошем дизайне, что и покоряет сердца благодарной аудитории свои изяществом и удобством.
Популярность тренда объясняется огромным количеством ресурсов и инструментов для дизайнеров, кстати, как платных так и бесплатных. К примеру, сегодня предлагаю полезную подборочку наполненную 30 вдохновляющими бесплатными и платными ресурсами для дизайнеров в стиле материального дизайна. С каждым днем выходят всё новые приложения и проекты в стиле Material Design. Не отставайте. Узнайте полезности, которые помогают дизайнерам каждый день справляться с нелегкими задачами и добиваться успехов. Помогите будущему проекту блеснуть материальным дизайном.
Разве это не прекрасно найти целую коллекцию 40+ бесплатных фонов в стиле материального дизайна в одном месте? Выполнены в высоком расширении, они точно вдохновят на реализацию веб-проекта или другого печатного замысла. Большое количество различных форм и цветов привлечет внимание даже самого требовательного дизайнера.
Не упустите шанс добавить в свою библиотеку инструментов коллекцию 10 высококачественных фонов в стиле материального дизайна. Представлены в двух стилях и пяти цветовых комбинациях, эти фоны имеют 300 Dpi и 10 .jpg файлов , а также разрешение в 5000x3000px . И все это можно получить бесплатно.
Еще одна отличная подборочка высококачественных фонов для проекта в стиле материального дизайна. Выбирайте из 30 различных дизайнов, наполненных дополнительными формами, такими как квадраты, треугольники и круги, и придайте своему проекту хендмэйд оттенок. Доступны бесплатно в .png и .ai форматах.
Хочется чего-то новенького? Пожалуйста. Ознакомьтесь с коллекцией 12 новинок в стиле материального дизайна в высоком разрешении. Отличная новость — коллекцию можно использовать как для персональных так и для коммерческих целей, т.к. продукты лицензированы Creative Common Zero , а значит проверены и готовы к применению. Форма бриллианта в центре фона служит для привлечения внимания к продукту. Доступны для скачивания в .png и .jpg форматах.
Не упустите подборочку из ярких и качественных фонов выполненных в плиточном дизайне. Файл содержит в себе файлы .png , photoshop и формат illustrator vector , а это значит, что можно самостоятельно настраивать цветовую гамму согласно требованиям. Используйте бесплатно в любом размере и без потери качества.
Здесь находится набор из 5 баннеров в стиле материального дизайна с разрешением в 1140x600px . Отлично подходят для акцентирования внимания хедеров, изображений или отдельных секций в любом веб-проекте.
Отличная подборка, которая не останется незамеченной для пользователей Photoshop и Sketch. Вниманию представлен набор различных компонентов для материального дизайна, которые смогут придать веб-проекту достаточно активную энергетику. Отличный вариант для создания музыкального приложения или мобильной версии сайта.
Набор пользовательского интерфейса, созданный для ускорения вашего рабочего процесса.
Do — это настоящая находка для всех, кто интересуется созданием различного рода приложений в материальном дизайне. Do — это 130 дизайнов, 10 уникальных тем и более 250 UI элементов для создания гибких и Retina ready дизайнов. Здесь точно можно найти простор для экспериментов. Сделайте свой выбор в пользу современного красочного дизайна.
Откройте для себя коллекцию бесплатных UI элементов в .psd формате, которые отлично подойдут для создания музыкальных приложений. Кстати, феминистический дизайн будет гармонично подчеркивать различные бьюти веб-проекты.
Статьи по теме:
Для тех, кто все еще сомневается с выбором инструментов и ресурсов в стиле материального дизайна, советую остановить свое внимание на коллекции Material Design UI Kit. С помощью различных .psd элементов, которые кстати легко адаптировать под свои потребности в Photoshop, можно сэкономить время и усилия еще на этапе запуска проекта. Добавьте себе в коллекцию отличный материал для создания быстрых проектов и приложений по принципу материального дизайна.
Начните поиск подходящих иконок для веб-проекта или приложения с коллекции Google Material Icons. Набор содержит всевозможные варианты иконок для различных приложений как медиа ресурсов воспроизведения, коммуникации, редактирования контента, и т.д. Загрузите zip archive (~57MB) и наслаждайтесь отличным материалом, который нужен под рукой каждому дизайнеру.
Material Design Icons — это коллекция бесплатных иконок в стиле материального дизайна, которые можно загрузить в нужном формате, размере и цвете в зависимости от требований проекта. Перетаскивайте иконки в Иллюстратор, фотошоп или Visual Studio, смените цвет и ваша иконка готова.
Здесь можно скачать такие бесплатные элементы как иконки, тематические фоны или цветовые палитры быстро и удобно. Иконки доступны в .icns, .ico, .png форматах. Различные формы и стили иконок отлично подходят для рутинной работы в процессе создания дизайна.
Как на счет коллекции 1000 иконок разделенных на 20 категорий в 7 разрешениях? В результате, получается набор из более 7000 файлов, и всё это выходит за даром. Просто выберите свою категорию и необходимое разрешение, и вуаля — иконка готова. Самое время приступить к просмотру вариантов, что скажете?
Добавьте себе в коллекцию универсальный инструмент для быстрого прототипирования интерфейса приложений согласно принципам материального дизайна. Так, доступно оформление текста, адаптивная сетка из 12 колонок, стилизация элементов, карточки, блоки, всплывающие элементы, и т.д. Протестируйте фреймворк на собственном проекте.
Нужен инструмент для облегчения процесса создания сайтов и приложений на основе материального дизайна? Попробуйте Material Design Lite — это универсальный фреймворк, который придерживается принципов материального дизайна, поддерживает мобильные браузеры и помогает создавать адаптивные и минималистичные проекты. Включает в себя различные элементы управления интерфейсом.
Имеет опыт работы с React? Material-UI — еще один довольно популярный фреймворк, который состоит из набора компонентов для React. Обширные возможности настройки, поддержка стилей разделенных на отдельные файлы, а также соответствие рекомендациям материального дизайна.
LumX позиционирует себя как фронтэнд фреймворк, основанный одновременно на спецификациях AngularJS и принципах материального дизайна. Дополнительно необходимы jQuery, Velocity и Momentum. Включает в себя большое количество AngularJS компонентов.
Основанный на принципе Zurb Foundation, фреймворк Material Foundation заслуживает внимание как минимум потому, что является бесплатным и самодостаточным. Фреймворк предлагает большое поле возможностей в рамках кастомизации. Включает в себя компоненты React, которые соответствуют принципам материального дизайна.
Смотрите также:
Довольно простой в использовании фреймворк, который существенно облегчит разработку будущих проектов. Обеспечивает поддержку Angular, React и WebComponents. Легковесный фреймворк обладает базовым набором элементов для ускорения процесса разработки небольших проектов.
Фреймворк Angular Material — один из самых популярных фреймворков, поддерживаемых Google. Предлагает работу с полноценным материальным дизайном совместно с различными компонентами, иконками и скриптами. Адаптирован к работе на мобильных, в браузерах и настольных приложениях.
Как следует из названия, Bootstrap Material Design — это тема для Bootstrap наполненная полезными фишками из Bootstrap вперемешку с элементами из материального дизайна.
Хотите, чтобы будущий проект отличался от сотен других подобных? С помощью премиум бандла, который содержит в себе 1100 текстур можно выделиться из толпы и создать уникальный дизайн легко и быстро. Предоставлены в различных цветовых гаммах, таких как мрамор, чернила, акриловые тона или акварели, текстуры подойдут по вкусу даже самым не искушенным дизайнерам. Уверен, здесь есть над чем экспериментировать.
UTech — это премиум коллекция, которая состоит из различных экранов, макетов и стилей, и служит отличным решением для создания множества стартапов. В придачу, в комплект входит комплект различных экранов для профиля, новостной ленты или страницы-приветствия. Коллекция подходит для таких ниш как финансы, образование, еда, медиа портал или электронная коммерция.
Стоит отметить, что коллекция премиум PSD элементов отлично подойдет для создания приложений или виджетов. Почему бы не добавить себе в библиотеку набор высококачественных элементов для будущих проектов?
С помощью премиум коллекции Bootstrap элементов, можно создавать абсолютно адаптивные макеты в виде карточек. В результате, можно выбрать из 5 различных форм, цветовых гамм и привлекательных дизайнов. Все они сочетаются между собой. Кстати, icomoon icon-fonts также добавлены в набор.
Отдельного внимания заслуживает премиум бандл элементов инфографики Tree Bundle. Можно использовать как в презентациях PowerPoint, так и в брошюрах, годовых отчетах, резюме или в целях бизнеса, рекламы, маркетинга, и др. Таким образом, в комплект входит 4 цветовых EPS и AI файла, с возможностью изменить размер внутри zip файла. Работают лучше с Adobe Illustrator CS5 или более новой версией.
Отличная подборка всевозможных элементов инфографики в виде графиков, диаграмм, иконок и других кастомных форм для применения в будущих проектах. Элементы подходят для презентаций, годовых отчетов, рекламы, маркетинга или продвижения товаров с помощью email. Коллекция EPS и AI файлов работает предпочтительно с Adobe Illustrator CS5 или более новой версией.
Для тех, кому все еще продолжает собирать свою библиотеку иконок, предлагаю обратить внимание на Tonicons. Как на счет 2000 иконок премиум качества, разбитых на 6 категорий? Согласен, стоит поинтересоваться. К тому же, можно легко редактировать каждую из них согласно своим требованиям, менять размер и другие необходимые детали.
Даже если вы новичок в материальном дизайне, с данной подборочкой бесплатных и платных инструментов и ресурсов можно смело окунаться в работу с головой. Возьмите на вооружение все, приведенные выше ресурсы и пользуйтесь ими по мере необходимости. Используя ту или иную библиотеку, каждый из дизайнеров может получить готовое решение для своих нужд быстро, без лишней головной боли. Не забывайте руководствоваться своим опытом, предпочтениями и навыками. Поверьте, это точно поможет в будущем. Если вам есть что сказать и чем дополнить список, упомяните в комментарии.
«Плоский» стиль сегодня в тренде, это никто не отрицает. Уже около трех месяцев разрабатываю небольшую игру и в качестве стиля решил использовать именно «плоский» дизайн, т.к. он наиболее популярен сейчас, а еще очень легко «воспроизводится» (слово «рисовать» тут не подходит, т.к. я программист и рисовать совершенно не умею =)). Поэтому я и решил выложить свою подборку по Material Design от Google, которую собрал, пока разрабатывал свою новую игру.
Что бы вы понимали о чем идет речь, вот небольшое видео:
Самый главный документ, с которого стоит начать изучение Material Design, это конечно же гайдлайны от Google . Там полно примеров того как «надо» и как «не надо», а так же есть исходники (для Photoshop и т.п.), в которых можно поковыряться и разобраться что к чему.
Вот еще один хороший сайт с ежедневной подборкой концептов, приложений и т.п. выполненных в стиле Material Design — Material Design Daily . Очень много анимированных примеров, некоторые просто заставляют задуматься «каааак такое можно было придумать?». Одним словом — советую.
Пару слов стоит упомянуть и о подборке цвета в Material Design. Это наверное одна из главных составляющих хорошего дизайна. Вот несколько сайтов, который вам помогут в этом: Flat UI Colors , Material Pallete .
Сегодня все большее количество корпоративных заказчиков указывают в графе “Пожелание по дизайну” в брифе на создание сайта - “Material Design”. При этом даже не столько визуальная составляющая привлекает внимание корпоративного сегмента, как то, что стиль в тренде и на слуху.
Прежде, чем перейти к примерам, давайте уясним одну простую истину:
Material Design - это корпоративный стиль корпорации Google. Подражать ему так же глупо, как, например, производителю лапши быстрого приготовления пытаться подрожать бренду “Ferrari”.
Гайдлайн Material Design, кроме самого Google, также распространяется на продукты компаний-партнеров, в основном, на приложения для платформы Android. У всех остальных, кто не имеет отношение к корпорации Google и платформе Android, интерес к Material Design должен быть сугубо познавательным.
Корпоративный веб-сайт требует более осмысленный подход, чем просто сказать “хочу вот так”. Если сайт - это лицо бренда в сети, то оно должно иметь индивидуальные черты и визуально соответствовать общему образу компании.
Material Design еще не достиг пика своего развития и на сегодняшних день существует не так много сайтов, которые не только выполнены в полном соответствии с предписаниями брендбука от Google, но и гармонично интегрированы в собственный визуальный брендинг. Тем не менее нам удалось найти несколько удачных примеров сайтов в стиле Material Design.
.png)
Сайт Kiosk Browser не только выполнен в стиле Material Design, но и неплохо оптимизирован для мобильных устройств.
.jpg)
Очень удачное решение, в котором гармонично сочетаются детали и конструкции из гайдлайна Material Design (тени, кнопки, flat design, цвета и JS эффекты) и корпоративный стиль группы международных школ ISoE.
.png)
Платформа lifeaweso выполнена в соответствии с фундаментальными принципами Material Design: простота, ясность, понятность. Сайт еще находится в стадии разработки, но интеграция визуальной составляющей в стиле Material Design выглядит довольно неплохо.
.jpg)
Известная компания-разработчик цифровых решений и онлайн-сервисов Futurice просто не могла сделать плохой сайт. Цветовая гамма в пастельных тонах, плавная навигация и функциональные элементы вместе создают отличный пользовательский опыт.
.jpg)
Данный сайт использует принцип простоты, заложенный в Material Design, и дополняет его живыми, качественными фото. Особенно впечатляют фоновые изображения при скроллинге.
Здесь мы видим ключевой элемент Material Design - карточки. Сайт очень легкий и простой: здесь нет нагромождения лишних элементов, а ключевая информация отображается в отдельных блоках.
.jpg)
Помимо прочих атрибутов из концепции Material Design, здесь присутствует ключевой элемент управления - кнопка, которая парит над сайтом. После карточек, это, пожалуй, один из самых запоминающихся элементов в направлении дизайна от Google.
.png)
Ну и, конечно, не будем забывать о первоисточнике. Интерфейс сервиса Google Alerts недавно обновился до Material Design, что существенно улучшило его визуальные характеристики и usability.
