Задача
Суворовский деловой союз объединяет специалистов по управлению и стратегии. У союза много разного содержания: история и руководство, собственная система управления, разборы практики, портреты управленцев, события, новости, обучение, ежегодник. Нужен был многостраничный сайт, в котором всё это разложено по понятным разделам и оформлено в едином стиле.
Разделы сайта
- О союзе: история, совет, редакция, документы, библиотека.
- Система Суворова и модели управления.
- Практика управления с разборами кейсов.
- Стратеги и герои: портреты управленцев.
- События с календарём, новости, обучение, контакты.
Главная собирает всё вместе: главное событие месяца и ближайшие события, «стратег недели», система и практика, лента новостей и анонс ежегодника с формой заявки на полную версию.
Мини-календарь событий
На странице событий рядом со списком стоит календарь на месяц. Дни с событиями подсвечены, стрелки листают месяцы, а нажатие на день прокручивает страницу к нужному событию и на секунду подсвечивает его. Календарь не требует отдельного ведения: он сам собирает даты из списка событий на странице.
Дизайн-система и живой styleguide
Чтобы одиннадцать страниц выглядели цельно, сначала собрана дизайн-система: палитра на переменных, два шрифта, кнопки, семь видов карточек, формы, заголовки разделов, теги, цитаты. Все элементы показаны на отдельной странице styleguide в рабочем виде. Новая страница собирается из готовых блоков, а изменение цвета или отступа в одном месте меняет весь сайт.
Основная тема тёмно-синяя, по просьбе заказчика она сменила первую чёрно-золотую версию. Светлая тема заложена в стилях.
Диалог по-суворовски
На сайте есть сценарный чат: посетитель выбирает роль и один из готовых вопросов и получает ответ в духе принципов союза. Это не нейросеть, а заранее написанные диалоги, которые знакомят с подходом союза в живой форме.
Админка для новостей и событий
Для сайта подготовлена админка: новости, события и стратеги редактируются в ней, а страницы пересобираются автоматически. В разметке размечены зоны, которые админка заменяет, остальная вёрстка не трогается. Данные хранятся в файлах с резервными копиями, вход защищён от подбора пароля.
Как устроено
HTML, CSS и JavaScript без фреймворков и сборщиков, админка на PHP без базы данных.
Скриншоты
Частые вопросы
Как сделать сайт ассоциации или делового сообщества с большим объёмом материалов?
Разложить содержание по разделам с одинаковой структурой и собрать дизайн-систему, чтобы все страницы строились из одних и тех же блоков.
Что такое styleguide и зачем он сайту?
Это страница, где показаны все элементы оформления: цвета, шрифты, кнопки, карточки. По ней новые страницы собираются быстро и выглядят единообразно.
Нужно ли отдельно вести календарь событий?
Нет, календарь сам берёт даты из списка событий на странице.
