Техническое задание на доработку дизайна в Figma

1. Анализ и ревизия текущего дизайна

Цель: Привести существующие макеты к единой, консистентной системе.

• Типографика: Проверить и систематизировать все шрифты (font-family), размеры, межстрочные интервалы (line-height), начертания.
• Отступы (Spacing): Провести аудит всех вертикальных и горизонтальных отступов, выявить несоответствия и создать единую сетку.
• Цветовая палитра: Проверить используемые цвета, исключить дублирование, создать централизованную библиотеку цветов (Color Styles) в Figma.

2. Разработка нового функционала

Требуется создать дизайн следующих модулей и страниц:

• Фиксированное модальное окно: Окно крепится к правой части экрана, занимая ¼ - ⅓ ширины. Внутри него располагаются блоки нового функционала.
• Раздел «Избранные купоны»: Список с промокодами, содержащий: иконки, даты добавления, статусы активности, кнопки удаления, сортировки и быстрого копирования кода.
• Модуль авторизации/регистрации: Дизайн форм входа и регистрации через email/пароль и социальные сети. Обязательно предусмотреть состояния полей (ошибка, успех, валидация), а также ссылку «Забыли пароль?».
• Форма «Добавить свой промокод»: Поле ввода, кнопка отправки, краткие правила добавления и валидация формата вводимого кода.
• Уведомление о cookies: Баннер или плашка с текстом о использовании cookies, ссылкой на политику конфиденциальности и кнопкой «Принять».

3. Создание и доработка элементов интерфейса

• Обработка форм: Дизайн состояний загрузки, успешной и неуспешной отправки данных.
• Кнопка/ссылка «Добавить промокод»: Разместить в шапке сайта рядом с иконкой избранного. По клику открывает модальное окно для добавления промокода.
• Всплывающие подсказки (Tooltips): Адаптивные подсказки для интерактивных элементов с плавным появлением и задержкой.
• Типографика для статей: Оформить стили для текстового контента: заголовки (H1-H6), маркированные и нумерованные списки, цитаты, таблицы, изображения с подписями.
• Раздел «Как пользоваться»: Визуально переработать существующий блок на странице магазина. Использовать иконки, четко выделить шаги, добавить интерактивные элементы для наглядности.
• Страница 404: Уникальный дизайн страницы с иллюстрацией, строкой поиска и блоком рекомендованных купонов.