Подписка на блог

Customize in /user/extras/follow-sheet.tmpl.php.

Sample text.

Twitter, Facebook, VK, Telegram, LinkedIn, Odnoklassniki, Pinterest, YouTube, TikTok, РСС JSON Feed

Sample text.

Школа бюро. Вёрстка сложного документа

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

Задание

Сверстайте билайновский договор.

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

Чтобы успешно сделать задание, нужно учесть несколько нюансов.

Чувствуется, что текст сшит из нескольких разных юридических документов. Руки дизайнера чешутся подвигать всякое. Но если там что-то изменить, то компанию в теории смогут засудить. Этого нам не надо. Поэтому в самом документе нельзя менять ни текст ни нумерацию, можно только опечатки подфиксить (там таких проверок на дурака около пяти).

Прежде чем начать собирать макет в Фигме, хорошо потратить время на понимание структуры документа, выделить сущности и уровни вложенности списков.

Дальше начинаем верстать. Обязательно выставляем текстовые стили, превращаем шаблонные элементы в компоненты и закидываем всё в автолейаут. Это сэкономит миллион времени на фиксах, когда вы поймёте, что чего-то не учли.

При вёрстке я следил за тремя вещами:

  1. Правило внутреннего и внешнего. Элементы каждого нового уровня должны быть всё ближе и ближе друг к другу. Чтобы не пришлось повторно править отступы по всему документу я рекомендую идти с глубины наружу — сначала определить комфортный интерлиньяж, потом добавить отступ между абзацами, потом между элементами списка, потом между текстом и заголовком последнего уровня и дальше идти наружу, каждый раз увеличивая отступ.
  2. Размер шрифтов. Клёво, когда заголовки разных уровней однозначно воспринимаются таковыми. Можно воспользоваться таким хаком — выставить размер основного текста в 15—16 пикселей и у каждого заголовка, начиная с последнего уровня увеличивать кегль в 1,5 раза.
  3. Типографские фишечки. Лучше пройтись по всему тексту типографом (плагин для фигмы). Он подправит пунктуационные символы, расставит неразрывайки у частиц, предлогов и союзов, заменит «е» на «ё». Также я использовал всякие приёмы высшей типографики — капитель с разрядкой для аббревиатур, наклонный для заскобочного текста, минискульные цифры в теле текста. Такие штуки разбавляют сплошное полотно текста и в теории должны помогать читателю легче ориентироваться в написанном.

Вот такая страница получилась в итоге →

Собрал основные фичи:



Основные фичи вёрстки сложного документа

Можно начать с моего шаблона и подфиксить, чтобы было краше.
Шаблон в Фигме →

Совет

Коля Товеровский проверяет это задания наивнимательнейшим образом. Только представьте, ему нужно просмотреть ~30 очень похожих друг на друга работ, продолжать видеть косяки вёрстки и иметь бесконечное желание душить. Советую тысячу раз перепроверить работу. Если вы что-то забыли или на что-то забили, Коля найдёт.

Второй совет

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

Н. Т. Спасибо за размер картинки, очень удобно.

***

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




Вариант подсказок на полях.

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

«Пофиг», подумал я. «4,75», подумал Коля Товеровский:



Н. Т. Аккуратно свёрстано, но маловато помощи читателю — фактически у вас просто текст.

Дальше