Макет из Figma, который стал рабочей страницей

Сначала разобрал макет, потом начал верстать

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

Смысл простой: три секции из макета — не три куска вёрстки, а один блок с тремя наполнениями. Заголовок с чертой встречается четыре раза — значит, он описан один раз. Дальше правка цвета или отступа делается в одном месте и сразу везде, а не ищется по странице глазами.

Значения макета перенёс числами, а не на глаз

Все цвета, кегли, начертания, отступы и размеры вынесены в один файл и взяты из макета как есть. Даже градиент за первым экраном пересчитан из значений Figma, а не подобран пипеткой.

Там же прямо помечено, что пришло из макета, а что я вывел сам, потому что в макете этого не было. Через полгода это спасает: видно, какие числа трогать нельзя, а какие — мои решения и обсуждаются.

Проверил результат против координат макета

Готовую страницу я сверил с макетом не на глаз, а по координатам: где стоит каждый блок в Figma и где он оказался в браузере. Высота страницы сошлась до пикселя — 4600 точек и там, и там; расхождения по блокам не больше одной точки.

Для заказчика это значит одно: открыв страницу рядом с макетом, он увидит макет, а не «интерпретацию верстальщика». Два места, где я сознательно отступил от макета, записаны в репозитории вместе с причиной — например, размер одной надписи в шапке приведён к остальным пунктам меню, потому что в макете он выпадал на один пункт из четырёх.

Сцену гор собрал слоями, а не одной картинкой

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

Отсюда и глубина: заголовок стоит между слоями, а не поверх плоской картинки. И отсюда же запас — заменить одну гряду или сдвинуть её можно, не пересобирая экран заново.

Три секции — один блок, вторая зеркальная

Секции 01, 02 и 03 устроены одинаково: номер, заголовок, текст, ссылка и фотография. У второй фотография слева, а не справа — в вёрстке это не отдельная копия, а переключатель у того же блока.

Порядок чтения при этом не меняется: тот, кто слушает страницу голосом или идёт по ней с клавиатуры, в обеих секциях получает сначала заголовок, потом текст. Местами меняется только картинка.

Телефон и планшет придумал сам — и честно об этом сказал

В макете был только экран компьютера шириной 1920 точек: ни планшета, ни телефона, ни единой подсказки, как всё это должно себя вести на узком экране. Раскладку для них я собрал сам.

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

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

Добавил анимацию появления — и пометил её как добавку

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

Сделано с двумя оговорками, и обе важнее самой анимации. Если человек отключил движение в настройках устройства — анимации не будет, карточки просто стоят на месте. Если скрипт не загрузился или отключён — то же самое: страница остаётся читаемой, ничего не пропадает. Анимация здесь украшение, а не условие, при котором сайт работает.

В макете её тоже нет, поэтому она идёт в том же списке на согласование, что и раскладки для телефона.

Тексты перенёс дословно, вместе с опечатками

В исходном макете есть опечатки — в одном абзаце лишняя буква, в другом две точки вместо одной. Я перенёс их как есть и вынес отдельным списком на согласование.

Верстальщик, который молча «поправляет» тексты, опаснее опечатки: сегодня он исправил очевидное, завтра — цену или название услуги. Правки в текст вносит тот, кому они принадлежат.

Сделал то, чего в макете не рисуют

Макет не показывает, что происходит при наведении, как выглядит страница для того, кто ходит по ней с клавиатуры, и что делать с анимацией, если человек её отключил в системе. Всё это решает верстальщик.

Каждая картинка получила текстовое описание, кнопки и иконки — подписи для тех, кто не видит экран, у ссылок появилась заметная рамка при переходе клавиатурой, а плавная прокрутка отключается, если в настройках устройства движение выключено.