Daryn AI
Дизайн экранов образовательного AI-сервиса.
Спроектировал интерфейс
Мой вклад — дизайн представленных экранов и сценариев.
Задача
Сделать образовательные инструменты понятными для пользователей.
Экраны отражают мой вклад в проект. Другие части действующего продукта могли быть созданы командой.
Разбор основан на исходных схемах, версиях макетов и UI kit из проекта. Каждый материал можно увеличить. Порядок разделов объясняет связь решений; отдельные этапы интервью и тестирования не приписываются проекту без исходных материалов.
Образовательный сервис состоит из связанных инструментов
В предоставленном файле представлены игры, наглядные материалы, презентации, маркет и кабинет автора. Кейс показывает дизайн этих материалов и ограничивает авторство представленными экранами: другие части действующего продукта могли делать другие участники команды.
Семь сценариев до подробного разбора экранов
Исходные User Flow показывают последовательность выбора, настройки, действия и результата. Разные механики требуют разных переходов: сопоставление, случайный выбор, заполнение пропусков или генерация задания. Ниже сохранены все семь схем из файла.
True / False↗
Сопоставление↗
Космическая гонка↗
Случайный выбор↗
Заполнить пропуски↗
Детектив↗
Генератор заданий↗
Дизайн-система целиком, по разделам
В Daryn UI kit собраны типографика, цвета, поля, кнопки, навигация, карточки и шаг отступов. Общие правила поддерживают разные игры и инструменты. В библиотеке ниже можно отдельно изучить основу, управление и повторяемые паттерны.
Выбери раздел. Нажми на доску, чтобы открыть её в полном размере.
Inter и шкала текста
Основные и семантические цвета
Размеры и состояния кнопок
Поля ввода
Навигация
Теги, сложность и статусы
Иконки
Игровые карточки
Система карточек
Шаг отступов
Сначала предмет и параметры, потом игра
Выбор предмета отделён от настроек: количество вопросов, режим и доступ к дополнительным параметрам. Пошаговый индикатор сохраняет положение в сценарии. Один экран не перегружен всем процессом подготовки.
Вопрос → обратная связь → итог
Игровой экран разделяет команды цветом и пространством. После ответа появляется отдельное состояние с объяснением и изменением счёта; итог собирает результаты и предлагает повторить игру или вернуться. Это связанный набор состояний, а не один игровой макет.
Весь сценарий адаптирован к телефону
На мобильном экране команды располагаются вертикально, действия становятся крупнее, а индикаторы остаются рядом с игровым контекстом. Настройка, вопрос, обратная связь и итог показаны отдельно, чтобы было видно адаптацию всего пути.
4 экрана · Нажми на превью для полного просмотра. На телефоне листай в сторону →
Общая система — разные способы взаимодействия
Сопоставление использует пары и выбор соответствий. Космическая гонка связывает ответы с положением команд. Общая цветовая логика и расположение служебных данных сохраняются, но основное действие меняется под механику.
Настройка генерации и рабочий редактор
Генератор презентаций начинается с темы, параметров и выбора визуального направления. Редактор разделяет список слайдов, рабочее поле и настройки. Мобильный вариант перестраивает эти области в последовательный вертикальный интерфейс.
Найти материал и изучить детали
Галерея объединяет карточки наглядных материалов с поиском и фильтрами. В подробной карточке изображение остаётся главным, а характеристики и действие скачивания находятся рядом. Связанные материалы продолжают просмотр ниже.
Покупатель и автор работают с одним материалом
Каталог и подробная страница помогают покупателю выбрать материал. Кабинет автора решает другую задачу: публикация, состав карточки и обзор результатов. В кейсе показаны именно представленные макеты этих модулей.
Внешняя коммуникация продолжает язык продукта
Полный макет лендинга связывает разные направления сервиса. Мобильная версия показывает, как длинная структура и отдельные блоки переорганизуются на узком экране. Ниже — исходные макеты, их можно открыть для подробного просмотра.
Характер проекта
Что получилось
Дизайн представленных в Figma экранов, включая лендинг и разделы сервиса. Другие страницы действующего продукта не входят в заявленное авторство.