Заключительная четвёртая часть заметок с занятий вёрсткой на курсе Игоря Штанга.
Простая и сложная вёрстка
Списки
Бывают:
- Упорядоченные или неупорядоченные. Если последовательность элементов не зависит от определённого логического порядка, то список является неупорядоченным. Если же от перестановки элементов изменяется смысл, то список называется упорядоченным.
- Нумерованные или маркированные. Каждый элемент нумерованного списка обозначен цифрой, маркированного — графическим маркером.
- Одноуровневые и многоуровневые. Многоуровневый список имеет вложенную структуру.
Форматы:
1. Текст с заглавной буквы и с точкой в конце.
1) текст со строчной буквы и с запятой (или точкой с запятой) в конце,
а) если короткий текст,
— или такой короткий текст.
Графические маркеры можно:
- частично свесить,
- полностью,
- не свешивать.
Буллиты с кириллицей смотрятся неорганично, вместо них используем длинные тире. Если буллитов требует брендбук, уменьшаем их вес: оставляем только контур или заливаем цветом.
Иногда используют втяжки — просто отступ без графического маркера. Не подходит для многоуровневого списка.
Длинные списки оформляем цифрами.
Иерархия для кириллицы (Мильчин):
I. Римская цифра.
1. Арабская цифра.
а) буква,
— графический маркер.
Висящий предлог убираем в первый пункт списка. Пример:
Списки делятся:
1) на упорядоченные или неупорядоченные,
2) нумерованные или маркированные,
3) одноуровневые и многоуровневые.
Отступы
В печати отступы до и после списка обычно не ставят. И между пунктами тоже, чтобы они воспринимались как группа. Отбивкой после списка иногда подчёркивают, что он закончился. Отбивкой до и после выделяют группу.
В вебе отступы между пунктами есть по умолчанию. Их уменьшают, чтобы были меньше отступа между абзацами (меньше половины строки). В бюро Артёма Горбунова не делают отступа между списком и обобщающими список словами. Игорь Штанг этот стандарт не разделяет.
Короткие пункты (например, состоящие из одного слова) верстаем без оступа, чтобы они шли друг за другом.
Иногда цифры не отделяют пунктуацией, если они и так отделены положением (например, отступом).
Таблицы
Формат
Размер и форму таблицы определяют её данные. Нельзя искусственно растягивать таблицу под формат, теряется связь между данными. Ключевая характеристика — компактность.
Иногда данные приводят к слишком длинным таблицам. С этим приходится что-то делать, вплоть до сокращения слов в шапке.
Если будет много таблиц, думаем об этом заранее:
- Если возможно, подбираем общую ширину;
- Придумываем модульную структуру;
- Иногда таблицы можно центрировать.
Мильчин в «Справочнике издателя и автора» 77 страниц посвятил таблицам. Но его рекомендации касаются в основном текста.
Шум
Линейки и плашки создают визуальный шум, отвлекающий от данных в большинстве случаев. На экране шум особенно активен. В простых таблицах (не специальных бухгалтерских) можно убрать их без потери смысла.
Возможно смысловое выделение (см. годовой отчёт IKEA):
- Отделение линейкой группы строк, объединённых смыслом;
- Выделение строки цветом.
В вебе можно показать плашку только тогда, когда она нужна — подсветить строку или столбец при наведении курсора.
Если текст свёрстан правильно, почти всегда можно убрать вертикальные линии.
Упрощение и поиск данных
Функции таблицы:
- Сравнение тарифов, вкладов, характеристик моделей. Распространено в вебе;
- Поиск конкретной цифры или строчки.
Распространённые приёмы вёрстки:
- Добавляем заголовок (не шапку, а именно заголовок). Такую таблицу всегда можно вырвать из контекста и использовать отдельно. Она становится portable;
- В заголовке не пишем слова «таблица» или «соответствие»;
- Убираем повторы. Куда их деть, зависит от задачи: в заголовок, шапку, боковик (обобщающий столбец), примечание (за пределами таблицы, не такая значимая информация, как заголовок), первую ячейку, основной текст на странице;
- Убираем из шапки слово «Параметры» — обычное заглавие боковика;
- Иногда можно полностью убрать шапку;
- Шапку можно сделать серой. Это метаданные, не обязательно жирнить их;
- Выравниваем.
Выравнивание:
- Текст выравниваем по левому краю;
- Сравниваемые цифры — по разряду;
- Диапазоны (Мильчин) — по разделителю, то есть многоточию или тире;
- Разнородные данные — по левому краю;
- Шапку — по левому краю по самой длинной строчке в значениях. Часто встречается в книгах. В вебе шапку выравнивают так же как данные, например, вместе с цифрами по правому краю;
- Диапазон иногда разделяют на 2 подстолбца и выравнивают значения по правому краю соответствующего столбца;
- Иногда верхняя граница одного диапазона совпадает с нижней границей другого — непонятно, к какому диапазону отнести пограничное число. Добавляем незначительную разницу:
- 200 001—400 000
- 400 001—600 000
В Индизайне есть табличный режим, в нём узкие цифры получают дополнительные отступы, чтобы попадать в разрядность. Если такой возможности нет, используем:
- Шрифт с более широкой единицей, например, с чёрточкой внизу;
- Моноширинный шрифт.
Иначе будет вот так:
125 114 000
882 569 000
Верстают столбцами:
- Сравниваемые цифры — удобнее сравнивать;
- Характеристики — получается информационная группа. Но сравнить значения в соседних информационных группах будет несколько сложнее.
Номер таблицы теперь верстают проще — по левому краю. Номера может и не быть. Если в шапке сочетаются однострочные и двухстрочные надписи, выравниваем по верхнему краю.
Как сделать таблицу проще в использовании, см. справочник Мильчина.
Моя перевёрстка таблицы на курсе:
Иллюстрация
Форма
Модульная вёрстка подразумевает, что иллюстрации прямоугольные.
Если часть фотографии сливается с фоном, восстанавливаем модульность:
- Обводим фотографию линией;
- Крутим настройки фото, чтобы она с фоном не сливалась.
Если обтравленная фотография обрезана:
- Ставим линейку со стороны обреза;
- Помещаем на плашку;
- Выводим за формат (за обрез листа).
Если обрез с нескольких сторон:
- Обводим весь блок линией;
- Кадрируем фото в другую форму, убирая обрезы.
Обрезанную часть можно увести в полупрозрачность, если уместно по стилю и нельзя воспользоваться линейкой. Это любительский приём, обычно он выглядит неубедительно.
Кадрирование
Акцентируем внимание на объекте. Много фона обычно не требуется, если нет задачи сделать скучно. Квадрат делает фото ещё скучнее. Как вариант:
- Кадрировать вертикально или горизонтально в формате 1:2;
- Сместить объект от центра — появится композиционный элемент.
Не режем:
- Вплотную к мелким элементам. Оставляем поле или обрезаем их полностью;
- Важные части (руки, уши, часть волос). Иначе выглядит неаккуратно, как неосознанное кадрирование. Можно резать по лбу (см. грянцевые журналы);
- Произведения искусства. Если это зачем-то потребовалось, подписывают, что это фрагмент.
Направление
Бывает сюжетное и композиционное движение (направление динамической массы). Если машина не едет, её нос всё равно куда-то направлен.
Если есть направление, объект должен смотреть на текст или внутрь разворота. Тогда композиция получается законченной.
Контраст
Если есть набор фотографий, выделяем одну из них, например, размером. На старых новостных сайтах даже на большой странице всегда была главная фотография. Сейчас делают иначе: крупные фото появляются периодически, одна доминирующая иллюстрация на 1—3 экрана (см. Wonderzine).
Учитываем баннеры. Они могут спорить с главной иллюстрацией, а на странице товара — с фотографией товара. Товар обычно размещают в центре иллюстративного блока и обтравливают, а баннер занимает весь свой блок.
Линейка, рамка, плашка
Не используйте их для спасения слабой вёрстки. Плохие сайты часто пытаются быть плашечными. Проблема в том, что они не подсказывают пользователю, что делать. Нужен акцент на главном сценарии.
Если нельзя переверстать, плашки спасут от разночтения и появления незапланированных взаимосвязей.
Или если мы не знаем, каким будет содержимое. В прошлой версии Пинтереста были рамки, в новой от них избавились и теперь вынуждены тонировать фотографии с белым фоном.
Рамкой можно вынести блок на отдельный слой.
В вебе полезно, но не обязательно:
- Показывать рамку при наведении курсора;
- Кнопку в конце большой формы ставить на плашку.
Принцип, который важнее теории близости: сначала мы видим крупное пятно. Поэтому подписи всегда должны быть под изображениями. В каталоге IKEA обтравленные товары стоят очень близко друг к другу, но благодаря правильно расположенной подписи мы не путаем, где какой предмет.
