UI дизайн

Техническое задани

Общее описание проекта

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

1. Цели и задачи

- Цель: Создать привлекательный и функциональный дизайн интерфейса для веб-приложения.

- Задачи:

- Разработать дизайн главной страницы и профиля пользователя.

- Обеспечить интуитивный и мотивирующий UX/UI с элементами геймификации.

- Подготовить адаптивные макеты для десктопных и мобильных устройств.

2. Функциональные требования

2.1. Главная страница (Main Page)

• Отображается после авторизации.

• Содержит:

  • Кнопка «Пройти ежедневные задания» (для коротких упражнений).

  • Виджет «Основной прогресс» (графики/прогресс-бары, показывающие уровень подготовки).

  • Персонализированные рекомендации (например, «Улучшите Speaking с помощью упражнений»).

  • Дополнительно: мотивационные цитаты, статистика активности, быстрый доступ к тестам.

• Требования к дизайну:

  • Современный, минималистичный стиль.

  • Акцент на визуализацию прогресса (графики, диаграммы).

  • Использование пастельных цветов.

2.2. Профиль (Profile)

• Содержит:

  • Данные об оплате (подписка, история платежей).

  • История тестов (даты, результаты, статистика по модулям).

  • Достижения (значки за задания, тесты, цели).

  • Цели пользователя (майлстоуны) с прогрессом.

• Требования к дизайну:

  • Привлекательный интерфейс с элементами геймификации (значки, награды).

  • Четкая структура для удобного доступа к данным.

  • Визуализация прогресса и целей (графики, прогресс-бары).

3.3. Сдача тестов (Test Taking)

• Содержит два варианта выбора:

  1. Полный тест: Имитация полноценного IELTS-теста (все модули: Reading, Writing, Listening, Speaking).

  2. Отдельный модуль: Выбор одного из четырех модулей (Reading, Writing, Listening, Speaking).

• После выбора модуля отображается страница теста. Если модуль в разработке, показывается уведомление «Страница в разработке» с кнопкой возврата в меню.

• Элементы страницы теста:

  • Таймер, соответствующий реальным условиям IELTS.

  • Интерактивные элементы (аудиоплеер для Listening, текстовые поля для Writing, кнопка записи для Speaking).

  • Кнопки управления (начать, приостановить, завершить тест).

• Требования к дизайну:

  • Чистый и функциональный интерфейс, минимизирующий отвлечения.

  • Ясное выделение активного модуля и таймера.

  • Удобная навигация для выбора теста или модуля.

3.4. Настройки (Settings)

• Содержит:

  • Управление учетной записью (email, пароль, данные пользователя).

  • Настройка уведомлений (push, email).

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

  • Настройка предпочтений по материалам (например, «Предпочитаю учить через музыку»).

  • Дополнительно: выбор темы оформления, настройка уровня сложности заданий.

• Требования к дизайну:

  • Простая и структурированная компоновка.

  • Четкое разделение на категории (учетная запись, уведомления, предпочтения).

  • Интуитивные элементы управления (переключатели, выпадающие списки).

2.5. Общие требования к дизайну

- Адаптивность.

- Цветовая палитра: Пастельные, теплые оттенки, для фона и акцентов, энергичные, но мягкие цвета.

- Стиль: Минималистичный, вдохновленный Duolingo, с уникальной стилистикой.

- Инструменты: Любой удобный, желательно, Figma

- Шрифты: Читаемые и простые.