Что нужно для строительства сайта

Спроектировать, заложить фундамент и построить, отделать, обустроить, провести коммуникации — не очень похоже на то, как мы себе представляем разработку сайта, правда? Однако именно из этих этапов состоит разработка. Рассказываем, как сделать эффективный сайт для компании из сферы отделки и ремонта на понятном для строителей и им сочувствующих языке.

19 мин.

Мы переезжаем в новое жилье или ремонтируем старое, когда хотим улучшить свою жизнь: сделать ее комфортнее, эстетичнее, просторнее. Хотим, чтобы обновленная квартира лучше соответствовала нашим потребностям. При разработке нового сайта, обновлении существующего, смены CMS, например переноса сайта на Битрикс, обычно ожидают того же самого — новый сайт должен отвечать потребностям бизнеса и современным требованиям отрасли.

Нужен ли сайт компании в сфере ремонта и отделки?

Скептики утверждают, что сегодня сайт никому не нужен. Еще в далеком 2012 было модно говорить о трех убийцах сайтов: соцсети, мобильные приложения и маркетплейсы. Что же мы видим сейчас?

Этапы создания сайта | Как создать сайт с нуля для начинающих

Для многих компаний сегодня соцсети действительно стали основным каналом привлечения клиентов. Но обычно это мелкий B2C-бизнес.

Крупные компании по-прежнему работают через сайты, а соцсети используют в качестве репутационного инструмента и канала получения быстрой обратной связи.

1. Мобильные приложения

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

Стоит отметить, что в некоторых сферах приложения действительно заменили сайты. Например, сервисы по заказу еды или вызову такси уже давно ушли в смартфоны. И совершенно не имеет смысла для привлечения клиентов использовать сайт как источник продаж в этих сферах.

1. Агрегаторы и маркетплейсы

Площадки вроде Яндекс Маркета или Aliexpress заполонили поисковую выдачу. На рынке появляется все больше и больше подобных проектов. Они переманивают на себя часть потенциальных клиентов. Однако если посмотреть на сферу отделки, мы видим, что львиная доля клиентов все равно приходит через сайт. Потому его актуальность и «классность» для компании остается очень важный вопросом.

Этапы «строительства» сайта в сфере ремонта и отделки

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

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

1. «Проектирование» — разработка профиля пользователя и изучение потребностей. Самое важное — понять, кто и как будет пользоваться сайтом и спроектировать все с учетом задач бизнеса и потребностей пользователя.
2. «Фундамент» — SEO-оптимизация и CMS. Нужно обеспечить надежную базу, которая «выдержит» все надстройки и не создаст ограничений в использовании и продвижении сайта.
3. «Отделка» — дизайн сайта. Как и с оформлением квартиры, оформление сайта должно быть не только красивым, но и функциональным. Вряд ли вы захотите жить в квартире, в которой все выключатели будут под потолком. Так и пользователь не оставить заявку, если до формы придется «тянуться» через три страницы.
4. «Обустройство» — наполнение. «Уютное» наполнение сайта удержит пользователя на страницах.
5. «Коммуникации» — обратная связь с клиентами.

1. Проектирование онлайн-дома

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

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

Определите цели и обрисуйте аудиторию

Чтобы спроектировать сайт для отделочной компании (и не только), нужно понять, на кого нацеливаться.

1. Большая часть аудитории отделочных фирм — это частные лица, которым требуется поменять окна, положить ламинат, установить натяжные потолки и проч.
2. Некоторые компании по ремонту работают в сфере B2B и отделывают коммерческие, офисные и производственные помещения.
3. Кроме привлечения клиентов, сайт может выполнять функции поиска партнеров — крупные компании могут привлекать более мелкие или узкоспециализированные на субподряд.
4. А еще сайт — отличный инструмент для формирования HR-бренда и привлечения сотрудников в компанию.

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

Продумайте структуру сайта

Часто к нам приходят и просят собрать структуру из пяти разделов «чтобы были», по-быстрому. Обычно мы убеждаем клиента обдумать все тщательно. Сайт по отделке с пятью страницами едва ли сможет стать эффективным инструментом для продаж. Если он нужен вам как визитка — пожалуйста, но он вряд ли окупится.

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

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

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

По такому принципу мы формировали структуру сайта компании «Ровный пол”. Были учтены:

• все типы помещений, где ведется ремонт;

• типы напольных покрытий, под которые делается стяжка;

• география клиентов (по районам Москвы);
• сопутствующие услуги;

​

• информационные запросы.

2. «Фундамент» сайта

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

Во-первых, стоит выбирать ту систему, на которой уже построено много сайтов вашей тематики. Есть много специализированных решений для интернет-магазинов, информационных порталов, каталогов.

Одним из самых важных требований к движку для будущего сайта является возможность выполнения требований поисковых систем и удобство обновления информации. Вот список CMS, которые стоит и не стоит использовать, если вы планируете продвигаться в поиске (а если не планируете, зачем вам сайт?).

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

Вот несколько из этих требований:

1. Склеенные доменные имена
2. Отсутствие дублей страниц
3. Наличие файлов robots.txt и sitemap.xml
4. Уникальные метатеги страниц
5. Наличие заголовков Н1-Н6
6. Правильные адреса страниц
7. HTTPS-протокол

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

3. Отделка

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

У каждого клиента есть свои представления о хорошем дизайне. Однако хороший он или плохой, решать не вам, а пользователю. Поэтому в вопросах «отделки» сайта постарайтесь отдавать приоритет удобству посетителей, а не собственным эстетическим пристрастиям. Современный дизайн — удобен в первую очередь, а уже потом красив.

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

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

Чтобы этого добиться, нужно сделать информацию максимально удобной для восприятия. Вот несколько шагов:

1. Поместите все самое необходимое для принятия решения на первый экран:

Что? Где? Как узнать больше? Куда позвонить?

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

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

1. Используйте графические элементы (иконки, инфографику, картинки):

Люди не хотят читать кирпичи тексты, потому постарайтесь заменить часть картинками, часть передать через иконки, разбить текст схемами и диаграммами, а отдельные блоки оформить инфографикой.

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

1. Сделайте сайт адаптивным.

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

К тому же Google уже внедрил индексацию Mobile-First — алгоритм ранжирует адаптивные сайты выше, чем неадаптивные.

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

4. Обустройство страниц

Вот у вас есть красивая отремонтированная квартира, но заселяться пока рано. Необходимо ее обустроить. Та же ситуация и с сайтом — качественный быстрый сайт не готов принимать посетителей, если на нем нет качественного наполнения.

На страницах необходимо указать максимум информации, которая необходима посетителю для принятия решения о покупке.

Все об услуге

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

Конкурентные преимущества

Если верить данным на сайте «Бизнес-карта России», только оконных компаний у нас почти 15 тысяч. Конечно, отделка и ремонт привязаны к региону, но даже если в вашем городе у вас лишь 5 конкурентов, вам нужно рассказать посетителю сайта, чем вы лучше, почему заказать нужно обязательно у вас, а не у конкурента. Это может быть уникальный дизайн, особый клиентский сервис, экологичные материалы — что-то, что важно для вашей целевой аудитории.

Примеры работ

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

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

Калькулятор

Изучив ваши услуги и примеры работ, посетитель захочет узнать, сколько это стоит. Причем прайс-лист часто не помогает ответить на этот вопрос, потому что обычно сумма зависит от конкретных параметров объекта. Проблему помогает решить калькулятор.

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

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

Формы захвата контактных данных

Это формы обратного звонка, формы заказа, калькуляторы (см. пункт выше), формы запроса консультации, формы подписки. Важно, чтобы они были расположены логично — там, где у посетителя может возникнуть потребность с вами связаться.

Фото и видео

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

Видеообзоры, обучающие ролики, видео с объекта сегодня очень популярны. Они позволяют посетителю сайта увидеть, как проходит процесс ремонта. Необязательно таскать с собой съемочную группу. Иногда достаточно телефона с камерой. Такой «лубочный» видеоконтент смотрится естественнее.

Главное, чтобы он был полезным и информативным.

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

Отзывы и рекомендательные письма

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

Скидки и акции

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

Онлайн-помощники

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

Блог про ремонт и отделку

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

Статейный раздел на сайте решает много всяких задач сразу:

• формирует голос бренда и увеличиваете число своих последователей (а заодно и базу для email-рассылок, чтобы догнать тех, кто ничего не заказал);
• делает вас экспертом в области ремонта и отделки;

• заманивает посетителей в воронку продаж, даже если они пока не собирались ничего покупать — становится первым касанием с вашей компанией;
• ускоряет движение посетителя по воронке продаж, если предусмотреть в статьях ссылки на разделы услуг;

• повысит посещаемость сайта за счет охвата дополнительных (информационных) поисковых запросов.

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

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

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

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

Такие статьи мы дополнительно распространяем в email-рассылках и Яндекс Дзене, пускаем на них таргетированную рекламу.

О чем писать, вам подскажут поисковые запросы в сервисе Подбор слов Яндекса и сайты конкурентов. Тип материала зависит от его цели и пользователей, на которых он рассчитан.

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

5. Коммуникации

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

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

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

1. Полные контактные данные
2. Подробное описание компании
3. Фото офиса/производства
4. Фото сотрудников
5. Реквизиты, сертификаты, лицензии
6. Раздел «Вакансии»
7. Раздел «Партнерам»
8. Презентация компании

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

1. Настроить прием заявок с сайта

Заявки из форм должны попадать в ваш электронный ящик или в CRM.

1. Настроить телефонию и кол-трекинг

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

1. Подключить мессенджеры

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

1. Настроить системы статистики

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

1. Провести инструктаж для менеджеров

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

1. Самому все протестировать и проверить

Если вы собственник, пройдите весь Customer Journey, по-простому — путь клиента, самостоятельно — разместите заказ, позвоните в офис, оставьте заявку в мессенджере. Оцените, как быстро менеджеры реагируют на обращение, насколько качественно обрабатывают заявку, подробно ли отвечает на вопросы. Вы удивитесь, из-за каких пустяков могут теряться лиды.

9 главных требований к сайту — чек-лист перед началом продвижения

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

1. Решение проблемы ЦА

Все на сайте (функции, дизайн, наполнение) должны решать проблему посетителя. Каждый клик на вашем сайте должен вести посетителя к заявке.

1. Скорость загрузки

Страницы должны загружаться за 3 секунды или быстрее. Если сайт медленно загружается, его не спасет самый лучший контент. Потому что посетитель уйдет до того, как текст и картинки загрузятся.

1. Техническая оптимизация

Файлы robots.txt и sitemap, метатеги, хлебные крошки и прочее — все это должно быть на сайте и должно работать корректно. Если на сайте выполнена техническая оптимизация, ничто не помешает SEO-специалисту продвигать его дальше в топ выдачи.

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

1. Уникальный и полезный контент

Это требование не для галочки. С одной стороны, вы дадите посетителю ответ на его вопрос, с другой — к вам не будет претензий со стороны поисковых систем.

1. Подробная презентация компании

Полная информация о компании и услугах поможет завоевать доверие посетителя. Покажите, что вам нечего скрывать.

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

1. Выполнение требований поисковиков

Ремонтируя квартиру, вы обязаны придерживаться строительных норм и требований закона. В интернете всем заправляют поисковые системы, и ваш сайт должен подчиняться их требованиям. Иначе не видать вам ни первых строк в поисковой выдаче, ни трафика, ни заявок.

Анализируйте результаты, чтобы понимать, что вы движетесь в верном направлении. Или нет. Следите, сколько заявок получаете, из каких каналов, на какие суммы. На основе этих данных можно корректировать бизнес-стратегию и стратегию интернет-продвижения, принимать решение о смене (или поощрении) подрядчика по онлайн-продвижению, планировать доработки на сайте и в рекламных кампаниях.

Качественно отремонтированнная квартира прослужит при условии бережного использования минимум 10 лет. Ремонт сайтов — история более скоротечная. Меняются требования к веб-дизайну, алгоритмы поисковых систем, потребительские привычки у вашей аудитории. Через 3 года весь «ремонт» сайта придется проводить снова. Но зная технологии и нормативы, которые мы описали в этой статье, процесс будет максимально безболезненным.

Источник: www.web-canape.ru

Создание сайта в 2022 году: полный гайд с примерами

Запуск сайта – один из самых важных шагов для компании. Создать сайт один раз и навсегда нельзя: нужно каждый день подстраиваться под тренды и изменения. Разберем, что нужно любому сайту для успеха сейчас, и поделимся примерами из практики TexTerra.

0. Постановка задачи

Сначала нужно разобраться, зачем нужен сайт. От этого будет зависеть его тип: если вы планируете, что сайт будет посвящен одной услуге/продукту, то стоит выбрать формат лендинга, если планируете рассказывать о разных продуктах и услугах, то нужен многостраничный сайт (кстати, у нас вы можете заказать разработку сайта — прим. отдела продаж TexTerra).

Например, для поставщика услуг облачного гейминга «Текстерра» разработала уникальный лендинг, на котором есть все необходимое: личный кабинет, интеграция остатка игрового времени с сервером заказчика, возможность купить время и получить бонусы за друзей.

В этой статье мы будем давать общие рекомендации, которые актуальны и для лендинга, и для многостраничного сайта.

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

1. Формирование УТП

Неважно, какой сайт вы делаете, первое, что нужно при подготовке, – найти свою особенность. Это не значит, что у вас должны быть уникальные картинки и 80 % + по «Адвего» (сервис проверки уникальности текста).

Уникальность в 2022 году – это необычная черта бизнеса, которая отличает его от остальных. Акцентируйте на этом внимание, иначе рискуете затеряться в информационном шуме.

К примеру, коммерческое предложение СОИК – производство полезной профилактической продукции из фитосырья (здесь и далее ссылки ведут на кейсы TexTerra – прим. ред.). Их уникальность состоит в том, что они не просто продают травяные и фиточаи, но и подсказывают клиентам, для чего нужен каждый ингредиент в сборнике.

Из УТП понятно, что уникального в бизнесе и чем он будет полезен клиенту

Еще один пример того, как уникальность помогает в продажах – SMM-продвижение тренажеров для реабилитации. Из-за специфики этой тематики конкуренты просто боятся заходить в соцсети, так как считают: «Раз здесь сложно достучаться до тех, кто принимает решение о покупке, зачем тратить время и нервы?» И это большая ошибка!

Сайт для реабилитационных тренажеров

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

Специалисты «Текстерры» решили создать магазину образ друга-эксперта, благодаря чему люди начали доверять бренду. Это значит, что многие люди с ограниченными возможностями передвижения рассмотрят приобретение тренажера домой или порекомендуют тренерам конкретного поставщика.

Переписка с пользователем о реабилитационных тренажерах

Материалы, которые помогут найти и сформулировать особенность бизнеса:

2. Подготовительные работы

Подготовка – самая важная часть разработки сайта. Даже опытные специалисты не сделают «Сайт Мечты», пока не составят четкое ТЗ, что возможно только после проведения всех подготовительных работ в полном объеме.

Анализ ниши и конкурентов

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

Вот на что нужно обратить внимание при конкурентном анализе:

• Как устроены сайты конкурентов – какая у них структура, дизайн, какие детали;
• Насколько качественен сайт с точки зрения пользователя, удобно ли ему на нем;
• Какое у сайта УТП.

Также стоит обратить внимание на то, как клиенты ведут соцсети, а если есть рассылка, то и на нее.

Статьи, которые помогут провести грамотный анализ и не совершить ошибок:

SWOT-анализ бизнеса

Определите сильные и слабые стороны компании, возможности и угрозы, которые есть на ее горизонте. Поймите, как будет выглядеть то УТП, которое вы будете продвигать через интернет, в глазах потребителя и конкурента.

Если по-русски, то это ССВУ-анализ: анализ Сильных сторон, Слабых сторон, Возможностей и Угроз продукта

К примеру, дружественные консультанты в магазине – это офлайн-УТП, которое будет побуждать клиентов пользоваться вашими услугами вне интернета. Каким будет УТП для тех, кто пользуется вашими услугами в интернете? Решайте сами, анализируя конкурентов. Это может быть мгновенная доставка «до двери», предоставление десятков тестеров / семплов по первому щелчку и т. д.

Как я изучала рынок, чтобы открыть парикмахерскую – универсальные шаги

Продумывание посыла, ядра и приблизительного «скелета» сайта

Вы проанализировали конкурентов и нашли веб-УТП? Поздравляем, теперь это нужно красиво оформить. Продумайте посыл и миссию сайта.

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

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

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

Структура сайта может быть разной:

• линейной – подразумевает цепочкообразный порядок и равнозначность страниц;
• линейной с разветвлением – построена аналогичным предыдущей структуре образом, но здесь в каждом звене есть дополнительные подразделы;
• блочной – в ней все страницы являются равнозначными;
• иерархической – в ней каждая последующая веб-страница – это «родственник» предыдущей (поэтому иногда ее называют древовидной).

Где логика: разбираем самые популярные виды структур сайтов

Покупка хостинга и домена

Хостинг – услуга размещения информации на сервере, «домик» сайта. Домен – имя сайта, которое отображается в адресной строке.

И то, и другое важно для вашего сайта, поэтому на хостинге и домене лучше не экономить.

Разобраться, что выбрать, помогут наши материалы:

3. Выбор стратегии продвижения + ключевые слова

Сформировали стратегию сайта и его карту? Можно собирать ключевые слова из сервисов WordStat и KeySo для дерева запросов. Необязательно сразу делать «большое дерево». Иногда, при работе с ключами вы будете замечать, что какие-то запросы неинтересны ЦА. При этом «деревянная» структура обязательна: не нужно продвигать на одной странице доставку суши в Москве и в Новосибирске.

Создайте раздел «Доставка суши», а уже от него выстраивайте «ветки» в те города, где будете работать. С такой структурой и продвигать будет проще, и в будущем легче масштабироваться.

Такие схемы удобно делать в виде интеллект-карт (mind maps)

Если что-то «не зайдет», будет легко это удалить, не зацепив при этом остальные страницы сайта. Лучше инвестировать время и внимание в те части проекта, которые точно дадут отдачу. Или где хотя бы чувствуется перспектива.

Практическое руководство по подбору поисковых фраз

4. Выбор CMS

CMS (система управления контентом) – одна из важнейших вещей в сайтостроении. Верно подобранная «админка» поможет реализовать все задумки, быстро масштабироваться и работать без критических багов. Для текста идеально подойдет WordPress, хорошо будет работать Tilda. Магазинам лучше присматриваться к «Битриксу» и Shoptet.

Изучайте, какие админки больше всего подойдут под вашу специализацию и выбирайте ту, которая подойдет вам как по скорости, так и по удобству работы:

5. Подготовительная работа с Google и «Яндексом»

После того, как вы приобрели веб-адрес, нашли хостинг, продумали УТП и структуру сайта, можно переходить к подготовительной работе в поисковиках.

Создайте профили в «Google Бизнес» и «Яндекс.Бизнес». Это поможет клиентам находить вас, задавать вам вопросы, а вам – отвечать на них, видеть статистику и привлекать покупателей.

Добавьте предприятие на Google Maps и «Яндекс.Карты» (также не помешает Bing). Чем больше сервисов уже индексирует вас, тем лучше. У вас может еще не быть сайта, но страничка на карте обязательна! Иначе как люди узнают, что вы работаете рядом с ними?

Добавляйтесь на карты и стимулируйте отзывы на них, чтобы быть в топе

Если у вас интернет-магазин, можете добавить товары на Яндекс.Маркет. Платить придется, но только за покупки – просмотры карточек бесплатны.

Товары в Яндекс.Маркет добавляются с помощью YML-файла – об этом мы писали в статье «YML-файл для Яндекс.Маркета: что это, зачем и как его сделать».

6. Работа с ядром и структурой сайта

Дальше нужно проработать основу сайта (можно это делать еще раньше, никто не запрещает). Дальше на нее, как на скелет, будут наслаиваться остальные части, пока вы не получите готовый к сдаче проект.

Создание семантического ядра

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

Если нужно жестко экономить, собирать семантическое ядро придется самостоятельно. В этом помогут наши материалы:

В высокочастотных запросах нереальная конкуренция, и, если сфера уже сформирована, там точно есть «мастодонты», до которых еще нужно расти / вливать огромные средства в рекламу.

Запросы «средней частоты» универсальны – по ним довольно часто переходят, хотя конкуренция еще не такая большая.

Для нишевых сайтов подойдут низкочастотные запросы.

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

Удаление «мусорных» запросов

Мусорные запросы – те, которые идут по вашей теме, но при этом не соответствуют тематике сайта. Используйте отсев по стоп-словам, специфической лексике, географии и путем проверки орфографии.

Такие запросы можно удалять без сожалений

К примеру, у вас есть два запроса: «купить молотый кофе в москве» и «купить молатый кохфа в маскве». Удаляйте второй с чистым сердцем: поисковик все равно исправит на первый и покажет в выдаче именно его.

Минимизация слов с высокими Keyword Difficulties

Keyword Difficulty – индекс, который показывает, насколько сложно будет обогнать конкурентов в поисковике Google. Всего оценки группируются по 3 большим блокам:

• 80 % – уровень джедая. Если возьмете поисковые слова с такой сложностью, готовьтесь к вливанию огромных сумм (зависящих от сферы деятельности). Новичкам без чемоданов денег лучше сюда и не заходить.
• 60–80 % – Квентин Тарантино в мире ключевиков. Да, вам не придется применять суперсилы, чтобы оказаться здесь в первых строках выдачи, но посоревноваться придется знатно.
• 60 % – на изи. Такие ключи имеют регулярный трафик, хорошо ранжируются, но здесь нет бешеной конкуренции. Идеальный выбор для новеньких.

7. Линкбилдинг-стратегия

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

Вам нужно как самим ссылаться на сторонние сайты (с хорошим рейтингом и ИКС (индекс качества сайта)), так и получать цитирование от таких порталов.

Краткое руководство по линкбилдингу:

1. Создайте контент, достойный ссылок на него и цитирования.
2. Покажите его веб-сайтам, которым он мог бы быть интересен, чтобы они его процитировали или сослались на этот контент.
3. Добавляйтесь на сайты, где вы сами можете опубликовать ссылку: бизнес-каталоги, блоги (раздел «Комментарии»), форумы, соцсети.
4. Обменивайтесь ссылками с ресурсами, которые подходят вам по тематике.

Еще о грамотном продвижении ссылками:

8. Дизайн сайта

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

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

Трехмерность

Кажется, этот тренд выработал стабильные «качели»: объемность возвращается раз в 2-3 года, после чего исчезает в угоду 2D и снова возвращается. В 2022 году в тренде реалистичные 3D-элементы (главное, чтобы они были без эффекта «зловещей долины» (когда из-за мелких несоответствий реальности, но общего пугающего сходства с нею у человека возникает чувство неприязни и страха от изображения).

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

Святослав Грошев

Арт-директор TexTerra

Объемность

Пользователи MacOS Big Sur уже успели заценить «объемные иконки». Этот тренд постепенно заходит и в веб-дизайн, так что следует ожидать объемности и подумать, не внедрить ли ее у себя.

Слои, плавающие элементы

За несколько лет скролл-эффекты пользователям поднадоели. Современный юзер хочет видеть максимальную легкость.

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

Отличный пример такой «легкости» – сайт дизайн-студии LEVELLEN. Работа с пустым пространством дала ему нужную воздушность.

Студия делает стильные дизайны, поэтому и сайт у нее стильный и «легкий»

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

Таким же образом я воспринимаю проработку деталей на сайте.

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

Хороший дизайн – как картина или тот снимок из рекламы автомобиля – несет в себе задачу сконцентрировать внимание на основном, на продукте. Если в дизайне появляются дополнительные элементы, которые не несут информации, они только помешают.

Так какие детали использовать можно?

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

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

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

Святослав Грошев

Арт-директор TexTerra

Микс графики и фото

Тренд на сочетание графических элементов с фотографиями до сих пор остается востребованным. Возьмите его на вооружение: это простой и быстрый способ вдохнуть «жизнь» в графическую составляющую сайта и связать фото в одну композицию.

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

Микс графики и фото выглядит свежо

Этот прием также использует языковая школа LEXXIS. Благодаря этому сайт смотрится более «живым» и современным.

А здесь такой микс выглядит ярко и смело

Мы в работе часто миксуем фото и графику, чтобы разнообразить визуал.

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

Так было и в проекте lexxis.

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

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

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Векторная графика

Нужно подстраиваться под поведение аудитории, а она сегодня заходит на сайты со смартфонов. Но как это сделать, если один сидит с «тапка» с диагональю 3,5 дюйма, у второго – iPhone 13 Pro Max, а третий меняет телефоны на Android, как перчатки? Только через векторную графику! У нее нет привязки к пикселям, она легко масштабируется и адаптируется к любой диагонали, от умных часов до 4К-телевизора.

Именно так мы и сделали при создании сайта доставки «Имеретинская лавка». Основные элементы выполнены в КИвекторе, поэтому легко масштабируются для просмотра с любого девайса.

Сайт можно просматривать с любого устройства, что особенно актуально сейчас, учитывая рост мобильного поиска

Цифры, данные и исследования

Если хотите взрастить любовь к своему бизнесу у пользователей, делитесь с ними цифрами, учите интересному. Продумайте, как правильно подать всю эту информацию.

Например, общероссийский таможенный представитель TAISU-ТБ прямо на титульной странице сайта предоставил сертификаты качества и список довольных клиентов.

Цифры, статистика, исследования, инфографика и сертификаты вызывают доверие

Еще один пример – сайт для производителя напольных покрытий «КоронаПласт». В центре внимания – полезные факты о компании, сертификаты, именитые партнеры и подтверждения надежности.

Посетители сайта могут скачать pdf-файлы с каталогом и инструкциями по монтажу – это тоже про полезность

Темные цвета

Темный фон смотрится элегантно и не «выжигает глаз», как темный текст на белоснежном фоне. Более того, такие темы способствуют экономии энергии и увеличивают срок службы OLED-экранов.

Именно таким мы сделали сайт для видеостудии «Видеозаяц.РФ». Он умело сочетает темную тему, векторную графику и работу со слоями.

Темные цвета особенно хорошо выглядят в премиум-сегменте, в digital- и игровой сферах

При выборе цветов для интерфейса отталкивайтесь не только от трендов, но и от самого бренда, сервиса и продукта. Темная «тема» хороша далеко не для всех, но никто не запрещает «играться» с оттенками серого 😉

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

В рамках проекта «ВидеоЗаяц» мы решили немного отклониться от негласных правил и разработать дизайн под конкретный запрос – отстроиться от конкурентов и показать премиальность продукта. С помощью выбранных цветов мы подчеркнули, что компания работает на рынке motion-анимации и других сложных механик.

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Еще несколько трендов в дизайне, которые актуальны в 2022 (и, вероятно, не пропадут в 2023 году):

• Минимализм и максимум воздуха;
• «Легкие» шрифты с засечками:
• Симметричная верстка – баланс между текстом и изображением на сайте;
• Неоновые оттенки;
• Фотографии реальных людей вместо стоковых изображений;
• Градиенты и размытия;
• Интерактивные элементы в интерфейсах.

1. Акцентная типографика

1. Яркие цвета

1. Коллажи

Святослав Грошев

Арт-директор TexTerra

9. Базовая SEO-оптимизация сайта

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

Как уже говорилось выше, нужно продумать структуру. Чем больше у нее разветвлений, тем лучше. Следующие базовые требования будут поданы списком, чтобы вы могли быстро проверить свой сайт по этим параметрам:

1. Нет ничего, работающего на Flash. Он устарел. Точка.
2. Семантическое ядро собрано конкретно под продвигаемые страницы, а структура сайта полностью ему соответствует.
3. У сайта корректная HTML-карта – страница, где расположены ссылки на полезные разделы сайта.
4. Прописаны meta-данные сайта.
5. Дубли и неуникальные Title и Description отсутствуют.
6. Настроен https-протокол. Если у сайта есть зеркала с www, они «склеены» с основной версией.
7. «Зеркала» на других доменах отсутствуют или склеены с основным сайтом через Redirect 301. В противном случае ждите санкций и блокировки всех сайтов.
8. Зомби-страницы удалены, а дубли склеены через Redirect. Это нужно, чтобы сконцентрировать продвижение на конкретной странице, а не распылять его на 10 разных.
9. Прорисован дизайн + придуманы тексты для страниц 3xx, 4xx, 5xx и для отсутствующих фото товаров в интернет-магазинах. Сбои в работе встречаются у всех, так поднимите же настроение клиентов проработкой таких мелочей.

Страница 404: самые креативные, смешные и лаконичные варианты

1. Файлы сжаты и почти не занимают места. Все они открыты для индексации.
2. На портале присутствуют Sitemap и Robots.txt, которые регулярно обновляются.
3. «Хлебные крошки» – навигационные цепочки, показывающие путь пользователя – настроены.
4. Критические ошибки HTML-кода по стандарту W3C отсутствуют.
5. Сайт уже есть в «Яндексе» и Google. Не помешают также Rambler и Bing. Смотрите на регион ресурса и подбирайте актуальные поисковики для работы.
6. Проработаны URL, где все слова прописаны латиницей. К примеру, если вы ссылаетесь на раздел с MacBook 2020, то URL должен выглядеть как pc / laptops / apple, а не pc / laptops / -3n4oi#4t. Конечно, там нет запрещенных или спам-слов по типу gun, sex, violence. Это нужно делать с любыми товарами в интернет-магазинах.
7. Работа в разных браузерах и системах настроена. Есть 3 варианта работы на «смартах»: мобильная версия (отдельная версия сайта), адаптивная верстка (когда сайт подстраивается под экран устройства, основываясь на user agent) и динамическая верстка (масштабируемый, «резиновый сайт»). Выберите ту, которая больше всего подходит вам (мобильную версию, так как это целый отдельный сайт, может быть дольше и дороже делать).
8. Отзывы. Разместите под каждым товаром раздел отзывов. Также добавляйтесь в «Google Бизнес» и «Яндекс.Бизнес», чтобы люди могли постить про вас отзывы. Реальные отзывы – дополнительный повод доверять компании.

Если это интернет-магазин с карточками товаров, отзывы должны быть всегда.

Во-первых, их можно использовать для SEO. Например, сделав Н2-заголовком и подставлением туда информации из H1. Пример: страница «Акустика FENDER CD-60 DREAD V3 DS BLK WN» – «Мой отзыв о товаре Акустика FENDER CD-60 DREAD V3 DS BLK WN». Это позволит продвинуть запрос со словом «отзыв».

Во-вторых, само по себе поле для отзывов уже вызывает доверие пользователей. Да, даже если отзывов там нет: человек хотя бы поймет, что отзыв может добавить любой покупатель, система прозрачна.

Если на сайте больше 1 тыс. товаров, очевидно, что на какие-то товары отзывов не будет.

В таких карточках стоит написать что-нибудь в духе «Ищем героя, который сделает 1 шаг в оценке товара».

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

Кстати, отзывы размечайте с помощью микроразметки Schema.org.

Павел Антипов

ex-project-менеджер TexTerra

Пример оформления карточки товара – отзывы внизу

В видео ниже рассказали о самых частых ошибках в продвижении сайта. Многие из них связаны с SEO:

10. Скорость работы и загрузки сайта

Чем выше скорость работы, тем меньше людей будет «бесить» долгая загрузка. Это означает то, что они дольше будут сидеть на сайте. В 2022 году стремиться нужно к следующим показателям:

• отрисовка самого крупного контента (LCP) – менее 2,5 сек с начала загрузки страницы;
• задержка после первого ввода (FID) – менее 100 мс;
• совокупное смещение макета (CLS) – менее 0,1.

Для ускорения сайта делается следующее.

1. Минимум редиректов.
2. Сжатая графика, видео и аудио. Держите файлы как в формате WEBP, так и в классических, но сжатых.
3. Подключенные AMP-страницы в Google и турбо-страницы в «Яндексе».
4. Включенный кэш. Если сервер будет кешировать данные юзера, при следующих посещениях сайт не будет загружаться «с нуля», что ускорит время загрузки.
5. Уменьшенное количество запросов к серверу до минимально допустимого значения. Объедините мелкие графические элементы, файлы JavaScript и другую «мелочь», чья прогрузка занимает много времени.

11. Работа с контентом

Приступаем к самому волнующему моменту – наполнению сайта информацией.

1. Проанализируйте контент-стратегию конкурентов. Найдите пробелы, которые они не перекрыли. Сравните эту стратегию со своей. Придумайте стратегию, которая закроет сразу несколько пробелов (скорее всего, какие-то мысли об этом у вас появятся еще на этапе анализа конкурентов).
2. Заведите блог. Так вы решите сразу две важных задачи: формирование имиджа эксперта и проработку всех возможных ключей в своей теме, не «мусоря» на основной части сайта. При этом узкая и сложная специализация бизнеса не приговор, а скорее дополнительный плюс.

Это доказывает блог на сайте по производству и продаже арболитовых блоков «Русский Арболит». Если даже они нашли, чем заинтересовать читателей в своем блоге, это сможете и вы.

Даже на сложную тему можно написать интересные статьи

«Русский Арболит» – очень интересный и особенный проект. Например, в дизайне мы используем белые и голубые тона. Они нехарактерны для этой ниши: конкуренты в основном используют коричневый и зеленый, ориентируясь на ассоциации с теплом и натуральностью. Мы сознательно выбрали необычную палитру.

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

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

С контентом тоже вышла интересная история: мы отрабатывали преимущественно ВЧ-запросы, но «с хвостами». То есть, не просто «чем утеплить дом», а «чем утеплить дом из арболита», не просто «как рассчитать количество строительных материалов», а «как рассчитать количество строительных материалов для дома из арболита». Конечно, мы писали исчерпывающие лонгриды по теме основного запроса, делая поправку на арболит.

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

Дарья Завьялова

выпускающий редактор TexTerra

1. Подстраивайтесь под голосовые запросы. Забудьте о «Москва кофе купить молотый». Сегодня время «Окей Гугл, где купить молотый кофе на Таганке?».
2. Максимально структурируйте текст. H1, H2 и т. д. обязательны. «1 абзац = 1 мысль». Добавьте в текст таблицы и списки, где это возможно. Так вы увеличите свои шансы попасть в сниппет выдачи (нулевой запрос).
3. Заполните все meta-данные, alt и title в картинках и видео.
4. Сделайте четкий контент-план. Необязательно, чтобы он был готов на год вперед: бывает так, что актуальное сегодня, уже никому не нужно завтра. Но на какой-то период он должен быть – пусть на неделю или месяц. При этом контент должен выходить регулярно и следовать одной цели – продвижению и продажам.
5. Делайте уникальные тексты. Показатель уникальности полностью зависит от сферы и задач. В некоторых случаях (юридические, медицинские тесты) допустимо и 60-70 %, а где-то нужно хотя бы 80-85 %.
6. Пишите тексты понятным человеческим языком. Конструкции из 2007 «окна москва недорого двери купить» забудьте, как страшный сон.
7. Добавьте на сайт политику конфиденциальности. Это нужно, если вы собираете данные пользователей. Если вы их собираете, а политику конфиденциальности не разместили, можете получить штраф.
8. Убедитесь, что контент быть доступен как в webm-формате, так и в классических форматах по типу jpeg, mp4, aac и т. д.
9. Не привязывайте текст ко времени. Иначе система «свяжет» текст с этим временным промежутком. В долгосрочной перспективе этот материал просто не будет выводиться в начале поиска. Исключения – новости, аналитика и другие вещи, которые актуальны лишь на определенный промежуток времени.

Как в 2 раза увеличить посещаемость вашего блога – работаем с оптимизацией текста

1. Ссылайтесь только на проверенные источники. Поисковые машины уже научились отличать fake news и понижают позиции тем, кто использует их как источники.
2. Убедитесь, что контактные данные актуальны, одинаковы и доступны на всех страницах сайта.
3. Убедитесь, что стили шрифтов, абзацев, междустрочные интервалы, цвета и навигация одинаковы на всех страницах.
4. Проверьте, что CSS, HTML и все сценарии оптимизированы и работают без багов.
5. Проверьте, что фавикон присутствует и отображается корректно.

Фавикон – значок вашего сайта на вкладке

12. Проверка на санкции поисковиков

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

Самые частые причины «фильтрации»:

1. неуникальный контент;
2. вирусы на сайте;
3. внешние ссылки с сайтов с низким доверием, fake news и порталов под «фильтрами»;
4. переоптимизация ключевыми словами;
5. бессистемный линкбилдинг (переспам ссылками);
6. накрутка поведенческих показателей;
7. слишком агрессивная реклама;
8. аффилиаты (в лучшем случае, поисковик выберет из «сети» 1 сайт, а все остальные заблокирует);
9. разные серые технологии по типу фишинга, клоакинга и т. д.

Это только вершина айсберга, который с каждым годом только растет. Самые актуальные списки того, за что сайт может попасть под фильтр, можно найти у самого «Яндекса» и Google.

13. Работа с локальностью

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

1. оптимизируются страницы в «Google Бизнес» и «Яндекс Бизнес»;
2. корректно настраиваются регионы в «Яндекс.Вебмастер» и Google Search Console;
3. правильно прорабатывается микроразметка в разделе «Контакты»;
4. компания добавляется в «Яндекс.Карты», Google Maps, 2ГИС и другие сервисы с картами;
5. с сайта убираются аффилиаты (или у них в контактах другой адрес и телефон);
6. сайт добавляется в тематические справочники: поисковики до сих пор индексируют подобные сайты. Чем больше порталов говорят о вас – тем лучше.

14. Проверка Usability

Предпоследний шаг. Вот что важно на этом этапе:

1. Навигация и сам сайт интуитивно понятны.
2. Карта кликов полностью готова. Все, что мешает, убрано.
3. Кроссбраузерность дополнительно проверена.
4. Все формы работают, письма благодарности написаны и «задевают» ЦА.
5. Все UI-тексты корректны («buy», а не «bye»).
6. Дополнительно проверены линки, перелинки, блоки навигации.
7. Отсутствуют назойливые поп-апы и пуши (как на сайтах с нелегальными онлайн-кинотеатрами).
8. Есть линки на основные social media, кнопки «Поделиться» для всех востребованных соцсетей.
9. В чат-боты загружены все основные вопросы, они понимают «человеческую речь», регулярно обновляются. Есть команды, переключающие сразу на техподдержку.
10. Основные метрики сайта в норме: LCP, FID и CLS.
11. Подключены метрики, отслеживающие посетителей: AOV (средний чек), LCV (жизненная ценность клиента), CPA (цена за целевое действие), CAC (стоимость приобретения клиента), ROI / ROMI (показатели окупаемости кампаний), конверсии, отказы, доля рекламных расходов, метрики аналитики соцсетей и рассылок, ключевые слова, приводящие клиентов.

15. Аналитика

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

(отслеживание скорости загрузки сайта); (общая аналитика сайта); (общая аналитика сайта);
1. панель разработчика в Chrome (вкладка Lighthouse, для исправления ошибок); (исправление ошибок с точки зрения SEO); (общая аналитика сайта); (экспресс-анализ сайта); (анализ обратных ссылок); (аналитика соцсетей); (тулбар для анализа ключевых SEO-параметров на открытых страницах); (поиск и анализ конкурентов); (тестирование сайта реальными посетителями).

Ваша заявка принята.
Мы свяжемся с вами в ближайшее время.

Что еще проверить

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

Источник: texterra.ru

Что нужно для создания сайта?

В статье рассматривается, что необходимо для правильного создания сайта. Здесь нет заумных советов от напыщенных «мудрых» дизайнеров и программистов. Цель статьи: дать универсальные знания простым языком. Этот материал полезен всем, кто собирается открыть свой собственный интернет-ресурс. Делаете ли вы проект самостоятельно или обращаетесь к специалистам — чтобы получить хороший результат, нужно знать основополагающие принципы сайтостроения.

Цели и задачи

1. получение коммерческой выгоды,
2. творческая самореализация.

Задачи вытекают из целей. Цель «получение выгоды» строже, чем «творческая самореализация», поэтому рассмотрим именно ее. Задачи для получения выгоды могут быть следующими:

• привлечение новых клиентов
• автоматизация работы с клиентами
• повышение имиджа компании
• привлечение инвесторов

Подробнее о том, для чего вообще нужно разрабатывать сайт.

Обратитесь за созданием сайта к специалистам нашей студии.

Доменное имя

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

• В какой зоне? Для русскоязычного ресурса лучше всего подходят зоны: .ru, .su. Для англоязычного нужно использовать международные зоны: .com, .biz, .net и др.
• Где регистрировать? Лучше всего у регистратора напрямую. Популярные регистраторы на территории СНГ: RU-CENTER, R01.
• Если имя уже кем-то занято:

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

Хостинг-площадка

Если представить, что сайт – это виртуальный дом, то хостинг – «земля» в интернете, на которой «стоит» сайт. Точно так же, как с землей, вы можете «купить свою землю», создав собственный интернет-сервер, или арендовать чужой, обратившись к услугам сторонней хостинг-площадки.

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

Как выбрать хостинг?

• на платформе Linux или Windows,
• с разными панелями управления,
• с разными серверными характеристиками,
• различаться по географическому положению,
• и даже бесплатными, обращаться к которым крайне не рекомендуем.

При таком многообразии выбора мы сформулировали универсальные критерии хорошего хостинга:

• Поддержка PHP, MySQL. В 90% случаях, если хостинг не бесплатный, она есть.
• Место на диске: рекомендуем от 1Гб.
• Удобная панель управления хостингом (например: ISP Manager, Plesk Panel, CPanel).
• Круглосуточная служба поддержки. На 70% перебои в работе сайта (при условии, что он сделан качественно) зависят от проблем сервера, решить которые поможет только оперативная служба технической поддержки.
• Настройка почтовых адресов
• Ведение статистики посещений и ошибок (логи)
• Автоматическая архивация данных

Техническое задание

Техническое задание (коротко ТЗ) – это «паспорт» проекта. Требования к функционалу, дизайну, шрифтовому оформлению – все можно хранить в техническом задании. И чем подробнее там информация, чем будет лучше она структурирована, тем удобнее в любой момент провести нужные доработки (необходимость в которые возникнет рано или поздно).

Для разных типов сайтов техническое задание может быть разным. Для сайта типа «эконом» или «визитка» ТЗ может быть составлено на 1-2 листочках. Для сложных проектов ТЗ настоятельно рекомендуется делать как можно более подробным, структурированным, но не содержащим ничего лишнего. ТЗ должно создаваться универсальным специалистом (например, проект-менеджером), разбирающимся во всех аспектах сайтостроения.

Движок (CMS)

Выбор движка – краеугольный камень успешного сайта. Движок (или, по-другому, Content Management System, CMS) – это программа, существенно упрощающая разработку сайта и управление его содержимым. 70-80% сайтов сделаны с помощью CMS, которые могут быть:

• платными и бесплатными,
• универсальными и разработанными под определенный проект (или тип проектов)
• написаны на языках программирования PHP, Ruby, ASP и др. У каждого языка программирования есть свой достоинства, однако, движок, сделанный на PHP, подойдет к большинству серверов.
• использующие разные системы баз данных (СУБД): MySQL, PostgreSQL и др.
• предназначены для разных типов сайтов. Например, для блога или информационного сайта очень хорошо подходит бесплатный популярный движок WordPress

Какой бы движок вы ни выбрали, он должен удовлетворять следующим универсальным базовым требованиям:

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

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

Можете связаться с нами с помощью формы внизу или контактов на этой странице. Мы подробно расскажем об особенностях и преимуществах CMS Web112.

Выбор исполнителя

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

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

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

Как выбрать исполнителя на создание сайта?

• Сколько лет работает на рынке? Если больше 3-х лет, то хорошо.
• Что в портфолио? Нравятся ли работы из него? Есть ли там проекты из вашей отрасли? Высока вероятность (но далеко не 100%), что сайт, который вам сделают, будет похож на другие работы исполнителя.
• Раскручен ли сайт исполнителя? Можно ли найти его в поиске по запросам, связанным с созданием сайта?
• Один человек или фирма? Существует немало споров на эту тему, в которые мы не будем углубляться. Если коротко: один человек возьмет небольшую цену за разработку интернет-магазина или Landing Page, фирма будет дороже, но даст больше гарантии, обеспечит качественную поддержку и сопровождение.
• Насколько хорошо исполнитель понял именно вашу задачу? Здесь вам поможет хорошее техническое задание. Если ТЗ нет, не критично, но перед началом работ его нужно сделать. Обращайте внимание на то, как исполнитель вникает «в тему», как он реагирует на ваши вопросы, какие вопросы задает вам. Если вы в бизнесе уже не первый год и «чувствуете» людей, то просто доверяйте своей профессиональной интуиции.
• Не покупайтесь на эмоции. Не выбирайте исполнителя по внешнему виду, интерьеру офиса или умным фразам сотрудников. Помните, что вы клиент, а весь окружающий антураж может быть всего лишь искусной наживкой для вас. Нужно понимать это.

Разработка сайта

Создание сайта состоит из следующих этапов:

1. Проектирование и разработка ТЗ
2. Разработка дизайн-макета (выполняется с помощью Adobe Photoshop)
3. Кросс-браузерная верстка, адаптированная под все типы браузеров и мобильные платформы. Выполняется с помощью HTML и CSS.
4. Программная настройка. Выполняется специалистом, знающим языки программирования.
5. Тестирование
6. Наполнение
7. Запуск

Детально этапы разработки будут рассмотрены в следующих статьях.

Резюме: для создания сайта необходимо

1. Определить цели и задачи. Лучше — если это коммерческая цель.
2. Купить подходящее доменное имя
3. Арендовать хостинг-площадку
4. Составить техническое задание
5. Выбрать подходящий движок
6. Нанять ответственного подрядчика
7. Провести процесс разработки

А как вы считаете, что еще нужно для создания сайта? Будем рады любым комментариям.

Понравилась статья?)
Всё самое интересное — ещё впереди!
Я, руководитель студии Web112 Игорь Филипенко, и моя команда прилагают максимум усилий,
чтобы создавать как можно более полезный контент для вас.

Источник: web112.biz

Сайт для строительной компании

В январе ко мне обратились за созданием сайта для #строительнойкомпании ООО «СЕВЕР-ЛЕС», которая на протяжении многих лет занимается строительством деревянных зданий – бань, частных домов (преимущественно), и др.

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

Исходя из цели, изначально, были поставлены след. #задачи :

1. Создать #многостраничныйсайт , чтобы пользователь мог легко и понятно передвигаться по интересующим его разделам, а также для более эффективной работы настроек SEO в дальнейшем.

2. Разместить и оформить необходимую информацию о компании, о порядке осуществления заказа и т.д., включая отзывы клиентов, чтобы закрыть возникающие у пользователя вопросы и решить проблему с доверием;

3. Разместить информацию о преимуществах и выгодах, чтобы привлечь новых потенциальных покупателей (заказчиков);

4. Разместить информацию об основных «продуктах» строительства, чтобы оставить у пользователя наглядное представление того, что он может получить в итоге, за что будет платить деньги компании, а также подтолкнуть его к новым идеям проектировки;

5. Настроить и подключить сервис приема данных на сайте (базовая форма заявки: ФИО, номер тел. и эл. почта для связи);

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

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

Как и видно из схематичной структуры, я предложила сделать сайт из 9 страниц, на каждой из которой освещался бы соответствующий раздел. На прототипе (черно-белом скелете сайта) заказчик уже наглядно понимал, что как будет выглядеть и работать.

С учетом ниши, целевой аудитории и современных тенденций был разработан соответствующий #дизайн

Сайт выполнен на привычном светлом фоне в минималистическом стиле с добавлением базовой анимации элементов.

Касаемо типографии, #шрифты подобраны простые, легко-читабельные. Контраст между размерами и цветами расставляет акценты, управляет вниманием пользователя.

Лидирующие цвета: желто-оранжевый — олицетворяющий тепло, солнце, радость, природный свет; синий (небесный) — ассоциирующийся с надежностью, спокойствием, стабильностью; светло-серый #цвет – нейтральный, балансирующий.

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

В других случаях, более предусмотрительные компании (на мой субъективно-объективный взгляд))) создают на сайте формы заявок, которые можно заполнять и отправлять в любое время суток и никто и практически ничто тебе не помешает это сделать (в отличие от тел. звонка). Но в 90% таких форм я не увидела никакого уточняющего вопроса.

Всё, что спрашивается в этих заявках, это контактные данные (ФИО, тел., эл. почта). В них нет ни слова об интересующем вопросе/проекте. Мне показалось это большим упущением, поскольку при созвоне обеим сторонам будет сложнее выстраивать эффективный диалог. Менеджеру придется задавать лишние вопросы, человеку по ту сторону придется вспоминать, что он хотел спросить, какой объект ему понравился, а менеджеру быстро придумывать ответы на эти вопросы и склеивать находу «готовое предложение», чтобы не потерять потенциального заказчика.

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

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

Вторая форма непосредственно для приема заявок на строительство конкретного объекта. Она появляется тогда, когда пользователь уже заинтересовался конкретным предложением и изъявил желание узнать о нем поподробнее.

Таким образом, получая более конкретизированные запросы от пользователя, менеджеру будет проще их обрабатывать. У него будет возможность заранее рассмотреть определенный вопрос и дать хорошо подготовленный ответ, что в свою очередь поможет более успешно закрывать заявки и тем самым увеличивать прибыль компании. Разделение форм для заявок с вопросами и заявок на конкретные проекты также помогло разграничить «более теплых» пользователей — готовых на сделку, и «менее теплых» — которые только думают, присматриваются, знакомятся с компанией.

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

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

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

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

Если со всеми остальными элементами сайта всё было предельно ясно и понятно, то с тем, как лучше оформить и преподнести сами «товары» (объекты строительства) возникли определенные трудности. Я представляла, как это должно выглядеть по желанию заказчика, но не очень представляла, каким образом это можно будет реализовать технически. P.s: честно говоря, при составлении ТЗ, не знала как именно решу этот вопрос, но точно знала, что что-нибудь (хорошее))) придумаю. В конце концов, это же моя работа – находить решения в нерешаемых ситуациях пхахах (наверное, тут дизайнеры меня поймут))))

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

Кроме того, карточек много (50+) – делать их по отдельности полностью вручную неразумно, как минимум из-за дальнейших сложностей с их редактированием. Здесь, как и многим другим, мне явилась очевидная идея с к а т а л о г о м.

Однако, загвостка в том, что настройки каталога (во всяком случае на Tilda) адаптированы именно под интернет-магазин, то есть сайт, целью которого является #продажа товара. Нас же интересовали просто конкретизированные #заявки (подробнее об этом решении и его непростой, но довольно интересной реализации можете почитать в другой, следующей за этой, статье).

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

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

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

Мне интересны технические детали, если можно.

В разделе Структура и прототипирование можно было бы показать прототипы.

А структуру сайта Вы в Miro делали? Или какой редактор UML-диаграмм Вы предпочитаете?

Кстати, что касается структуры, то Вы ограничились только построением этой структуры или Ваш вариант User Flow более широкий?

Прототипирование в Figma или вся работа в Тильде?

Спасибо за вопросы, Альберт)

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

Создавать наглядную структуру сайта предпочитаю наиболее простыми и уместными способами (в целях экономии времени прежде всего). Сервис Miro использовала пару раз, но, на мой взгляд, он больше подходит для командной работы. Не вижу в нем необходимости, когда выполняешь всю работу в одиночку (если только нужно перед глазами заказчика проложить «маршрут» пользователя в онлайн формате, например, но при создании этого сайта, подобные нюансы решались лично на встрече и в использовании подобных досок просто не было необходимости).
В данном случае, эта схема — просто картинка (рисунок из Figma).

Вы грамотно подметили, что структура сокращённая, да) User flow намного шире и именно поэтому я не смогла его опубликовать (слишком большое изображение получалось, либо не отображалось в надлежащем качестве).

Вся работа от и до выполнена на Tilda (этапы согласовывались посредством ссылки на «черновой» вариант сайта).
Честно говоря, создавать прототипы и дизайн я предпочитаю в фигме, но иногда это просто создает бОльший объём работы, т.к потом всё это придётся переносить на тильду (особенно когда речь идёт о многостраничном сайте). В данном случае просто не было смысла создавать весь макет в фигме, а потом ещё тратить время на его перенос в тильду.

Источник: vc.ru