ТОП 10 инструментов для UX/UI-дизайнеров 2024 — рейтинг лучших сервисов для работы с UX/UI
Успех продукта во многом зависит от того, насколько удобно он воспринимается пользователем. UX/UI-дизайнеры играют важную роль в создании интерфейсов, а их инструменты становятся все более продвинутыми.
В статье мы рассмотрим лучшие сервисы для работы с UX/UI. Неважно, новичок вы в этой сфере или профессионал, представленные инструменты окажутся незаменимыми помощниками на всех этапах разработки. Мы сравним платформы по разным критериям, чтобы вы смогли выбрать наиболее удобные и подходящие.
Что такое UX/UI
UX (user experience) — это пользовательский опыт. То, каким образом пользователь взаимодействует с интерфейсом и насколько сайт или приложение для него удобны. В UX входит:
- навигация по сайту;
- функционал меню;
- результат взаимодействия со страницами;
- коммуникация: диалоговые окна, функционал кнопок, настройки поиска и форм.
Чем лучше продуман UX, тем выше вероятность того, что пользователь задержится на сайте.
UI (user interface) — это пользовательский интерфейс. Оформление сайта: сочетания цветов, шрифты, иконки и кнопки.
При проектировании CRM-систем, дашбордов, внутренних рабочих интерфейсов UX выходит на первое место. Главное, насколько удобно будет размещена информация. Визуал находится на втором плане.
На UI обращают больше внимания при создании сайтов для продвижения товаров и услуг премиум-класса. Главная задача в этом случае — не впопыхах подвести пользователя к целевому действию, а дать ему рассмотреть интерфейс и погрузить в атмосферу.
7 шагов разработки продукта по принципам UX/UI-дизайна
Работа над сайтом или приложение с точки UX/UI-дизайна может строиться по-разному. Однако стоит выделить общие моменты работы над проектом.
Сбор информации
Цель — получить как можно больше информации от клиента через бриф или интервью. Необходимо задать следующие ключевые вопросы:
- какая задача приложения/сайта;
- чем новый проект должен отличаться от существующих продуктов;
- кто основные конкуренты.
Важно сформировать пожелания по примерной структуре (сколько должно быть страниц, что нужно показать обязательно, какие стили нравятся клиенту).
Аналитика
На следующем этапе нужно изучить конкурентов заказчика и проанализировать целевую аудиторию — описать ее поведение и то, как она принимает решения. Для UX/UI важно, как именно пользователи совершают покупки (рационально или эмоционально). И на какие триггеры обращает внимание аудитория: цена, уникальность, доступность.
Результаты аналитики оформляются в виде майндмэпа. Пример:
Структура
Цель этапа — определить задачи сайта и разработать Customer Journey Map — карту пользовательских путей. В ней прописываются все сценарии взаимодействия пользователя с ресурсом. Что обычно указывают в Customer Journey Map:
- с помощью каких источников пользователь попал на сайт;
- что он решал при взаимодействии;
- что помогло ему помешать;
- как именно он дошел до цели.
CJM помогает в создании структуры будущего сайта. UX/UI-дизайнер примерно поймет, что будет находиться на главной странице, какие пункты должны быть в верхнем меню и так далее.
Прототип
Прототип — это «скелет» сайта, который показывает его основные блоки. В нем схематично отмечают, какой контент и какие элементы будут находиться на каждом экране, а также продумывают логику взаимодействия между элементами.
Это один из самых важных этапов разработки: в нем закладывается будущий функционал сайта. При создании прототипа учитывается информация, полученная в предыдущих шагах:
- поведение целевой аудитории;
- сценарии взаимодействия с сайтом;
- разработанная структура веб-ресурса;
- лучшие приемы конкурентов.
Пример схематичного прототипа одного из сервисов. Он пустой, зато уже понятно, как будут располагаться все элементы.
Работа с контентом
На этапе создания структуры можно отметить, какой контент потребуется от заказчика (например, изображения, видео, инфографика). Но прототип позволит точно оценить формат материалов — какого размера должны быть фотографии и текстовые абзацы.
Обычно работа с контентом происходит так:
- Клиент составляет контент.
- UX/UI-дизайнер дает рекомендации заказчику (например, в каких цветах и стилистике сделать фото и видео, чтобы они удачно вписались в общую идею продукта).
Для подготовки контента дизайнер отправляет заказчику таблицу. В ней указывается, какой тип контента требуется, его объем и место размещения.
Дизайн — UI
После создания прототипа начинается другая работа. UI-дизайнер переходит к разработке визуальной части сайта:
- подбирает фирменные шрифты и цвета (на основе предыдущих исследований аудитории);
- разрабатывает набор базовых элементов сайта (иконки, кнопки, поля ввода, строки поиска);
- визуализирует механики взаимодействия пользователя с интерфейсом (прорабатывает необходимую анимацию).
Топовый дизайнер учитывает графические тренды. Но важно всегда помнить о более главной вещи — удобство для целевой аудитории.
Тестирование
После верстки сайта его переносят на тестовый домен, чтобы проверить, насколько интерфейс удобен в действии. Для качественного теста набирается фокус-группа, состоящая из представителей целевой аудитории.
Тестирование может происходить в двух форматах:
- Пользователи выполняют на сайте определенные задачи, которые ведут к целевому действию. Затем они заполняют опросник, где делятся своим опытом.
- Группа выполняет такой же список задач, но на компьютеры устанавливается специальная программа. Софт отслеживает поведение пользователя: движения его глаз и мыши. Программа фиксирует, на что в первую очередь юзеры обращают внимание, как они взаимодействуют с интерфейсом, где встречаются трудности.
Тестирование помогает понять, что в интерфейсе нужно подкорректировать для улучшения пользовательского опыта.
Ниже рассмотрим лучшие инструменты для UX/UI-дизайнеров и сравним их по разным критериям.
Создание интерфейсов
Это разработка визуальных и интерактивных элементов, составляющих пользовательский интерфейс продукта (веб-сайт, мобильное приложение или другое цифровое решение).
|
Сервис
|
Создание интерфейсов
|
|
ProtoPie
|
Сервис ориентирован на прототипирование и создание интерактивных интерфейсов, но не предоставляет инструменты для создания статичных UI-макетов.
ProtoPie больше подходит для создания сложных интерактивных анимаций, имитирующих поведение реальных приложений.
|
|
FigJam
|
FigJam — это сервис для совместной работы и мозгового штурма. Это не полноценный инструмент для создания UI-дизайнов, хотя может использоваться для быстрых набросков и идей.
Основная цель сервиса — визуализация идей, а не детальная проработка интерфейсов.
|
|
Readymag
|
С помощью сервиса создают веб-проекты (лендинги, журналы, портфолио и презентации). Сервис подходит для визуального веб-дизайна, чем для создания UI-интерфейсов приложений.
Предназначен больше для веб-интерфейсов, но не предоставляет гибкости, необходимой для разработки сложных UI.
|
|
Webflow
|
Мощный инструмент подходит для визуального веб-дизайна и разработки. С его помощью можно создать веб-интерфейсы с адаптацией под различные устройства.
Webflow также подходит для создания сложных интерфейсов, особенно если цель — запустить их в продакшн без программирования.
|
|
Sketch
|
Один из самых популярных инструментов для создания UI-дизайнов. Сервис предоставляет все необходимые функции для разработки интерфейсов (векторные инструменты, библиотеки компонентов, систему символов, сетки и стили). Подходит для создания детализированных макетов и дизайн-систем.
|
|
Attention Insight
|
Attention Insight — это сервис для анализа и прогнозирования поведения пользователей, основанный на искусственном интеллекте.
Платформа используется для оценки существующих интерфейсов, но не предназначен для их создания. Основная задача инструмента — предоставить аналитику, которая поможет улучшить UI/UX.
|
|
User Interviews
|
Площадка создана для поиска, проведения интервью и тестирований. Сервис не предоставляет функции для создания интерфейсов. Зато помогает UX/UI-дизайнерам получить обратную связь от пользователей на стадии тестирования.
|
Sketch и Webflow предлагают полноценные возможности для создания UI-дизайнов. ProtoPie ориентирован на интерактивные прототипы, FigJam — на мозговой штурм и совместную работу, а Readymag подходит для создания веб-дизайна простых проектов. Attention Insight и User Interviews полезны на этапах тестирования.
Интерактивные элементы и анимации
Интерактивные элементы — это компоненты интерфейса, которые реагируют на действия пользователя. Например:
- Кнопки. Элементы, на которые нажимают пользователи для совершения определенного действия (например, заказать товар).
- Формы ввода. Поля, куда пользователи вводят текстовые данные, выбирают опции из выпадающих списков, ставят галочки и другое.
- Ссылки и навигация. Элементы, позволяющие перемещаться по страницам.
- Карты и интерактивные изображения. Объекты, на которые пользователи могут кликать или взаимодействовать для получения дополнительной информации или выполнении действий.
Сюда также относятся меню и выпадающие списки, слайдеры и карусели, чекбоксы.
Анимация — это изменение состояния интерфейса. Она добавляет динамику и помогает пользователям лучше понять, что происходит на экране. Это могут быть обычные переходы между страницами, анимации при наведении курсора (например, изменение цвета кнопки), параллакс-эффекты и так далее.
|
Сервис
|
Интерактивные элементы и анимации
|
|
ProtoPie
|
Продвинутые анимации. Можно добавить жесты, переходы, условия, изменяющиеся состояния, анимации и реакции на взаимодействия пользователя. Есть сложные анимации: триггеры и логические операции.
|
|
FigJam
|
Можно создавать базовые интерактивные элементы (ссылки и заметки). Сервис не поддерживает сложные анимации и переходы.
|
|
Readymag
|
Можно добавлять простые анимации, такие как параллакс-эффекты, плавные переходы, появление элементов при прокрутке и клике.
|
|
Webflow
|
Можно настроить сложные анимации, переходы между состояниями, триггеры на основе прокрутки, кликов, перемещений мыши и других действий.
|
|
Sketch
|
Сервис не поддерживает продвинутые интерактивные элементы и анимации.
Для добавления интерактивности и анимаций в Sketch можно использовать плагины (например, Anima) или экспортировать макеты в другие инструменты (InVision или Figma).
|
|
Attention Insight
|
Нет.
|
|
User Interviews
|
Нет.
|
Наиболее широкие возможности для создания интерактивных элементов и сложных анимаций предлагают сервисы ProtoPie и Webflow.
Коллаборация (совместная работа)
Когда несколько пользователей или команды могут вместе работать над одним проектом, — это удобно. Примеры коллаборации:
- В реальном времени. Несколько пользователей одновременно работают над одним дизайном в FigJam (например, комментируют и редактируют элементы на одном макете).
- Асинхронно. Один дизайнер создает макет в Sketch и сохраняет его в облаке. Другой дизайнер открывает его позже, вносит изменения и оставляет комментарии.
|
Сервис
|
Коллаборация
|
|
ProtoPie
|
Пользователи могут делиться своими прототипами с другими через ссылки и получать обратную связь. Но совместного редактирования в сервисе нет. Команды могут использовать облачный сервис ProtoPie Cloud для хранения и управления проектами.
|
|
FigJam
|
Несколько пользователей могут одновременно работать в одном макете, добавлять заметки, рисовать, оставлять комментарии и многое другое.
FigJam предназначен для того, чтобы команды могли быстро обмениваться идеями и работать над ними одновременно.
|
|
Readymag
|
Несколько пользователей могут работать над одним проектом. Однако возможности для совместного редактирования ограничены.
|
|
Webflow
|
Можно пригласить несколько пользователей для управления проектами, разделять роли и права доступа. Совместного редактирования нет.
|
|
Sketch
|
Есть возможности совместной работы через Sketch for Teams. В этом варианте несколько пользователей могут работать над проектами через облачное хранилище.
|
|
Attention Insight
|
Можно делиться результатами анализа с коллегами и клиентами через ссылки. Возможности для совместного редактирования или командной работы не предусмотрены.
|
|
User Interviews
|
Можно приглашать членов команды для проведения интервью, сбора данных и анализа результатов. Редактирования контента в реальном времени не предусмотрено.
|
Возможности для коллаборации лучше всего представлены в FigJam. Чуть хуже ситуация обстоит со Sketch, Webflow и Readymag — совместная работа доступна с ограничениями.
Поддержка векторной и растровой графики
Векторная графика — это тип графических изображений, которые построены на основе математических формул, а не пикселей. Они легко масштабируются без потери качества. Благодаря этой особенности, такие изображения используются в дизайне интерфейсов, иконках, иллюстрациях, где важна четкость на любых разрешениях.
Растровая графика — это изображения, состоящие из пикселей. Например, фотографии теряют качество при масштабировании, потому что у них есть фиксированное разрешение.
|
Сервис
|
Поддержка векторной и растровой графики
|
|
ProtoPie
|
Да
|
|
FigJam
|
Поддерживает базовую работу с векторными элементами (линии, формы, стрелки), которые можно создать прямо в сервисе. Но возможности редактирования векторной графики ограничены по сравнению с полноценными дизайнерскими инструментами.
Есть поддержка растровой графики.
|
|
Readymag
|
Да
|
|
Webflow
|
Да
|
|
Sketch
|
Да
|
|
Attention Insight
|
Сервис поддерживает импорт растровых изображений для анализа, но не предоставляет инструментов для их редактирования.
|
|
User Interviews
|
Нет
|
Sketch, Webflow, Readymag, ProtoPie — наиболее гибкие инструменты для работы с различными типами изображений.
Интеграции
Интеграции расширяют функционал сервиса и повышают его эффективность. С их помощью можно объединить возможности нескольких инструментов в единое рабочее пространство.
|
Сервис
|
Интеграции
|
|
ProtoPie
|
Figma, Sketch, Adobe XD. Прямая интеграция для импорта дизайнов из этих сервисов для дальнейшего создания интерактивных прототипов.
Jira и Confluence. Встраивание прототипов в задачи и документацию.
ProtoPie Connect. Интеграция с аппаратными устройствами и различными API для создания сложных сценариев и взаимодействия.
ProtoPie Cloud. Облачное хранилище и платформа для совместной работы и обмена прототипами.
|
|
FigJam
|
Figma. Сервис FigJam интегрирован с Figma. Пользователи могут легко переносить идеи из FigJam и полноценные дизайн-проекты в Figma.
Slack. Обмен идеями и комментариями прямо из FigJam в каналы Slack.
Miro. Перенос данных между двумя инструментами для коллаборации.
Google Drive и Dropbox. Хранение и обмен файлами.
|
|
Readymag
|
Google Analytics. Встроенная поддержка аналитики для отслеживания поведения пользователей на веб-проектах.
MailChimp. Интеграция для сбора и управления подписчиками прямо с лендингов и страниц, созданных в Readymag.
Custom Code. Встроенный редактор кода позволяет добавлять пользовательские интеграции через JavaScript и другие скрипты.
|
|
Webflow
|
Zapier. Поддержка через Zapier для интеграции с сотнями приложений (например, Slack, Trello, MailChimp).
Google Analytics и Google Tag Manager. Интеграции для отслеживания пользовательских данных и поведения на сайте.
Airtable и CMS. Интеграции помогают эффективнее управлять контентом и данными с использованием внешних таблиц и баз данных.
|
|
Sketch
|
Abstract. Помогает управлять версиями дизайна.
InVision и Zeplin. Интеграции для передачи дизайнов и взаимодействия с разработчиками.
Figma и Adobe XD. Интеграции для импорта и экспорта файлов между этими платформами.
Sketch Cloud. Собственное облако для хранения проектов, совместной работы и получения обратной связи.
Плагины. Поддержка множества плагинов для интеграции с другими инструментами (например, Slack и Jira).
|
|
Attention Insight
|
Figma, Sketch, Adobe XD. Анализ дизайнов из этих инструментов.
Google Analytics. Интеграция для «связывания» данных из аналитики с анализом тепловых карт.
Chrome Extension. Расширение для быстрого анализа страниц в браузере.
|
|
User Interviews
|
Zoom и Google Meet. Интеграции для проведения онлайн-интервью и записи.
Trello, Jira и Asana. Интеграции для управления задачами и исследованиями.
CRM-системы. Интеграция с различными CRM для управления участниками исследования.
|
ProtoPie, Webflow, Sketch и Attention Insight — сервисы, предлагающие богатые интеграции с другими инструментами для дизайна и анализа.
FigJam и User Interviews ориентированы на интеграции, связанные с командной работой, планированием и проведением исследований.
Readymag поддерживает интеграции с аналитикой, email-маркетингом и позволяет использовать кастомный код для добавления дополнительных интеграций.
Шаблоны
Шаблоны содержат готовые компоненты, стили и элементы, которые можно адаптировать под конкретные нужды пользователя.
|
Сервис
|
Шаблоны
|
|
ProtoPie
|
Нет готовых шаблонов для дизайнов или прототипов.
|
|
FigJam
|
Широкий выбор шаблонов для мозгового штурма, планирования проектов, проведения ретроспектив или других задач коллаборации. Шаблоны помогают командам быстро начать работу и структурировать свои цели.
|
|
Readymag
|
Множество готовых шаблонов для создания лендингов, портфолио, онлайн-журналов, презентаций и других веб-проектов. Шаблоны варьируются по стилю и предназначению.
|
|
Webflow
|
Широкая библиотека шаблонов для веб-сайтов. В ней представлены шаблоны для лендингов, блогов, портфолио, интернет-магазинов и других типов веб-проектов.
|
|
Sketch
|
Готовых шаблонов нет. Но пользователи могут загружать их от коммьюнити или создавать собственные.
|
|
Attention Insight
|
Не предоставляет шаблонов, поскольку это сервис для анализа пользовательского мнения, а не для создания дизайна. Вместо шаблонов можно загружать собственные макеты для анализа.
|
|
User Interviews
|
Доступны шаблоны для различных типов исследований и интервью. Они включают: формы для скрининга участников, анкеты, сценарии интервью и документы для сбора обратной связи.
|
FigJam, Readymag и Webflow — сервисы с широким выбором готовых шаблонов для различных задач.
Встроенные библиотеки компонентов
Это набор заранее подготовленных элементов пользовательского интерфейса (UI), которые доступны прямо в сервисе для дизайна или разработки. Одни и те же компоненты можно использовать в различных проектах. Наличие встроенной библиотеки упрощает работу и ускоряет процесс в несколько раз.
|
Сервис
|
Встроенные библиотеки компонентов
|
|
ProtoPie
|
Нет встроенной библиотеки компонентов (таких как UI-киты). Однако пользователи могут создать собственные компоненты и повторно использовать их в других проектах.
|
|
FigJam
|
Есть базовые элементы для коллаборации, но это не полноценная библиотека UI-компонентов.
|
|
Readymag
|
Есть готовые блоки и модули для создания веб-страницы: текстовые блоки, галереи изображений, формы и кнопки. Элементы можно комбинировать и адаптировать под свои «хотелки».
|
|
Webflow
|
Сервис предоставляет обширную встроенную библиотеку компонентов: навигационные панели, кнопки, формы, слайдеры и другие элементы UI. Также предоставляется доступ к сторонним шаблонам и компонентам через Webflow Marketplace.
|
|
Sketch
|
Пользователи могут создавать свои библиотеки или подключаться к сторонним, которые содержат кнопки, формы, иконки и другие UI-элементы.
|
|
Attention Insight
|
Нет.
|
|
User Interviews
|
Нет.
|
Sketch и Webflow — сервисы с самыми широкими встроенными библиотеками компонентов. У Readymag есть готовые блоки и модули, которые можно использовать для создания веб-страниц. Но это, скорее, веб-модули, а не полноценные UI-компоненты.
Платформа
Под платформой мы имеем ввиду операционные системы, на которых могут использоваться сервисы.
|
Сервис
|
Платформа
|
|
ProtoPie
|
Windows, macOS, iOS и Android
|
|
FigJam
|
Windows, macOS, Linux, iOS и Android
|
|
Readymag
|
Windows, macOS, Linux
|
|
Webflow
|
Windows, macOS, Linux
|
|
Sketch
|
macOS
Существуют возможности для просмотра и взаимодействия с проектами через Sketch Cloud. Однако полноценное редактирование доступно только на macOS.
|
|
Attention Insight
|
Windows, macOS, Linux
|
|
User Interviews
|
Windows, macOS, Linux
|
Настройка рабочей области
Настройка рабочей области — это изменение интерфейса сервиса для работы, чтобы лучше соответствовать потребностям и предпочтениям пользователя. Сюда относится:
- Расположение панелей и окон. Перемещение разных инструментов, слоев, свойств. Например, панели можно закрепить с одной стороны экрана и сделать «плавающими».
- Изменение размера панелей. Функция полезна в случаях, когда требуется выделить больше места для наиболее часто используемых инструментов.
- Создание и сохранение предустановок. Некоторые сервисы позволяют сохранять пользовательские пресеты, чтобы быстро переключаться между настройками для различных типов задач.
- Скрытие или отображение элементов. Пользователь может скрыть или показать определенные панели или инструменты в зависимости от текущих потребностей. Например, можно отключить отображение инструментов, которые сейчас не используются, чтобы освободить больше места на экране.
Чем больше гибких настроек предоставляет сервис, тем эффективнее и удобнее получится работа над проектом.
|
Сервис
|
Настройка рабочей области
|
|
ProtoPie
|
Рабочая область фиксирована. Но пользователи могут настраивать панели инструментов и расположение окон в пределах интерфейса. Можно изменять размеры и расположение панелей.
|
|
FigJam
|
Возможности настройки рабочей области ограничены. Все-таки это инструмент с фиксированным интерфейсом, где основное внимание уделяется взаимодействию на общем макете.
|
|
Readymag
|
Возможности тонкой настройки ограничены. Интерфейс простой и направлен на редактирование веб-страниц с минимальными настройками.
|
|
Webflow
|
Сервис предлагает минимальную гибкость в настройке рабочей области. Пользователи могут изменить размеры панелей, настраивать видимость элементов интерфейса, перемещать панели между сторонами экрана.
|
|
Sketch
|
Пользователи могут изменять расположение и размеры панелей, добавлять или удалять панели инструментов, работать с несколькими окнами и использовать плагины для дополнительной кастомизации интерфейса.
|
|
Attention Insight
|
Интерфейс фиксированный. Рабочее пространство в основном ориентировано на просмотр и анализ данных.
|
|
User Interviews
|
Интерфейс фиксированный, да он и не требует гибкой настройки.
|
Сделать интерфейс максимально удобный «под себя» можно в Sketch и Webflow. Эти инструменты предлагают наиболее широкие возможности для настройки рабочей области.
Скорость работы
Зависит от множества факторов: оптимизация сервиса, «железо» пользователя, особенности самого проекта (количество и сложность элементов). Проанализируем инструменты на скорость работы.
|
Сервис
|
Скорость работы
|
|
ProtoPie
|
Хорошо оптимизирован для работы с интерактивными прототипами. Однако на очень сложных проектах с большим количеством анимаций производительность снижается (такая проблема обычно наблюдается на слабых компьютерах).
|
|
FigJam
|
Хорошо работает даже с большими макетами. Но если он становится чрезмерно загруженным, с большим количеством объектов и участников в реальном времени, могут наблюдаться незначительные лаги.
|
|
Readymag
|
Оптимизирован для создания веб-проектов. На больших проектах (со множеством страниц, сложными анимациями и мультимедийными элементами) производительность может снижаться.
|
|
Webflow
|
Сервис обычно хорошо справляется с большими проектами. Но при работе с очень сложным контентом (например, со множеством анимаций, кастомным кодом или большим количеством страниц) могут возникать замедления.
|
|
Sketch
|
Сервис хорошо оптимизирован для работы с большими проектами (особенно при создании сложных интерфейсов и дизайн-систем). На очень крупных проектах с большим количеством артов, символов и библиотек компонентов скорость работы может снижаться.
Sketch поддерживает высокую производительность. Однако на старых или менее мощных макбуках наблюдаются задержки.
|
|
Attention Insight
|
Скорость работы зависит от сложности анализируемого дизайна. Обычно сервис быстро обрабатывает макеты. Но если проект содержит сложные графические элементы, анализ займет больше времени.
|
|
User Interviews
|
Так как сервис не является инструментом для создания или редактирования графики, то его производительность не зависит от размера проекта. Скорость работы стабильная.
|
Все сервисы оптимизированы и отлично справляются с высокой нагрузкой (при условии, что у пользователя хорошее «железо»).
Тарифы
Некоторые сервисы предоставляют бесплатные тарифы. Это удобно: можно протестировать сервис и понять, подходит он под ваши цели и задачи или нет.
|
Сервис
|
Тарифы
|
|
ProtoPie
|
Free. Бесплатный тариф для тестирования сервиса. Какие возможности доступны:
- 2 прототипа, которые можно сохранить в облаке;
- 2 сцены на прототип;
- 50 МБ облачного хранилища;
- личные библиотеки.
Basic ($25). Тариф подходит для фрилансеров и частных лиц.
- без водяного знака;
- 20 прототипов, сохраненных в облаке;
- 10 сцен на прототип;
- 500 МБ облачного хранилища.
Pro ($47). Подходит для профессионалов, команд и агентств. Тариф включает все базовые функции:
- неограниченное количество прототипов;
- 5 Гб облачного хранилища;
- локальное сохранение прототипа;
- командные библиотеки.
За дополнительную плату можно добавить Connect Core.
Custom (индивидуальная стоимость). Предназначен для крупных организаций. Включает все функции Pro, а также:
- права администратора частного сервера и сервиса;
- обучение и техническая поддержка;
- индивидуальная интеграций;
- пользовательское тестирование;
- безопасность корпоративного уровня и единый вход;
- Connect Enterprise включен.
|
|
FigJam
|
Free. Подходит для пользователей, которые хотят изучить функционал сервиса. Какие возможности доступны:
- 3 совместных файла FigJam;
- неограниченные личные черновики;
- базовая проверка файлов;
- плагины и шаблоны;
- мобильное приложение.
Professional (€5). Подходит для небольших команд. Тариф включает все возможности бесплатного плана, а также:
- неограниченное количество файлов FigJam;
- командные библиотеки;
- аудио-разговоры;
- голосование.
Organization (€5). Предназначен для крупных организаций. Тариф включает все возможности, доступные на Professional, а также:
- общеорганизационные библиотеки;
- централизованное управление контентом;
- пользовательские шаблоны;
- пользовательские цветовые палитры;
- единое администрирование и выставление счетов;
- частные плагины и виджеты.
Enterprise (€5). Тариф включает все функции Organization, а также:
- выделенные рабочие пространства;
- современные системы проектирования;
- контроль гостевого доступа;
- настройка ролей через SCIM;
- истечение времени простоя сеанса;
- голосование.
|
|
Readymag
|
Индивидуальные тарифы:
Free. Тариф предназначен для знакомства с платформой. Можно опубликовать один веб-сайта с 10 страницами.
Personal ($13.5). Улучшенный тарифный план с большим количеством возможностей.
- 1 опубликованный веб-сайт;
- 10 000 просмотров в месяц без брендинга;
- 1 веб-сайт с пользовательским доменом;
- 1 соавтор.
Freelancer ($22.5). Подходит для фрилансеров, создающих сайты для клиентов.
- 5 опубликованных веб-сайтов одновременно;
- 25 000 просмотров в месяц без брендинга;
- 3 веб-сайта с пользовательским доменом;
- 2 соавтора;
- перевод проекта на другой счет.
Тарифы для команд:
Free. Возможности:
- 1 опубликованный веб-сайт;
- 10 страниц на сайте.
Studio ($36). Подходит для малых и средних компаний и фрилансеров.
- неограниченное количество опубликованных веб-сайтов;
- 50 000 просмотров в месяц без брендинга;
- 5 соавторов;
- перевод проекта на другой счет;
- глобальные стили, цвета и пресеты;
- экспорт в PDF.
Advanced ($58.5). Тариф разработан для больших команд.
- неограниченное количество опубликованных веб-сайтов;
- 75 000 просмотров в месяц без брендинга;
- 10 веб-сайтов с пользовательским доменом;
- 10 соавторов;
- перевод проекта на другой счет;
- глобальные стили, цвета и пресеты;
- экспорт в PDF;
- экспорт кода;
- можно встроить iFrame;
- приоритетная поддержка.
|
|
Webflow
|
Free. Подходит для тех, кто только начинает работать с Webflow. Какие функции доступны:
- домен Webflow.io;
- 2 страницы;
- 20 коллекций CMS;
- 50 элементов CMS;
- 50 отправок форм (за все время);
- пропускная способность 1 ГБ.
Basic ($14). Предназначен для простых сайтов.
- пользовательский домен;
- 150 страниц;
- 500 отправок форм (ежемесячно);
- пропускная способность 10 ГБ.
CMS ($23). Для блогов и сайтов, ориентированных на часто публикуемый контент.
- пользовательский домен;
- 150 страниц;
- 20 коллекций CMS;
- 2 000 элементов CMS;
- 1 000 отправок форм (каждый месяц);
- пропускная способность 50 ГБ;
- 3 редактора контента;
- поиск по сайту.
Business ($39). Предназначен для больших сайтов.
- пользовательский домен;
- 300 страниц;
- 40 коллекций CMS;
- 10 000 элементов CMS;
- 2 500 отправок форм (каждый месяц);
- пропускная способность 100 ГБ;
- 10 редакторов контента;
- поиск по сайту;
- форма загрузки файла.
Enterprise (индивидуальная стоимость). Для тех, кому нужно решение корпоративного уровня.
- неограниченное количество пользователей;
- расширенное сотрудничество;
- гарантированное соглашение об уровне обслуживания (SLA).
Тарифы для интернет-магазинов:
Standard ($29). Идеально подходит для новых компаний.
- 500 товаров электронной коммерции;
- 2 000 элементов CMS;
- 2% комиссия на транзакцию;
- все функции плана CMS.
Plus ($74). Лучше всего подходит для предприятий с большим объемом продаж.
- 5 000 товаров электронной коммерции;
- 10 000 элементов CMS;
- 0% комиссия за транзакцию;
- все возможности бизнес-плана.
Advanced ($212). Тариф позволяет вывести онлайн-бизнес на новый уровень.
- 15 000 товаров электронной коммерции;
- 10 000 элементов CMS;
- 0% комиссия за транзакцию;
- все возможности бизнес-плана.
|
|
Sketch
|
Standard Subscription ($10). Стандартная подписка, которая подходит для большинства пользователей. Что входит в тариф:
- дизайн, прототип и иллюстрация;
- возможность работать конфиденциально;
- совместная работа в режиме реального времени;
- неограниченное количество бесплатных пользователей (они могут просматривать, комментировать и проверять проекты онлайн);
- история версий и контроль;
- проверка проектов, тестирование прототипов;
- комментирование и обсуждение проектов;
- предварительный просмотр на iPhone или iPad.
Mac-only license ($120). Что входит в тариф:
- собственное приложение для Mac;
- дизайн, прототип, иллюстрация;
- локальное сохранение документов.
Важно! Лицензия не включает: совместные функции, доступ к веб-приложениям, обмен и сохранение документов в интернете, неограниченное количество бесплатных пользователей.
Business Subscription ($20). Включает все функции стандартной подписки, а также дополнительные возможности для больших команд:
- единый вход (SSO);
- неограниченное онлайн-хранилище;
- выставление счетов на основе счетов-фактур;
- мощный каталог разрешений;
- группы разрешений;
- архивация проекта.
|
|
Attention Insight
|
Basic ($31). Отлично подходит для фрилансеров и индивидуальных предпринимателей.
- 40 кредитов;
- 1 пользовательское место;
- есть водяной знак.
Pro ($129). Тариф предназначен для дизайнеров продуктов, экспертов по пользовательскому опыту и маркетинговых отделов в любой компании.
- 200 кредитов;
- 2 пользовательских места (дополнительное место стоит $42 в месяц);
- без водяного знака;
- видео-тестирование;
- команда и обмен;
- отчеты по проектам.
Hero ($324). Тариф без ограничений. Что в него входит:
- неограниченные кредиты;
- обратная связь по дизайну;
- 30 минут видеоанализа;
- 2 пользовательских места (дополнительное место стоит $109 в месяц).
|
|
User Interviews
|
Project Based ($69). Тариф лучше всего подходит для одноразовых проектов.
Enterprise ($34). Самый популярный тарифный план среди пользователей.
Limitless. Индивидуальный тариф. Стоимость необходимо уточнить у менеджеров.
Premium ($499). Тариф, позволяющий привести своих участников.
Advanced ($999). Максимальный тариф с самыми широкими возможностями.
|
Вывод
Мы рассмотрели лучшие инструменты для UX/UI-дизайнеров, которые помогут на каждом этапе разработки — от создания прототипа до тестирования пользовательского опыта. Выбор подходящего сервиса — важный шаг на пути к успешным проектам. Поэтому проанализируйте несколько платформ и отдайте предпочтение той, с помощью которой вы сможете реализовать любые идеи в сфере UX/UI-дизайна.
