Разработка сайта на Tilda — шаблон взял, картинок добавил и готово?

Да, но не все так однозначно. Подробно разбираю, как создавала сайт для стоматологии из г. Уварово. Посмотрите — поймете, в чем дело.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но.

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

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

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

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

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

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

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

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

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

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

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

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

• Хостинг — место, где хранятся файлы сайта. В этом проекте оплачивать провайдеру место и подключать к домену хостинг нам не потребовалось, поскольку сайт разрабатывался на базе 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.

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

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

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

Собственно.Разработка сайта может выглядеть довольно простой задачей: берешь конструктор, накидываешь контента и в путь. На деле же — ответственный и кропотливый труд.
Надеюсь, вам было полезно прочитать эту статью. Буду рада обратной связи!
С уважением, Регина Никитушина.
Если будут вопросы — пишите в комменты или лс ВК. Моя страница: https://vk.com/id570048448