Техническое задание на дизайн лендинга Pekarrini

Требуется разработать дизайн для сайта - одностраничного лендинга.
Цель лендинга: презентация бренда Pekarrini и продукции выпускаемой под данным брендом, привлечение входящих заявок, обеспечивающих необходимый объем производства.

Бренд Pekarrini - это зарегистрированная торговая марка компании ООО "РусУпак" из города Челябинска.
Под данным брендом выпускается продукция для запекания и выпечки:
  1. Бумага для выпечки без силикона (подпергамент)
  2. Бумага для выпечки пергаментная силиконизированная (пергамент)
  3. Фольга алюминиевая пищевая
  4. Рукав для запекания из полиэтилентерефталата (ПЭТ)
  5. Пакеты для запекания и заморозки из ПЭТ
Продукция реализуется как в секторе B2B (оптовые продажи), путем продаж менеджерами компании, так и секторе В2С (розничные продажи) - реализация через маркетплейсы Wildberries и Ozon. Чтобы более подробно ознакомиться с продукцией Pekarrini, нажмите сюда (ссылка на WB) или сюда (ссылка на Ozon).

Задачи лендинга:
1) Презентация продуктовой линейки для потенциальных оптовых клиентов, привлекаемых на сайт через контекстную рекламу.
2) Сбор заявок и контактных данных потенциальных клиентов через формы обратной связи (Получить прайс / Заказать консультацию / Начать сотрудничество и т.п.) с целью дальнейших поставок продукции этим клиентам.

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

Дополнительные комментарии:
> Важно отметить, что разрабатываемый лендинг нацелен именно на оптовых клиентов, так как для розничных продаж мы используем маркетплейсы. Соответственно, подача контента должна учитывать именно потребности клиентов B2B сектора (большие объемы производства, соблюдение сроков, скидки от объема, выпуск продукции под ТМ заказчика - об этом ниже).
> Лексически на сайте должен использоваться формальный, деловой язык общения. Не допускается обращение на "ты" и соответствующие формы частей речи (закажи, купи, посмотри и т.п.).
> Важно отметить, что мы являемся именно производителем продукции. Мы покупаем за рубежом сырье и в наших производственных цехах осуществляем намотку и упаковку конечной продукции, клеим этикетку.
> Соответственно, мы можем выпускать продукцию под торговой маркой (ТМ) и брендом заказчика. Этому будет посвящен отдельный тематический блок на лендинге.
Вводная часть
  1. Формат сайта: одностраничный лендинг, с последовательным вертикальным расположение тематических блоков.
  2. Дизайн должен быть выполнен в сервисе Figma, с последующим предоставлением доступа к проекту. Насколько мне известно, обладая достаточными правами, верстальщик уже самостоятельно сможет скачать из проекта исходники изображений, а также посмотреть размеры и расстояния объектов. Поправьте меня, если я не прав.
  3. Дизайн будет верстаться в сервисе Tilda с использованием технологии Zero Block. Поэтому каких-то технических ограничений для дизайна нет.
  4. Ширина страницы для расположения функциональных блоков (кликабельные элементы) - 1200 px. Дизайнерские элементы, которые выполняют функцию "фоновых" или оформительских объектов не ограничены по ширине, то есть могут быть больше 1200 px, вплоть до размеров "по ширине экрана".
  5. Для лендинга требуется отдельно отрисовать адаптивную версию дизайна для мобильных разрешений. Необходимость отрисовки дизайна под планшет будет обсуждаться отдельно с исполнителем.
Технические требования и сведения
  1. Шапка с меню
Слева направо: Логотип / Пункты меню (отразить 5 пунктов, "рыба") / Номер телефона (+7 900 123 55 99) / Кнопка "Заказать звонок" / Адрес электронной почты (pekarrini@ya.ru)

2. Основной блок
Слева текст "Продукция для запекания от производителя", справа изображение. По изображению предлагаю сделать "сборную" картинку, где изображены все виды нашей продукции (см. блок "Вводная часть"). Но они не единым изображением, а как бы отдельно. Идея в том, что при наведении на любой из продуктов, под ним проявляется небольшой цветной фон в виде пятна и рядом эллиптическая плашка с названием продукта*. Нажатие приводит к перемещению до якоря с карточкой данной продукции. Попробую визуализировать, что имеется ввиду:
Дизайн: описание элементов и блоков
static
hover
Фольга пищевая
В чем идея цветной подложки: я хочу сделать для каждого из пяти типов продукции свою цветовую кодировку, чтобы можно было сразу понять о чем идет речь. На данный момент ее нет, поэтому цвета на усмотрение дизайнера.
Сюда же в этот блок можно засунуть и иконки преимуществ, например, ниже под текст или снизу под всем блоком по центру*. 3 иконки преимуществ с подписями:
1) Большие объемы производства
2) Без наценки от перекупов
3) Доставка в любой город РФ
* Если у вас есть другое видение того, как может/должен выглядеть данный блок, это приветствуется - в таких вопросах я доверяю специалисту.

3. Блок с карточками продукции (каталог)
Заголовок "Наша продукция". В этом блоке планируется разместить 5 карточек, каждая из которых посвящена отдельному типу продукции. Вижу так, что карточки расположены друг под другом, каждая карточка по ширине страницы, визуально отделена от других объемным границами с закругленными краями.
Внутри карточки должна быть размещена следующая информация:
  • название продукции
  • картинка продукции
  • маленькое описание в 2-3 строки
  • информация про виды ширины, толщины и намоток, которые доступны для данного типа продукции
  • прикреплены сертификаты по продукции
  • кнопка "Получить прайс"
Визуально в моей голове это выглядит примерно так*:
Пакеты для запекания и заморозки
Небольшое описание товара, возможно характеристики в пару строк. Например: ПЭТ в картонном конверте. Размер конверта 25х30 см
Размеры, см:
25х35
30х40
45х55
Ваши размеры
Толщина, мкм:
10
12
14
Сертификат качества на продукцию
Таможенная декларация
Получить прайс
* Если у вас есть другое видение того, как может/должен выглядеть данный блок, это приветствуется - в таких вопросах я доверяю специалисту.

4. Блок про производство
Заголовок "Наше производство". В этом блоке сначала идет небольшой текст про то, где расположено наше производство, что на нем установлено современное оборудование, работают квалифицированный персонал, сколько продукции мы выпустили за прошлый год и т.п. Примерно 6-8 предложений, можно поставить "рыбу" пока.
Ниже идет небольшая фотогалерея, где мы разместим фотографии производства. Можно сделать мозаику, где первое изображение большое, остальные меньше, но это на усмотрение дизайнера, можно и стандартную в ленту. В общем, выбрать то, что будет смотреться органичнее.

5. Блок про Сертификаты (в нашем случае Декларации)
Заголовок "Вся продукция сертифицирована". В этом блоке мы напишем, что для каждого типа продукции у нас есть Декларации о соответствии (этот документ заменяет сертификат) и Протоколы испытаний на продукцию. Сами документы можно посмотреть на Яндекс Диске (ссылка), а визуализировать нужно так, чтобы не выкладывать сами документы напрямую на сайте (т.к. присутствуют названия контрактных брендов), а можно написать, что отправляем по запросы (или даже сделать форму с e-mail, телефоном и кнопкой "Получить").
В качестве референса блок с сайта Университета Биохимии и Нутрициологии -












6. Блок про изготовление продукции под торговой маркой заказчика
Заголовок "Контрактное производство". В этом блоке будет представлена информация о том, что мы можем изготовить продукцию под брендом заказчика. Клиент выбирает ширину и намотку (вложение) продукции, а также присылает макет этикетки и мы выпускаем нужный заказчику объем и отгружаем его. Информацию можно почитать на нашем сайте.
На картинках продукции нужно написать "Ваша марка" - очень похожие изображения (первые 2 изображения вообще аналогичная продукция) можно посмотреть вот тут.
Честно говоря, представления как это должно выглядеть, у меня нет. После беглого серфинга, удалось найти всего пару референсов, которые более-менее: тут только начало неплохое; тут и тут в целом представление информации, но это прям целые страницы.
7. Информация про бренд
Заголовок "Бренд Pekarrini". Здесь будет текстовая информация про бренд, можно сделать инфографику про бренд с графиком по годам (бренд существует с 2014 года) - но текста пока нет, можно использовать "рыбу". Или в качестве альтернативы поставить какое-нибудь коллажное изображение.

8. Вопрос-ответ
Заголовок "Полезная информация". Стандартный для Тильды блок типа "Аккордеон" с раскрывающимися ответами на вопросы. Аналог есть на сайте Университета Биохимии и Нутрициологии внизу страницы.
Вопросы и сами ответы будут составлены позднее, поэтому в дизайне разместить "рыбу".

9. Форма обратной связи
Заголовок "Начать сотрудничество". Перед подвалом хотелось бы разместить форму обратной связи со следующими полями:
  • Как к вам обращаться (ФИО)*
  • Электронная почта*
  • Телефон*
  • Название компании
  • Ваш город
Под формой (или над формой - в зависимости от того, где лучше будет смотреться) хотелось бы разместить 3 плашки с преимуществами. Референс можно посмотреть по ссылке (синие блоки с иконками).
10. Подвал
Стандартный подвал сайта. Нужно разместить колонку с заголовком "Продукция", под которым будут 5 типов выпускаемой продукции (см. раздел "Вводная часть"), с ссылками-якорями.
Также колонку "Сотрудничество" со следующими пунктами:
  • Каталог
  • Получить прайс
  • Контрактное производство
Справа от колонок логотип, номер телефона, кнопка "Заказать звонок" и адрес электронной почты.
Предпочтения по цвету сайта: темные фон, т.к. он лучше всего сочетается с продукцией, которая в основном либо прозрачная, либо светлых тонов (фольга - серебряная, бумага - белая или светло-коричневая).

Шрифты прямые, без засечек.

В качестве сайтов-референсов могу выделить следующие:
  1. https://tandoor-chef.ru/ - понравился больше всего
  2. https://rpzcnc.ru/
  3. https://indeechka.ru/ - понравился именно дизайн, тематика совсем не наша
  4. https://demo.templatemonster.com/ru/demo/275820.html - 4 вариант, понравился фон

Напомню, что конечное видение общей стилистики сайта остается за исполнителем, основные моменты по пожеланиям следующие:
  • Темный фон
  • Цветовая кодировка для разных типов продукции
Дизайн: предпочтения и референсы
Текстовые материалы сейчас в работе и их корректировка/дополнение будет зависеть от дизайн-макета сайта.
Из графических материалов, на данный момент, могу предоставить только логотип и то, только в растровых форматах, т.к. в векторе его не осталось, к сожалению. Все, что есть, тут - Ссылка на Я.Диск.
Фотографию продукции смогу предоставить немного позже, в виде фотографий с телефона. К сожалению, свежих фотографий без фона и в полный размер, у меня нет, только изображения для маркетплейсов (см. ссылки из Вводной части).
Материалы для лендинга

Спасибо за внимание!
Надеемся на плодотворное сотрудничество :)

Made on
Tilda