WOW-дизайн сайта для эзотерики. Эффектная вёрстка на Tilda

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

Подготовка → Дизайн → Вёрстка → Настройка СЕО → Интеграция с amoCRM

Введение

Это особенный проект.

Большой. Красивый. С крутым результатом. Со своими сложностями.

Мне написала Маргарита с просьбой обновить дизайн многостраничного сайта для сообщества профессионалов Рэйки.

Проблемы старого сайта:

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

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

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

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

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

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

Спойлер, это получилось!

Разобрались с платформой, на которой получим нужный нам результат — идём дальше.

Подготовка

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

Некоторые из референсов:

Референсы
Референсы

Шрифты и цвета:

Дизайн

Сделал дизайн главной страницы

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

Вёрстка на Tilda

Маргарите, заказчику, понравился дизайн не меньше, чем мне. По дизайну утвердились и я сверстал главную основную страницу на Tilda. Закарпел над анимацией, сделал приятно и интересно, в то же время не перегрузил.

Десктопная версия с анимацией, свёрстанная на Tilda

Другие страницы решил собирать сразу на Тильде. Ориентируясь на главную страницу — собираю дизайн и верстаю одновременно.

Сделал удобное меню для навигации.

Меню
Меню

Адаптировал сайт под экраны смартфонов:

Мобильная версия с анимацией, свёрстанная на Tilda

Далее настроил pop-up окна. Добавил Политику конфиденциальности, на некоторых страницах она отличалась. И подключил домен к Tilda.

Страница ошибки 404.

Сейчас сайт уже готов и туда идет трафик https://reikitravel.ru/

СЕО-позиции

При переносе домена на Тильду мы должны были сохранить СЕО позиции. Сайт находился на первом месте в поиске по определенным запросам.

Мы выполнили задачу — сайт сохранил первые позиции. Я выжал максимум из Тильды.

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

Запрос в Яндексе
Запрос в Яндексе

Интеграция с amoCRM

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

Также настроил метки, чтобы было понятно, с какой страницы и формы сайта приходит заявка.

Отзыв Маргариты о нашем сотрудничестве

Понравился кейс и готовы обсудить свой проект? Напишите мне во ВКонтакте vk.me/ayrat_design

или в телеграм

11
5 комментариев

а как на счет оптимизации...

СЕО-оптимизацию или скорость загрузки имеете ввиду?