Технолицей

Клиент

Областной технолицей им. Долгих — частная школа премиум-сегмента, которая находится в Московской области.

Задача

Разработать имиджевый и функциональный сайт, который:

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

Основная сложность — совместить требования Рособрнадзора, большой объем информации и премиальное позиционирование школы.

Аналитика

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

Дальше посмотрели текущий лендинг Технолицея. Основные проблемы:

• не отражает премиальное позиционирование
• не считываются ключевые смыслы про уникальную систему обучения и техносреду
• большой объем неструктурированной информации
• навигация и разделы перегружены и не учитывают разные сценарии пользователей

Параллельно изучили конкурентов и собрали CJM. Это помогло увидеть слабые места и заложить более удобный пользовательский путь.

Дизайн

Сделали дизайн-концепт на примере главной страницы. За основу взяли цветовую палитру из брендбука клиента: спокойный синий — базовый цвет, для акцентов — красный, белый и серый.

Идея

Показать Технолицей как образовательный технологический кластер и центр притяжения талантов.

Проблема

У клиента уже был блок про уникальную систему обучения, но он плохо считывался.

Что сделали

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

Новый сайт закрывает все задачи

Сайт одновременно:

• соответствует требованиям Рособрнадзора
• выглядит как современный продукт
• удобен для всех аудиторий

На главной странице можно:

• посмотреть вводное видео
• перейти к поступлению
• разобраться образовательной модели школы
• найти контакты для связи

А еще добавили таймер до старта приема заявок. Он закрывает главный вопрос родителей: когда начинается поступление.

Навели порядок в информации

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

Спроектировали двухзонную структуру страниц на всех страницах, кроме главной

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

Использовали аккордеоны, табы, вложенные списки

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

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

Заложили масштабируемость

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

Разработали 4 формы обратной связи, чтобы пользователь мог решить любой вопрос прямо на сайте:

• отправить сообщение
• откликнуться на вакансию
• записаться и оплатить курс
• оставить отзыв о питании

SEO заложили на этапе проектирования. Клиент планирует развивать сайт через поисковое продвижение, поэтому подключили SEO-оптимизатора еще до разработки и учли требования в структуре:

• продумали структуру сайта и страниц, чтобы ключевые разделы были доступны поисковикам, и не появлялись изолированные страницы
• избежали неиндексируемых сценариев, когда контент спрятан за кнопками/подгрузками и не попадает в поиск
• заложили основу для масштабирования — новые страницы и направления можно добавлять без поломки структуры и просадки видимости

Подключили аналитику и интегрировали карту. С помощью Яндекс.Метрики клиент отслеживает поведение пользователей: какие страницы смотрят, где теряются, на какие кнопки нажимают. Это база для улучшений, будущего SEO и маркетинга. Также встроили Яндекс-Карты на страницу «Контакты» и в подвал, стилизовали под общий дизайн сайта.

Разработка и стек

Фронтенд написали на Next.js. Он ужимает большие изображения и конвертирует их в webp, поэтому страницы грузятся быстро. Это важно, потому что у Технолицея много тяжелых иллюстраций.

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

На этапе верстки адаптировали сайт под все популярные устройства, чтобы все корректно отображалось.

Админка

Для безопасности и порядка предусмотрели роли:

• администратор — полный доступ
• модератор — ограниченный доступ

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