Лендинг «Брендико»: дизайн и вёрстка для печати на одежде

«Брендико» печатает логотипы на одежде и сувенирах в Новосибирске. Для компании мы нарисовали и сверстали лендинг: одну страницу, где посетитель читает про способы печати, смотрит примеры и оставляет заявку. Дизайн сделан в трёх версиях: для компьютера, планшета и телефона. Заявка из формы попадает в amoCRM клиента. Дизайн занял время с 25 декабря 2020 по 20 января 2021 года, вёрстка с 8 по 27 января 2021 года.

Кто клиент и что он просил

«Брендико» наносит печать на одежду, сувениры, аксессуары и пакеты. Клиенту нужна была одна страница под рекламу. Человек приходит с объявления, видит, что компания умеет, и нажимает кнопку расчёта стоимости.

В задании было пять условий:

1. Простая структура. Первый экран с преимуществами, подвал и между ними блоки «слайдер плюс текст».
2. Много текста, который удобно читать. Рядом со слайдером стоит описание способов печати. Текст разной длины, и страница должна выглядеть ровно при любом объёме.
3. Свой шрифт. Заказчик хотел Futura в заголовках.
4. Свой цвет. Основной цвет Ultimate Gray, код #939597. Фон блоков строится на цвете года по Pantone 2021.
5. Форма заявки и версия для телефона. Форму рисуем со всеми состояниями. Для телефона отдельная структура.

Как устроен лендинг

Страница собрана из пяти частей, и каждая отвечает на свой вопрос посетителя.

Первый экран. Заголовок, кнопка расчёта стоимости и шесть преимуществ со значками: качество печати, выполнение заказа от одного дня, соотношение цены и качества, сборка подарочных наборов, подготовка макетов и доставка. В правом верхнем углу круглая кнопка звонка. Под преимуществами четыре чёрточки: так показан слайдер фотографий.

Блок про печать на одежде. Слева заголовок и текст, справа слайдер с фотографиями работ. В тексте четыре способа печати: шелкография, термоперенос, прямая цифровая печать и сублимация. У каждого одна строка пояснения.

Блок про сувениры. Та же схема, но зеркально: слайдер слева, текст справа. Фон темнее. Глаз не устаёт от одинаковых экранов, и видно, где кончился один блок и начался другой.

Производство. Яндекс-карта с адресом и слайдер фотографий с готовыми изделиями.

Подвал. Вопрос «Остались вопросы?», кнопка «Задать вопрос», часы работы, адрес и контакты.

Как решили задачу «много текста»

Текст на этой странице важен: по нему человек понимает, чем один способ печати отличается от другого. Поэтому мы сделали его читаемым.

• Названия способов печати выделены жирным, пояснение идёт обычным шрифтом.
• Списки с галочками вместо чёрточек. Расстояние между галочкой и текстом сделали небольшим.
• Слайдер и текст стоят в одном ряду, и макет рассчитан на разный объём текста: короткое описание и длинное выглядят ровно.
• 10 января тексты блоков немного сократили, чтобы читать было легче.

Шрифт и цвет

В заголовках Futura, как просил заказчик. Серый фон блоков построен на основном цвете Ultimate Gray. Тёмный блок с сувенирами сделан графитовым, а кнопки и значки бирюзовые: на сером они хорошо заметны. Красный фирменный логотип «Брендико» стоит в левом верхнем углу и на сером выглядит ярко.

Форма «Перезвоните мне»

Форма главная на лендинге: из неё приходят заявки. Мы нарисовали её с состояниями, а не одной картинкой.

• Поля. Имя, телефон, почта и согласие на обработку персональных данных.
• Ошибки. Форма показывает ошибки заполнения: человек видит, какое поле нужно поправить.
• Окно «Спасибо». После отправки человек видит, что заявку приняли.

Когда сверстали форму, добавили маску для телефона: пока человек вводит цифры, появляются скобки и дефисы. Так человек сразу видит, что номер введён полностью.

Три версии: компьютер, планшет и телефон

Основной макет нарисован на ширину экрана 1920 пикселей. Для планшета и телефона сделали отдельные версии. Макет для телефона не просто уменьшенная копия.

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

• Слайдер должен стоять по ширине содержимого страницы.
• Яндекс-карту нужно заблокировать от случайных движений: человек листает страницу пальцем и не должен сдвигать карту.
• Точки слайдера держатся в блоке фиксированной ширины и при росте числа слайдов становятся мельче.

Сроки по задачам

Работа шла двумя задачами. Дизайн нарисовали в первой, вёрстку сделали во второй.

Как шла вёрстка, по датам:

1. 8 января. Сверстали первый вариант, форму и слайдеры, часть адаптивной версии. В задаче дизайна в этот день появились исходники и значки отдельным архивом, а 10 января файл с подвалом.
2. 9 января. Доделали версию для телефона и установили страницу на движок 1С-Битрикс. Выложили на тестовый сервер, и клиент мог проверить письма из формы.
3. 10 января. Правки по замечаниям: слайдер, карта, точки слайдера на телефоне, тексты блоков.
4. 11 января. Перенесли сайт на рабочий хостинг по адресу «Брендико». Сделали ссылку на блок с сувенирами: по ней идут люди с рекламы. Поставили галочки в списках, подключили счётчик Яндекс.Метрики.
5. 12 января. Поправили код Метрики, добавили Google Analytics. Начали настройку передачи заявок в amoCRM.
6. 13 и 14 января. Дописали интеграцию с amoCRM, исправили подпись «комплектация», расставили фото в слайдере в порядке, который прислал клиент.
7. 15 января. Клиент проверил amoCRM: заявки приходят, всё в порядке. В этот же день добавили маску телефона.
8. С 20 по 27 января. Ещё раз проверили отправку с телефона и передачу в amoCRM. 27 января задачу закрыли.

Что получилось

Мы сдали рабочий лендинг по макету: страницу в трёх версиях, форму «Перезвоните мне» с ошибками и окном «Спасибо», счётчики Яндекс.Метрики и Google Analytics, передачу заявок в amoCRM.

Похожую страницу под вашу задачу посмотрите на странице «Лендинг под ключ». Другие примеры: одностраничный сайт для промышленных полов Eco-crete и сайт для банной печи за сутки.

Для технических специалистов

• Дизайн. Макет в Photoshop на ширину 1920 px, значки отдельными PNG, подвал отдельным файлом. Основной цвет Ultimate Gray (#939597), Futura в заголовках.
• Движок. Страница работает на 1С-Битрикс. Сначала её проверяли на тестовом сервере, потом перенесли на рабочий хостинг. Для хостинга настроили параметры под Битрикс и SSL.
• Форма. Заявка записывается в раздел админки и создаёт в amoCRM контакт и сделку. Название контакта зависит от устройства: «Контакт с Брендико.ру» с компьютера и отдельное название с телефона. Сделку получает ответственный сотрудник, которого назвал клиент. Доступ к amoCRM клиент выдаёт сам через токен. Пока шла отладка, велись логи, потом их убрали.
• Адаптив. Три версии: ПК (1920), планшет, телефон. По замечаниям клиента на телефоне: слайдер по ширине контента, карта не двигается от прокрутки пальцем, точки слайдера в блоке фиксированной ширины.
• Счётчики. Яндекс.Метрика и Google Analytics подключены в шаблоне, код вынесен в подвал.
• Ссылка из рекламы. Якорная ссылка ведёт прямо на блок сувенирной продукции.