Framer
Визуальная платформа для создания и публикации сайтов с CMS и AI-помощником. Подходит для лендинга или портфолио, которое дизайнер собирает на редактируемом холсте.
Прототипирование
www.framer.comНа сайт ↗
Инструменты UI/UX: интерфейсы, прототипы и исследования
Сервисы для проектирования экранов, проверки сценариев и передачи макетов в разработку. В подборке есть редакторы, библиотеки компонентов, средства тестирования и визуальной сборки сайтов.
Как выбрать инструмент
Сначала определите этап: исследование, структура, прототип, визуальный дизайн или публикация. Для командной работы проверьте комментарии, передачу файлов и экспорт. Выбирайте инструмент под конкретную задачу и существующий рабочий процесс команды.
Искать внутри направленияSquoosh
Сжимает изображения и меняет формат прямо в браузере. Сравнение до и после помогает подобрать размер файла и увидеть, какие детали теряются при сжатии.
Сжатие и конвертация
squoosh.appНа сайт ↗
TinyPNG
Уменьшает вес изображений PNG, JPEG, WebP и других поддерживаемых форматов. Удобен для подготовки картинок к загрузке на сайт и пакетной оптимизации файлов.
Сжатие и конвертация
tinypng.comНа сайт ↗
Access Guide
Карточки с понятными объяснениями требований WCAG. Помогают проверить цвет, клавиатурное управление, сообщения и структуру интерфейса на распространённые барьеры.
Информация
www.accessguide.ioНа сайт ↗
Adobe XD
Редактор интерфейсов и интерактивных прототипов Adobe. Продукт находится в режиме поддержки: имеет смысл прежде всего для работы с уже существующими XD-файлами.
Прототипирование
helpx.adobe.comНа сайт ↗
Anima
AI-инструмент, который превращает Figma-макет, ссылку или текстовое описание в веб-приложение и код. Помогает перейти от визуального проекта к рабочей реализации.
Прототипирование
www.animaapp.comНа сайт ↗
Attention Insight
Сервис прогнозирует распределение визуального внимания на макете и строит AI-тепловую карту. Подходит для предварительной оценки акцентов; это не запись поведения реальных пользователей.
Сервисы UX
attentioninsight.comНа сайт ↗
Axure
Инструмент для сложных UX-прототипов с условиями, состояниями и логикой взаимодействия. Позволяет показать поведение продукта и подготовить спецификации до разработки.
Прототипирование
www.axure.comНа сайт ↗
Balsamiq
Редактор простых каркасов интерфейса с намеренно схематичным видом. Помогает обсуждать расположение элементов и сценарий, не отвлекаясь на цвет и финальное оформление.
Прототипирование
balsamiq.comНа сайт ↗
Bloo
Набор низкодетализированных компонентов и мобильных экранов для вайрфреймов. Поддержка тёмной темы помогает быстро собрать каркас приложения в двух вариантах.
Прототипирование
bloouikit.comНа сайт ↗
Bojagi
Инструмент обсуждения визуальных и интерактивных веб-компонентов. Позволяет получать обратную связь по UI в ходе разработки и быстрее согласовывать изменения.
Прототипирование
bojagi.ioНа сайт ↗
Built For Mars
Подробные UX-разборы реальных цифровых продуктов. Показывают удачные и спорные решения в регистрации, освоении продукта и других пользовательских сценариях.
Информация
builtformars.comНа сайт ↗
Cacoo
Совместный редактор диаграмм от Nulab: блок-схемы, карты, схемы систем и вайрфреймы. Подходит для обсуждения процесса или архитектуры продукта на одном холсте.
Прототипирование
nulab.comНа сайт ↗
Canny
Система сбора, анализа и приоритизации запросов пользователей. Помогает объединить обратную связь из разных источников и решить, какие изменения продукта важнее.
Сервисы UX
canny.ioНа сайт ↗
Carrd
Конструктор компактных одностраничных сайтов с готовыми стартовыми шаблонами. Подойдёт для личной страницы, портфолио, формы или небольшого лендинга.
Прототипирование
carrd.comНа сайт ↗
Case Study Club
Редакционная подборка материалов для продуктовых дизайнеров. Разбирает профессиональные решения, развитие практики и то, как оценивать качество дизайна.
Информация
www.casestudy.clubНа сайт ↗
Charts.css
CSS-фреймворк для отображения данных в виде диаграмм. Позволяет оформить таблицу как график и управлять подписями, осями, цветами и промежутками через стили.
Прототипирование
chartscss.orgНа сайт ↗
Claritee
Рабочее пространство для раннего планирования интерфейсов: карты, вайрфреймы, генерация и публикация страниц. Помогает согласовать структуру до детального дизайна.
Прототипирование
claritee.ioНа сайт ↗
Color Oracle
Приложение имитирует разные нарушения цветового восприятия на экране. Помогает проверить, остаются ли графика и интерфейс понятными без привычного различения цветов.
Сервисы UX
colororacle.orgНа сайт ↗
Contentsquare
Платформа анализа цифрового опыта, в которую вошёл Clicktale. Помогает изучать поведение посетителей и находить препятствия на пути к целевому действию.
Сервисы UX
contentsquare.comНа сайт ↗
Crazyegg
Инструменты анализа сайта: тепловые карты, записи посещений, опросы и A/B-тесты. Помогают увидеть проблемные места страницы и проверить варианты улучшений.
Сервисы UX
www.crazyegg.comНа сайт ↗
Digital A11y
Материалы и услуги по цифровой доступности: аудит, обучение и исправление интерфейсов. Полезны для изучения требований WCAG и организации проверки продукта.
Информация
www.digitala11y.comНа сайт ↗
Doo Poll
Конструктор опросов и форм для исследований и обратной связи. Помогает собрать ответы аудитории; текущая доступность инструмента требует отдельной проверки.
Сервисы UX
www.doopoll.coНа сайт ↗
Draftium
Конструктор чернового прототипа сайта из готовых блоков. Помогает быстро показать последовательность секций страницы и собрать замечания до детальной отрисовки.
Прототипирование
draftium.comНа сайт ↗
Dscout
Платформа обратной связи и тестирования с реальными участниками и AI-помощью в анализе. Помогает проверять идеи и превращать наблюдения в решения для продукта.
Сервисы UX
dscout.comНа сайт ↗
Elastic Path Studio (Unstack)
Конструктор лендингов для магазинов Shopify, ранее Unstack. Помогает собирать страницы рекламных кампаний из шаблонов, персонализировать контент по данным Klaviyo и сравнивать варианты через A/B-тесты.
Прототипирование
apps.shopify.comНа сайт ↗
Ethnio
Платформа Research Ops для набора участников исследований. Помогает управлять респондентами и организационной частью тестов, чтобы исследователь сосредоточился на вопросах.
Сервисы UX
ethn.ioНа сайт ↗
Evolus Pencil
Pencil Project — редактор GUI-прототипов с открытым исходным кодом и наборами готовых элементов. Помогает собирать схемы экранов и интерфейсные макеты.
Прототипирование
pencil.evolus.vnНа сайт ↗
Excalidraw
Онлайн-доска для схем с эффектом рисунка от руки. Подходит для быстрого объяснения идеи, архитектуры продукта или пользовательского пути вместе с командой.
Прототипирование
excalidraw.comНа сайт ↗
Featurebase
Платформа поддержки и обратной связи: собирает запросы пользователей, помогает отвечать клиентам и сообщать об обновлениях продукта.
Сервисы UX
www.featurebase.appНа сайт ↗
Figside
Инструмент для превращения макета Figma в сайт. Ориентирован на небольшие страницы, личные сайты и портфолио, которые хочется запустить из готового дизайна.
Прототипирование
figside.comНа сайт ↗
FlairBuilder
Вайрфрейм-инструмент для интерактивных макетов адаптивных сайтов. Страница автора описывает продукт; доступность скачивания и работы приложения отдельно не проверена.
Прототипирование
fantastech.coНа сайт ↗
Flinto
Приложение для Mac для анимированных интерактивных прототипов. Помогает показывать переходы и детальное поведение экранов будущего приложения.
Прототипирование
www.flinto.comНа сайт ↗
Flow Mapp
Платформа для планирования сайта: карта страниц, пользовательские маршруты, вайрфреймы и контент. Помогает согласовать объём проекта до подробного дизайна.
Прототипирование
www.flowmapp.comНа сайт ↗
Flowchart.fun
Редактор, который превращает текстовую структуру в блок-схему. Удобен для описания ветвлений, процесса или карты идей без ручного размещения каждого узла.
Прототипирование
flowchart.funНа сайт ↗
FluidUI
Конструктор интерактивных прототипов для веба, мобильных и настольных приложений. Позволяет собирать экраны из элементов и проверять переходы между ними.
Прототипирование
www.fluidui.comНа сайт ↗