подробный кЕЙС по созданию сайта
Сайт для интернета-магазина по продаже защитных масок
Александр Бакалов
Сайтостроитель и веб-дизайнер
Здравствуйте, меня зовут Александр Бакалов. Я занимаюсь разработкой продающий сайтов и интернет-магазинов. В этом кейсе я хочу подробно рассказать вам о том, как я создал сайт для магазина по продаже средств индивидуальной защиты.

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

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

Цель данного временного проекта была, с одной стороны, помочь людям купить маски по более-менее приемлемым ценам (так как очень многие розничные магазины сильно завышали цену), а также получить дополнительный доход за счет продажи масок, чтобы поддержать основной бизнес на плаву и сохранить занятость сотрудников.
Задачи сайта
Основная задача сайта – конвертировать зашедших на него людей в заявки. Помимо этого, сайт должен помочь отстроиться от конкурентов и создать доверие у посетителей. Отстроиться от конкурентов в нише продажи массовых товаров довольно сложно, поэтому заказчик предложил тактику псевдо-УТП.

Псевдо-УТП – это уникальное торговое предложение, основная задача которого – дать людям возможность посмотреть на привычные вещи под другим углом. Вот один классический пример псевдо-УТП – "Подсолнечное масло без холестерина". В подсолнечном масле в принципе холестерина нет, так как он полностью убирается на этапе производства и подготовки сырья. Но один из производителей масла решил выделиться (то есть отстроиться) от конкурентов за счет то, что написал на упаковке "подсолнечное масло без холестерина", тем самым заставив посмотреть покупателей на свой продукт под другим углом.

Итак, здесь мы решили избрать похожую тактику. Все маски и костюмы априори гипоаллергенные, но, проведя анализ конкурентов, я выяснил, что никто не делает акцент на этом качестве во время продажи свои продуктов.
Ключевые действия на сайте
Учитывая, что товара не так много, мы с заказчиком решили создать сайт-одностраничник. Здесь нет корзины, как в традиционных интернет-магазинах, поэтому главное ключевое действие – оставить заявку или позвонить по телефону.

Как говорил мне заказчик, примерно около 1/3 всех заказов поступают ему по телефону. Именно поэтому мы решили разместить номер телефона на 1 экране рядом с кнопкой.
Портреты целевой аудитории
Составление подробного портрета ЦА позволяет создать контент для сайта, закрывающий потребности ваших клиентов

Частное лицо

Человек покупает маски для себя и близких

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

Боится внешних контактов, поэтому предпочитает бесконтактную доставку.


Потребность – купить маски для себя, своих друзей и близких. Цель перепродажи масок отсутствует. Хочет купить качественную маску по приемлемой цене, чтобы она реально защищала.


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

Мелкий оптовик
Покупает маски для себя и для небольшой перепродажи
Боль – высокие оптовые цены на маски. Оптовики не хотят работать с теми, кто закупает товар ниже определенного количества, поэтому реальные оптовики для него закрыты. Покупать в рознице дорого, поэтому ему нужны специальные ценовые условия для мелких оптовиков +возможность купить небольшую партию.

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

Как мы решаем эту потребность: даже розничные цены ниже, чем у многих оптовиков, при заказе более 1 упаковки делаем скидки, что делает сотрудничество с нами выгодным для мелких оптовиков. Доставляем товар по почте или любой транспортной компанией в течение 5-7 дней.
Крупное или среднее юридическое лицо
Покупают средства защиты для сотрудников или для крупной перепродажи
Боль – многие оптовики сильно завышают цены, а также долго отгружают товар. Предприятие, работающее в период пандемии, срочно нуждается в довольно большом числе средств и индивидуальной защиты.

Потребность – получить безопасные маски и костюмы для своих сотрудников по приемлемой цене и быстро по времени.

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

Буду честным сразу же признаюсь, что этот сайт был моим первым сайтом, который я спроектировал с самого нуля, без использования стандартных блоков Тильды. Поэтому многие ошибки, которые вы заметите ниже, будут вполне логичны.
Сетка и стиль углов
Сетка – это силовые линии, на которые опирается дизайнер, когда расставляет элементы на сайте. Сетка мной была избрана довольно простая с проверенная временем – равнение всех элементов по левой силовой линии. Это означает, что заголовки, подзаголовки, тексты и другие элементы равняются по левому краю.
Данный подход позволяет создать понятную систему размещения элементов на сайте, которая интуитивно понятна большинству людей – когда все элементы идут вертикальной вдоль одной линии
Также было принято решение сделать дизайн без прямых углов, а сгладить их при помощи закругления. Размер закругления был выбран равный 15: данный радиус скругления сохраняется во всех элементах сайта, что придает ему единый стиль.
Система отступов

Система отступов – это заранее разработанные расстояния, которые мы отступаем от каждого элемента. Система отступов должна быть единой и заранее определенной.

Это поможет сделать ваш сайт более стильным единообразным. Чтобы расстояния от заголовка в первом и последнем блоках были одинаковыми и ваш сайт производил впечатление одинаковости на посетителей.

Основные виды отступов и их размер:

1. Расстояния между блоками – 140 px
2. Расстояния от заголовка до подзаголовка – 55px
3. Межстрочный интервал (интерлиньяж) – 1,4
4. Горизонтальные отступы между элементами – 55 px
Повторюсь, что данные отступы позволяют создать единую систему симметрии сайта, что производит отличное первое впечатление на посетителя сайта.
Разбор каждого из блоков сайта
1. Первый блок - главный экран
Задача 1 экрана – за 3-4 секунды дать человеку понять:

  • Что за продукт находится перед ним
  • Чем этот продукт закрывает боли человека
  • Что отличает этот продукт от конкурентов
  • Показать, какое ключевое действие нужно совершить дальше

На мой взгляд, наш первый экран с этой задачей довольно хорошо справляется:

  • Дает ясно понять, что на это сайте продаются маски и костюмы
  • Закрывает одну из главных болей – цену, также снимает страх, что маски могут затруднять дыхание и быть доставлены не бесконтактным способом
  • Продукт отличается от конкурентов тем, что мы позиционируем нашу продукцию как гипоаллергенную и безопасную для людей с заболеваниями легких
  • Ключевые действия – позвонить или спуститься в каталог ниже, нажав на кнопку
2. Второй блок – рассказываем о методах, которыми чаще всего заражаются люди
Демонстрация возможных вариантов заражения заставляет человека еще раз задуматься о том, что нужно дополнительно усилить свою безопасность при помощи средств индивидуальной защиты. Использование иконок позволяет демонстрировать информацию более наглядно, что повышает быстроту ее восприятия.
3. Третий блок – каталог товаров
В подзаголовке специально дублируется информацию о бесконтактной доставке, что еще раз дополнительно отрабатывает возражение человек, который боится заразиться при покупке нашего товара.

Человек имеет возможность пролистать фото, не заходя в карточку товара. Согласен, что сейчас я бы выполнил этот блок немного иначе – переключения при помощи стрелочек выглядят немного топорно. Лучше реализовать это при наведении курсора.
4. Четвертый блок – делаем упор на защиту близких
В процессе исследования ЦА было обнаружено, что многие люди не так сильно боятся за себя, сколько за своих пожилых родственников. Поэтому мной и заказчиком было решено создать блок, отдельно прорабатывающий эту боль аудитории.

Здесь мы разместили текст, рассказывающий о том, почему сейчас цены на маски сильно поднялись, а также объясняющий, что мы даем минимальную наценку специально, чтобы сохранять баланс между оптимальной стоимостью изделия и нашей выручкой.
В последнем абзаце текста мы пишем, что люди могут снизить свое чувство тревоги, позаботившись должным образом над покупкой средств индивидуальной защиты для своих близких. Таким образом, мы показываем человеку путь решения его вопроса – избавления от постоянного чувства тревоги.
5. Пятый блок – отрабатываем возражение о бесполезности медицинских масок
В СМИ и интернете в марте-апреле было много неоднозначной информации, которая говорила о возможной бесполезности и даже вредности ношения масок. Мы решили посвятить этому вопросу отдельный раздел сайта, чтобы отработать это возражение человека.
6. Шестой блок – показываем сертификаты
Чтобы окончательно убедить людей в безопасности и надежности нашей продукции, мы демонстрируем сертификаты соответствия.
7. Седьмой блок – возвращаем человека к каталогу
Чтобы упростить переход к каталогу для людей, долиставших сайт донизу, при нажатии на кнопку человека автоматически перебрасывает в каталог с товарами.
8. Восьмой экран – контактные данные
Традиционно, в самом конце даем контактные данные. Нажав на телефон или e-mail, человека автоматически перебрасывает в приложение для отправки почты или совершения звонка.

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

В Тильде есть стандартный блок "якоря", позволяющий перемещаться между разными блоками. Но что делать, если весь сайт создан в одной зеро-блоке без разделения на отдельные блоки по экранам?
В этом случае я советую действовать следующим образом:
1. Перейти в зеро-блок и создаем HTML-документ. Документ нужно расположить в том месте, куда вы хотите перенаправлять пользователя (то есть на месте, где должен быть сам якорь)
2. Прописать в HTML-документе следующий код:

<div id="001"></div>

001 – индивидуальный номер этого блока, на который мы будем направлять экран после нажатия на какой-либо элемент. Вместо "001" вы можете ставить любое число, главное чтобы значения якорей не повторялись
3. После этого создаем кнопку и затем вставляем в раздел "URL" следующее значение:
4. Если вы хотите поместить якорь в меню, то также ставьте там это значение:
Теперь при нажатии на кнопку или элемент меню, вас автоматически перекидывает в нужную часть экрана, где находится этот HTML-код
Настрока анимации в зеро-блоке
При создании сайта я использовал анимацию в самом зеро-блоке. Она заключалась в том, что некоторые элементы подгружаются только после того, как оказываются в зоне видимости экрана. Ниже я расскажу вам о том, как настроить такой простой вид анимации в зеро-блоке.

Для создания такой анимации вам нужно:

1. Перейти в зеро-блок и нажать на элемент, который вы хотите анимировать:
2. Перейти в раздел "basic animation" и выберите один из способов появления элемента при скролле: сверху, снизу и т.д.
3. Затем нужно выбрать duration – скорость появления элемента. Я советую выбирать скорость до 0.5 секунды
4. Чтобы посмотреть как будет выглядеть анимация, нажмите "Play All" или "Play element"
Самокритика и выводы
В этом разделе я немного покритикую свою работу. Потому что на расстоянии проект и многие решения выглядят иначе
Как я уже писал выше, это был мой первый сайт, который я полностью спроектировал без использования стандартных блоков Тильды. Сейчас, когда я пишу этот кейс, я бы конечно многие его элементы сделал иначе.

В частности, я бы поменял:
1. Тактику работы с отступами. Есть несколько ошибок при работе с отступами. В частности, в кое-каких местах они "пляшут", что влияет на общее впечатление о сайте. В настоящий момент я продумываю эти моменты на берегу и заранее задаю все настройки
2. Способ переключения фотографий в каталоге. Уже писал выше, что переключения стрелочками выглядит довольно странно и не всегда удобно на мобильных. В настоящий момент для демонстрации товара я использую hover-анимацию (анимацию при наведении стрелки) или более детально раскрываю это в карточке товара.
3. Сделал бы иконки более единообразными. Иконки могут смотреться, будто бы выполнены в разных стилях. Эта проблема сейчас решается мной при помощи добавления какого-либо общего элемента на все иконки.
В частности, это может быть круг или ромб, в который заключены иконки. Из-за этого даже немного отличные по стилю иконки будут смотреться более единообразно. Пример из моих последних работ:
Отзыв заказчика от работе
Другие отзывы о работе со мной вы можете прочитать по ссылке:
https://vk.com/topic-135294483_41850487
Ответьте на все вопросы, чтобы рассчитать стоимость создания сайта
Вы ответили на все вопросы. Осталось только указать телефон!
Сколько страниц должно быть на вашем сайте?
Какой тип сайта вам нужен?
Есть ли у вас фирменный цвет и корпоративные цвета?
Нужно ли мне написать тексты для сайта?
Нужно ли вам подключить CRM-систему?
Какой тип дизайна вы хотите?
Перечислите разделы (блоки), которые должны быть на вашем сайте
Нужна ли вам анимация на сайте?
Введите ваш номер телефона
Я перезвоню вам, чтобы сказать цену на сайт, а также отвечу на все ваши вопросы