Разработка сайта на Tilda для стоматологии из Уварово

Требовалось разработать сайт для авторской стоматологии «Колибри» из г. Уварово.

Все работы на проекте выполнялись лично мной без привлечения сторонних специалистов. 

В рамках проекта я:

• Отрисовала прототип сайта;

• Собрала необходимую информацию и подготовила тексты, которые презентуют клинику в выгодном для продаж свете;

• Подготовила ТЗ фотографу и обсудила его с ним лично;

• Обработала фотографии для десктопной (компьютерной), планшетной и мобильной версий сайта;

• Подготовила & сверстала в Тильде дизайн, который по желанию клиента меняла в ходе правок;

• Создала десктопную (компьютерную), планшетную и мобильную версии сайта. Большая часть изображений обрабатывалась уникально под каждую версию.

• Помогла с регистрацией домена;

• Перенесла сайт на домен;

• Установила SSL-сертификат;

• Установила версию для слабовидящих, которая необходима согласно статьи 3.1 Федерального закона от 24.11.1995 N 181-ФЗ;

• Добавила к изображениям альтернативный текст, который требуется согласно ГОСТ Р 52872-2019;

• Проинформировала заказчика о том, что Приказ Минздрава России от 30.12.2014 №956н и Постановление Правительства РФ от 04.10.2012 №1006 регламентируют информацию, необходимую для проведения независимой оценки качества оказания услуг медицинской организацией. А именно — информацию, которая должна присутствовать на сайте. Добавила отдельную страницу на сайт для этих целей и разместила на ней предоставленную информацию. А также добавила карту сайта и поиск по сайту, которые требуются. 

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

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

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

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

Говоря про целевые действия. Их достижению способствуют два фактора:

1. Доступность и удобство выполнения действия;

2. Желание пользователя выполнить действие.

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

В случае с сайтом для авторской стоматологии «Колибри»:

• за пользователем «ползет» вниз меню с телефонами;

• предложение позвонить по телефону и записаться два раза встречается на главной странице сайта, а также в открывающихся через «Подробнее» скрытых изначально элементах pop up;

• телефоны размещены в блоке контакты.

Желание записаться — другая история. 

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

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

Доверие вызывают факты.

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

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

На фото — та самая я) 

Пишу от первого лица и теперь рассказ перестанет быть обезличенным.

Цифру «9» можно увидеть как «9» и как «6» — стоит только посмотреть на нее с другой стороны. 

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

На фото ниже — один из подготовленных вариантов прототипа. 

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

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

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

Но.

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

Я разрабатываю сайты с 2017 года и — объективно — бывало разное. Совмещала фотографии владельцев бизнеса, убирала лишние детали, делала фото светлее, обрабатывала людей на фото. Обработка — не проблема, училась работе в Photoshope и работала в нём. Но сейчас не о том)

Зачем, к примеру, осветлять фото?

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

Говоря конкретно про этот проект.

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

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

Для примера решила показать вам разницу в белом цвете. Небольшой, но важный момент.

Дальше — сам дизайн.

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

Но после обсуждения с заказчиком были внесены изменения, в том числе — замена цвета заливки фона. 

Логотип компании представлен в цвете #5F2763 и фон в итоговой версии было принято решение сделать в таком же.

• Хостинг — место, где хранятся файлы сайта. В этом проекте оплачивать провайдеру место и подключать к домену хостинг нам не потребовалось, поскольку сайт разрабатывался на базе SaaS-решения Tilda Publishing. 

Сразу отмечу два момента:

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

2. Да, Тильда — это «конструктор». И собрать сайт можно на стандартных блоках. Но. Дизайн, представленный выше, преимущественно выполнен на «Zero» блоках. И не просто сделан на них, но и кастомизирован при помощи HTML&CSS. 

Для примера — наведение на кнопки «Подробнее». Для кнопки слева прописан код, который добавляет тень. Справа — код, который увеличивает тень при наведении (свойство «hover»).

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

Но это было сделано при помощи кода, а не стандартного функционала шаблона. 

Ещё в далеком 2017 я училась созданию сайтов при помощи HTML&CSS и CMS WordPress. 

Дальше.

• Домен — «имя», адрес сайта в интернете.

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

Затем я перенесла сайт на выбранный домен и установила SSL-сертификат.

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

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

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

• Приказ Минздрава России от 30.12.2014 №956н;

• Постановление Правительства РФ от 04.10.2012 №1006;

• Установка версии для слабовидящих, которая необходима согласно статьи 3.1 Федерального закона от 24.11.1995 N 181-ФЗ;

• Добавить к изображениям альтернативный текст, который требуется согласно ГОСТ Р 52872-2019.

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

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

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