Веб-паттерны: сайты, страницы и секции

Веб-проект удобно разбирать на трёх уровнях. Сначала определяется сайт — продукт целиком и его бизнес-задача. Затем собираются страницы, каждая со своим намерением посетителя. Наконец, страницы состоят из секций, которые отвечают на конкретные вопросы и ведут к следующему действию. Поверх этой структуры работает сквозной слой — визуальный стиль: он задаёт характер интерфейса, но не подменяет логику пользовательского пути.

Паттерны сайтовФорматы веб-проектов: от лендинга и корпоративного сайта до портала и SaaS.

Паттерны страницСтраницы, через которые посетитель знакомится с компанией, услугой или предложением.

Паттерны секцийПовторяемые блоки: первый экран, форма заявки и призыв к действию.

Паттерны стилейВизуальные направления, критерии выбора и готовые design.md-токены для проекта.

Как пользоваться картой

Начните с результата для бизнеса. Нужны заявки по одному предложению — скорее всего, подойдёт лендинг. Нужно объяснить несколько направлений, показать экспертизу и развивать поиск — корпоративный сайт. Нужен личный кабинет, роли и работа с данными — это уже веб-приложение или портал. Полный разбор вариантов находится в паттернах сайтов.

После выбора формата не копируйте «типовой макет» целиком. Определите, какие задачи должна решить каждая страница: главная помогает сориентироваться, страница услуги превращает интерес в обращение, лендинг ведёт одну кампанию к одному действию. Эти сценарии собраны в паттернах страниц.

На последнем уровне проверяйте, отвечает ли каждый блок на вопрос посетителя. Первый экран объясняет предложение, форма делает следующий шаг простым, CTA подсказывает действие в подходящий момент. Если секция не снимает сомнение, не доказывает обещание и не помогает двигаться дальше, ей не обязательно быть на странице. Подробнее — в паттернах секций.

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

Принцип сборки

Паттерн — не шаблон, который нужно заполнить любым текстом. Это проверяемая логика: контекст посетителя, задача бизнеса, нужная информация и следующий шаг. Один и тот же формат сайта может иметь разные страницы, а одна страница — разные секции; любой из них можно собрать в разных стилях, если характер визуала поддерживает задачу. Поэтому решение принимают сверху вниз: сайт → страница → секция, затем проверяют стиль. Такой порядок удерживает проект от лишних экранов, помогает назвать границы работ и оставляет понятную основу для развития.