WOW-дизайн сайта для эзотерики. Эффектная вёрстка на Tilda
В этом кейсе вы прочитаете и увидите процесс + результат разработки многостраничного сайта.
Подготовка → Дизайн → Вёрстка → Настройка СЕО → Интеграция с amoCRM
Введение
Это особенный проект.
Большой. Красивый. С крутым результатом. Со своими сложностями.
Мне написала Маргарита с просьбой обновить дизайн многостраничного сайта для сообщества профессионалов Рэйки.
Проблемы старого сайта:
- Неудобная навигация
- Отсутствие дизайн-системы, единого стиля всех страниц сайта
- Шаблонный дизайн, не запоминающийся посетителям
- Не было динамики, чего очень хотела заказчик
На тот момент действующий сайт работал на платформе Flexbe, с которой я дело не имел. Посмотрел внутрянку платформы и понял, что результат будет посредственный даже если очень постараюсь.
Мы хотели сделать красивый, трендовый динамичный дизайн, но Flexbe этого не позволял
Поэтому решаем — что сделаем новый дизайн и перенесём сайт на платформу Tilda. Она даёт большие возможности для красивых динамичных анимаций.
Теперь задача выросла — нужен не только дизайн, но еще и сверстать его на Тильде. То есть с нуля собрать сайт на Tilda. С учетом готовых текстов и фотографий.
Я решил, что сделаю такую анимацию для главной страницы, чтобы она стала эталоном захватывающего эмоционального дизайна.
Спойлер, это получилось!
Разобрались с платформой, на которой получим нужный нам результат — идём дальше.
Подготовка
Собрал референсы для дизайна, выбрал два шрифта для заголовка и наборного текста и дополнительный ярко зеленый цвет к основному сиреневому. И уже понял в каком стиле сделаю новый сайт.
Некоторые из референсов:
Шрифты и цвета:
Дизайн
Сделал дизайн главной страницы
Не представите, какое получил нереальное удовольствие от процесса и результата дизайна главной страницы. Пересматривал её десятками раз с таким же тотальным увлечением, как ежегодно смотрю трилогию Властелин Колец.
Вёрстка на Tilda
Маргарите, заказчику, понравился дизайн не меньше, чем мне. По дизайну утвердились и я сверстал главную основную страницу на Tilda. Закарпел над анимацией, сделал приятно и интересно, в то же время не перегрузил.
Другие страницы решил собирать сразу на Тильде. Ориентируясь на главную страницу — собираю дизайн и верстаю одновременно.
Сделал удобное меню для навигации.
Адаптировал сайт под экраны смартфонов:
Далее настроил pop-up окна. Добавил Политику конфиденциальности, на некоторых страницах она отличалась. И подключил домен к Tilda.
Страница ошибки 404.
Сейчас сайт уже готов и туда идет трафик https://reikitravel.ru/
СЕО-позиции
При переносе домена на Тильду мы должны были сохранить СЕО позиции. Сайт находился на первом месте в поиске по определенным запросам.
Мы выполнили задачу — сайт сохранил первые позиции. Я выжал максимум из Тильды.
Для примера, один из нужных запросов в Яндексе, который должен быть в топе:
Интеграция с amoCRM
Настроил интеграцию с amoCRM, раньше заявки заносились вручную. Тильда хороша тем, что интегрируется почти со всеми сервисами для решения бизнес-задач.
Также настроил метки, чтобы было понятно, с какой страницы и формы сайта приходит заявка.
Отзыв Маргариты о нашем сотрудничестве
Понравился кейс и готовы обсудить свой проект? Напишите мне во ВКонтакте vk.me/ayrat_design
или в телеграм
а как на счет оптимизации...
СЕО-оптимизацию или скорость загрузки имеете ввиду?