Модульная система сайта
ZeroNights — международная конференция по информационной безопасности.
Сайты конференций обычно готовятся так: анонсируются дата и место, прикручиваются платежные сервисы для покупки билетов, формируются основные разделы: программа, спикеры, активности, партнеры и др. Сайт постепенно обрастает контентом.
Схема работы над нашим сайтом отличалась от стандартной — когда есть четкая структура и прототип, хотя бы на бумажке. Мы сдавали верстку и контент по мере их необходимости. Сначала сверстали заглушку — три первых блока с основной информацией, потом доверстывали новые блоки.
Как мы это делали
Часто сайты рисуются на одном фрейме под разрешение и, если нужно добавить или убрать блок, приходится двигать весь контент лендинга, а потом снова следить за всеми отступами.
Для нашей рабочей схемы постоянного дополнения такой вариант не подходил. Нам нужно было быстро генерировать новые модули и отдавать их разработчику. Слишком долго отрисовывать лендинг заново с каждым новым дополнением. Поэтому наша структура сайта выстроена только на модулях.
В фигме это выглядело любопытно: мы используем модули-компоненты и авто-лейауты. Плюс такого подхода — мобильность, модули создаются и интегрируются в лендинг быстро. Минус — каждый модуль это точный фрейм, дизайн которого не может выходить за его границы, чтобы ничего не поехало, если захочется подвигать модули уже на проде.
![](https://marsprivet.ru/blog/pictures/blochnaya-sistema-sayta.png)
Посмотреть, как собирается сайт из готовых модулей
Три первых модуля — это заглушка, на ней вся основная информация про конференцию и анимация маскота конференции. Цельность заглушки желательно не нарушать другими модулями.
Адаптив
Мы отошли от стандартов верстки адаптива: не отрисовывали весь лендинг под каждое разрешение. С модульной системой адаптив делали только модулям. При желании можно быстро собрать полную адаптивную версию лендинга, но на практике делали это пару раз, чтобы определиться с отступами.
![](https://marsprivet.ru/blog/pictures/blochnaya-sistema-sayta-1.png)
Выводы
Если атомарный дизайн совместить с модульной системой, то, кажется, что это наиболее удобный способ проектирования сайтов. Теперь хочется делать все сайты только модулями.