@weblinkhttps://teletype.in/atom/weblink2026-05-02T13:07:38.351Zweblink:m_6EOrXHSDB2024-04-05T09:56:08.990Z2024-04-05T09:56:08.990Z

<img src="https://img4.teletype.in/files/74/af/74afdf41-e8b2-432c-83e2-1f0c465c8a69.png">Разработка многостраничного сайта по строительству каменных домов в Тюмени и Москве «под ключ»

<p id="0oB7">Разработка многостраничного сайта по строительству каменных домов в Тюмени и Москве «под ключ»</p> <figure id="6sVd" class="m_original"> <img src="https://img4.teletype.in/files/74/af/74afdf41-e8b2-432c-83e2-1f0c465c8a69.png" width="700" /> </figure> <p id="IBdJ">Приветствую! На связи <a href="https://vk.com/kova79" target="_blank">Ольга Шишкина</a> — маркетолог-смысловик, сооснователь маркетингового агентства WebLink.<br />Мы разрабатываем нешаблонные продающие сайты для бизнеса и экспертов, <br />на основе глубокого маркетингового исследования и методики JTBD.<br /><br />Разработаем многостраничный или одностраничный сайт для вашей компании: <a href="https://vk.com/away.php?to=https%3A%2F%2Ft.me%2Folgashishkina79&cc_key=" target="_blank">Написать в Telegram</a></p> <p id="aD8M">Оглавление:</p> <nav> <ul> <li class="m_level_1"><a href="#kLrh">1.Предыстория</a></li> <li class="m_level_1"><a href="#4raR">2.Задача</a></li> <li class="m_level_1"><a href="#cFaO">3. Этапы разработки сайта</a></li> <li class="m_level_1"><a href="#mdxZ">Предбриф - подготовка к интервью</a></li> <li class="m_level_1"><a href="#ArcI">Брифинг</a></li> <li class="m_level_1"><a href="#HiV6">Обработка полученной информации и разработка структуры сайта</a></li> <li class="m_level_2"><a href="#oJaP">3.1. Главная страница</a></li> <li class="m_level_2"><a href="#pP3f">3.2. Готовые дома</a></li> <li class="m_level_2"><a href="#16HS">3.3. Каталог проектов</a></li> <li class="m_level_2"><a href="#Wrpa"></a></li> <li class="m_level_2"><a href="#ACuy">3.4. Услуги</a></li> <li class="m_level_2"><a href="#Hyi1">3.5. Ипотека</a></li> <li class="m_level_2"><a href="#RxO2">3.6. Инвестиции</a></li> <li class="m_level_2"><a href="#4XTo">3.7. Отзывы</a></li> <li class="m_level_2"><a href="#kNkK">3.8. Контакты</a></li> <li class="m_level_2"><a href="#Y1xc">3.9. Технические страницы</a></li> <li class="m_level_1"><a href="#oZDR">4.Прототип сайта</a></li> <li class="m_level_2"><a href="#OqvC"></a></li> <li class="m_level_1"><a href="#g1bR">5.Дизайн сайта</a></li> <li class="m_level_1"><a href="#SspJ">6. HTML вёрстка и программирование сайта</a></li> <li class="m_level_1"><a href="#tIqO">7. Фишки сайта</a></li> <li class="m_level_1"><a href="#HHLe">8.Яндекс Директ</a></li> <li class="m_level_1"><a href="#wd4w">9. Итоги</a></li> <li class="m_level_1"><a href="#bCVp">Благодарю за внимание</a></li> </ul> </nav> <hr /> <figure id="sxt7" class="m_original"> <img src="https://img2.teletype.in/files/13/5a/135a5781-9cb9-4e1e-8749-62dfe1786ff6.png" width="700" /> </figure> <h2 id="kLrh">1.Предыстория</h2> <p id="YxCQ">К нам обратилась руководитель отдела продаж компании по строительству каменных домов в Тюмени. Нужно было разработать новый многостраничный сайт, так как старый сайт был шаблонный, не отражал концепцию компании и был с низкой конверсией с рекламного трафика.</p> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="kPQA"><strong>Сайт — это лицо компании, бизнеса.</strong></p> <p id="qMpm"><strong>По сути, отражение основателя компании. И бренд в первую очередь будут ассоциироваться с ним. Подумайте, с чем вы хотите, чтобы ваша компания ассоциировалась у ваших покупателей.</strong></p> </section> <p id="FoJW">Первый экран старого сайта был вот таким: по цветовому решению обилие белого цвета резало глаз, пользователь, заходя на сайт не понимал, зачем его нужно здесь задержаться.</p> <figure id="4RPn" class="m_retina"> <img src="https://img4.teletype.in/files/b0/1b/b01b7af2-b224-432f-9d6e-f42002dcdc16.png" width="960" /> <figcaption>Первы экран старого сайта</figcaption> </figure> <hr /> <h2 id="4raR">2.Задача</h2> <p id="TbAB">Основная задача — разработать новый продающий сайт на 2 города: Тюмень и Москву, нацеленный на премиум сегмент целевой аудитории, отражающий концепцию бренда и приводящий теплые заявки.</p> <p id="H75D"><strong>Также нужно было:</strong></p> <p id="ezer">1.Рассказать о продукте, его преимуществах и качестве;<br />2.Увеличить количество заявок, причем качественных - теплых, практически готовых купить;<br />3. Показать имиджевую историю компании — вызвать доверие у клиента.</p> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="YE8H"><strong>Все эти задачи можно решить через продуманный продающий + имиджевый сайт с проведением глубинного интервью по продукту и компании</strong></p> </section> <p id="nyLu"></p> <figure id="afji" class="m_original"> <img src="https://img1.teletype.in/files/0d/29/0d291cc8-29f0-4650-82b3-48dc548de530.png" width="700" /> </figure> <h2 id="cFaO">3. Этапы разработки сайта</h2> <h2 id="mdxZ">Предбриф - подготовка к интервью</h2> <p id="9Lq6">Предбриф — один из ключевых этапов, который ни в коем случае не нужно пропускать.<br />И уж тем более, лучше не использовать стандартный список вопросов в гугл док, выслав его клиенту и попросив заполнить самому.<br />Так никогда не выцепить главные смыслы, характеризующие бизнес.</p> <figure id="PfqG" class="m_original"> <img src="https://img3.teletype.in/files/a4/97/a4979b67-c8a0-4616-9568-36604c539225.png" width="628" /> </figure> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="WRB0"><strong>Составляем индивидуальный список вопросов конкретно для ниши данного бизнеса.</strong></p> <p id="YO1R"><strong>Вопросы формируем анализируя нишу, конкурентов, инфополе, которое они создают, чему обучают конкуренты.</strong></p> <p id="iGA2"><strong>Смотрим запросы в вордстате, как ищут пользователи продукт или услугу.</strong></p> <p id="d1AX"><strong>Такой подход позволяет «глубоко копнуть» и выцепить самые главные смыслы, через которые потом легко продавать продукт аудитории на сайте.</strong></p> </section> <hr /> <h2 id="ArcI">Брифинг</h2> <p id="u3Xr">Просто необходим для определения ценностей компании, описания продукта, выявление сегмента ПЛАТЕЖЕСПОСОБНОЙ аудитории, продающих смыслов бизнеса и т п</p> <p id="AjQt">Проводили брифинг с руководителем компании, руководителем отдела продаж и менеджером по продажам общей сложностью 6 часов.</p> <p id="kp6g">После такого глубинного интервью получается мини-руководство по разным направлениям:<br /><br />- О продукте</p> <p id="5VNp">- О компании;</p> <p id="c1s4">- О сервисе;</p> <p id="kOsU">- О целевой аудитории;</p> <p id="WEID">- О социальных доказательствах</p> <p id="gUNs">и попутно достается еще гора изумительных фактов, с помощью которых можно отстроиться от конкурентов и выделиться среди них.</p> <p id="pE9G"></p> <h2 id="HiV6">Обработка полученной информации и разработка структуры сайта</h2> <p id="azMI">На основе брифинга и беглого анализа сайтов конкурентов была разработана следующая структура:</p> <p id="nwmC">1.Главная</p> <p id="MSzT">2.Готовые дома</p> <p id="sGE3">3.Каталог проектов</p> <p id="F5yR">4.О компании</p> <p id="V0pB">5.Услуги</p> <p id="99UM">6.Ипотека</p> <p id="M3dp">7.Инвестиции</p> <p id="0Aca">8.Отзывы</p> <p id="uu6K">9.Контакты.</p> <p id="lIpB"><strong>Теперь о страницах подробнее:</strong></p> <p id="Gl5w"></p> <h3 id="oJaP"><strong>3.1. Главная страница</strong></h3> <p id="rVuE">Вот такой получился первый экран нового сайта, на котором есть четкий оффер, составленный по методике JTBD, под премиум-сегмент целевой аудитории.</p> <figure id="vWMb" class="m_retina"> <img src="https://img2.teletype.in/files/de/43/de438ada-6b2b-4765-b810-1e069ad189d1.png" width="960" /> <figcaption>Первый экран главной страницы сайта</figcaption> </figure> <p id="RxFm"></p> <p id="bT2u"></p> <figure id="kcL0" class="m_retina"> <img src="https://img3.teletype.in/files/e9/c0/e9c05bdf-e2ab-44d5-afe6-34693f04d42e.png" width="960" /> <figcaption>Блок с типовыми проектами</figcaption> </figure> <p id="kJh5"></p> <p id="INf7"></p> <figure id="cXS2" class="m_retina"> <img src="https://img1.teletype.in/files/87/41/8741acc2-bc75-4290-a2bb-8c1923871b0b.png" width="960" /> <figcaption>Блок с объяснением этапов работы</figcaption> </figure> <p id="AIGq"></p> <figure id="I1Ng" class="m_retina"> <img src="https://img3.teletype.in/files/2e/39/2e39e4dc-1365-4c84-9e56-7396bb5e4357.png" width="960" /> <figcaption>Легкий шаг - видеоконсультация</figcaption> </figure> <p id="u9D6"></p> <figure id="VX5w" class="m_retina"> <img src="https://img1.teletype.in/files/08/f2/08f26303-ffa1-4dc2-a5f2-e0fa112469a0.png" width="960" /> <figcaption>Подвал сайта</figcaption> </figure> <p id="CocO">Этому сегменту не так важна цена, как важно качество и надежность дома.<br />Что и отразили в заголовке: «Постройте надежный каменный дом, который прослужит 100 лет».</p> <p id="GmrC">В подзаголовке как раз отражен основной мотив, ради которого люди и покупают себе дом — «наслаждайтесь загородной жизнью». Плюс показали триггер времени - «уже за 3 месяца».</p> <p id="piFu"><strong>Важные критерии выбора я вывела в главные буллиты:</strong></p> <ul id="wlnh"> <li id="khs6">Круглосуточная фото и видеофиксация: людям важно знать, что все под контролем, важно видеть динамику строительства. Тем более специфика региона такова, что люди перебираются с северных регионов в Тюмень и строят себе дом дистанционно;</li> <li id="ZPcV">Тройной контроль за строительством: как я выше сказала, целевой аудитории важно качество строительства и материалов, этим буллитом мы снимаем сомнения в качестве;</li> <li id="HTVg">Фиксируем стоимость работ в договоре: тоже важный фактор, т к цены на строительные материалы растут каждую неделю.</li> </ul> <h3 id="pP3f"><strong>3.2. Готовые дома</strong></h3> <p id="dkO4"><br />Компания также занимается и продажей готовых построенных домов в трех коттеджных поселках, и первой задачей стояло их продать. Поэтому нужно было максимально привлекательно описать их преимущества и визуально усилить эти преимущества.</p> <p id="ZePi"><strong>Преимущества были весомые:</strong> дома построены из керамического блока — это экологичный натуральный материал, фундамент — монолитная плита и кровля — цементно-песчаная черепица Braas.</p> <p id="epFx">Разработали общую страницу с тремя поселками и ссылками на страницу каждого из трех поселков.</p> <figure id="BJ33" class="m_retina"> <img src="https://img2.teletype.in/files/d1/65/d1651832-6bbf-441f-9774-b4436fe0bb47.png" width="960" /> <figcaption>Страница с обложками готовых поселков</figcaption> </figure> <figure id="TbdI" class="m_retina"> <img src="https://img3.teletype.in/files/ed/2d/ed2dec24-2e28-4c1b-9eae-2bd8889985c1.png" width="960" /> <figcaption>Поселок «Онегин»</figcaption> </figure> <figure id="ui94" class="m_retina"> <img src="https://img1.teletype.in/files/87/4d/874d2419-d109-4c77-8849-e279edb436ad.png" width="960" /> <figcaption>Планировки</figcaption> </figure> <p id="IgDe"></p> <figure id="9RUq" class="m_retina"> <img src="https://img3.teletype.in/files/23/8e/238e3f37-b4ca-4824-8814-ebf9551c7e67.png" width="960" /> <figcaption>Планировочные решения</figcaption> </figure> <p id="OlBr"></p> <h3 id="16HS"><strong>3.3. Каталог проектов</strong></h3> <p id="H1yJ">Здесь решили не выкладывать 100+ проектов на сайт, как у большинства компаний, а выделить 15 ТОПовых проектов.</p> <p id="AYkv">Также разработали лид-магнит - «Каталог ТОПовых проектов 2023 года» в обмен на контакт пользователя</p> <figure id="Lggm" class="m_retina"> <img src="https://img2.teletype.in/files/17/bc/17bc781e-3c3e-4038-b00d-6f667ea1b6c4.png" width="960" /> <figcaption>Страница с каталогом ТОПовых проектов</figcaption> </figure> <p id="mrMG"></p> <figure id="zUOl" class="m_retina"> <img src="https://img2.teletype.in/files/d1/8e/d18ea9e4-7dcd-4dce-9724-c15e1dc0ee95.png" width="960" /> <figcaption>Лид-магнит «Каталог ТОП проектов»<br /></figcaption> </figure> <figure id="aQdB" class="m_retina"> <img src="https://img2.teletype.in/files/d0/41/d04174eb-804c-46b5-9f6a-99e64a89cdb3.png" width="960" /> <figcaption>Описание проекта</figcaption> </figure> <h3 id="Wrpa"></h3> <h3 id="ACuy">3.4. Услуги</h3> <p id="KWGC">У компании широкий спектр услуг, который закрывает весь спектр загородной жизни: </p> <p id="IGyv">1. Подбор участка под строительство</p> <p id="FR0h">2. Геология, геодезия</p> <p id="RMvB">3. Ландшафтный дизайн</p> <p id="VcFo">4. Дизайн интерьера</p> <p id="8XPe">5. Ипотечное кредитование</p> <p id="f7vi">6. Индивидуальное проектирование</p> <p id="3gCo">7. Инженерные работы</p> <p id="dlDw">8.Юридическое сопровождение</p> <p id="YYpz">Для каждой услуги сделана отдельная страница и составлен оффер.</p> <p id="e50N"></p> <p id="VpeF"></p> <figure id="SqLf" class="m_retina"> <img src="https://img3.teletype.in/files/ab/60/ab60c10f-0959-4c29-82e9-a5d5e7bcaf37.png" width="960" /> <figcaption>Страница услуги «Подбор участка»</figcaption> </figure> <figure id="O8uS" class="m_retina"> <img src="https://img2.teletype.in/files/95/12/9512e879-36bb-4e63-81a6-17d20991951c.png" width="960" /> <figcaption>Страница услуги «Геология Геодезия»</figcaption> </figure> <figure id="AeXv" class="m_retina"> <img src="https://img4.teletype.in/files/7b/fa/7bfa4ef4-f2e4-4f6f-b3a2-6c9c2038140c.png" width="960" /> <figcaption>Страница услуги «Ландшафтный дизайн»</figcaption> </figure> <figure id="Qtle" class="m_retina"> <img src="https://img4.teletype.in/files/f6/5e/f65ec36b-30c6-4351-ab8e-1adad3a771d9.png" width="960" /> <figcaption>Страница услуги «Дизайн интерьера»</figcaption> </figure> <figure id="QOHu" class="m_retina"> <img src="https://img3.teletype.in/files/2d/39/2d39478d-0681-459f-b4a1-5eded92d6b8e.png" width="960" /> <figcaption>Страница услуги «Проектирование»</figcaption> </figure> <h3 id="Hyi1"><strong>3.5. Ипотека</strong></h3> <p id="yY9P">У компании есть свой ипотечный брокер и аккредитация во всех банках, что увеличивает шансы на положительное одобрение ипотеки почти до 100%.</p> <figure id="GGFX" class="m_retina"> <img src="https://img2.teletype.in/files/91/6e/916e22a3-a140-4cf1-a704-7a6f67995262.png" width="960" /> <figcaption>Первый экран страницы «Ипотека»</figcaption> </figure> <p id="H1BI"></p> <h3 id="RxO2"><strong>3.6. Инвестиции</strong></h3> <p id="vgy9">Специфика региона такова, что многие люди с «севера» инвестируют в строительство, и эта страница очень актуальна для многих.</p> <figure id="IgvF" class="m_retina"> <img src="https://img2.teletype.in/files/18/87/18877441-87d8-4086-accb-6743659ebf12.png" width="960" /> <figcaption>Страница «Ипотека»</figcaption> </figure> <figure id="II1H" class="m_retina"> <img src="https://img4.teletype.in/files/ba/5e/ba5e903f-af8f-4955-bcd1-ad98767413bd.png" width="960" /> <figcaption>Страница «Ипотека»</figcaption> </figure> <figure id="D8bW" class="m_retina"> <img src="https://img3.teletype.in/files/aa/56/aa567a5f-e2ef-42eb-9462-9554ce7532fa.png" width="960" /> <figcaption>Страница «Ипотека»</figcaption> </figure> <p id="os1X"></p> <h3 id="4XTo"><strong>3.7. Отзывы</strong></h3> <p id="Nem8">У компании много видео отзывов и люди интересуются тем, как строятся дома и смотрят реальные истории людей, это повышает доверие к компании. На сайт размещены видео отзывы, фото заказчика, его имя и фамилия, тип дома и краткий комментарий из отзыва текстом.</p> <figure id="Eeq2" class="m_retina"> <img src="https://img3.teletype.in/files/2d/ea/2dea7007-063e-444b-b916-3b76fcbc08a5.png" width="960" /> <figcaption>Страница «Видеоотзывы»</figcaption> </figure> <figure id="ophe" class="m_retina"> <img src="https://img4.teletype.in/files/39/32/39329028-34cc-4de4-97c4-0d8ea66791fb.png" width="960" /> </figure> <h3 id="kNkK"><strong>3.8. Контакты</strong></h3> <p id="Fj8B">Информация о режиме работы, адреса офисов, телефон, переходы в мессенджеры и соцсети.<br /><br /></p> <figure id="NwxD" class="m_retina"> <img src="https://img1.teletype.in/files/c8/92/c8923431-8344-473f-9cb8-0c6bb0697f1a.png" width="960" /> <figcaption>Страница «Контакты»</figcaption> </figure> <p id="Nmkx"></p> <h3 id="Y1xc"><strong>3.9. Технические страницы</strong></h3> <p id="aqnz">Все по канону: страницы спасибо, нужные поп-ап окна, политика конфиденциальности и 404</p> <figure id="svnu" class="m_retina"> <img src="https://img3.teletype.in/files/6b/e3/6be3fe59-f73f-4f00-b48d-a3216bbe9aca.png" width="960" /> </figure> <p id="x8gn"></p> <figure id="wxCO" class="m_retina"> <img src="https://img3.teletype.in/files/e1/61/e1610000-bf10-4e06-8d80-51d084b574d0.png" width="960" /> </figure> <figure id="lv8e" class="m_retina"> <img src="https://img4.teletype.in/files/bf/36/bf3637dd-5f48-42d3-9915-3436332bc88d.png" width="960" /> </figure> <hr /> <p id="1tMg">Нужно разработать многостраничный или одностраничный сайт для вашей компании, пишите в телеграм по ссылке: <a href="https://vk.com/away.php?to=https%3A%2F%2Ft.me%2Folgashishkina79&cc_key=" target="_blank">Написать в Telegram</a></p> <p id="HPjJ"></p> <p id="S98U"></p> <figure id="qnEA" class="m_original"> <img src="https://img1.teletype.in/files/cc/a2/cca28d3d-0a03-4369-abbd-a17cf2b99978.png" width="700" /> </figure> <h2 id="oZDR">4.Прототип сайта</h2> <p id="4R1T">Основываясь на этих данных был разработан прототип — черно-белый макет сайта. Без продуманного прототипа разработанный сайт — деньги на ветер.</p> <p id="fTjb">В прототипе отражены все смыслы, заголовки, продающие тексты и показано расположение фото/видео наполнения, формы захвата, лид-магниты и прочее. Прототип — это фундамент сайта.</p> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="PSsN"><strong>По прототипу можно понять, как будет выглядеть весь сайт, прочитать заголовки, текст, увидеть, где будут располагаться картинки, видео, формы захвата и т п.</strong></p> </section> <figure id="FTbk" class="m_retina"> <img src="https://img3.teletype.in/files/63/4c/634c8979-68f0-4f99-af5f-3775e27d1b0f.png" width="960" /> <figcaption>Прототип первого блока главной страницы сайта</figcaption> </figure> <p id="Sf1c"></p> <figure id="3nmb" class="m_retina"> <img src="https://img4.teletype.in/files/7a/2a/7a2a962a-54d1-46a0-8fd8-47de022a7792.png" width="960" /> </figure> <p id="3wIV"></p> <p id="GMW3"></p> <p id="VOtM">Но пока не будет полного визуала (работа дизайнера) и не будет «ожившей картинки» — нельзя «потыкать» на кнопочки, произвести какие-то действия, заполнить формы (работа верстальщика).</p> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="oe28"><strong>Цепляющий оффер ( главное предложение, основной заголовок) должен зацепить — заинтересовать потенциального клиента.</strong></p> <p id="IiVY"><strong>Фото на главном экране должно визуализировать клиенту его идеальный конечный результат - надежный красивый дом, в котором будет жить вся семья.</strong></p> </section> <figure id="VjHv" class="m_retina"> <img src="https://img3.teletype.in/files/63/4c/634c8979-68f0-4f99-af5f-3775e27d1b0f.png" width="960" /> <figcaption>Прототип первого экрана сайта</figcaption> </figure> <p id="7pdk"></p> <figure id="v4Ck" class="m_retina"> <img src="https://img2.teletype.in/files/de/43/de438ada-6b2b-4765-b810-1e069ad189d1.png" width="960" /> <figcaption>Первый экран сайта</figcaption> </figure> <hr /> <figure id="FAjb" class="m_original"> <img src="https://img4.teletype.in/files/fb/02/fb025089-6b1e-4a49-b887-83fd780a26a3.png" width="700" /> </figure> <h3 id="OqvC"></h3> <h2 id="g1bR">5.Дизайн сайта</h2> <p id="vg1k">Вначале разработки дизайн-макета происходит обсуждение дизайн-концепции. Какие сайты нравятся заказчику, какие нет, цветовые предпочтения, учитываются цвета компании и фирменный стиль.</p> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="CNzh"><strong>Разрабатываем дизайн с маркетинговой точки зрения: усиливаем заложенные в прототипе смыслы, управляем вниманием пользователя, воздействуем так, чтобы он с легкостью совершил нужное целевое действие.</strong></p> </section> <p id="1UrU">После обсуждений идет этап создания дизайн-концепта — будущего стиля сайта на минимальном носители. Концепт презентуется, обсуждается, при необходимости докручивается. Далее дизайн идет в согласованном концепте.</p> <p id="Yq87">У компании ранее был разработан фирменный стиль, но от него было решено отойти и разработать новый концепт. Концепт был принят без правок и сразу отправлен в дальнейшую работу. Впрочем как и в 95% других наших проектах.</p> <p id="9ffw">Дизайн-макет выполнен в desktop 1920px и мобильном 480px разрешениях в программе Figma и использованием Photoshop. Настроены связи в режиме прототипа, чтобы посмотреть максимально приближенный результат</p> <p id="0wBY">Так <strong>как компания нацелена на премиум-сегмент был выбран темный дизайн и это только усилило WOW-эффект.</strong></p> <figure id="v8Pu" class="m_retina"> <img src="https://img2.teletype.in/files/97/c4/97c435f0-46d8-4018-a6fd-e5b2d560af39.png" width="960" /> </figure> <p id="rvnc"></p> <hr /> <figure id="W8gy" class="m_original"> <img src="https://img3.teletype.in/files/26/58/26584d17-dd05-4b4b-bc50-076080d1edf9.png" width="700" /> </figure> <h2 id="SspJ">6. HTML вёрстка и программирование сайта</h2> <p id="Knch">Согласованный дизайн-макет был сверстан и адаптирован на все современные разрешения. Верстка посажена на платформу WordPress, чтобы заказчик сам мог править контент. Записана видео инструкция по пользованию сайта и внесения на него изменений.</p> <figure id="BMQu" class="m_retina"> <img src="https://img4.teletype.in/files/f6/e8/f6e8d242-9037-44c0-a1d1-15a52ca35de4.png" width="960" /> </figure> <p id="T9F5">Также были проведены серверные и технические работы, настроена web-аналитика.</p> <p id="bLou">Дополнительной сложностью была верстка сайта на 2 города: Тюмень и Москва. Нужно было поменять контакты, в Тюмени были готовые дома, в Москве их не было. Но наш программист с этим справился.</p> <p id="02Cb"><strong>В итоге заказчик получил многостраничный сайт, готовый к приему трафика.</strong></p> <figure id="Qku3" class="m_original"> <img src="https://img1.teletype.in/files/01/a7/01a72492-e4fd-480b-9bb5-2e02b02f26e4.png" width="700" /> </figure> <h2 id="tIqO">7. Фишки сайта</h2> <p id="pZig">Были продуманы разные фишки для сайта, повышающие доверие клиентов к компании и усиливающие желание купить готовый или построить свой дом именно с этой компанией.</p> <figure id="4ugV" class="m_retina"> <img src="https://img1.teletype.in/files/48/59/48597271-7e1a-4926-bc59-e7f4cf663044.png" width="960" /> </figure> <ol id="yKXw"> <li id="UEr4">Для страницы «Готовые дома» были подготовлены видео облета дома снаружи и 3D сьемка внутри</li> </ol> <figure id="cRQ9" class="m_retina"> <img src="https://img3.teletype.in/files/28/2a/282a6d93-6d81-4dce-b8a4-4ee8ebc124e4.png" width="960" /> </figure> <p id="KAZ3">2.Для страницы «Главная» были записаны короткие видео-ответы менеджеров компании на самые популярные вопросы клиентов.</p> <figure id="hrSs" class="m_retina"> <img src="https://img2.teletype.in/files/59/ff/59ff02a6-d68f-4429-b359-8a21e45c7546.png" width="960" /> </figure> <p id="qSbC">3.Для страницы «Главная» была показана карта с реальными адресами построенных домов строительной компаний.<br />Чтобы показать идею — ваш дом по соседству построен нашей компанией.</p> <figure id="66Rg" class="m_retina"> <img src="https://img2.teletype.in/files/d1/28/d128705f-7106-487a-8ab7-712598133f7c.png" width="960" /> </figure> <p id="MzEL">4. Для страницы «Инвестиции» взяли реальный дом и показали динамику роста цен в отрезке 5 лет. Нет лучшего времени для строительства дома, чем сейчас.<br />Т.к. цены на материалы растут в геометрической прогрессии.</p> <figure id="hU7M" class="m_retina"> <img src="https://img3.teletype.in/files/e2/98/e298f71b-a5de-47c8-96aa-60a805165c9f.png" width="960" /> </figure> <p id="RAUY">5. У компании много видеообзоров реальных домов, поэтому использовали эти материалы на сайте. </p> <p id="e71u">Плюс ко всему компания очень ответственно подошла к контенту, сделали серию видео для сайта и фотосессию.<br />Предоставили каталог проектов и другие материалы для сайта.</p> <hr /> <figure id="MSEU" class="m_original"> <img src="https://img4.teletype.in/files/b6/23/b623f433-8c06-4f56-bce5-5ae946ba3069.png" width="700" /> </figure> <h2 id="HHLe">8.Яндекс Директ</h2> <p id="hXO2"><br />По нашей рекомендации зону настройки и ведения рекламы в Яндекс Директ закрыл Алексей Степин. <br />Использовалась авторская технология запуска двух кампаний РСЯ. <br />Была собрана горячая семантика и запущены рекламные кампании по методике постепенного повышения цены лида. На стартовом этапе отслеживались все «стоковые площадки», создан ряд сегментов аудитории против скликов и некачественного трафика.</p> <p id="tggz"><strong>В среднем получили следующую статистику:</strong></p> <figure id="GeZE" class="m_original"> <img src="https://img4.teletype.in/files/bf/a6/bfa60283-fe82-4e5f-89b6-8089d2dc0988.png" width="700" /> </figure> <p id="Q84j">Статистика по компаниям РСЯ с основного сайта</p> <p id="jFd0"><strong>Москва и Московская область:</strong><br /><br />1. Конверсия: 4,12% в заявку из площадок РСЯ<br />2. Получено 36 заявок по 943 руб.<br />3. Расходы на рекламу: 33 950,78 руб.</p> <p id="zOg2"><strong>Тюмень:</strong><br />1. Конверсия: 2,59% в заявку из площадок РСЯ<br />2. Получено 13 заявок по 1281 руб.<br />3. Расходы на рекламу: 16 664,57 руб.</p> <p id="ZY26">Отметим, что изначально на Тюмень кампания<strong> обучилась на целевую стоимость лида</strong> в 500-600 рублей. <br />После масштабирования рекламы и увеличения бюджета на неделю Яндекс постепенно начал подмешивать мусорные площадки. <br />В следствии чего стало больше кликов, меньше конверсия и выше цена заявки. Поэтому работа и оптимизация рекламной компании на Тюмень продолжается</p> <figure id="0oDq" class="m_original"> <img src="https://img3.teletype.in/files/66/3d/663d51c2-3f1f-44b4-b81a-93bff2865b76.png" width="700" /> </figure> <p id="teFO"><strong>Поведенческий фактор на сайте</strong></p> <p id="5XPj">По <strong>карте кликов</strong> хорошо видно, что пользователи <strong>активно кликают на кнопки</strong> с призывом к разным действиям. Больше всего кликов было на получение каталога, просмотр построенных домов и расчет ипотеки. <br />Так же хорошо кликают на стрелки в слайдерах: фото галерея, этапы строительства, ответы на вопросы в формате видео и текста</p> <figure id="nv7c" class="m_retina"> <img src="https://img3.teletype.in/files/6d/ec/6dec173e-1afb-46e4-80cd-f680695759ee.png" width="960" /> </figure> <figure id="gNPn" class="m_retina"> <img src="https://img1.teletype.in/files/8a/54/8a5442c8-35bc-4a52-83e8-163440b2bf82.png" width="960" /> </figure> <figure id="FE4S" class="m_retina"> <img src="https://img4.teletype.in/files/7e/9c/7e9c8323-79b1-499b-9060-b1dac945a3e6.png" width="960" /> </figure> <figure id="sUnZ" class="m_retina"> <img src="https://img4.teletype.in/files/72/7d/727d3ffa-d955-4261-b09b-45a55bf15b92.png" width="960" /> </figure> <figure id="zAP1" class="m_retina"> <img src="https://img1.teletype.in/files/49/ee/49ee4dca-376f-4279-9bde-7ea5587896e5.png" width="960" /> </figure> <figure id="Il2O" class="m_retina"> <img src="https://img1.teletype.in/files/c7/df/c7df1724-4eaa-42a5-afcd-970d63ab47dd.png" width="960" /> </figure> <figure id="GHEy" class="m_retina"> <img src="https://img2.teletype.in/files/98/0e/980e69da-a2a0-46bb-b083-3ca13d152bed.png" width="960" /> </figure> <p id="PlTM"><strong>По карте скролла</strong> заметили интересную особенность - на главной странице блоки ниже середины практически не прочитываются. Но на дополнительных страницах люди их читают. <strong>Соответственно решение о дублировании важной информации на дополнительных страницах было верным</strong>. И это будет напрямую влиять на теплоту заявок.</p> <p id="lC72"><strong>Первый экран выполняет свою задача на 5+</strong> при среднем времени просмотра в 9 секунд. По всем канонам маркетинга первый экран должен задерживать пользователя на 3 секунды и более. Этот результат был достигнуть благодаря офферу, востребованному у целевой аудитории.</p> <figure id="0YfZ" class="m_retina"> <img src="https://img1.teletype.in/files/46/dc/46dc5cf3-6837-4477-b1ba-f3617a9d9cba.png" width="960" /> </figure> <figure id="fJfY" class="m_retina"> <img src="https://img4.teletype.in/files/fc/e9/fce99d27-97a3-4d5c-bb81-2756403c47ab.png" width="960" /> </figure> <figure id="jW1t" class="m_retina"> <img src="https://img1.teletype.in/files/84/30/843077cd-9086-4865-9c28-4a0a46ea737f.png" width="960" /> </figure> <figure id="hy5G" class="m_retina"> <img src="https://img4.teletype.in/files/f3/70/f370a918-2516-4930-8a0a-f79f99c5ab33.png" width="960" /> </figure> <p id="9f3P"></p> <p id="ygj6"><strong>Удержание внимания:</strong><br />1. Посетители: 2000 пользователей за месяц ведения рекламы<br />2. Глубина просмотра сайта: 1,713. <br />3.Среднее время на сайте: 1:494. </p> <p id="9Yu0">Что естественным образом ПОЛОЖИТЕЛЬНО влияет на прямое предназначение конвертора - убрать часть болей пользователей, сформировать доверие к компании и получить личный номер телефона</p> <p id="uSZz">Следовательно заявки будут более осознанные и прогретые. С отдела продаж снимется часть работы, которую теперь выполняет сайт.</p> <figure id="hcRE" class="m_original"> <img src="https://img4.teletype.in/files/b3/9f/b39f8c80-724e-4cc4-abe7-bb38e12fe334.png" width="350" /> </figure> <hr /> <figure id="jWnA" class="m_original"> <img src="https://img1.teletype.in/files/4e/4c/4e4c1c7b-34b4-415b-8be4-4f2831397d79.png" width="700" /> </figure> <h2 id="wd4w">9. Итоги</h2> <p id="1bwX">Честно скажу, что не все проходило гладко, мы хотели довести сайт до идеала, а заказчику нужно было быстрее запускаться и получать заявки. <br />Но в итоге сайт был закончен, <strong>а заказчик получает стабильные и теплые заявки</strong> в свой бизнес.<br /><br /><strong>Чтобы разработать такой сайт нужно:</strong></p> <ul id="dJ4Z"> <li id="Ke6p">Понимать, что предстоит серьезная глубокая работа и настроиться на нее. Но в итоге все старания окупятся сторицей.</li> <li id="H9XY">Провести брифинг, проанализировать и структурировать всю полученную информацию. Выделить все смыслы и ценности продукта, компании.</li> <li id="9sfi">Донести эти ценности до потенциальных клиентов.</li> <li id="Ikm1">Сделать такой прототип, и в итоге сайт , внедрив такие «фишки», которых нет и близко у конкурентов и стать на голову выше.</li> <li id="FcnE">Донести до клиента, почему он должен купить именно у вас.</li> <li id="vNMW">Показать и рассказать на нем о вашей компании, рассказать о продукте, принципах работы с клиентами, индивидуальном подходе и много о чем еще.</li> <li id="u1X2">Чтобы у вашего клиента сложилась полная уверенность в том, что он значим для вас, вы заботитесь о нем, его комфорте, времени и максимально стараетесь помочь ему облегчить жизнь своим продуктом.</li> </ul> <hr /> <h2 id="bCVp">Благодарю за внимание</h2> <p id="R35f">Пишите в личные сообщения, проведем 30-минутную консультацию и расскажем, как в вашем случае можно отстроится от конкурентов и увеличить продажи:</p> <p id="zd1g"><a href="https://vk.me/kova79" target="_blank">Написать в личные сообщения</a></p> <p id="Wcox"><a href="https://vk.me/kova79" target="_blank">Написать в VK<br /></a><a href="https://vk.com/away.php?to=https%3A%2F%2Ft.me%2Folgashishkina79&cc_key=" target="_blank">Написать в Telegram</a></p> <figure id="fBaI" class="m_original"> <img src="https://img1.teletype.in/files/ca/89/ca89819e-5e95-497b-acb6-4e9a7acf8326.png" width="700" /> </figure> <p id="ZzWj">Ольга Шишкина — разработка нешаблонных продающих сайтов для бизнеса и экспертов, на основе глубокого маркетингового исследования и методики JTBD.</p> <hr />