Техническое задание на разработку сайта для продукции SoupMe!

Настоящий документ включает в себя технические требования к настольной

(десктопной) и мобильной версии сайта супового конструктора SoupMe!
(www.soupme.ru).

Сайт должен обеспечивать реализацию следующих функций:

1. Имиджевая: формирование стиля и образа компании.

2. Коммерческая: доступ к информации по ассортименту продукции и

возможности ее заказа.
3. Рекламная: cайт должен содержать информацию о полном товарном
ассортименте компании и обеспечивать возможность просмотра
связанных с товаром текстовых и графических материалов.
4. Информационная: сайт должен предоставлять доступ к информации о
компании, ее истории, деятельности, ассортименте предлагаемой
продукции, маркетплейсам и платформам, где можно купить товар и
отзывам клиентов.

Работы по проекту включают:

  разработку десктопной и мобильной версии сайта SoupMe! по принципу
mobile first (мобильная версия является основной);
  опытную эксплуатацию и внедрение в коммерческую эксплуатацию;
 внедрение механизма актуализации содержания и базовый набор сервисов
работы с информацией.

Мобильная версия сайта SoupMe! представляет собой портативную версию

сайта www.soupme.ru, адаптированную для удобства приобретения билетов
посредством использования различных мобильных устройств. Мобильная
версия сайта должна располагаться на том же домене, где и полная
(десктопная) версия.

Обе версии сайта (как десктопная, так и мобильная) являются

одностраничными.

Обе версии должны быть адаптированы под дисплеи высокой плотности

(Retina) с использованием векторной графики для мелкой графики
(пиктограмм и иконок), подготовка двойных размеров для фотографических
изображений (баннеров, анонсов, фотографий и иллюстраций).

Шапка и футер — растягиваются по ширине экрана и одинаковы для всех

страниц, остается на экране при прокручивании.
2
Проект на 22.04.2022
Необходимо сделать несколько вариантов «сетки». В зависимости от
разрешения экрана, должен отображаться 1 из вариантов «сетки».

Ширина окна браузера (px) Ширина применяемой сетки

(px)
1200–1599 1200(содержимое растягивается
между границами экрана до
1600px)
992–1199 960
768–991 720

Верстка сайта - адаптивная и кроссбраузерная, что означает корректное

отображение сайта на мониторах с разрешением от 1024x768 пикселей с
использованием следующих браузеров:
ПК и ноутбуки (Windows и MacOS):
 Microsoft Internet Explorer
 Mozilla Firefox
 Браузеры на основе Chromium (Opera, Яндекс.Браузер, Google Chrome)
 Safari
Мобильные устройства и планшеты под управлением последних версий
Android и iOS.

Сайт должен корректно отображаться на устройствах с функцией поворота

изображения в книжный и альбомный формат.

Все страницы сайта должны быть полностью адаптивными и проходить тест

https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru и должны
иметь корректное отображение.

Предварительные испытания сайта осуществляются согласно методике

испытаний сайта, разработанной Исполнителем и согласованной с
Заказчиком. Исполнитель сдает сайт c информацией о созданных и
присвоенных логинов-паролей, необходимых для управления сайтом.

Цветовая схема: яркая, но не «кислотная» (пример: https://rawlifebar.ru).

В качестве примера:

 Фон экрана «Продукция»:

#98C11D
 Фон экрана «Инструкция по приготовлению»:

#0098D0
 3
Проект на 22.04.2022
 Фон экрана «Кто мы?»:

#DE5346
 Фон экрана «Где купить?»:

#008E74
 Фон экрана «Контакты»:

#F6D03A

Семейство шрифтов: бесплатная версия шрифта Accia Sans Light или

аналогичные.

Всплывающая в правом углу CTA-кнопка «заказать звонок», которая

контрастирует с цветовой схемой сайта

Общие сведения о продукте: суповой конструктор представляет собой

продукты, подверженные шоковой заморозке в целях сохранения всех
полезных свойств овощей и мяса. Что характерно для продукта, так это то, что
приготовить большую порцию полезного супа можно теперь всего за 30
минут, что является крайне привлекательным фактором для людей, ценящих
свое свободное время, а также требовательных как качеству, так и вкусу
получаемого продукта (информация дополняется).

Аудитория сайта: конечные клиенты разных целевых аудиторий (как

правило, лица с ограниченным временем на приготовление пищи, однако
старающихся питаться правильно: студенты, офисные работники, молодые
мамы), а также представители розничных сетей продуктовой торговли.

Структура сайта

1. Экран загрузки с анимированной иконкой, имитирующей загрузку:

круглая иконка на основе вращающейся кастрюли по часовой стрелке 360о
с плавным переходом к изображению готового супа (используемая на
упаковке, предоставляется заказчиком).

2. Шапка сайта:
4
Проект на 22.04.2022
 Логотип сайта в верхнем левом углу (SoupMe!, предоставляется
заказчиком);
 Навигация по экранам (в верхнем левом углу): Продукция;
Инструкция по приготовлению; Кто мы?; Где купить?; Контакты.
3. Тело сайта:
 Продукция: экран с продукцией со «скроллером» плавной
горизонтальной прокрутки контента влево и вправо с изображением
упаковки супа и названием супа снизу (пример:
https://www.campbells.com/condensed-soups/)
 Инструкция по приготовлению: экран с видео-плеером, автоматически
запускающего видео-инструкцию приготовления продукта
(загружается с видеохостинга)
 Кто мы?: экран с описанием идеологии запуска продукта
Текст:

 Где купить?: экран с наименованием и ссылками на продукцию на

сайтах маркетплейсов/магазинов/кафе-ресторанов, где можно
приобрести продукцию
Список:
 Яндекс-лавка (пример):
https://lavka.yandex.ru/213/good/55ed76e6da8941c0bab1218787e458
77000200010001

 Контакты: экран с информацией по связи с производителем.

Будут предоставлены дополнительно.