С плюсами и минусами для каждого.

Комплекты пользовательского интерфейса Frontend позволяют разработчикам быстро запускать цифровые продукты, не обращая внимания на язык дизайна, окружающий их кодированные компоненты. Они также позволяют UX-дизайнерам быстро перебирать потоки продуктов и варианты тестирования на этапе разработки продукта MVP.

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

В первые дни существования MVP (минимально жизнеспособного продукта) наличие возможности для стороны UX-дизайна и стороны кодирования быстро объединить свои усилия единым образом повышает производительность группы в десять раз. Эту роль выполняют комплекты UX.

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

Осколки по версии дизайна

Цена: бесплатно и премиум
Framework: Bootstrap 4
Доступно для: Vue, React, Bootstrap HTML.

(БЕСПЛАТНАЯ версия включает в себя некоторые компоненты, которых нет в версии PRO, поэтому обратитесь к демонстрациям обоих, если вы ищете что-то конкретное)

Плюсы:

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

Минусы:

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

Посмотреть живые демонстрации: Design Revision

Xtreme Vuesax от WrapPixel

Цена: бесплатно и премиум
Framework: Bootstrap 4
Доступно для: Vue, React, Angular, Bootstrap HTML.

Плюсы

  • Основан на Vuesax, поэтому вы получаете всю мощь этого набора и его пользовательского сообщества компонентов прямо из коробки.
  • Включает светлые, темные и цветные темы
  • Множество компонентов, в том числе пользовательский интерфейс в стиле Trello с возможностью перетаскивания и мастер форм для быстрого создания многостраничных форм.
  • Некоторые из наиболее полных таблиц, которые я когда-либо видел. Если ваше приложение загружено столом, обязательно посмотрите это
  • Компонентный код довольно обширен и не просто заглушен, как во многих других наборах.
  • Библиотека значков для быстрой справки

Минусы

  • Это не самый красивый комплект, но после небольшой настройки вы сможете адаптировать его к своему собственному стилю.
  • На основе Vuesax (верно, это и за, и против). Согласно Vuesax на веб-сайте, его не рекомендуется использовать в приложении производственного уровня, однако в зависимости от того, что вы создаете, это все равно кажется жизнеспособным вариантом или хорошим выбором для MVP. Проведите свое исследование и соответственно сделайте правильный выбор.

Посмотреть живые демонстрации: Xtreme Vuesax

Элемент

Цена: бесплатно
Framework: Bootstrap 4
Доступно для Vue, React, Angular.

Плюсы

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

Минусы

  • Язык по умолчанию - китайский. Для настройки английского языка требуются некоторые настройки i18n.
  • Не имеет много готовых макетов или структурированных страниц.
  • В файле эскиза не используются символы или функции адаптивного макета.

Посмотреть живые демонстрации: Элемент

Вечнозеленый по сегментам

Цена: бесплатно
Фреймворк: UIBox (собственный фреймворк CSS-in-JS)
Доступен для: React

Плюсы

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

Минусы

  • Никаких страниц или макетов здесь нет, здесь только базовые компоненты, ребята
  • Довольно подробные названия компонентов
  • Настройка несколько ограничена такими компонентами, как таблицы

Посмотрите здесь: Evergreen

Ребасс

Цена: бесплатно
Framework: Reflexbox (собственная сеточная система Rebass)
Доступно для: React

Плюсы

  • Минимальный набор только необходимых компонентов
  • Включает опции темного режима
  • Повышает ремонтопригодность визуальных стилей
  • Функциональные компоненты пользовательского интерфейса без сохранения состояния
  • Поддерживает тематику

Минусы

  • Некоторым разработчикам может не понравиться Reflexbox, но есть простые способы обойти это
  • Стиль CSS-in-JS Rebass может быть не для всех (это не для меня)

Ссылка: Ребасс

Бонус №1:

Создайте свое (с кикстартом)

Цена: потратьте время сейчас, сэкономьте время позже
Framework: Custom
Доступно для: всего (!)

Если вы хотите быстро создать и запустить свой продукт как можно скорее, определенно выберите проверенный комплект пользовательского интерфейса, особенно если дизайн не входит в ваш список навыков.

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

На ваш выбор доступно множество минимальных, независимых от JS-фреймворков CSS-фреймворков. Skeleton, PureCSS, MiniCSS или Milligram - все отлично. Однако были вещи, которые мне нравились и не нравились в каждом из них. Одна из неприятностей - включение системы сеток.

Почему? Потому что в наши дни CSS Grid поддерживается почти в каждом браузере, он невероятно мощный и простой в освоении. Если вы не знакомы, я рекомендую вам посмотреть это выступление Рэйчел Эндрюс.

Чтобы получить все, что мне нужно, без того, чего у меня не было, я решил создать свой собственный минимальный CSS-фреймворк с открытым исходным кодом. Я называю его Blueframe, и вы можете загрузить его с моего Github . Он включает CSS Normalize при использовании многих имен служебных классов Bootstrap для более легкого внедрения. Если вы знакомы с классами Bootstrap, вы уже знаете, как использовать Blueframe.

Стоит ли переходить на полностью кастомизацию?

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

Создание собственного набора пользовательского интерфейса позволяет вам разработать уникальный стиль, соответствующий вашим дизайнерским предпочтениям, а не похожий на любое другое приложение на рынке. Evergreen и Rebass - отличное место для начала, но если React вам не по душе, отличной идеей будет начать с нуля с Blueframe, Tailwind, Skeleton или любой другой минимальной интерфейсной инфраструктурой.

Плюсы

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

Минусы

  • На начало уходит много времени, но в итоге окупается
  • Обслуживание вашего UI-кита может занять второе место для выполнения проектов. Для некоторых это может не стоить времени, в то время как другие могут счесть его более эффективным в долгосрочной перспективе.

Загрузите мой бесплатный стартовый комплект Blueframe здесь: Blueframe