Максим Семенов
15 февраля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Артём, давно слежу за работами бюро, читаю советы.

Когда увидел новую главную, первая мысль была, что что-то сломалось и стили не подгрузились. Вторая — что вас взломали.

Не покидает ощущение, что новый дизайн нарушает многие из ваших принципов, о которых вы рассказываете в советах (Альфа Ромео почему-то называется Бюросериф, а курсы будут проводится на Гавайях).

(Процесс. Часть вторая, раскладка проектов)


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

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

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

AAA
BBB
CCC
DD
EE

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

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

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

G
H
I

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

BBB + BBB
DD + H
CCC + EE

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

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

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

Плохо

BBB + AAA + DD. Иллюстрации завалились на левый борт

Хорошо

BBB + AAA + EE. Иллюстрации стоят равномерно

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

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

Плохо

Хорошо

AAA + AAA и AAA + G. Кирпичная кладка
AAA + BBB и AAA + H. Веселее и информативнее

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

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

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

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

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

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

Для ячейки на всю ширину страницы
Для ячейки с боковой колонкой
Для ячейки на полстраницы

Раскладка

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

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

BBB

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

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

BBB + EE

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

BBB + EE + DD

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

Пустые ячейки

Заполненные

Гибкость и развитие системы

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

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

Технические детали ждите в Техноведре. Скажу лишь, что всё это работает без админки :-)

В следующем совете я расскажу о перебивках и их влиянии на раскладку работ.

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

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Михаил Богородский
16 февраля 2017

А почему нельзя было обойтись только 4 одноэтажными шаблонами (G, H, I и две маленькие картинки)?

Миша Нозик
18 февраля 2017

Михаил, было бы сложнее выбрать доминанту в пределах каждого продукта.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как создавался новый сайт бюро. Часть четвёртая Как создавался новый сайт бюро. Часть третья 1




Недавно всплыло

Как флексить. Отступить от идеала 2 Расскажите об обратной связи в интерфейсе 1 Кто ты? 1 Как сделать плавный переход от общения с администратором к директору? 1