Разные способы применения Material Design в ваших проектах

Со дня своего первого релиза в июне 2014-го года концепция Material Design, изначально разработанная компанией Google, стала самой настоящей современной классикой. В последние дни дизайн в области веба и мобильных приложений следует стремлению к простоте и аккуратности. Одна из главных целей современных дизайнеров – сохранять свои творения настолько простыми и не загруженными лишними элементами, насколько это возможно, при этом не забывая о внешней привлекательности. Минимализм и яркие цвета стали главными отличительными чертами данного подхода. Material Design даже вышел за рамки веба и мобильных приложений, для которых изначально был предназначен. Последние десктопные версии браузера Google Chrome были разработаны, следуя его основным положениям. В этой статье мы поговорим о пяти фреймворках, с помощью которых вы сможете создавать сайты и мобильные приложения, которые следуют концепциям Material Design. Мы попытались сфокусировать свое внимание на инструментах разного рода, чтобы вам было легче найти среди них те, которые лучше всего соответствуют вашим требованиям и уровню знаний. Итак, начнем.

Material-UI

Если вы следите за последними новостями из мира веб-разработок, вы наверняка знаете о том, что React, разработанный компанией Facebook довольно популярен в последнее время. Передовые технологии, такие как Virtual DOM или изоморфный JavaScript, используемые в этом фреймворке, помогают достичь достаточно высокой производительности. Прибавьте к этому возможность глубокой кастомизации созданных компонентов и переиспользования кода – и вы поймете, почему React так популярен. Material-UI это фреймворк, который предоставляет вам возможность работать с набором React компонентов, реализующих идеи Material Design. Компоненты доступны в светлом и темном оформлении. Документация довольно детальна и подробно описывает процесс установки. Но есть кое что, о чем вам нужно помнить, прежде чем начинать знакомство c React. Этот фреймворк использует язык JSX, таким образом работа с ним может оказаться несколько не привычной, если вы с ним не знакомы. 

  

Webix

Если вам нужен набор продвинутых UI компонентов, доступных “из коробки”, вы можете обратить свое внимание на Webix. В отличие от React, этот фреймворк не дает такой свободы вашему воображению, если говорить о возможности кастомизации. Но Webix дает вам доступ к более продвинутым версиям таких компонентов как деревья или таблицы. Набор доступных виджетов варьируется от простой кнопки до чего-то более сложного, как например, Kanban. Базовых знаний JavaScript будет вполне достаточно для начала работы. Документация хорошо написана и содержит большое количество пошаговых руководств. Но есть и плохие новости. Они состоят в том, что Webix не поддерживает Material Design по умолчанию. Для того, чтобы добавить его к вашему проекту, следуйте данному руководству.

DHTMLX Suite

Теперь давайте поговорим о более комплексных решениях. DHTMLX Suite это JavaScript UI библиотека для создания кросс-браузерных веб и мобильных приложений. Помимо, собственно, набора UI компонентов разной степени сложности, таких как графики и календари, вы можете использовать доплнительные инструменты разработки. Среди них, например, есть Form Builder и Visual Designer, инструменты для визуального создания пользовательских интерфейсов. Начиная с версии 5.0, Material Design доступен в этой библиотеке по умолчанию. Таким образом, никакой дополнительной работы для его добавления в ваш будущий проект вам делать не придется. 

Angular Material

Вы, возможно, слышали о таком фреймворке как Angular и почти наверняка работали с ним, если у вас есть какой-то опыт веб-разработки. Если вам пришлись по вкусу его возможности, вы можете попробовать также и Angular Material. Это полнофункциональный фреймворк, который разрабатывается при поддержке Google. Такие два фактора, как популярность самого Angular и поддержка Google сделали Angular Material довольно популярной технологией. Детальная документация, привлекательные демо и подробно описанная справка по API делают работу с этим фреймворком простым и приятным занятием. 

Materialize

Если вы только планируете создать ваш первый проект, который реализовал бы подход Material Design, Materialize мог бы быть хорошим началом для вас. Он работает почти так же, как и довольно известный Bootstrap и доступ к элементам можно получить через CSS классы. Вы можете начать использовать этот фронтенд фреймворк также, как и Bootstrap. Просто добавьте к проекту нужный CSS файл – и приступайте к работе. Materialize довольно прост в освоении, а SASS версия позволяет выбрать только те компоненты, которые вам действительно нужны.

Заключение

Судя по всему, Material Design с нами надолго. Он довольно хорошо исследован и тщательно доведен до ума. Изо дня в день вы можете увидеть все больше и больше новых сайтов и мобильных приложений, следующих этой концепции подхода к дизайну. Обновленные версии давно знакомых приложений также довольно часто обнаруживают в себе признаки этого подхода. Для того, чтобы быть трендовым и современным, вы должны держать нос по ветру и осваивать самые передовые техники. И сегодня одной из таких техник является Material Design. Сложно перечислить все имеющиеся на данный момент фреймворки, позволяющие реализовать этот подход в вашем проекте. И каждый день появляются все новые. Но мы попытались познакомить вас с самыми разными из них. Вы можете выбрать, например, легковесный и простой в освоении Materialize, который придется по вкусу новичкам. С другой стороны, DHTMLX Suite является набором довольно разнообразных инструментов и компонентов. Мы надеемся, что вы найдете для себя именно тот фреймворк, который наилучшим образом соответствует вашим нуждам и будет в состоянии помочь вам воплотить свои идеи в жизнь.

Originally appeared on: http://www.codeproject.com/Articles/1110002/Different-Ways-of-Material-Design-Implementation

Covered by The Code Project Open License (CPOL) 1.02