Кейс · Школа эмоционального интеллекта
Витрина школы, где учатся читать людей по лицам
Мы сделали витрину онлайн-школы Олега Калиничева — официального представительства Paul Ekman Group в России — с каталогом программ и афишей продуктов. Здесь выбирают курсы, тренажёры и живые встречи, на которых учатся распознавать эмоции и работают в команде. Вместе со школой — с 2019 года, когда запустили первый ei-school.ru.
Главная фишка · первый экран
Наука об эмоциях — прямо на лице
Первый экран — живой учебный плакат по мимике. Лицо Олега проживает семь базовых эмоций, а поверх проступают точки на тех участках, по которым эмоцию опознают, — с подписью признака и мышцы, которая его создаёт.
Ниже — рабочая копия сцены на настоящих кадрах и координатах с сайта. Ведите курсором по лицу или выбирайте эмоцию.
Кадры выровнены по зрачкам
Восемь снимков сняты в разные заходы — голова гуляла по кадру. Скрипт нашёл зрачки и подогнал каждый кадр: масштаб 0,98…1,10, поворот до 0,5°. При смене эмоции меняется только мимика — голова стоит.
Точки по науке Экмана
У каждой эмоции 2–3 надёжных признака из системы кодирования лицевых движений (FACS). Координаты хранятся в данных в процентах от кадра — отдельно для десктопа и телефона.
Одна подпись за раз
Три подписи разом превращали кадр в схему из учебника. Теперь горит одна — сменяется каждые 1,5 с, активная точка крупнее и залита фирменным градиентом.
Лицо реагирует на действия
Курсор листает эмоции по горизонтали, а наведение на кнопку «Пройти бесплатный тест» вызывает радость — обещание подкреплено выражением, а не только словами.
О клиенте
Школа, которая учит видеть эмоции
Школа Олега Калиничева — центр развития эмоционального интеллекта и официальное представительство Paul Ekman Group в России. Программы построены на полувековых исследованиях Пола Экмана: онлайн-курсы, лицензионные очные курсы Paul Ekman International, корпоративное обучение, вебинары и EQ-коучинг.
Поэтому витрина — не визитка, а точка входа в обучение: каталог программ и тренажёров, бесплатные тесты, афиша вебинаров и мастер-классов, журнал.
Корпоративные клиенты школы
История проекта
Семь лет — одна команда
Первый сайт платформы
Запускаем ei-school.ru: онлайн-обучение, курсы Paul Ekman, корпоративное направление, афиша, блог, личный кабинет, тесты «Искренняя улыбка» и «Распознание обмана».
Растём вместе со школой
Сопровождаем и развиваем сайт: новые программы, мероприятия, материалы — платформа успевает за школой.
Новая витрина
Полный редизайн и переезд на современный стек: конструктор страниц, две темы, две локали, журнал и новый каталог.
Личный кабинет и подписка
Следующие разделы уже спроектированы — на витрине их ждут экраны «готовим».
Было → стало
Потяните ползунок
Один и тот же раздел — «Онлайн обучение» — до и после. Слева прежний ei-school.ru, справа новая витрина: те же фирменные цвета и Montserrat, но вместо заголовка со вкладками — предложение, два действия и живые карточки программ.
Задача
Сохранить лицо. Сменить всё остальное
Старый сайт стоял на шаблоне Joomla: одинаковые полноширинные полосы, мелкая типографика, серые рамки. Школа выросла из него — ей нужна платформа, которую можно развивать без переделки с нуля.
Остаться узнаваемыми
Montserrat, фирменный фиолетово-синий градиент, золотой знак-оригами — всё это перенесено в токены новой дизайн-системы.
Уйти от шаблона
Асимметричные композиции, крупная шкала заголовков, мягкие радиусы 12–32 px и три уровня теней вместо рамок.
Отдать контент школе
Страницы собираются из блоков конструктора, тексты приходят из API. В вёрстке нет ни одной зашитой строки контента.
Работать везде
Русский и английский, светлая и тёмная тема, мобильная версия, OG-сниппет и разметка JSON-LD для каждой страницы.
Результат
«Слова умеют лгать. Лицо — нет»
Личный бренд основателя
Школа с лицом и именем
Люди идут учиться к Олегу. Поэтому новая витрина построена вокруг него: его лицо ведёт первый экран, его экспертиза подтверждается регалиями, его книга стоит рядом с заголовком.
Олег Калиничев
Единственный в России аккредитованный тренер Paul Ekman Group
Психолог, эксперт по эмоциональному интеллекту и распознаванию обмана. Управляющий директор Paul Ekman International в России, преподаватель МФТИ, автор книги-тренажёра и тренинга «Разговор».
Лицо — главный герой
Вместо сток-фото с шахматами — студийная съёмка основателя. Эмоции на первом экране показывает сам Олег: экспертиза видна до первого клика.
Страница «Об авторе школы»
Путь от управленца до тренера, регалии, аккредитация Paul Ekman International, где учиться у Олега — отдельный раздел, которого на старом сайте не было.
Книга на первом экране
Объёмный рендер книги «Эмоциональный интеллект: управлять собой и влиять на других» с вырезанным фоном стоит рядом с заголовком главной.
Портреты под цитаты
Десять студийных кадров стали системой: широкие фоны, где реплика ложится на свободную половину кадра, и аватар из кропа головы.
Дизайн-система
Фирменный код — в токенах
Мы сняли с сайта всё, что делает школу узнаваемой, и перенесли в семантические переменные. В компонентах нет ни одного hex-значения — тема и перекраска бренда не требуют правок в разметке. Правило одно: на экране ровно одна градиентная кнопка.
Как устроен сайт
Не набор страниц, а конструктор
Мы разложили сайт на четыре слоя. Каждый следующий собран из предыдущего, как дом из кирпичей: поэтому всё выглядит одинаково аккуратно, а меняется быстро и недорого.
Узнаваемый бренд
Цвета, шрифт и знак школы заданы один раз. Любая новая страница сразу выглядит «как школа», а перекрасить весь сайт — одна правка, а не сто.
Посетителю всё понятно
Кнопки, метки и формы одинаковые на всём сайте. Человек не гадает, куда нажать, — и быстрее доходит до записи на курс.
Новый курс — за минуты
Карточка курса, мероприятия, отзыва — готовые блоки. Менеджер школы сам добавляет новый вебинар, без дизайнера и программиста.
Каталог
Офлайн
АфишаСайт растёт без переделки
Все десять разделов собраны из тех же блоков. Новый раздел или страница под запуск курса — это сборка из готового, а не новый проект с нуля.
Мобильная версия
В кармане — так же сильно
Мобильная вёрстка — не урезанная копия, а собственная композиция каждого экрана.
Что это даёт бизнесу
Сайт, который работает на школу
Под капотом — современные технологии, которыми пользуются крупные интернет-компании. Но важнее не названия, а результат для школы.
Школа правит сайт сама
Тексты, программы, мероприятия и статьи меняются в удобной админке. Не нужно ждать разработчика ради новой даты вебинара.
Быстро на любом устройстве
Страницы открываются мгновенно и на компьютере, и на телефоне. Есть светлая и тёмная тема, русская и английская версия.
Находят в поиске и мессенджерах
Каждая страница подготовлена для поисковиков, а ссылка в Telegram или WhatsApp показывает красивую карточку с картинкой.
Что дальше
Платформа, а не сайт
Следующий этап — личный кабинет и подписка. Их основой станет наш продукт — Школус. Фундамент уже заложен: единая дизайн-система, API и конструктор, в котором новые разделы собираются из готовых блоков.
Стартапус
Нужна команда
на годы вперёд?
Мы делаем продукты, с которыми клиенты остаются надолго. Расскажите о своём — предложим, с чего начать.