6 способов, как Progress Design System Kit делает UI-дизайн веселым – CodesCode

Изучите систему дизайна Progress от Telerik, полный дизайнерский язык для создания простых, интуитивных и красивых впечатлений.

В этой статье мы рассмотрим Progress Design System от Telerik – это язык дизайна, который позволяет создавать простые, интуитивно понятные и красивые пользовательские интерфейсы. Мы расскажем о том, почему Progress Design System выделяется среди других UI-решений и как он может стать основой для хорошего пользовательского интерфейса.

Эта статья создана в партнерстве с Progress Design System от Telerik. Благодарим вас за поддержку наших партнеров, которые делают CodesCode возможным.

• Progress Design System от Telerik
• О дизайн-системах
• Готовые темы
• Без CSS-кодирования (базовые или продвинутые настройки)
• Встроенное сотрудничество
• DIY для дизайнеров
• Поддержка Figma
• Подробная и интерактивная документация по фронтенду
• Измените свой рабочий процесс

Progress Design System от Telerik

Компонентные библиотеки Kendo UI от Telerik популярны в сообществе разработчиков, и растет спрос на UI-дизайн. Progress Design System имеет уникальный подход к стилизации пользовательского интерфейса, так как он нацелен как на разработчиков, так и на дизайнеров. Это позволяет обеспечить своевременную реализацию без проблем с UI.

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

Многие пользователи Telerik и Kendo UI – это разработчики бэкенда, которым не хватает времени или навыков для выполнения сложных требований по стилизации. Дизайнеры также работают с разработчиками с помощью инструментов, чтобы помочь им внести свой вклад в процесс дизайна. Progress решает обе эти проблемы в дизайнерском и разработическом процессе.

О дизайн-системах

Дизайн-система помогает команде создать согласованный и интуитивно понятный пользовательский интерфейс. Это закрепляет общий вид и ощущение приложения.

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

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

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

Команды, не имеющие опыта работы с дизайнерами, также могут получить пользу от Progress Design System. Фулл-стек разработчики часто не имеют достаточных навыков в дизайне для создания хорошего пользовательского интерфейса. Progress направлен на помощь в достижении отличного дизайна UI с минимумом усилий.

Progress имеет уникальный подход к решению этой проблемы с помощью Progress Design System Kit.

Давайте поговорим о том, что предлагает этот Design System.

Готовые темы

Компонентные библиотеки Kendo UI поставляются с четырьмя профессионально разработанными темами (Default, Material, Fluent и Bootstrap). Разработчики и дизайнеры могут выбрать любую из них, и она будет автоматически применяться в проекте. Это самый простой путь к отличному пользовательскому интерфейсу, если не требуются настройки.

• Default: нейтральный стиль, основанный на дизайн-системах Telerik и Kendo
• Bootstrap: соответствует стилю Bootstrap 5
• Material: следует руководству Material Design Guidelines
• Fluent: реализует Microsoft Design System

Темы – это тщательно созданные коллекции визуальных атрибутов, таких как цвета, шрифты и отступы. Доступные дизайн-системы, такие как Material, Bootstrap и Fluent, пользуются широкой популярностью и хорошо известны. При применении темы вы добиваетесь последовательного внешнего вида без дополнительных усилий.

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

Бесплатные настройки без CSS (основные или продвинутые)

ThemeBuilder – это очень мощный инструмент дизайна, который помогает разработчикам и дизайнерам делать глобальные или детальные настройки без необходимости писать сложный CSS.

С ThemeBuilder практически нет крутого обучения, потому что это визуальный инструмент. Вы можете стилизовать каждый элемент своего компонента Telerik и Kendo UI, от яркого основного цвета до самой маленькой детали.

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

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

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

Вы можете ознакомиться с ThemeBuilder с помощью бесплатной пробной версии на 7 дней.

Встроенная коллаборация

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

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

Кроме того, руководители могут назначать разрешения для каждого проекта для дополнительного контроля команды. Команда может просто сосредоточиться на выполнении работы, не засоряя себя ненужными проектами.

Создай сами

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

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

Поскольку Telerik и Kendo UI развиваются, дизайнеры могут следить за последними функциями компонентов благодаря автоматическим обновлениям. Это позволяет плавно настраивать стили в соответствии с обновленным HTML, обеспечивая последовательный опыт и новые возможности компонентов.

Поддержка для Figma

Дизайнеры могут включать переменные Sass/CSS из Figma в ThemeBuilder. Брендовые элементы дизайна, такие как цвета, типография и эффекты, также могут быть импортированы.

Плагин ThemeBuilder для Figma может экспортировать следующее из Figma:

• Стили, такие как цвета, типографика и эффекты: эти стили представляют собой переменные Sass или CSS
• Пользовательские SVG-иконки: они экспортируются и преобразуются в шрифты иконок

Для установки плагина для Figma вам просто понадобится учетная запись Figma в качестве предварительного условия. Затем найдите плагин Progress ThemeBuilder для Figma (доступен через страницу сообщества Figma) и нажмите Установить.

Чтобы еще больше усилить сотрудничество между дизайнерами и разработчиками, Telerik и Kendo UI поддерживают Figma двумя способами:

• Наборы пользовательского интерфейса Figma: Progress предоставляет наборы пользовательского интерфейса Figma, которые представляют каждый компонент библиотеки. Дизайнеры могут создавать точные до пикселя дизайны того, как они представляют окончательный продукт.
• Импорт токенов дизайна в ThemeBuilder: Разработчики могут получить токены дизайна прямо из Figma, чтобы еще более упростить передачу между дизайнерами и разработчиками.

Система дизайна Progress создана с учетом потребностей и дизайнеров, и разработчиков, чтобы минимизировать неожиданные задержки в доставке проекта.

Подробная и интерактивная документация фронтенда

Telerik и Kendo UI имеют документацию лучшего класса. Она подробная, всесторонняя и интерактивная. Разработчики и дизайнеры могут узнать о системе дизайна Progress в целом и о настройках разметки, стилизации и конфигурации каждого компонента.

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

Один конкретный пример – документация по компоненту автозаполнения, созданная в React. Разработчики могут быстро оценить разметку и доступные свойства. Они также могут выбрать между JavaScript и TypeScript в качестве языка разметки.

Если React — не ваш инструмент выбора, доступны и другие варианты, такие как Angular, Blazor, jQuery и Vue. Документация всесторонняя, так что вы получите поддержку вне зависимости от выбранного инструмента.

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

Примечание: Telerik и Kendo UI все еще работают над документацией, и на момент написания этого текста не все компоненты были опубликованы. Надежда заключается в том, чтобы достичь этой цели к 2024 году.

Измените свой рабочий процесс

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

Поделиться этой статьей

• design software