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

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

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

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

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

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

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

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

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