🔎 Почему не стоит сразу прыгать в вёрстку?

Очень хочется открыть конструктор и сразу начать собирать первый экран. Макет вроде понятный, лендинг небольшой, кажется, можно просто «начать и разобраться по ходу».

Но перед стартом лучше внимательно изучить макет.

Не пробежать глазами за пару минут, а реально посмотреть структуру, разрешения, состояния и спорные места. Да, на это нужно потратить время. Но часто именно это время потом экономится в процессе вёрстки.

Важно заранее понять:

• какие есть разрешения
• сколько блоков в проекте
• есть ли UI-kit
• прописаны ли состояния: hover, active, disabled, error
• всё ли понятно по адаптивам
• всё ли дизайнер подготовил корректно
• какие вопросы лучше задать до старта

Последний пункт особенно важен. Вопросы к макету и ошибки лучше поймать до вёрстки, а не когда уже готова половина сайта.

Типичный пример — текстовые стили.

Один и тот же текстовый элемент должен оставаться одной сущностью на всех разрешениях. Если на десктопе это H3, он не должен на планшете внезапно превращаться в H6 или любой другой стиль из типографики.

Размер, межстрочка, ширина и поведение на адаптиве могут меняться. Но логика элемента должна сохраняться.

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

Если сразу прыгнуть в вёрстку «с первого экрана», очень быстро можно упереться в вещи, которые проще было спросить у дизайнера заранее.

Например, когда неясно, как должна работать задуманная анимация или какая логика заложена в интерактивный блок. Угадывать поведение или переделывать готовое гораздо дольше, чем уточнить детали на старте.

В моменте кажется: «Разберусь по ходу».

Но часто это превращается в переделки.

Когда мы заранее изучаем макет, становится понятнее, что вынести в базу, какие элементы собрать в UI-kit, где могут понадобиться дополнительные настройки и какие вопросы лучше задать до начала сборки.

Поэтому нормальный старт вёрстки начинается не с первого div’а.

Сначала смотрим макет.
Понимаем структуру.
Проверяем текстовые стили и состояния.
Собираем вопросы к дизайнеру.

И только потом идём верстать.

Так меньше сюрпризов, меньше переделок и меньше ситуаций из серии «а почему это всплыло только сейчас?» 😎