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

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

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

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

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


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

Перебивки — это небольшие текстовые этажи между иллюстрациями проектов:

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

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

Перебивки придуманы и использованы во второй версии электронных изданий Актиона

См. также советы:

По аналогии с проектами для перебивок заранее придуманы шаблоны:

S1. Школа и два совета
S2. Три совета
S3. Курс и совет

Чтобы перебивки не совпадали по ритму с иллюстрациями проектов, они включены в правила следования шаблонов. Например, после шаблона G — картинки на всю ширину окна — лучше пустить перебивку S1 или S3:

_G: [‘_S1’, ‘_S3’]

Если же после шаблона G поставить перебивку S2, то верхний совет будет восприниматься как подпись к иллюстрации:

Плохо

G + S2

Хорошо

G + S3

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

После сборки страницы укладчик наполняет ячейки перебивок курсами и советами. Для каждой рубрики портфолио указано, какие советы и курсы к ней относятся. Например, в рубрике «Интерфейс» рекламируется интерфейсный курс Ильи Бирмана и показаны советы по интерфейсам. Укладчик заполняет ячейки в заданном редакцией порядке. Вуаля!

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

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

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

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Вениамин Векк
2 марта 2017

Перебивки — идеальный способ сделать страницу интереснее, и добавить в неё дополнительную информацию.

Например, Студия Лебедева разбивает блоки работ на ежедневные рубрики и подборку товаров.


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

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

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

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

Нельзя просто так взять и сделать модульную страницу из текстовой 1 Как создавался новый сайт бюро. Часть четвёртая: сетка




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

Визуализация проявляет 4 Это какие‑то другие пиксели? Как они соотносятся? 2 Расскажите о клише и устойчивых выражениях 13 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3