Кейс «Сайт для буддийского монастыря» - Александр Бакалов

подробный кЕЙС по созданию сайта

Сайт для буддийского монастыря

Александр Бакалов

Сайтостроитель и веб-дизайнер

Здравствуйте, меня зовут Александр Бакалов. Я занимаюсь разработкой продающих сайтов и интернет-магазинов. В этом кейсе я хочу подробно рассказать вам о том, как я создал сайт для буддийского дацана в Сибири

Другие работы вы можете посмотреть по ссылке:
bakalov.su/portfolio

Вкратце о проекте

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

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

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

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

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

Задачи сайта

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

1. Возможность записаться на прием к каждому из лам дацана
2. Возможность информировать о будущих хуралах (службах) в храме
3. Принятие пожертвований онлайн
4. Информация и возможность записаться на курсы бурятского языка

Ключевые действия на сайте

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

2. Блоки с анонсами хуралов и прошедшими хуралами. Эти блоки показывают людям, какие службы будут проводиться в ближайшие дни.

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

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

Портрет целевой аудитории

Прихожанин Усть-Ордынского дацана

Приходит на хурал (службу) или на личный прием к ламе

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

После создания сайта большая часть трафика будет приходиться на него именно из социальных сетей. 70% аудитории состоит из женщин, средний возраст от 25 лет. Большая часть людей проживает на территории Усть-Ордынского округа, но есть также те, кто проживает в столице региона – в Иркутске.

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

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

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

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

Кстати, мои последние сайты вы можете посмотреть по ссылке: http://bakalov.su/portfolio

Сетка и стиль углов

Сетка – это силовые линии, на которые опирается дизайнер, когда расставляет элементы на сайте.

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

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

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

Система отступов

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

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

Основные виды отступов и их размер:

1. Расстояние от контента до конца/начала блока – 130px

2. Расстояние от заголовка до любого контента (фото или видео) – 60px.

Заметьте, что расстояние внутри блоков всегда меньше, чем расстоянием между ними и от начала блока до начала контента!

3. Межстрочный интервал (интерлиньяж) – 1,5 у текста подзаголовка и 1.3 у заголовков H1 и H2

4. Также заметьте, как блоки расположены на самом экране: они имеют равное расстояние и с левого края контейнера и с правого края.

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

Разбор каждого из блоков сайта

1. Первый блок – озвучиваем, что мы официальный сайт дацана

На первом экране даем человеку на выбор два самых распространенных ключевых действия: записаться к ламе на прием или заказать молебен онлайн

2. Второй блок – возможность записаться к каждому из лам на прием

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

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

3. Третий блок – возможность заказать молебен онлайн + инструкция по оплате

Этот блок позволяет существенно упростить оплату молебнов онлайн. Раньше людям приходилось действовать следующим образом:

1. Найти информацию с реквизитами карты настоятеля в наших социальных сетях
2. Скопировать номер
3. Перейти в приложение "Сбербанк Онлайн" и сделать перевод
4. Сделать скриншот отправленного перевода
5. Написать настоятелю в WhatsApp имена для прочтения на молебне

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

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

Далее, человек видит экран, на котором говорится, что оплата прошла успешно и все данные поступили к нам.

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

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

Ниже привожу пример моего тестового перевода во время отладки работы формы:

4. Четвертый блок – рассказываем о курсах бурятского языка

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

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

5. Пятый и шестой блоки – анонсы ближайших мероприятий, а также информация о прошедших

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

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

6. Последний блок – сообщаем о нашем месторасположении, а также даем необходимые контактные данные

Настройка якорей

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

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

В этом случае я советую действовать следующим образом:

1. Перейти в зеро-блок и создаем HTML-документ. Документ нужно расположить в том месте, куда вы хотите перенаправлять пользователя (то есть на месте, где должен быть сам якорь)

2. Прописать в HTML-документе следующий код:

<div id="001"></div>

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

3. После этого создаем кнопку и затем вставляем в раздел "URL" следующее значение:

4. Если вы хотите поместить якорь в меню, то также ставьте там это значение:

Теперь при нажатии на кнопку или элемент меню, вас автоматически перекидывает в нужную часть экрана, где находится этот HTML-код

Эффект затемнения при наведении стрелки (On Hover)

Это эффект, когда один элемент затемняется при наведении на него стрелки курсора. Данный эффект я создал на зеро-блоке в конструкторе "Тильда"

Для создания такой анимации вам нужно:

1. Переходим в зеро-блок. Находим фото, которое мы хотим затемнить при наведении:

2. Затем создаем Shape и даем ей цвет, который мы хотим видеть при затемнении:

3. Выделяем созданную Shape и находим "Animation step by step" и нажимаем "add":

4. Выбираем параметр "On Hover" (что анимация срабатывает при наведении стрелки мыши):

5. Далее добавляем один шаг

6. Ставим "0" в полях "duration" и "opacity":

7. Добавляем еще один шаг:

8. Ставим "duration" = 0.3, а "opacity" = 60 (цифры примеры, регулируйте их исходя из того, какой эффект сами хотите получить):

9. Чтобы посмотреть, как будет выглядеть анимация, нажимаем "Play All":

10. Теперь при наведении на этот элемент, он затемняется. Также поставьте его перед фото, которое вы хотите затемнить:

Создание кнопки "Наверх"

Кнопка "Наверх" позволяет человеку вернуться наверх страницы без использования скролла. Данный элемент упрощает перемещение человека по странице.

1. Это стандартный элемент в Тильде:

2. Чтобы поменять внешний вид этой кнопки, нажмите на раздел "Настройки". Кнопка автоматически поднимает человека до 1 экрана.

Самокритика и выводы

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

В частности, я бы поменял:

1. Шрифт. Сейчас, во время написания кейса, я могу однозначно сказать, что шрифт для заголовков H1 и H2 стоило бы выбрать поинтереснее. Классический шрифт с засечками смотрится интересно, но не передает эмоциональной сути буддийского монастыря. А ведь задача шрифтов заголовков заключается в том числе и в этом

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

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

Отзыв настоятеля Дацана

Другие отзывы о работе со мной вы можете прочитать по ссылке:
https://vk.com/topic-135294483_41850487

Рассчитайте стоимость разработки сайта

Ответьте на 8 вопросов, чтобы узнать стоимость разработки вашего сайта и сроки его создания

Рассчитать цену сайта