«Технолицей»: редизайн и разработка сайта для частной школы

Клиент — частная школа премиум-сегмента «Областной технолицей им. В. И. Долгих».

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

✓ транслирует технологичное позиционирование школы;

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

✓ соответствует требованиям Рособрнадзора;

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

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

ПРЕДПРОЕКТНАЯ ПОДГОТОВКА И АНАЛИТИКА

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

→ родители учеников;

→ администрация и педагоги;

→ представители госструктур и партнеры;

→ широкая аудитория: родители будущих учеников, педагоги, активные жители региона.

Это сразу задало требования к структуре и навигации, ведь каждая аудитория должна быстро находить свое.

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

Другие проблемы были типичны для портала образовательной организации: 

✓ большой объем обязательных документов;

✓ неструктурированная информация;

✓ перегруженные разделы и навигация, которая не учитывала разные сценарии.

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

ПРОЕКТИРОВАНИЕ

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

→ Главная — формирует первое впечатление, транслирует ценности и ведет к ключевым действиям.

→ О Технолицее — дает представление о подходе и образовательной среде.

→ Поступление — отвечает на основной запрос родителей и ведет к регистрации.

→ Дополнительное образование — раздел для курсов, кружков и лагерей, которые родители оплачивают на сайте.

→ Контакты — связаться с администрацией.

ДИЗАЙН-КОНЦЕПЦИЯ

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

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

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

→ Что сделали — клиенту важно было оставить этот блок, поэтому мы развили и доработали идею. Получился анимированный формат: при скролле секторы нанизываются друг на друга и собираются в кольцо. А при наведении появляется плашка с пояснением. В результате пользователь быстро считывает смысл, ему не нужно разбираться, что и к чему относится.

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

РЕШИЛИ ВСЕ ЗАДАЧИ КЛИЕНТА:

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

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

Там же есть блок с отсчетом времени до старта приема заявок. Он закрывает главный вопрос родителей: когда начинается поступление. Блок гибкий: таймер можно включить, заменить кнопкой или убрать совсем через админку.

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

Что сделали:

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

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

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

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

3. Сделали масштабируемый сайт. Что реализовали:

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

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

• Подключили онлайн-оплату через ЮKassa. Сейчас можно оплачивать кружки, секции и лагерь, в будущем планируется оплата питания.

• SEO заложили сразу на этапе проектирования. Ключевые разделы доступны поисковикам, контент не прячется, новые страницы и направления можно добавлять без переделок.

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

ВЕРСТКА И РАЗРАБОТКА

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

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

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

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

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

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

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

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

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

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

• Ушли от визуального шума в подаче информации. Сжали объем документов на страницах почти в 10 раз.