Словосочетание «модель сайта» звучит устрашающе, хотя на практике это всего лишь продуманный план: какие страницы будут на сайте, как они связаны, какие данные на них выводятся и по каким правилам обновляются. Разберём процесс по шагам — от идеи до готовой схемы, которую можно передать разработчику.
Что такое модель сайта простыми словами
Модель сайта — это абстрактное описание системы: структура разделов, типы контента, связи между ними и правила поведения. Её можно представить как чертёж дома. По чертежу ещё нельзя жить, но без него строители начнут класть стены наугад.
- Страницы создаются «по наитию»
- Дубли и тупиковые разделы
- Переделки на этапе разработки
- Бюджет растёт на 30–50%
- Каждая страница занимает своё место
- Контент типизирован и структурирован
- Дизайнер и разработчик видят цель одинаково
- Сроки и бюджет предсказуемы
Три слоя модели сайта
Развёрнутая модель состоит из трёх взаимосвязанных уровней. Пропустив хотя бы один, есть риск получить «недомодель», которая развалится при первой же правке.
Иерархия разделов и подразделов: главная, каталог, карточка товара, блог, статья, контакты. Обычно изображается деревом (site map). Хорошая глубина — не более трёх-четырёх уровней вложенности.
Шесть шагов к готовой модели
Продажи, заявки, подписки, информирование — цель определяет набор разделов и акценты. Сайт-визитка и интернет-магазин имеют принципиально разные модели.
Кто придёт на сайт и что должен сделать: найти товар за три клика, оставить заявку за 30 секунд. Из сценариев рождается структура, а не наоборот.
Список всех тем, товаров и услуг, которые должны быть на сайте. Каждая группа запросов или единица контента — кандидат на отдельную страницу или сущность.
Сгруппировать материал в разделы и нарисовать карту сайта. Проверка проста: любой пункт дерева должен находиться за не более чем три клика от главной.
Для каждой сущности зафиксировать набор полей, обязательность и связи. Это основа админки и будущей базы данных.
Статусы, фильтры, права доступа, поведение форм. Итог фиксируется документом или схемой — это и есть готовая модель сайта, по которой работают дизайнер и разработчик.
Инструменты для моделирования
| Инструмент | Для чего | Сложность |
|---|---|---|
| Miro / FigJam | Карта сайта, блок-схемы, совместная работа | Низкая |
| Figma | Прототипы и вайрфреймы поверх модели | Средняя |
| Draw.io (diagrams.net) | ER-диаграммы модели данных, бесплатно | Низкая |
| Google Sheets | Таблица сущностей, полей и связей | Низкая |
Пять ошибок, которые ломают модель
Сначала рисуют красивую картинку, потом пытаются натянуть на неё смысл. Правильная последовательность — наоборот: смысл → структура → внешний вид.
Посетитель и поисковый робот теряются в многоэтажных меню. Каталог → раздел → подраздел → карточка — это предел.
Десять почти одинаковых страниц услуг — это один шаблон и десять записей в базе, а не десять разных свёрстанных страниц.
Модель должна пережить появление новых разделов и типов контента без полной переделки структуры.
Незафиксированная на бумаге схема не существует. У каждого участника команды она своя — и все они разные.
Модель сайта — это закодированное понимание того, что, для кого и как должен делать сайт. Она складывается из трёх уровней: структуры страниц, модели данных и правил поведения.
Потраченный на моделирование день экономит неделю переделок. Хорошая модель — единственная ситуация, когда сайт рождается дважды: сначала на схеме, где ошибки бесплатны, и лишь потом в коде, где за каждую приходится платить.