Разработка многостраничного сайта для регионального центра и внедрение интерактивной карты Челябинской области

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

Этапы разработки:

1 Этап

Вместе с заказчиком выбрали и утвердили цветовую гамму: спокойный оттенок зеленого, приглушенный бирюзовый, бежевый, белый и черный. Зеленый цвет стал одним из основных, мы использовали его в качестве фона страниц, некоторых иллюстраций и иконок. По оттенку он очень похож на еловые ветви, что дает отсылку к эко-направленности центра.
Акцентным цветом стал бирюзовый оттенок. Им мы показали яркость и свежесть идей, предлагаемых сотрудниками. Этот цвет мы использовали для иконок, иллюстраций и некоторых заголовков. Бежевый и белый использовали для фона страниц и типографики, эти цвета помогли создать баланс и контрастность.

На первом этапе приступили к созданию дизайна для сайта

Созданным дизайном мы хотели передать атмосферу эко-направленности центра

2 Этап

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

Далее мы приступили к детальной проработке дизайна

В качестве основных страниц сайта были выделены: Главная, О нас, Мероприятия, Новости, Материалы и Проекты. Это позволило создать структуру сайта и перейти к его разработке.

Создание общей структуры сайта

3 Этап

4 Этап

На главной странице в качестве фона разместили иллюстрацию, полностью отражающую деятельность центра — благоустройство и озеленение города. Кратко оформили текст о компании, добавили фото и анимацию в виде вращающегося кольца с наименованием центра. Также добавили кнопку для перехода на страницу «О нас». Разместили интерактивную карту Челябинской области (информация о создании карты выделена в отдельный этап). Разместили новостной блок с возможностью фильтра по направлениям. Карточки новостей реализовали через блок Тильда «Потоки» для их постоянного, оперативного и удобного редактирования. Каждую новость можно развернуть и прочитать полностью, нажав на нее. Разместили информацию о партнерах центра, контактах и добавили зацикленную анимацию

Оформление главной страницы

5 Этап

Отдельным интересным и сложным решением является интерактивная карта Челябинской области (https://gorodsreda74.ru/map). В нее включены все муниципалитеты области. Для каждого муниципалитета сделана своя страница. Реализовано через анимацию на Tilda, для каждого элемента карты была сделана адаптация под все экраны устройств. При наведении мыши, каждый муниципалитет подсвечивается и выводит свое название, а при нажатии — открывается отдельная страница муниципалитета. В случае с мобильным устройством для воспроизведения анимации на выбранную область нужно нажать один раз, а чтобы перейти на страницу этой области — нажать второй раз

Создание интерактивной карты

6 Этап

На странице «О нас» мы разместили подробную информацию о деятельности центра, его основных функциях и команде. Каждому сотруднику добавили фото и должность, стилистически оформили иконками и шрифтом. Добавили предлагаемые центром вакансии с возможностью сразу же на них откликнуться, заполнив специальную форму. Разместили пресс-кит компании со всеми необходимыми документами. Также добавили блок «Контакты»

Оформление страницы "О нас"

7 Этап

На странице Мероприятия мы добавили все мероприятия, проводимые центром, реализовали также через блок «Потоки» на Тильда. Каждое из них оформлено карточкой с фото, названием и краткой информацией, можно прочитать подробнее, нажав на выбранное событие. На отдельной странице прописано название, цель мероприятия, предыстория его проведения и результат. Добавлены соответствующие фото. Вся страница стилизована под созданный сайт. Для мероприятий мы также создали шаблон, чтобы сотрудники могли самостоятельно и быстро редактировать информацию без помощи разработчика.

Оформление страницы "Мероприятия"

8 Этап

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

Создание отдельной новостной страницы

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

Интеграция с платформой "Вконтакте"

9 Этап

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

Размещение текстовых материалов

10 Этап

Для сайта мы настроили большое количество стильных анимаций и плавных переходов для динамичности и привлекательности

11 Этап

Провели необходимые SEO-настройки: для каждой страницы выставили заголовок h1; сделали описание и заголовок страниц; добавили favicon. Подключили Яндекс Метрику, Яндекс Вебмастер, Google Search Console, Google Analytics для отображения сайта
в поисковой выдаче и дальнейшего анализа посещаемости

SEO-Настройка сайта

12 Этап

Результат:

Ссылка на сайт: