Кейс · Разработка сайта · 2022

Акселерация Цивилизации Aqwa

Сайт школы адаптивного плавания для особенных детей в Санкт-Петербурге. Прошли весь путь: структура, прототипы, дизайн-система, вёрстка, программирование и запуск.

Открыть сайт Обсудить похожий проект

Главная страница сайта «Акселерация Цивилизации Aqwa» на ноутбуке

Клиент: АНО «Движение», школа плавания для детей с особенностями развития
Задача: Рассказать о школе и методике и привести родителей на бесплатное пробное занятие
Сделали: Структуру, прототипы, дизайн, вёрстку и сайт на SkeekS CMS
Сайт: acceleratia.aqwa.civilizatia.com

Задача

Рассказать о трудном — просто и с теплом

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

Запись на пробное занятиеБесплатное первое занятие — главная цель страницы: кнопка записи в шапке, на баннерах и форма с выбором бассейна внизу.
Раздел «Поддержать нас»Понятные способы помочь школе: пожертвование, помощь волонтёром или тренером.
Методика и результатыШесть шагов методики и результаты учеников в цифрах — спокойно и без медицинского тумана.
Люди и историиТренеры, отзывы родителей, фотографии учеников и новости фестивалей плавания.
Русский и английскийДве языковые версии сайта с переключателем в шапке.

Как мы работали

От списка блоков до живого сайта

Классическая схема: каждый этап согласовывали с заказчиком и только потом шли дальше. Листайте — справа страница проходит все шесть этапов.

01
Структура

Начали со списка блоков: что родитель должен узнать о школе, какие доказательства увидеть и где записаться. Так появилось содержание сайта — 16 блоков от первого экрана до формы записи.
- Карта блоков
- Содержание
02
Схемы страниц

Разложили по экранам главную, «О нас», блог и контакты. К каждому блоку — комментарий для дизайнера и ссылки на удачные примеры.
- 4 раздела
- Комментарии
03
Первое приближение

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

Вписали настоящие тексты, цифры и формулировки школы. Дизайн строился на содержании, а не на «рыбе», и макет не пришлось перекраивать под тексты.
- Тексты
- Цифры
05
Дизайн

Нарисовали главную на 1920 px: глубокий синий из герба, вода на фотографиях, крупные цифры результатов и тёплые карточки отзывов.
- 11 цветов
- 13 компонентов
- Gotham Pro
06
Вёрстка и запуск

Сверстали адаптивно для телефонов и планшетов и собрали сайт на SkeekS CMS: новости, отзывы, учеников и бассейны школа меняет сама.
- Адаптив
- SkeekS CMS