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

Шаблоны раскладок

Проекты раскладываются по заранее придуманным шаблонам. Каждый шаблон представляет собой набор ячеек, которые заполняются иллюстрациями и текстом. Базовые шаблоны рассчитаны на три или два проекта:

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

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

У шаблонов с боковыми колонками текста ярко выражена направленность. Шаблоны BBB, DD и H смотрят направо, а CCC, EE и I — налево. Важно следить, чтобы шаблоны с одинаковой направленностью не вставали друг за другом. К примеру, нельзя поставить друг за другом два шаблона BBB или DD c H. Большие иллюстрации свалятся на один борт, а текстовые колонки образуют колодец:

Чтобы подобного не произошло, каждому шаблону назначена переменная, отвечающая за его направленность. Рабочее название переменной — «спин». Спин бывает правым, левым и нейтральным. Спин нейтрален у симметричных шаблонов — AAA и G.

После шаблона с правым спином может идти шаблон с левым или нейтральным спином. После шаблона с левым спином — наоборот. Шаблоны с нейтральным спином не влияют на выбор следующего спина.

То есть, если до нейтрального спина шёл правый, то после него не может снова идти правый спин. Для простоты понимания — иллюстрация:

Плохо

Хорошо

Правила следования шаблонов

Некоторые шаблоны сочетаются друг с другом лучше, чем с другими. Например, два шаблона ААА подряд или комбинация AAA + G будут смотреться скучно. Лучше разбавить их шаблонами с боковой колонкой:

Плохо

Хорошо

Чтобы шаблоны всегда хорошо сочетались друг с другом, в программном коде описаны предпочтительные комбинации. Например, так выглядит строчка кода с правилами для шаблона AAA:

_AAA: [‘_BBB’, ‘_CCC’, ‘_DD’, ‘_EE’, ‘_H’, ‘_I’]

Она означает, что после AAA лучше ставить шаблоны BBB, CCC, DD, EE, H и I.

Иллюстрации проектов

Один и тот же проект может присутствовать в нескольких рубриках и попадать в разные ячейки шаблонов. Например, проект мобильной навигации Сенсума в рубрике «Продукты и услуги» встал в ячейку с боковой колонкой, а в «Навигации» — на всю ширину страницы:

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

Раскладка

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

Разберём работу укладчика на примере проектов для Энви и Биз-цена. Первым делом укладчик определяет, сколько проектов ему предстоит показать. Бюро сделало для Энви пять проектов. Укладчик подыскивает в своём репертуаре шаблон, количество ячеек в котором наиболее похоже на необходимое. Пока мы не придумали более сложных шаблонов, самое большое количество ячеек в одном шаблоне — три. Укладчик берёт шаблон BBB:

Осталось показать ещё два проекта. Укладчик вновь оглядывает свой репертуар в поисках шаблонов для двух проектов. Выбор невелик — DD или EE. Какой выбрать? В ход идёт система штрафов и вознаграждений. Укладчик оценивает каждый шаблон с точки зрения соответствия предпочтительным комбинациям и соблюдения чередования спина.

Согласно правилам следования шаблонов, после BBB предпочтительны шаблоны CCC, EE, G и I. EE соответствует предпочтениям и получает +1 балл. У BBB правый спин, у DD тоже, а у EE — левый. Совпадающий спин — это плохо, поэтому DD получает −1 балл. Шаблон EE набирает больше баллов и занимает заслуженное место:

После Энви идут проекты для Биз-цена. Их всего два, поэтому история очень похожа на выбор предыдущего этажа. Укладчик смотрит на последний использованный шаблон и оценивает доступные шаблоны. Согласно описанной выше системе лучше всего подходит DD:

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

P. P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.