Лендинг для центра помощи приёмным семьям: семь экранов и версия для слабовидящих

Центр помощи приёмным семьям в Новосибирской области попросил нас сделать главную страницу, которую станут открывать родители, будущие приёмные родители и специалисты по работе с детьми. Мы нарисовали её заново на сетке готового решения «Аспро», сверстали и подключили к 1С-Битрикс. На странице семь экранов, а в шапке есть версия для слабовидящих. Работали с ноября 2020 до января 2021 года, раздел «Документы» доделали к марту.

Кто клиент и для кого страница

Заказчик: государственное бюджетное учреждение Новосибирской области, центр развития семейных форм устройства детей, оставшихся без попечения родителей. Центр обучает будущих приёмных родителей, сопровождает семьи, консультирует их и проводит курсы для специалистов.

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

Читатели такой страницы разные, и все они пришли с серьёзным вопросом:

• родители из Новосибирской области, которые уже воспитывают приёмных детей;
• люди, которые только думают взять ребёнка в семью;
• специалисты, которые работают с детьми и семьями.

Что просил клиент

Задачу описали в начале ноября 2020 года. Ниже её суть, без пересказа деталей.

Как согласовывали макет

Дизайн делали с 10 ноября по 4 декабря 2020 года. Первый макет показали клиенту в конце ноября. Ответ был спокойным: идея понятна, розовый цвет шрифта надо заменить, со шрифтами можно играть.

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

• из двух вариантов выбрали второй, с круглыми формами;
• поля в форме обратной связи тоже сделали закруглёнными;
• вернули шрифт из первого варианта: он был крупнее и жирнее;
• блок «Услуги нашего центра» переименовали в «Родителям и детям»;
• в контактах добавили ссылку «Схема проезда» и круглые значки соцсетей под названием центра;
• текст раздела «Консультации» привели к виду, как в презентации центра;

Фотографии для страницы центр прислал сам: настоящие занятия, консультации и курсы. Мы разложили их по блокам.

Семь экранов страницы

Меню в шапке повторяет порядок экранов: «Семьям», «Кандидатам», «Специалистам», «Онлайн», «Консультации», «Документы», «Контакты». Шапка закреплена: при прокрутке она едет вместе с читателем.

1. Первый экран. Название центра, мысль Платона про заботу о счастье других и четыре числа, которые центр пишет о себе. Справа кнопка «Подробнее о центре». Числа на экране: 15 лет помощи семьям, 600 семей на сопровождении, 20 программ обучения, 2450 родителей на семинарах центра. Это данные самого центра, а не наш результат.
2. «Родителям и детям». Карточки программ: домашний психолог, «Растём вместе», «Шаг навстречу», «Решение», детско-родительский тренинг, «Конкурсы». На экране показаны шесть карточек. Если центр добавит новые, они встанут под ними, а ниже появится кнопка «Показать ещё».
3. «Кандидатам». Для тех, кто готовится принять ребёнка: помощь в принятии решения и школа кандидатов в замещающие родители. Блок растёт вниз, когда в админке добавляют новый.
4. «Наши ценности и ресурсы». Слайдер: стрелками листают задачи центра, цифра и текст меняются вместе.
5. «Специалистам». Слайдер с курсами для руководителей социальной сферы. Следующий слайд всегда виден справа, и на телефоне тоже.
6. «Онлайн». Три плитки: консультации для родителей, курсы для кандидатов, курсы для родителей. Если курсов станет больше, плитки продолжатся вправо, как слайдер.
7. «Консультации» и контакты. Телефоны для записи, текст о том, зачем нужны консультации, форма обратной связи. После отправки формы появляется окно с благодарностью.

Версия для слабовидящих

Кнопка «Версия для слабовидящих» стоит в шапке и видна на любом экране. Она нужна части читателей центра. Мы выбрали «Аспро» как основу ещё на этапе макета именно потому, что эта версия там встроена и не пишется с нуля.

Вёрстка и подключение к Битрикс

Вёрстка шла с 4 декабря 2020 года по 18 января 2021 года. Сначала сделали версию для компьютера, потом для планшета и телефона.

• Размеры экрана. Макет нарисован на ширину 1920 и 768 пикселей. Всё, что между ними, страница подстраивает сама: блоки уменьшаются и перестраиваются друг за другом. Для телефона сверстали отдельную ширину 365 пикселей и мобильное меню.
• Чёткость. Логотип, значки, стрелки и круги на фоне сделаны векторными. Они одинаково чёткие на любом экране, в том числе на ноутбуках.
• Фото. Блоки с фото держат размер из макета. Если в админке заменить снимок, он подгонится под свою область, и сетка не поедет.
• Меню. Пункты «Семьям» и «Консультации» ведут к нужным заголовкам, а не чуть ниже. Справа появляется кнопка «Вверх».
• Содержимое. Тексты и фото экранов лежат в инфоблоках Битрикса: сотрудники центра меняют их в админке и не трогают вёрстку.

28 декабря клиент прислал небольшие правки. Мы исправили, как ведёт себя седьмая карточка в блоке «Родителям и детям», поправили якоря меню, поставили в подвале почту и ссылку на группу центра в соцсети.

Раздел «Документы»

Отдельной задачей с 18 января по 2 марта 2021 года мы сделали раздел «Документы». Центр публикует в нём свои документы. Раздел собран по макету из Figma. Список документов ведётся в админке: к каждой записи прикрепляется ссылка на файл.

Первую версию клиент проверил и попросил четыре правки. Мы их сделали:

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

Сколько это заняло

Всего на три задачи ушло около 83 часов работы команды.

Для технических специалистов

• Платформа: 1С-Битрикс, редакция «Старт». Содержимое экранов хранится в инфоблоках, раздел «Документы» отдельный инфоблок со свойством «ссылка» и своим шаблоном вывода.
• Вёрстка по макету на 1920 и 768 пикселей, адаптив с промежуточными размерами и отдельной вёрсткой на 365 пикселей. Для ноутбуков блоки масштабируются пропорционально.
• Логотип, значки, стрелки и фоновые круги в SVG. Всплывающее окно после отправки формы, подгрузка карточек в блоке «Родителям и детям» («Показать ещё»), кнопка «Вверх», закреплённая шапка.
• Форма обратной связи запрограммирована в Битриксе, в подвале указана почта центра.
• Сборка шла на тестовом сайте, затем страница переехала на основной домен центра.

Нужен сайт для государственного или социального учреждения? Напишите нам на la-chatte.com или в Telegram @lcstudio. Скажем честно, возьмёмся ли, и назовём срок и цену до начала работы. О том, как мы делаем такие страницы, расскажет страница про лендинги под ключ. Похожая работа для детского дома: новый сайт для детского дома «Созвездие».