,

Топ 7 фреймворков для создания сайтов в «материальном» стиле

Как вы могли догадаться, сегодня речь пойдет о фреймворках для создания сайтов, которые базируются на «материальном» дизайне.
Появился этот дизайн благодаря компании Google 25 июня 2014 года. Идея дизайна заключается в карточках, которые присутствуют везде, имея красивую анимацию и мягкие тени. Так же дизайнеры Google решили, что острых углов нигде быть не может, карточки между собой должны переключаться плавно и почти незаметно.

Первыми этот дизайн получили Android Lollipop и некоторые встроенные приложения, а затем и сайты Google и Android. Это решение для веб-страниц людям очень понравилось, и они решили сами написать сайт, как они думали, в материальном стиле. Но тут их ждала неудача. Проблема в том, что они не читали мануалы Google, в которых подробно описываются принципы дизайна. В итоге у них получался неуклюжий flat вперемешку с metro и «псевдоматериальным» дизайном.

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

Перейдем ближе к делу. Давайте же посмотрим на топ 7 (по моему мнению) фреймворков в «материальном стиле»

7. Material Design for Bootstrap

Топ 7 фреймворков для создания сайтов в «материальном» стиле
Довольно хороший, красивый фреймворк. В нем присутствует немного плавной анимации, такой как в чекбоксах и в переключателях. Но, к сожалению, на этом красота закончилась. Много чего еще не сделано, некоторые элементы вообще не имеют анимации, а тени смотрятся слегка жесткими. Больше мне сказать нечего. Переходим к следующему месту.

6. Polymer

Топ 7 фреймворков для создания сайтов в «материальном» стиле
Вы можете удивится, почему же сайт, который советуют использовать даже на Википедии оказался на 6 месте? Все очень просто. Во-первых, сами страницы фреймворка частично выполнены не в «материальном» стиле, во-вторых кое-где отсутствует шрифт Roboto, который является фишкой дизайна. Функций тут немного больше, но он и запутаннее, и сложнее. Сперва он мне показался красивым и идеальным, но по мере его изучения я стал понимать, что ошибался.

5. Material Design Lite

Топ 7 фреймворков для создания сайтов в «материальном» стиле
Этот фреймворк был написан всезнающим Google. Вы можете верить, можете нет, но я получил уйму радости, когда увидел новость о выпуске официального гугловского фреймворка. Сперва все было нормально, необычно. Но потом в глаза стали бросаться некие кривые элементы. Вот сравним полосу прогрузки на их фреймворке и в пятом Android-е. Они разные, и на сайте сделано очень криво. Это печально, ведь я ожидал увидеть нечто стоящее. Зато мобильная версия выглядит довольно приятно и красиво.

4. Material

Топ 7 фреймворков для создания сайтов в «материальном» стиле
Фреймворк с таким «оригинальным» названием отличается красотой и простотой. Порадовала правая выдвижная панель, хотя можно было объединить с левой. Довольно красивая и плавная анимация. Сильно понравилась прогрузка контента, которая представлена на главной странице. Так же удивила полоса загрузки, прямо как в Google Now. Но есть всего один минус. Анимация у выпадающих списков похожа на открытие приложений в Android Kitkat. А так отличный и удобный фреймворк.

3. Material UI

Топ 7 фреймворков для создания сайтов в «материальном» стиле
На первый взгляд ничего особенного. Но узнав его ближе, можно понять, что он почти идеален. Пожалуй, это первый фреймворк на котором я бы написал свой сайт. Функций очень много, везде плавная анимация. Даже выпадающий список выглядит идеально. Самое приятное, что тут появились 3 фичи: выбор даты, выбор времени и возможность смены темы на темную (ну прям как в Android M). Так же порадовала адаптация под мобильные устройства. Такое впечатление, что пользуешься не сайтом, а нативным приложением Android-а. Но он все еще сложен в освоении, страницы сайта выглядят несколько неуклюже.

2. Angular Material


Топ 7 фреймворков для создания сайтов в «материальном» стиле
Действительно почти лучший фреймворк. Много функций, красивые табы, нижняя выдвижная панель, красивые выпадающие списки. Порадовала анимация прогреса, особенно горизонтальная. В отличии от других фреймворков, здесь есть настоящая анимация буферизации. Но есть несколько но. Во-первых, если на самых неидеальных фреймворках присутствовала настоящая Lollipop-овская анимация чекбокса, то тут ее нет. Во-вторых почти отсутствуют разные виды шапок сайта, хотя можно будет обойтись и одной. В общем фреймворк отличный, но не идеальный.

1. Materialize

Топ 7 фреймворков для создания сайтов в «материальном» стиле
Очень красивый, удобный, легкий в изучении фреймворк. Присутствует множество интересных функций. Это увеличение изображений, hover эффекты на карточках, разные виды таблиц, выпадающие списки, красивые модальные окна, иконки и многое другое. Именно на этом фреймворке я и сделал свой сайт. Скажу вам, что единственные его недостатки – недоработанность мобильной версии, в которой текст может выходить за карточку, и нечастый выход обновлений, который иногда требует переписать некоторые страницы. Например, иконки. Раньше они были отдельным шрифтом, который сделали создатели Materialize и иконки надо было вставлять одним способом. В прошлом месяце они изменили положение, перейдя на шрифт Google. В последствии пришлось немного изменить код, что бы иконки работали правильно.

Подведем итоги

Многие пытались создать свои фреймворки, но сделать что-то стоящее удалось немногим. В данной статье описано лично мое мнение и, если вы с ним не согласны, я готов выслушать ваше. На вкус и цвет товарища нет.
Последнее изменение:
 
justmax437
justmax4371, 9 июля 2015 - 12:43   (...)
Убери ссылки на сайты фреймворков из текста. Вставь их прямо в заголовки, так будет лучше.
Ответить
TochikUladik
TochikUladik, 9 июля 2015 - 12:53   (...)
Спасибо за совет. Сделано)
Ответить
Hzz
Hzz2, 9 июля 2015 - 17:56   (...)
Необычно, но я все равно за Materialize(сайт на нем сделал, и не раз). Кстати есть статья на подобную тему, можно ознакомиться: ссылка
Ответить
TARANS_
TARANS_3, 10 июля 2015 - 20:09   (...)
где тот человек которому надоел материал? я тебя тут что то не нашёл
Ответить
Androider720
Androider7207, 11 июля 2015 - 10:02   (...)
, мне он не надоел
Ответить
justmax437
justmax4371, 11 июля 2015 - 11:13   (...)
Я тут
Ответить
speed8
speed816, 11 июля 2015 - 12:04   (...)
Мда.
Ответить
denosaur
denosaur31, 10 июля 2015 - 22:26   (...)
«Очень красивый, удобный, легкий в усвоении фреймворк» (про Materialize)
Усвоении?
Ответить
Androider720
Androider7207, 11 июля 2015 - 09:49   (...)
Норм тема. Как раз то что я искал, но нужно добавить в топ ещё и daemonite.github.io/material/
Ответить
TochikUladik
TochikUladik, 11 июля 2015 - 10:02   (...)
Отличный фреймворк) Чам-то похож на materialize, но только с меньшим количеством функций. Добавлю
Ответить
Androider720
Androider7207, 11 июля 2015 - 12:36   (...)
Ну я бы не сказал что он с меньшим. В некторых моментах он даже поудобнее materialize будет.
Ответить

Добавить комментарий
Если нужно ответить кому-то конкретно,
лучше нажать на «Ответить» под его комментарием