Техническое задание на верстку и интеграцию
1. Общие требования
Pixel Perfect относительно макетов Figma.
Не изменять и не упрощать дизайн без согласования.
Все визуальные эффекты (градиенты, тени, свечения, прозрачности, рамки и т.д.) реализовать максимально близко к макету.
В случае возникновения технических ограничений любые изменения предварительно согласовываются.
2. Верстка
Семантический HTML5.
Адаптивная и кроссбраузерная верстка.
Индивидуальная классическая тема WordPress с нуля, без использования готовых тем.
3. Адаптив
Макеты разработаны для Desktop и Mobile.
На промежуточных разрешениях (разрешениях) адаптация выполняется за счет масштабирования и перестройки элементов без нарушения дизайн-концепции. (Примечание: в официальном техническом стиле чаще используют «На промежуточных брейкпойнтах» или «Для промежуточных экранов»).
Лучший вариант: На промежуточных значениях ширины экрана адаптация выполняется за счет масштабирования и перестройки элементов без нарушения дизайн-концепции.
Переход на мобильную версию выполняется лишь в согласованной точке адаптации (брейкпойнте).
Если для отдельных разрешений потребуется изменение композиции или дополнительный дизайн-макет, это предварительно согласовывается.
4. Оптимизация
Конвертация изображений в WebP (или AVIF, где это возможно).
Оптимальное сжатие изображений.
Адаптивные изображения (srcset, sizes).
Lazy Loading (отложенная загрузка).
Минификация CSS и JavaScript.
Максимально возможная оптимизация скорости загрузки сайта.
5. Интерактивность
Реализовать:
состояния Hover / Active / Focus;
анимации кнопок, ссылок и карточек;
состояния полей поиска и элементов форм;
плавное открытие изображений из миниатюр (Lightbox / Fancybox или аналог);
плавные переходы между состояниями интерфейса.
Если поведение элемента отсутствует в макете, реализовать его в соответствии со стилистикой проекта.
6. Завершение работ
Разместить полностью готовый сайт на сервере заказчика.
Передать исходный код, тему WordPress и все файлы проекта.
Исправить замечания, выявленные во время приемки, если они связаны с несоответствием макету или этому ТЗ.
Ссылка на макет
https://www.figma.com/design/MngyP8sAZP3titWFpDivT1/Rugby--Original-?node-id=3284-2242&t=MJ7cFzBpFZPXzq4b-1
