Разработка официального сайта ФГБУ «Главрыбвод»

ФГБУ «Главрыбвод» — организация федерального масштаба с десятками филиалов по всей стране. Ее основная миссия — сохранение и восстановление водных биоресурсов. Старый сайт учреждения перестал соответствовать его статусу и современным технологическим требованиям, что создавало барьеры во взаимодействии с аудиторией и негативно сказывалось на имидже.

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

Проблема: с чем к нам обратился клиент

Анализ старого сайта и бриф от заказчика выявили комплекс проблем, типичных для многих устаревших корпоративных и государственных ресурсов:

• Архаичный дизайн.Визуальное оформление сайта не соответствовало ни современным трендам, ни статусу федерального учреждения. Это подрывало доверие пользователей.
• Отсутствие адаптивности.Попытка зайти на сайт со смартфона превращалась в пытку. Текст был нечитаемым, элементы навигации — слишком мелкими. Более 50% пользователей мобильных устройств фактически не могли пользоваться ресурсом.
• Нелогичная структура.Информация была разрознена, навигация — запутана. Чтобы найти нужный документ, контакты филиала или прейскурант на услуги, пользователю приходилось тратить неоправданно много времени и усилий.
• Ограниченный функционал.Отсутствовала версия для слабовидящих, что является обязательным требованием для сайтов госорганов. Формы обратной связи были неудобными, а важные инструменты, вроде интерактивной карты филиалов, отсутствовали вовсе.

Задачи проекта

На основе выявленных проблем мы сформулировали следующие ключевые задачи:

1. Разработать новый UI/UX дизайн.Создать строгий, но современный визуал, ориентируясь на лучшие образцы государственных порталов (Минсельхоз, Минпромторг) и требования ТЗ.
2. Реализовать адаптивную верстку.Обеспечить корректное и удобное отображение сайта на всех типах устройств: от десктопов до смартфонов.
3. Спроектировать интуитивно понятную структуру.Переработать архитектуру сайта, сгруппировать информацию в логичные разделы и создать простую навигацию.
4. Внедрить современный функционал.Разработать и интегрировать:
   • Удобную систему управления контентом (CMS).
   • Интерактивную карту филиальной сети.
   • Современную электронную приемную.
   • Версию для слабовидящих.
5. Обеспечить полное соответствие требованиям законодательствак официальным сайтам государственных учреждений.

Ход работ: от прототипа до запуска

Работа над проектом была разделена на несколько последовательных этапов.

Этап 1. Проектирование и аналитика

Мы начали с глубокого погружения в специфику деятельности «Главрыбвода» и изучения технического задания. На этом этапе:

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

Этап 2. UI/UX Дизайн

На основе согласованных прототипов и требований ТЗ наши дизайнеры разработали визуальную концепцию:

• Цветовая палитра:За основу были взяты строгие сине-голубые оттенки, ассоциирующиеся с водой, и акцентные элементы красного и белого для навигации и важных блоков.
• Типографика:Подобраны современные, хорошо читаемые шрифты.
• Макеты:Были отрисованы макеты для всех уникальных страниц сайта, причем сразу в трех разрешениях: для десктопа, планшета и мобильного телефона. Особое внимание уделили удобству мобильной версии: меню трансформируется в «бургер», элементы управления крупные и удобные для нажатия пальцем.

Этап 3. Разработка (Frontend и Backend)

После утверждения дизайна проект перешел в руки разработчиков.

• Frontend:Мы выполнили чистую, валидную и адаптивную верстку макетов. Сайт корректно отображается во всех современных браузерах. Реализовали интерактивные элементы: выпадающие меню, анимации, и, конечно же, версию для слабовидящих, которая позволяет менять размер шрифта и цветовую схему сайта.
• Backend:Сайт был посажен на удобную и гибкую систему управления (CMS), которая позволяет сотрудникам «Главрыбвода» самостоятельно публиковать новости, редактировать страницы и загружать документы без привлечения программистов.
• Ключевой функционал:Был разработан кастомный модуль «Интерактивная карта филиалов». Теперь пользователи могут в один клик найти на карте России нужный филиал и получить всю контактную информацию. Также мы реализовали защищенную форму «Электронной приемной» для официальных обращений граждан.

Этап 4. Наполнение и тестирование

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