Material Design — манифест дизайна от Гугл

Гугл не перестаёт удивлять… Я периодически натыкался на упоминания о Материальном Дизайне, но считал, что речь идет о ещё одном CSS Framework. Их и так довольно много, ещё один, пусть даже от Гугл, что с того?

Плотнее познакомиться пришлось в ходе работы, нужно было перенести и перепрограммировать шаблон сайта, использующего MD + Angular. В определенный момент кол-во скриптов, анимаций и плагинов стало неприлично большим — я взял за основу Bootstrap и пичкал шаблон js плагинами и собственными скриптами. И тут я подумал, что было бы проще взять тот же фреймворк, что на сайте-источнике.

Но не тут было. MD оказался не готовым решением от Гугл, а спецификацией, описывающей дизайн. Реализации этой спецификации для разных фреймворков и платформ, очевидно, имеют отличия.

Многоликий Material

Реализаций насчитываются десятки. Только для веб-фреймворков их не менее дюжины. В реализации для Android можно даже было не сомневаться, поскольку это продукт Гугл. Но и для iOS уже разработаны компоненты и шаблоны по спецификации MD.

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

Давайте посмотрим, что уже сделано.

Реализации Material Design для web

Material Design Light

Этот FW можно считать официальной версией MD для web. Так как разработкой занимается компания Google. Но слово «Light» в названии ясно даёт нам понять, что это не исчерпывающее решение спецификации.

Это не плохой старт для веб-приложения, т.к. реализованы основные идеи MD, компоненты, скрипты, элементы форм и различные анимационные эффекты.

Сайт проекта MDL .

Material UI

Реализация интерфейса пользователя в виде набора компонентов для React. Да, детище facebook не осталось в стороне.  Это очень детальная проработка спецификации и мне кажется даже немного больше, чем закладывали Гугл :)

Essence

Эссенция также сделана на React. Скачать файлы можно с GitHub, а вот доки периодически не доступны.

Angular Material

Ангулярщикам повезло, они имеют возможность работать с полноценным MD благодаря проекту Angular Material без всяких там Light.

Компоненты, материал иконки и скрипты — все вплетается в канву angular.

LUMX

Ещё одна качественная реализация MD и снова на Angular. Дополнительно требуется jQuery, Velocity и Momentum. Авторы явно не стремились изобретать велосипед и пользуются привычными для себя инструментами, чтобы воплотить заветы Гугла.

Material Design для Bootstrap CSS Framework

Для бутстрапа известно множество проектов (тем), которые воплощают принципы материал в этом популярном фреймворке. Часть из них распространяется бесплатно только в урезанной версии (этакая замануха).

Давайте попробуем сравнить их хотя бы точки зрения цены.

BMD – Bootstrap + Material Design Стоимость обычной лицензии — 10$ (использование только в одном проекте).
Bootstrap Material Бесплатно, можно поддержать проект через paypal, реализованы многие элементы спецификации, работа продолжается. Из бесплатных, наверное, наиболее «юзабельна».
MD Bootstrap PRO версия стоит на 1 проект — 79$, есть среди прочего и неограниченная лицензия — 799$. Сравнить преимущества PRO и Free версий можно на сайте.
Paper Bootswatch for Bootstrap Бесплатно. Это фактически тема для bootstrap с элементами MD, но очень поверхностно.
Daemonite’s Material UI Бесплатно, но сыро. Отличия от базового Bootstrap видны лишь искушенному глазу, а до реализации всех фишек MD — как до Луны.

 Materialize

Идеи MD воплотила группа студентов из Carnegie Mellon University. Китайцы решили потягаться с командой гугл (проект MDL) и  «запилили» свою реализацию.

Они не только не упустили ничего из концепции, но и добавили от себя кучу скриптов, очень часто используемых для верстки сайта как различные плагины js и jQuery. Т.е. мы получаем очень широкий инструментарий как в плане шаблона, так и в плане анимации.

Сложно сказать насколько качественный продукт у них получился (вопросы кросс-браузерной совместимости, адаптивности и т.п. можно выяснить только путем тестирования). Все таки настораживает, что команда состоит из студентов. :)

Material Foundation

Этот проект после китайцев смотрится весьма скромно. Реализованы лишь некоторые элементы MD, никаких дополнительных скриптов и плюшек. Не тот размах :). Но проект заслуживает внимания, т.к. бесплатен и самодостаточен.

Leaf BETA

Leaf находится в состоянии beta, так что придираться особо не приходится. Сделано далеко не всё и не так хорошо, как в том же Material Foundation. Проект содержит кое какие скрипты, значит автор не собирается ограничиваться только компонентами. Но до китайцев автору пока очень далеко.

Написать комментарий

Мало букафф? Читайте есчо !

Отключить на yandex карте изменение масштаба колесом прокрутки мыши

Декабрь 21, 2017 г.

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

Читать

Главная страница в Drupal

Ноябрь 20, 2015 г.

Главная страница является лицом всего сайта. Обычно она имеет собственное оформление, особенные графические и динамические элементы. Посмотрим как устроена главная страница в Drupal. После установки drupal предлагает в качестве главной страницы ...

Читать

 

Комментарии к «Material Design — манифест дизайна от Гугл»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: