Этапы создания многостраничного сайта на Tilda: как это делают в NAJES

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

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

Сроки всегда обсуждаем на старте. Мы не любим затягивать и не заманиваем обещаниями сделать сверхбыстро.

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

Итак, сколько времени занимает разработка простого многостраничного сайта на Тильде? На это влияют задачи, количество страниц, готовность контента и оперативность согласований. В среднем на многостраничный сайт у нас уходит от 10 до 15 недель.

Если нужно MVP (простой сайт, чтобы проверить гипотезу) — можно собрать быстрее. Например, за 5−7 недель или меньше. Но только если заказчик готов к компромиссам: меньше украшательств, больше стандартных блоков, упрощенная логика. Иногда это лучший способ проверить гипотезу, не влезая в долгую разработку.

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

Итак, по срокам более-менее понятно. Теперь давайте двигаться по этапам.

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

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

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

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

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

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

Что входит в маркетинговое исследование:

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

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

Иногда заказчик принимает решение сразу, а иногда берет паузу на подумать. Затем уже возвращается с пониманием, какие идеи точно использовать, а какие оставить на потом.

Сейчас пару слов о том, что такое прототипирование и зачем оно нужно при создании сайта на Тильде. Прототип — это схема будущего сайта. Не дизайн, а именно схема: структура, тексты, логика переходов. Обычно мы делаем его в Figma.

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

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

Если вы спросите, какие этапы создания многостраничного сайта на Tilda иногда можно пропустить, то это может быть прототипирование, или проектирование. Не спешите кидаться тапками, сейчас объясним: если проект небольшой (например, MVP) и мы давно знакомы с клиентом, можем обойтись без прототипа: UX и UI дизайнер прорабатывает сразу в макете. Тексты клиент предоставляет, дизайн обычно простой, логика страниц ясна, задача понятна. Но это скорее очень редкое исключение. В большинстве случаев прототип обязателен, ведь помогает сэкономить время, нервы и получить более предсказуемый результат.

Зачем тратить время на прототип:

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

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

После прототипа наступает этап, которого все особенно ждут — дизайн.

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

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

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

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

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

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

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

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

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

Эти моменты мы обсуждаем заранее. Если приоритет — простота редактирования, используем стандартные блоки. Если же хочется «вау-эффект», сразу предупреждаем: да, будет вау, но администрировать сложнее. Зато и визуальный результат сильнее.

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

Также подключаем внешние шрифты (читайте, как подключить свой шрифт к Тильде), если это нужно по макету или у клиента уже есть купленные шрифты.

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

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

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

Мы проверяем:

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

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

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

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

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

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

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

В итоге сайт имеет:

• логичные переходы между страницами;
• внятное и удобное меню;
• ориентацию для пользователя на любом этапе пути.

Кто-то может опасаться, что многостраничные сайты на Тильде индексируются плохо. Не знаем точно, откуда взялось такое мнение, но у нас, у клиентов и коллег все отлично, трафик идет, денежка зарабатывается. И настраивается все довольно просто: в Тильде не нужно лезть в код, чтобы сайт нормально индексировался и показывался в поиске. Достаточно навести порядок в базовых настройках и чуть-чуть подумать про структуру. Мы делаем стандартные SEO-настройки на каждом проекте.

Все начинается с простого: прописываем заголовки (Title, Description, H1, H2, H3), делаем понятные адреса страниц (а не /page3), следим, чтобы на странице был только один H1, включаем индексацию только там, где она нужна. Визуал загружаем не как попало, а сжимаем заранее, задаем alt-тексты, включаем lazyload.

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

Вот короткий список того, что делаем обязательно:

• заполняем Title и Description вручную,
• настраиваем читаемые URL,
• следим за структурой заголовков,
• оптимизируем изображения,
• отключаем индексацию там, где она не нужна,
• подключаем Метрику к Тильде и GA, отправляем сайт на знакомство с Яндексом и Google,
• проверяем скорость и структуру, настраиваем цели в аналитике.

После всех настроек финально проверяем, как сайт себя ведет «в бою»: кликаются ли кнопки, приходят ли заявки, нормально ли выглядит на айфоне, андроиде, планшете и мониторе 4K.

После этого:

• переносим сайт на личный аккаунт заказчика на Тильде;
• передаем все доступы и файлы;
• записываем видеоинструкцию по управлению сайтом.

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

1. Первичное интервью и аналитика. Проводим первый созвон, выясняем задачи проекта, особенности продукта, аудиторию и каналы продаж. Анализируем рынок, конкурентов, поведение пользователей. Иногда подключаем маркетинговое исследование с отчетом и презентацией выводов.
2. Техническое задание (ТЗ). Формируем структуру сайта, согласовываем с заказчиком страницы и ключевые смыслы. Даже если клиент приходит без готового ТЗ — оформляем его сами.
3. Проектирование. Создаем интерактивный прототип в Figma. В нем — структура, тексты, логика переходов. Это помогает согласовать сценарии взаимодействия с сайтом еще до старта дизайна.
4. Разработка дизайна. Делаем дизайн-концепцию, утверждаем с заказчиком, затем — отрисовываем все страницы.
5. Верстка на Тильде. Основную часть макетов собираем на Zero Block, чтобы реализовать все задуманное. В нужных местах используем стандартные блоки (новости, каталоги и т. п.) — это удобно и быстро. Отдельно адаптируем сайт под разные устройства.
6. Настройка перелинковки и меню. Связываем страницы, формируем понятное меню и добавляем хлебные крошки. Так сайт становится единым и логичным.
7. SEO и аналитика. Прописываем метатеги, настраиваем индексацию, оптимизируем изображения. Подключаем Метрику, Google Analytics и отправляем сайт в поисковые системы.
8. Финальная проверка и передача. Тестируем сайт, переносим его в аккаунт заказчика, передаем доступы. Записываем видеоинструкции и остаемся на связи.

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