Клиент — частная школа премиум-сегмента «Областной технолицей им. В. И. Долгих».
Нужно было разработать имиджевый и функциональный сайт, который:
✓ транслирует технологичное позиционирование школы;
✓ удобен для родителей, педагогов, партнеров, помогает быстро находить информацию;
✓ полностью соответствует требованиям Рособрнадзора;
✓ готов к масштабированию: оптимизирован под SEO и готов к подключению личного кабинета, аналитики, платформ для онлайн-обучения.
Основная сложность — совместить строгие требования Рособрнадзора, большой объем обязательной информации и премиальное позиционирование школы.
ПРЕДПРОЕКТНАЯ ПОДГОТОВКА И АНАЛИТИКА
Сначала провели брифинг и разобрались, для кого делаем сайт и какие задачи он должен решать. У школы несколько аудиторий с разными сценариями:
→ родители учеников;
→ администрация и педагоги;
→ представители госструктур и партнеры;
→ широкая аудитория: родители будущих учеников, педагоги, активные жители региона.
Это сразу задало требования к структуре и навигации, ведь каждая аудитория должна быстро находить свое.
Далее провели аудит существующего лендинга Технолицея. Визуально он не отражал премиальное позиционирование школы, а ключевые смыслы про уникальную систему обучения и техносреду не считывались.
Другие проблемы были типичны для портала образовательной организации:
✓ большой объем обязательных документов;
✓ неструктурированная информация;
✓ перегруженные разделы и навигация, которая не учитывала разные сценарии.
Параллельно проанализировали сайты конкурентов, собрали референсы и построили CJM. Это помогло увидеть слабые места и заложить решения, которые улучшили пользовательский опыт для всех аудиторий.
ПРОЕКТИРОВАНИЕ
Все ключевые сценарии доступны с первого экрана, а внутри разделов можно углубиться в детали. Мы сознательно не усложняли верхнее меню. Сосредоточились на том, чтобы структура сайта работала на задачи:
→ Главная — формирует первое впечатление, транслирует ценности и ведет к ключевым действиям.
→ О Технолицее — дает представление о подходе и образовательной среде.
→ Поступление — отвечает на основной запрос родителей и ведет к регистрации.
→ Дополнительное образование — раздел для курсов, кружков и лагерей, которые родители оплачивают на сайте.
→ Контакты — связь с администрацией.
ДИЗАЙН-КОНЦЕПЦИЯ
Сделали дизайн-концепт на примере главной страницы. За основу взяли цветовую палитру из брендбука клиента: спокойный синий — базовый цвет, для акцентов — красный, белый и серый.
→ Идея: показать Технолицей как образовательный технологический кластер, центр притяжения талантов.
→ Проблема: у Технолицея не было сайта, а только лендинг с блоком, который рассказывал об уникальной системе обучения. Он был перегружен текстом и плохо считывался. Чтобы понять смысл, человеку приходилось сопоставлять информацию из схемы с объемными пояснениями ниже — это долго и неудобно.
→ Что сделали: клиенту важно было оставить этот блок, поэтому мы развили и доработали идею. Получился анимированный формат: при скролле секторы нанизываются друг на друга и собираются в кольцо. А при наведении появляется плашка с пояснением. В результате пользователь быстро считывает смысл, ему не нужно разбираться, что и к чему относится.
Дизайн-концепция с первого раза попала в ожидания клиента. Правки были точечные: переработать волну и добавить пиксели из брендбука.
РЕШИЛИ ВСЕ ЗАДАЧИ КЛИЕНТА:
1. Сделали имиджевый и функциональный сайт, который учитывает все требования Рособрнадзора. Допустим, есть версия для слабовидящих. Новый сайт показывает Технолицей как современную технологичную школу и при этом закрывает все сценарии целевых аудиторий. Например, работу с документами, поступление, дополнительное образование.
Ключевые смыслы про уровень, образовательный подход и премиальность вынесли на главную страницу. С первого экрана можно посмотреть вводное видео, перейти к поступлению, разобраться в образовательной модели или сразу связаться со школой.
Там же есть блок с отсчетом времени до старта приема заявок. Он закрывает главный вопрос родителей: когда начинается поступление. Блок гибкий: таймер можно включить, заменить кнопкой или убрать совсем через админку.
2. Продумали структуру под большой объем информации. На сайте школы много обязательной информации: документы, правила, педагоги, материалы для поступления. Наша задача — визуально упростить подачу, чтобы люди не терялись в бесконечных списках и быстро находили нужное.
Что сделали:
✓ Спроектировали двухзонную структуру страниц на всех страницах, кроме главной. Слева — основная информация, которая всегда под рукой. Справа — масштабируемая часть, куда можно добавлять новые блоки из админки. Это сразу сняло основную боль клиента: страницы выглядят компактными, даже когда данных много и они постоянно обновляются.
✓ Использовали аккордеоны, табы, вложенные списки. Например, список из более чем 200 педагогов сгруппировали по кафедрам, а документы и демонстрационные варианты разложили по годам и классам.
✓ Визуально упростили процесс поступления. Вынесли поступление в отдельный раздел и собрали все в одном месте: этапы, структуру лицея, демонстрационные задания. Теперь процесс разбит на понятные шаги, поэтому родителям легко разобраться.
В итоге привели информацию в порядок: страницы стали короче, понятнее, объем контента на отдельных экранах сократили примерно в 10 раз.
3. Сделали масштабируемый сайт. Что реализовали:
✓ Раздел дополнительного образования работает как каталог программ с фильтрами и отдельными страницами. Подключили онлайн-оплату и заложили SEO-структуру для дальнейшего развития.
✓ Разработали 4 формы обратной связи, чтобы пользователь мог решить любой вопрос прямо на сайте: отправить сообщение, откликнуться на вакансию, записаться и оплатить курс, оставить отзыв о питании.
✓ Подключили онлайн-оплату через ЮKassa. Сейчас можно оплачивать кружки, секции и лагерь, в будущем планируется оплата питания.
✓ SEO заложили сразу на этапе проектирования. Ключевые разделы доступны поисковикам, контент не прячется, новые страницы и направления можно добавлять без переделок.
✓ Подключили аналитику и интегрировали карту. С помощью Яндекс.Метрики клиент отслеживает поведение пользователей: какие страницы смотрят, где теряются, на какие кнопки нажимают. Это база для улучшений, будущего SEO и маркетинга. Также встроили Яндекс.Карты на страницу «Контакты» и в подвал, стилизовали под общий дизайн сайта.
ВЕРСТКА И РАЗРАБОТКА
Фронтенд написали на Next.js. Он сам ужимает большие изображения и конвертирует их в webp, поэтому страницы грузятся быстро. Это важно, потому что у Технолицея много тяжелых изображений.
Бэкенд — на Python. Сделали удобную админку и вывели в нее максимум управляемых элементов, чтобы контент-менеджеры могли обновлять сайт без участия разработчиков.
Для безопасности и порядка предусмотрели роли:
→ администратор — полный доступ;
→ модератор — ограниченный доступ.
Важный этап — обучение. Мы не просто передали админку, а провели несколько обучающих созвонов. Показали основные сценарии, разобрали нюансы и ответили на вопросы команды. Записи встреч отправили клиенту. Также планируем сделать инструкцию: если в школе со временем поменяются ответственные сотрудники, новые люди смогут быстро разобраться в админке.
На этапе верстки также адаптировали сайт под популярные устройства: смартфоны, планшеты, ноутбуки, чтобы все корректно отображалось.
РЕЗУЛЬТАТЫ
В итоге клиент получил сайт, который полностью передает его ценности, статус и амбиции. Он современный, технологичный, официальный и вдохновляющий на обучение.
Новый сайт Технолицея выглядит минималистично и плавно работает. В нем учтены все требования к ресурсу образовательной организации, а еще закрыты главные потребности и боли целевых аудиторий.
→ Сайт полностью функционирует и корректно отображается на всех популярных устройствах. Страницы загружаются меньше 2 секунд.
→ Структура и навигация помогают быстро находить нужное: правила, документы, демоварианты, дополнительное образование, педагогов и т.д.
→ Ушли от визуального шума в подаче информации. Сжали объем документов на страницах почти в 10 раз.
Выставлено в номинациях:
— Сайт образовательного учреждения