От макета к плану
Что делать в первый час, когда прислали макет: как его читать, где дизайнер ошибся, на какие компоненты разбивать и что спросить до начала работы.
Что ты научишься делать
- Прочитаешь макет как систему, а не как картинку
- Разобьёшь его на компоненты до того, как написал первую строку
- Составишь список вопросов, который экономит дни переделок
#Самая дорогая ошибка — начать сразу
Соблазн понятен: макет открыт, всё вроде ясно, руки чешутся. Через два дня выясняется, что карточка на третьем экране — та же, что на первом, только с другим отступом. А ты сверстал её заново.
Час, потраченный на разбор, экономит несколько дней. Это единственная часть работы, которую нельзя сделать «по ходу».
#Что искать в макете
Дизайн — это система, даже если дизайнер об этом не думал. Твоя задача — эту систему найти.
Сетка и контейнер
Измерь ширину контентной колонки на нескольких экранах. Обычно это одно число — например, 1140 пикселей. Найди боковые поля и расстояние между колонками.
Шкала отступов
Выпиши расстояния между блоками: 8, 16, 24, 40… Почти всегда они кратны четырём или восьми. Числа, выпадающие из ряда, — обычно случайность, а не замысел.
Типографика
Сколько всего размеров текста? Если насчитал двенадцать — половина лишние. Сведи к пяти-шести и уточни у дизайнера.
Цвета
Соберите палитру. Три оттенка серого рядом — это, скорее всего, один цвет, который скопировали неточно.
Повторяющиеся сущности
Пройди все экраны и отметь, что встречается больше одного раза. Это и есть будущие компоненты.
Состояния
Найди, что нарисовано в нескольких состояниях: кнопка при наведении, поле с ошибкой. А потом найди то, что не нарисовано, — об этом придётся спросить.
#Разбор на компоненты
Компонент — это то, что встречается больше одного раза или имеет собственное имя в разговоре о продукте.
Разбор идёт сверху вниз: страница, крупные области, повторяющиеся блоки, мелкие детали.
#Где дизайнер ошибся
Макет — это картинка одного состояния. Живой сайт — это множество состояний, о которых на картинке не подумали. Вот что проверяют в первую очередь.
| Что проверить | Что обычно ломается |
|---|---|
| Длинный текст | Название товара в четыре строки вместо одной — карточки разъезжаются |
| Короткий текст | Описание из трёх слов — блок схлопывается и выглядит пустым |
| Отсутствие данных | Нет картинки, нет отзывов, пустая корзина — состояние не нарисовано |
| Много данных | Двадцать позиций в меню, которое нарисовано на пять |
| Цифры | Цена в семь знаков ломает колонку |
| Промежуточные экраны | Между 375 и 1440 пикселей есть 900 — как ведёт себя там? |
| Состояния | Загрузка, ошибка, успех — обычно не нарисованы вовсе |
#Что спросить до начала
Список короткий, но каждый пункт способен переписать половину работы, если выяснится поздно.
- Какие браузеры и устройства. От ответа зависит, можно ли брать свежие возможности CSS.
- Откуда берётся содержимое. Статика в разметке или система управления? Во втором случае длина текста непредсказуема.
- Будет ли тёмная тема. Не «сейчас», а вообще. Если да — цвета сразу через токены.
- Сколько языков. Один — можно физические свойства. Больше — только логические, и запас по длине текста.
- Что с адаптивом между брейкпоинтами. Нарисованы два экрана, а промежуточных десятки.
- Кто будет поддерживать. Ты или человек без опыта — от этого зависит сложность решений.
#Порядок работы
Соблазн — верстать сверху вниз, как нарисовано. Так делать не стоит: шапка обычно самая сложная часть, и начинать с неё значит потратить день до первого видимого результата.
Токены
Цвета, шкала отступов, типографика, радиусы. Полчаса, зато дальше не будет случайных значений.
Раскладка страницы
Контейнер, сетка, крупные области. Пусть будут серыми прямоугольниками — важна структура.
Самый частый компонент
Обычно карточка. Она задаст стиль остальным и вскроет большинство вопросов.
Остальные компоненты
По одному, каждый с крайними случаями: длинный текст, отсутствующая картинка.
Шапка и подвал
Теперь, когда система готова. Шапка почти всегда самая мудрёная часть — ей нужен весь набор.
Адаптив
Не в конце как отдельный этап, а на каждом шаге. Компонент считается готовым, когда работает на всех ширинах.
Состояния и мелочи
Наведение, фокус, загрузка, пустые состояния. То, чего нет в макете, но без чего сайт неживой.
#Как это выглядит в реальном проекте
План — это не документ на десять страниц. Обычно он выглядит так: файл на экран, который лежит рядом и вычёркивается по мере работы.
# Лендинг «Полка»## Система- Контейнер 1140, поля 16/24/32- Отступы: 4 8 12 16 24 32 48 64- Текст: 14 16 18 24 32 44- Цвета: 2 основных, 3 серых, 2 состояния- Шрифт один, вариативный## Компоненты- [ ] button — 3 вида, 4 состояния- [ ] card — обычная, с бейджем, без картинки- [ ] field — 8 состояний (см. урок 44)- [ ] nav — десктоп и мобильное меню- [ ] section-head — заголовок + подзаголовок## Экраны- [ ] hero — диагональ снизу, картинка справа- [ ] features — 3 карточки, на мобильном в столбик- [ ] pricing — 3 тарифа, средний выделен- [ ] faq — details/summary, без скриптов- [ ] footer — 4 колонки → 2 → 1## Спросить- Что при названии тарифа в 2 строки?- Нужна ли тёмная тема потом?- Форма отправляется куда?## Риски- Промежуток 900–1100: карточки по 3 не влезают, нужен режим по 2#Когда НЕ надо
- Разбирать одностраничную визитку. Пять блоков, ничего не повторяется — план займёт больше времени, чем вёрстка.
- Заводить компонент из одного использования. Блок, который встречается однажды и больше не появится, компонентом не является.
- Требовать идеальный макет до старта. Часть вопросов честно всплывает только в вёрстке. Задача плана — снять крупные, а не все.
- Писать план на двадцать страниц. Его никто не прочитает, включая тебя через неделю. Экран текста — рабочий размер.
Где спотыкаются почти все
Вёрстка начинается с шапки
Почему Шапка обычно самая сложная часть: меню, мобильный вариант, липкость, состояния. День работы без единого видимого результата.
Как надо Начинай с токенов и самого частого компонента. К шапке возвращайся, когда система готова.
Отступы взяты «на глаз» из макета
Почему Получается набор случайных чисел: 13, 17, 22. Через месяц никто не помнит, почему именно так, и добавляет новые.
Как надо Сведи к шкале и согласуй расхождения с дизайнером. Обычно он и не заметит разницы в пиксель.
Крайние случаи проверяются в конце
Почему Длинное название ломает не карточку, а всю раскладку. Переделывать приходится систему, а не деталь.
Как надо Проверяй крайние случаи сразу, на этапе компонента.
Вопросы копятся до сдачи
Почему Ответ «а мы хотели по-другому» на последнем дне стоит недели.
Как надо Спрашивай по мере появления, пачками раз в день. Один список в переписке — нормальный формат.
- Компонент component
- Часть интерфейса, встречающаяся больше одного раза или имеющая своё имя в продукте.
- Шкала отступов spacing scale
- Ограниченный набор допустимых расстояний. Обычно кратен четырём или восьми.
- Крайний случай edge case
- Ситуация на границе: очень длинный текст, отсутствие данных, максимум элементов.
- Брейкпоинт breakpoint
- Ширина, на которой раскладка меняется.
Проверь себя
Шапка обычно сложнее всего. Токены и частый компонент задают систему, на которой держится остальное.
Единожды встречающийся блок компонентом не является — для него достаточно обычной разметки.
Настоящая шкала обычно кратна четырём или восьми. Выпадающие числа почти всегда неточность.
Разговор идёт про решение, а не про вину. Дизайнер выбирает за минуту.
Макет показывает идеальное состояние с идеальными данными. Всё остальное приходится добирать вопросами.
Задание
Скелет незнакомого макета
Тебе описали страницу словами: сверху логотип и меню, дальше крупный блок с заголовком, потом раздел из трёх одинаковых карточек с отзывами, сбоку врезка «читайте также», внизу контакты.
Собери скелет разметки: семантические теги, ровно один main, отзыв — самостоятельная единица, врезка — побочное содержимое. Классы дай по смыслу, не по виду. CSS писать не нужно.
Подсказка 1
Порядок: header с nav внутри, потом main, потом footer. aside кладётся внутрь main рядом с разделами.
Подсказка 2
Отзыв самодостаточен — его можно вырезать и показать отдельно. Значит article.
Подсказка 3
Классы: reviews, review, sidenote — а не gray-block или right-column.
Показать решение
<header class="header"> <p class="logo">Полка</p> <nav class="nav"> <ul> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> </ul> </nav></header><main class="page"> <section class="hero"> <h1>Кофейня «Полка»</h1> <p class="hero__lead">Варим с восьми утра</p> </section> <section class="reviews"> <h2>Отзывы</h2> <article class="review"> <h3 class="review__author">Марина</h3> <p class="review__text">Лучший раф в городе.</p> </article> <article class="review"> <h3 class="review__author">Костя</h3> <p class="review__text">Тихо и есть розетки.</p> </article> <article class="review"> <h3 class="review__author">Аня</h3> <p class="review__text">Свежая обжарка каждую неделю.</p> </article> </section> <aside class="sidenote"> <h2>Читайте также</h2> <p>Чем раф отличается от латте</p> </aside></main><footer class="footer"> <address>ул. Гоголя, 12</address> <p>© 2026</p></footer>