Новый сайт и брендбук для IT-школы GoCoding

Задача

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

Главная мысль: не рисовать всё с нуля. Мы взяли прежний стиль школы за основу, упростили его и добавили новые элементы. Получилась система, в которой у каждого элемента своя задача.

Что мы сделали

1. Первый экран и путь родителя

   • Оффер
   • Структура

   Заголовок сразу отвечает на главный вопрос родителя: что это за школа и для кого. Рядом улыбающийся ребёнок и дракончик Гого, чтобы сайт выглядел живым и дружелюбным. Дальше страница ведёт к записи по шагам.

   • Для кого. Дети от 4 до 15 лет, группы до 8 человек.
   • Одно действие. Большая кнопка «Запишитесь на бесплатный пробный урок».
   • Доверие. Знак STEM.org в углу первого экрана.

   Путь родителя по странице

   1. Первый экранчему учат и для кого
   2. Курсынаправления и возраст
   3. Довериеработы учеников и команда
   4. Записьбесплатный пробный урок
2. Почему GoCoding

   • Блоки
   • Тексты

   Следом сайт отвечает на вопрос «чем вы лучше других». Мы собрали четыре причины в карточки с объёмными иконками, а третью выделили цветом и лёгким наклоном.

   • Гибкость и забота. Мини-группы до 8 человек, пропущенные уроки легко отработать.
   • Прогресс в фокусе. Регулярная обратная связь от педагогов.
   • Практика и результат. Учим через игру и собственные IT-проекты.
   • Понятные преподаватели. Сложное объясняют простым детям языком.

   

3. Курсы

   • Каталог
   • Слайдер

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

   • Просто выбрать. Робототехника, геймдев, программирование и другие направления в отдельных карточках.
   • Помощь с выбором. Рядом баннер «Поможем выбрать подходящий курс» с записью на пробный урок.

   

4. Работы учеников

   • Доверие

   Чтобы родители поверили в результат, мы показали настоящие работы детей. Например, хэллоуинскую сцену в Unity 3D, которую сделал 13-летний ученик. Рядом описание проекта и кнопка записи на урок.

   • Живой пример. Родитель видит, что ребёнок может сделать на курсе.
   • Просто листать. Работы переключаются стрелками и миниатюрами сверху.

   

5. Команда

   • Доверие
   • Люди

   Родителям важно знать, кто будет учить ребёнка. Поэтому на сайте есть блок с командой: у каждого человека своё фото, имя и роль — директор, основатель, менеджер, преподаватель.

   • Лицо и роль. У каждого своя карточка на фоне из фирменных 3D-линий.

   

6. События, соцсети и призыв к записи

   • Bento
   • Соцсети

   Ниже блоки в стиле Bento: слева история про Гого и ссылка на события школы, справа соцсети и яркий призыв начать IT-приключение. Блоки разной высоты стоят плотно, как в конструкторе.

   • Соцсети. Instagram, YouTube и Telegram одной строкой кнопок.
   • Ещё одна кнопка записи. Призыв «Записаться сейчас» повторяется там, где родитель уже готов решить.

   

7. Запись на пробный урок

   • Форма
   • Заявки

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

   • Мало полей. Форму можно заполнить быстро, с телефона тоже.
   • Понятное согласие. Отдельные галочки про политику конфиденциальности и про данные ребёнка.

   

Брендбук

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

1. Концепция: развитие, а не новый старт

   • Идея

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

   • Преемственность. Узнаваемость сохранилась, а стиль стал проще и аккуратнее.
   • Система. Каждый элемент работает на общий стиль.

   

2. Стиль Bento: блоки как конструктор

   • Сетка
   • Блоки

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

   • Гибкость. Блоки легко подстроить под сайт, рекламу и соцсети.
   • Удобно в работе. Такие блоки проще масштабировать и поддерживать в коде.

   

3. Цвета

   • Цвет

   Один главный цвет и несколько помощников. Основа — фирменный индиго, светлый фон держит страницу лёгкой, а яркий лайм привлекает взгляд к главному.

   • GoCoding Indigo #39359C. Основной цвет бренда.
   • Cloud White #F7F8FF. Основной цвет фона.
   • Electric Lime #B9EB1A. Главный контраст и акцент.
   • Графит #222222. Основной текст и тёмные блоки.
   • Красный, оранжевый, жёлтый. Только для графики.

   

4. Шрифт

   • Шрифт

   Один шрифт на весь бренд — Helvetica Neue. Он чистый, хорошо читается и не спорит с яркой графикой.

   • Три начертания. Regular, Medium и Bold.
   • Порядок. Один шрифт делает страницы последовательными и упрощает поддержку стиля.

   

5. Графика

   • 3D
   • Графика

   Главный приём — объёмные 3D-линии. Раньше они были просто фоном, теперь это важный элемент стиля. К ним добавили 3D-иконки: они объясняют направления обучения и добавляют эмоций.

   • Пять вариантов линий. Лайм, индиго, красный, оранжевый и чёрный.
   • Объёмные иконки. Помогают понять направление и оживляют страницу.

   

6. Герой бренда

   • Маскот

   Героем бренда стал дракончик Гого. Он на сайте, в иллюстрациях, на карточках курсов и на сувенирах. Как мы его придумали — в отдельном проекте «Маскот Гого».

   • Образы для курсов. У каждого курса свой костюм героя.
   • Не только сайт. Герой подходит для рекламы, сувениров и игр.

   

Реклама и баннеры

Из тех же элементов мы собрали баннеры для сайта и рекламы: яркий фон, 3D-линии, ребёнок или Гого и одна кнопка.

Что получилось

• Первый экран говорит, чему учат и для кого, и ведёт к одному действию: записи на пробный урок
• Сайт собран из блоков в стиле Bento: их легко менять и добавлять
• Брендбук фиксирует цвета, шрифт, графику и героя, чтобы стиль не расползался
• Герой Гого связывает сайт, рекламу и сувениры в одну историю

Что вошло в работу

• Дизайн сайта
• Разработка сайта
• Брендбук
• 3D-графика
• Баннеры
• Форма записи

Отзыв клиента