подробный кЕЙС по созданию сайта
Сайт для компании по аренде полевых кухонь на мероприятия
Александр Бакалов
Сайтостроитель и веб-дизайнер
Здравствуйте, меня зовут Александр Бакалов. Я занимаюсь разработкой продающий сайтов и интернет-магазинов. В этом кейсе я хочу подробно рассказать вам о том, как я создал сайт для организации, предоставляющей услуги по аренде полевой кухни в Санкт-Петербурге
Вкратце о проекте
Ко мне обратился заказчик, занимающийся услугами кейтеринга. Он хотел сделать персональный лендинг под один свой проект – полевые кухни для военно-тактических игр. Им было замечено, что полевые кухни чаще всего интересны любителям страйкбола, пейтнбола и лазертага. Любители этих игр часто устраивают турниры на открытой природе и для организации питания предпочитают заказывать полевую кухню.
Задачи сайта
Основная задача сайта – конвертировать зашедших на него людей в заявки. Для того чтобы повысить конверсию было решено использовать не стандартную форму захвата, а квиз, задающий вопросы и помогающий рассчитать стоимость.
Человеку предлагается ответить на 5 вопросов и рассчитать стоимость, в конце мы спрашиваем у него телефон, чтобы менеджер мог с ним связаться, назвать итоговую цену и обсудить потенциальное сотрудничество.
Ключевые действия на сайте
Ключевых действий здесь два:
1. Нажатие на кнопку и открытие квиза (оно говорит о некой заинтересованность этого человека, таких людей мы решили собирать в отдельную базу ВКонтакте и Facebook для дальнейшего ретаргетинга)
2. Оставления своего номера телефона – конечное ключевое действие, когда мы получаем лида
1. Нажатие на кнопку и открытие квиза (оно говорит о некой заинтересованность этого человека, таких людей мы решили собирать в отдельную базу ВКонтакте и Facebook для дальнейшего ретаргетинга)
2. Оставления своего номера телефона – конечное ключевое действие, когда мы получаем лида
Портреты целевой аудитории
Лендинг заточен под узкую целевую аудиторию – любителей пейнтбола, страйкбола и лазертага. Иногда заказывают реконструкторы
Любитель военно-тактических игр или реконструктор
Заказывает полевую кухню на игру
Боли: отсутствие достойного горячего питания после раунда игры, дискомфорт из-за плохого питания на многодневной игре
Потребности: хорошо поесть горячей еды с мясом после игры, умеренная цена для всех участников, армейский рецепт (это заказчик особо подчеркнул). Но также полевая кухня зачастую может дополнять атмосферу самого мероприятия. Возможность доставить кухню даже в удаленные районы Ленинградской области.
Например, заказчик рассказывал случай, как он участвовал в выезде военных реконструкторов, посвященному советской — финской войне. Тогда все его сотрудники были одеты в форму времен начала 40-х годов, что очень здорово дополняло всю атмосферу мероприятия.
Потребности: хорошо поесть горячей еды с мясом после игры, умеренная цена для всех участников, армейский рецепт (это заказчик особо подчеркнул). Но также полевая кухня зачастую может дополнять атмосферу самого мероприятия. Возможность доставить кухню даже в удаленные районы Ленинградской области.
Например, заказчик рассказывал случай, как он участвовал в выезде военных реконструкторов, посвященному советской — финской войне. Тогда все его сотрудники были одеты в форму времен начала 40-х годов, что очень здорово дополняло всю атмосферу мероприятия.
Как мы решаем эти потребности:
1. Наша кухня мобильна, ее доставим в любой уголок СПб и ЛО. Готовим на огне, что придает аромат еде, а также не требует газа и электричества для готовки – тоже плюс к нашей мобильности и возможности работать в дальних районах
2. Рецепт и порции можно обговорить заранее, это позволяет подстроиться под вкусы людей и под сам формат мероприятия (например, если кухня выезжает на мероприятие, посвященное периоду Первой мировой войне, то и солдатскую еду мы сможем приготовить именно по рецептам того времени)
3. Форма персонала также может быть подстроена под исторический период. У заказчика есть большие знакомства в среде реконструкторов, поэтому может взять форму того или иного периода на небольшой срок
4. Еда всегда горячая и приготовленная на месте, это дополнительный плюс, что после окончания раунда игры люди могут поесть теплой пищи и отдохнуть
Шрифты и цвета
Когда мы уже более-менее разобрались с целевой аудиторией и маркетинговыми задачи, то самое время перейти к разбору самого сайта.
Честно признаюсь, анализируя выбор шрифта заголовка сейчас, жалею, что выбрал довольно простой Roboto. Для передачи атмосферы стоило бы конечно выбрать более брутальный шрифт, эмоционально передающий суть бизнеса.
Честно признаюсь, анализируя выбор шрифта заголовка сейчас, жалею, что выбрал довольно простой Roboto. Для передачи атмосферы стоило бы конечно выбрать более брутальный шрифт, эмоционально передающий суть бизнеса.
Сетка и стиль углов
Сетка – это силовые линии, на которые опирается дизайнер, когда расставляет элементы на сайте. Сетка мной была избрана довольно простая с проверенная временем – равнение всех элементов по левой силовой линии. Это означает, что заголовки, подзаголовки, тексты и другие элементы ровняются по правому краю.
Данный подход позволяет создать понятную систему размещения элементов на сайте, которая интуитивно понятна большинству людей – когда все элементы идут вертикальной вдоль одной линии
Заказчик не захотел делать скругленные углы у элементов, поэтому мы решили придерживаться угловатого дизайна:
Данный стиль мы поддерживали во всех элементах, за исключением перечисления гарантий – там для контраста мы решили использовать традиционные круглые элементы:
Система отступов
Система отступов – это заранее разработанные расстояния, которые мы отступаем от каждого элемента. Система отступов должна быть единой и заранее определенной.
Это поможет сделать ваш сайт более стильным единообразным. Чтобы расстояния от заголовка в первом и последнем блоках были одинаковыми и ваш сайт производил впечатление одинаковости на посетителей.
Основные виды отступов и их размер:
1. Расстояние от контента до конца/начала блока – 110px
Это поможет сделать ваш сайт более стильным единообразным. Чтобы расстояния от заголовка в первом и последнем блоках были одинаковыми и ваш сайт производил впечатление одинаковости на посетителей.
Основные виды отступов и их размер:
1. Расстояние от контента до конца/начала блока – 110px
2. Расстояние от заголовка до любого контента (фото или видео) – 80px.
Заметьте, что расстояние внутри блоков всегда меньше, чем расстоянием между ними и от начала блока до начала контента!
3. Межстрочный интервал (интерлиньяж) – 1,5 у текста подзаголовка и 1.3 у заголовков H1 и H2
Повторюсь, что данные отступы позволяют создать единую систему симметрии сайта, что производит отличное первое впечатление на посетителя сайта.
Разбор каждого из блоков сайта
1. Первый блок – озвучиваем наши преимущества и предлагаем рассчитать стоимость
На первом экране мы обозначаем, что работаем по СПб и ЛО, а также даем понять, что готовы предоставить кухню и сотрудников на любое мероприятие.
Иконки ниже дают понимание, что мы работаем официально (это особенно актуально, если мероприятие устраивается от имени юридического лица), готовим на огне и по советским рецептам (это будет бонусом в глазах любителей военно-тактических игр)
Иконки ниже дают понимание, что мы работаем официально (это особенно актуально, если мероприятие устраивается от имени юридического лица), готовим на огне и по советским рецептам (это будет бонусом в глазах любителей военно-тактических игр)
Как я описывал выше, мы решили собирать лиды не "в лоб", а через квиз. Поэтому подзаголовок призывает рассчитать стоимость. При нажатии на кнопку открывается модальное окно с квизом, по прохождению которого человеку предлагается оставить телефон.
2. Второй блок – показываем, чем хороша полевая кухня на военно-тактических играх
Расставляем контент в шахматном порядке – это позволяет подстроиться под естественное движение взгляда человека по тексту.
Задача данного блока – дополнительно убедить любителей страйкбола, пейнтбола и лазертага в том, что полевая кухня поможет в создании незабываемой атмосферы на выезде, а также сделает игру более комфортной.
3. Третий блок – более детально расписываем услуги, входящие в стоимость
Все эти аргументы были получены в результате глубокого анализа потребностей аудитории и после подробного заполнения брифа заказчиком.
Таким образом, этот блок позволяет более детально раскрыть содержание нашей услуги и заранее предвосхитить вопросы потенциального клиента.
Таким образом, этот блок позволяет более детально раскрыть содержание нашей услуги и заранее предвосхитить вопросы потенциального клиента.
Иконки при перечислении аргументов создают дополнительную ассоциацию, что повышает скорость восприятия информации пользователем.
4. Четвертый блок – перечисляем главные гарантии
По сути, этот блок – отработка самых частых возражений клиентов. Мы, при помощи создания этого блока, предвосхищаем возражения и облегчаем работу заказчика с оставившим заявку человеком.
5. Пятый блок – живые фотографии с наших мероприятий
При помощи демонстрации фотографий, мы более детально показываем свой подход к работе и дополнительно повышаем уровень доверия.
6. Шестой блок – напоминаем человеку о возможность прямо сейчас рассчитать цену
Этот блок позволяет упростить переход к расчету цены для людей, долиставших сайт до низа и дополнительно напоминает о ключевом действии.
7. Седьмой блок – отвечаем на второстепенные вопросы
1. Первостепенные (на которые мы отвечали в блоках выше) – это вопросы, которые могут стать решающими в принятии решения клиентом. На них нужно ответить в первую очередь
2. Второстепенные (их мы решили перенести в блок "частые вопросы") – эти вопросы не так важны для принятия решения, но клиенты тоже часто их задают при личном общении с заказчиком
2. Второстепенные (их мы решили перенести в блок "частые вопросы") – эти вопросы не так важны для принятия решения, но клиенты тоже часто их задают при личном общении с заказчиком
Чтобы человек не запутался, я выделил вопрос темно-зеленым цветом. За счет более контрастного цвета такое облачко с вопросом привлекает внимание первым и не дает человеку перепутать место где написан вопрос и ответ.
8. Восьмой блок – показываем адрес и даем контакты
На этапе обсуждения заказчик упомянул, что многие предпочитают звонить по телефону или оставлять заявку на e-mail. Поэтому эти варианты коммуникации мы также указали.
Нажав на телефон или e-mail, человека автоматически перебрасывает в приложение для отправки почты или совершения звонка.
Нажав на телефон или e-mail, человека автоматически перебрасывает в приложение для отправки почты или совершения звонка.
Настройка якорей
Якорь – это специальная ссылка перемещающая, человек с одной части страницы в другую часть экрана. Причем, все перемещения происходят на одной странице.
В Тильде есть стандартный блок "якоря", позволяющий перемещаться между разными блоками. Но что делать, если весь сайт создан в одной зеро-блоке без разделения на отдельные блоки по экранам?
В Тильде есть стандартный блок "якоря", позволяющий перемещаться между разными блоками. Но что делать, если весь сайт создан в одной зеро-блоке без разделения на отдельные блоки по экранам?
В этом случае я советую действовать следующим образом:
1. Перейти в зеро-блок и создаем HTML-документ. Документ нужно расположить в том месте, куда вы хотите перенаправлять пользователя (то есть на месте, где должен быть сам якорь)
2. Прописать в HTML-документе следующий код:
<div id="001"></div>
001 – индивидуальный номер этого блока, на который мы будем направлять экран после нажатия на какой-либо элемент. Вместо "001" вы можете ставить любое число, главное чтобы значения якорей не повторялись
<div id="001"></div>
001 – индивидуальный номер этого блока, на который мы будем направлять экран после нажатия на какой-либо элемент. Вместо "001" вы можете ставить любое число, главное чтобы значения якорей не повторялись
3. После этого создаем кнопку и затем вставляем в раздел "URL" следующее значение:
4. Если вы хотите поместить якорь в меню, то также ставьте там это значение:
Теперь при нажатии на кнопку или элемент меню, вас автоматически перекидывает в нужную часть экрана, где находится этот HTML-код
Настрока анимации в зеро-блоке
При создании сайта я использовал анимацию в самом зеро-блоке. Она заключалась в том, что некоторые элементы подгружаются только после того, как оказываются в зоне видимости экрана. Ниже я расскажу вам о том, как настроить такой простой вид анимации в зеро-блоке.
Для создания такой анимации вам нужно:
1. Перейти в зеро-блок и нажать на элемент, который вы хотите анимировать:
Для создания такой анимации вам нужно:
1. Перейти в зеро-блок и нажать на элемент, который вы хотите анимировать:
2. Перейти в раздел "basic animation" и выберите один из способов появления элемента при скролле: сверху, снизу и т.д.
3. Затем нужно выбрать duration – скорость появления элемента. Я советую выбирать скорость до 0.5 секунды
4. Чтобы посмотреть как будет выглядеть анимация, нажмите "Play All" или "Play element"
Создание квиза на Тильде и привязка его к кнопке
При создании сайта я использовал анимацию в самом зеро-блоке. Она заключалась в том, что некоторые элементы подгружаются только после того, как оказываются в зоне видимости экрана. Ниже я расскажу вам о том, как настроить такой простой вид анимации в зеро-блоке.
Квиз – это онлайн тест с последовательными вопросами, который в самом конце заканчивается ключевым действием. Квиз позволяет не брать заявку "в лоб", а сначала вовлечь человека во взаимодействие с сайтом и только потом попросить контактные данные. Такой подход позволяет квизу существенно повысить конверсию вашего сайта.
При создании сайта я использовал анимацию в самом зеро-блоке. Она заключалась в том, что некоторые элементы подгружаются только после того, как оказываются в зоне видимости экрана. Ниже я расскажу вам о том, как настроить такой простой вид анимации в зеро-блоке.
Квиз – это онлайн тест с последовательными вопросами, который в самом конце заканчивается ключевым действием. Квиз позволяет не брать заявку "в лоб", а сначала вовлечь человека во взаимодействие с сайтом и только потом попросить контактные данные. Такой подход позволяет квизу существенно повысить конверсию вашего сайта.
1. Создать квиз можно легко в самой Тильде. Для этого подойдет блок BF920 – Popup – пошаговая форма
2. Стандартные настройки этого блока помогут вам задать размер блока, а также подстроить шрифт и цвета квиза под стиль вашего сайта.
3. Чтобы изменить вопросы в квизе, переходите на раздел "Контент":
4. Чтобы открывать PopUp форму при нажатии на кнопку, скопируйте этот текст на самом блоке:
Создание кнопки "Наверх"
Кнопка "Наверх" позволяет человеку вернуться наверх страницы без использования скролла. Данный элемент упрощает перемещение человека по странице.
1. Это стандартный элемент в Тильде:
1. Это стандартный элемент в Тильде:
2. Чтобы поменять внешний вид этой кнопки, нажмите на раздел "Настройки". Кнопка автоматически поднимает человека до 1 экрана.
Самокритика и выводы
В этом разделе я немного покритикую свою работу. Потому что на расстоянии проект и многие решения выглядят иначе
В частности, я бы поменял:
1. Блок "Частые вопросы". Как мне сейчас кажется, я немного намудрил с блоком "частые вопросы". Можно было просто создать его стандартным блоком Тильде с выпадающими вопросами.
Я же решил самостоятельно создать эти облачка, что создало дополнительные трудности и отняло много времени на этапе верстки под мобильные устройства и планшеты.
Я же решил самостоятельно создать эти облачка, что создало дополнительные трудности и отняло много времени на этапе верстки под мобильные устройства и планшеты.
2. Качество некоторых фото. Тут уж это не только от меня зависит, а от тех материалов, которые предоставил заказчик и от тех фото, которые в принципе у него были.
Отзыв заказчика о работе
Другие отзывы о работе со мной вы можете прочитать по ссылке:
https://vk.com/topic-135294483_41850487
https://vk.com/topic-135294483_41850487
Ответьте на все вопросы, чтобы рассчитать стоимость создания сайта
Вы ответили на все вопросы. Осталось только указать телефон!