Техническое задание на верстку 5 страниц (главная и 4 страницы продукта) с натяжкой на магазин CMS Shopify
1. Общая информация
1.1 Название проекта: Верстка 5 страниц с натяжкой на магазин CMS Shopify
1.2 Инструмент для макетов: Figma (
)
1.3 Сроки выполнения: 17.09.24 – 23.09.24 19.00 (МСК)
2. Описание проекта
Разработать адаптивные 5 страниц согласно макетам в Figma. Страницы должны включать анимации и иметь адаптивные режимы.
3. Требования к верстке
3.1 Структура страницы должна соответствовать настоящему макету
3.2 Адаптивность
Страница должна быть адаптивной и корректно отображаться на следующих устройствах:
Десктоп: Минимальная ширина экрана 1024px.
Планшет: Ширина экрана от 768px до 1024px.
Мобильные устройства: Ширина экрана до 768px.
3.3 Анимации
Основные анимационные эффекты могут включать:
Плавное появление элементов: Fade in/out.
Сдвиг элементов: Slide in/out.
Анимации при прокрутке страницы: Parallax effect, Reveal on scroll. Согласно референсу
и описаниям в макете фигма.
3.4 Функциональные элементы
Форма обратной связи: Должна быть валидирована на клиентской стороне (проверка заполненности полей, правильность email и т.д.). При успешной отправке формы должно отображаться сообщение об успехе, а при ошибке – сообщение об ошибке. Форму связать с плагином Shopify Email
Кнопка CTA: При нажатии должна выполняться привязанная к ней функция (например, переход на другую секцию страницы или отправка формы).
3.5 Кроссбраузерность
Страница должна корректно отображаться и работать в следующих браузерах:
Google Chrome (последняя версия и предыдущая)
Mozilla Firefox (последняя версия и предыдущая)
Safari (последняя версия и предыдущая)
Microsoft Edge (последняя версия и предыдущая)
3.6 SEO-оптимизация
Заголовки страниц должны быть корректно структурированы (h1, h2, h3 и т.д.).
Альтернативные тексты для изображений.
Использование семантических HTML5 элементов.
3.7 Сборка и тестирование
Развертывание на тестовом сервере для проверки.
Тестирование адаптивности и функциональности на различных устройствах.
Проведение тестов на кроссбраузерность.
4. Макет и ресурсы
4.1
Макет предоставлен в Figma. Ссылка на макет: (
4.2 Ресурсы
Изображения и иконки, необходимые для верстки, предоставлены в проекте Figma.
5. Деплой и передача проекта
5.1 Сверстанные 5 страниц должны быть размещены и опубликованы на домене
По завершении верстки все файлы должны быть переданы в архиве на email
5.2 Инструкции по деплою
Предоставить инструкции по развертыванию на сервере, включая необходимые настройки и зависимости.
6. Контрольные точки и отчетность
6.1 Контрольные точки
[18.09.24] – Проверка первой версии верстки главной страницы и её анимаций.
[19.09.24] – Финальное тестирование и исправление ошибок.
[20.09.24] – Главная страница размещена в черновике на
. Проверка первых версий верстки 4 страниц продуктов и их анимаций.
[21.09.24] – Финальное тестирование и исправление ошибок.
[23.09.24] – Все 5 страницы опубликованы и корректно отображаются на
6.2 Отчеты
Регулярные обновления статуса работы.
Отчёт о завершении проекта и выполнении требований.