Можно ли за пару дней сделать хороший сайт?

Если по-честному, то сайт можно сделать всего-то за пару дней… Такое вот вам разоблачение от интернет-агентства Иллюминатор. Почему разоблачение – читайте в P. S. к статье. И пускай большинство агентств талдычит – на хороший сайт нужно как минимум пару месяцев! Мы скажем: Нет, хороший сайт можно сделать и за 3 дня. НО! При определенных условиях и договоренностях с клиентом. И сейчас мы о них расскажем.

Задача

Задачей, как вы уже поняли из вступления, было создать приличный сайт в ооочень сжатые сроки. Нужен был лендинг для анонсирования конференции Региональный ритейл: стратегии развития и операционное управление компании Кенгуру и сбора заявок на участие. Заказчик понимал, что поздно спохватился, поскольку до конференции оставалось чуть более 2-х месяцев, а надо собирать заявки. Лендинг был очень нужен, поэтому перед нами обозначили цель – сделать быстро, но чтобы выглядело прилично.

Решение

Мы сразу предупредили заказчика, что лендинг будет собран на конструкторе сайтов. Да, это действительно так – многие агентства иногда в своей работе используют конструкторы сайтов. Не знаем как другие, но мы это делаем по следующим причинам:

1. Когда нужно максимально сократить время на разработку сайта. Конструктор позволяет получить готовый код, который можно потом перенести целиком на хостинг либо переверстать на другую CMS.
2. Когда необходимо визуализировать сайт в динамике – чтобы не в статичном макете пытаться показать анимацию, переключение страниц и вкладок, а сразу предложить заказчику прототип сайта.
3. Когда заказчику нужен сайт без заморочек, он не готов платить за наши услуги полную ставку.

В этих случаях цель действительно оправдывает средства. Сайты, собранные на конструкторе, запускаются быстрее, а в дальнейшем мы просто их переверстываем на другую систему администрирования при необходимости или переносим на наш хостинг.

Как мы работаем через конструктор

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

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

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

Через конструктор мы можем сделать полностью весь многостраничный сайт, не только одну страницу. Это требуется, когда клиенту нужна визуализация, а не просто макеты из фотошопа. Получается такой демо-сайт, который можно сразу запускать после согласования дизайна, а потом потихоньку переверстывать, например, на 1С-Битрикс. То есть по факту в этом случае через конструктор мы собираем дизайн всего сайта. Но обычно такой схемы разработки придерживаемся, когда нужен именно одностраничный сайт. Как тот, про который вы сейчас читаете кейс.

Структура обусловлена задачей лендинга

Над структурой тоже нельзя было долго думать. Поэтому мы решили идти по стандартной схеме оформления таких промо-сайтов:

1. определить цель страницы – побудить посетителя зарегистрироваться на мероприятие.
2. описать суть конференции понятными словами и объяснить, почему важно в ней участвовать и зачем она нужна.
3. презентовать спикеров мероприятия.
4. ознакомить посетителя лендинга с программой.
5. дать контактную информацию.

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

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

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

Что еще интересного в навигации и структуре + анимация

Для удобства навигации мы добавили строку прокрутки экрана и кнопку Вверх, которая появляется при прокрутке. Меню не стали фиксировать, потому что кнопка итак позволяет вернуться в начало страницы. Для динамики добавили различную анимацию: текстовые блоки выплывают с разных сторон при прокрутке. Ну, здесь ничего сверхъестественного. Но что самих порадовало – бегущие цифры в блоке Давайте делиться реальным опытом 24, 12, 200, 100. Просто прикольно – задерживает внимание посетителя.

Форма регистрации на конференцию

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

Затем оказалось, что люди отказываются от регистрации, потому что не хотят / не могут указать свои реквизиты. Мы доработали и эти поля – переделали оформления для удобства восприятия:

Прочие фишки

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

Дизайнерские решения

В качестве основных цветов мы решили использовать темно-синий #0c112e, белый #ffffff и серый #f2f2f2. Акцентным цветом стал ярко-желтый #ffc000, близок к янтарному. Эти цвета играют друг с другом: если синий в качестве фона, то тексты белым цветом, если фон серый, то текст синим и так далее. Желтый же цвет – как бы сам по себе, но при этом объединяет весь сайт и подсказывает посетителю, где более важные части, управляет его вниманием. Фотографии спикеров мы перевели в монохромную гамму и с помощью того же желтого оформили в общей стилистике сайта.

Результат / P. S.

Лендинг, собранный в такие короткие сроки, получился достаточно приличный, чтобы запилить о нем кейс. Сколько участников он помог привлечь – это уже другая история. И другой кейс. Основная мысль текста, который вы сейчас, надеемся, дочитываете: сайт сделать быстро и хороший можно и даже не сложно, единственное – надо понять, для каких целей вам нужен быстрый сайт.

Если для анонсирования мероприятия, то все-таки лучше начинать заранее, чтобы добиться желаемого эффекта. Если для продажи отдельного вида товаров или услуг, то лендинги еще пока эффективны в этом плане. Чтобы на них не тратить много человекочасов, можно не бояться делать их на конструкторе. Это ни в коем случае не свидетельствует о НЕпрофессионализме агентства. Просто цель должна оправдывать средства, ведь эти средства – ваши деньги. О создании сайтов на конструкторах сейчас смело говорят даже крупные агентства, в том числе московские.