Когда я училась в школе, я не могла понять: зачем мне учить, с какой стороны растет мох на деревьях и камнях, если мои глаза говорят — да со всех, блин. И как мне вообще помогут эти знания, если я все равно понятия не имею, где находится город — на севере или на юге.

Оказалось, что это не правила дурацкие, а просто дьявол в деталях. По этому поводу я сделала серию плакатов. Кому интересно, вот PDF в полном размере (3,02 Mb).

Текст, кажется, мелковат, зато картинки красивые

Анна Акулова придумала, нарисовала, сверстала и приняла вызов Главреда

Для студентов второй ступени Школы редакторов Максим Ильяхов объявил конкурс. Расскажу о том, как я делала свою работу.

Условия конкурса

3 февраля 2020 года в художественной галерее им. Аси Челован открывается выставка о русском авангарде в изобразительном искусстве. Будут выставлены репродукции Малевича, Кандинского, Татлина и других художников. Будут картины, чертежи, плакаты. Выставка по-нормальному объяснит гостям, в чем крутость «Черного квадрата» и всего прочего абстракционизма и супрематизма. Исторический контекст, народные настроения, революция и всё такое.

Для рекламы выставки бюро закупает в Москве 300 билбордов размером 6 × 3 метра. Билборды будут приглашать на выставку.

Место: Большая Новодмитровская, 36, культурный центр «Куб»
Время: 12:00—22:00, пн—пт
Даты: 3—14 февраля
Билеты и запись на экскурсии: chelovan.ru

Задача

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

Рассуждения

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

Особенности верстки. По условиям билборды будут установлены на оживленных улицах города. Средняя скорость движения автомобиля по городу примерно 60-70 км/ч. Значит, у пассажира есть всего несколько секунд, чтобы рассмотреть и прочитать информацию, а у водителя и того меньше потому, что ему нужно следить за дорогой.

Примерно так водитель видит среднестатистический билборд. Если текста много и нет контраста, прочитать что-то непросто

Из этого следует, что на билборде не стоит:

• Писать длинный текст, потому что его невозможно прочитать.
• Использовать мелкий шрифт и графику.
• Делать сложный дизайн.

Мне нужно сделать простое сообщение о том, что это за выставка. И придумать простой визуальный образ, который создаст настроение и не будет отвлекать от текста.

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

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

Для этого я тщательно отбираю мокапы. Мой билборд должен быть рядом с тротуаром (там его будут видеть пешеходы), на перекрестках и перед светофором (там водитель обязательно затормозит).

Идея. К сожалению или к счастью, основная масса населения не понимает современные течения искусства. Нам ближе реализм, где стол — это стол, а чашка — это чашка. Поэтому основным посылом я выбрала мысль, что «выставка все объяснит». Под «все» я понимаю идеи авангардизма, причины такого восхищения и материальной ценности картин, влияние на все искусство. Решила превратить это в слоганы.

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

Ход работы

Изначально я представляла билборд примерно таким:

Очевидно, что возникает проблема: текст на левой части макета не читается. Нужно сделать рисунок более лаконичным, чтобы буквы были хорошо видны на светлом фоне.

Я долго двигала, меняла и перекрашивала элементы и в итоге пришла к такому варианту:

Результат меня устроил. Человек стоит в углу и становится якорным объектом. Листочек занимает свободное место, поэтому в макете нет дыр. Разделение на две части макета и цветовое выделение позволяет создать связь между словами, чтобы показать — вся информация на сайте. Ну и кажущаяся строгость формы за счет линеек. В общем, я довольна.

И тут я поместила макет на мокап. Сразу видна проблема:

Издалека мой красивый листик кажется странным пятном. Невольно думаешь: это так задумано или баннер грязный? Уберем листик:

Мужик становится чужеродным элементом. Почистим:

Немного скучновато, но ничего не мешает читать. Оставляем.

По условиям конкурса в городе будет установлено 300 билбордов. Есть шанс, что человек увидит несколько наших билбордов. Поэтому делаю несколько макетов в разными слоганами. В них играем на разных чувствах:

• Социальное — подчеркиваем влияние авангардистов на все искусство.
• Прагматика — обещаем ответ на главный вопрос «И почему эта мазня так дорого стоит»?
• Эмоция — вызываем интерес и любопытство с помощью провокационных вопросов вроде «Умел ли Малевич рисовать».

В результате у меня получилась серия из 4 билбордов:

Результат

Задачей было разжечь интерес читателя к выставке — достаточный, чтобы захотелось зайти на сайт. Максим Ильяхов оценивал решение этой задачи по 5 критериям:

• Полезное действие выставки. Почему человек захочет на нее попасть? Каково число людей, которые захотят попасть, исходя из выбранного вами полезного действия? В ответ на какой стимул мы соберем больше людей — на стимул «деньги» или на стимул «стать более культурным»? Чем более попсовый и массовый мотив вы использовали в подаче рассылки, тем лучше.
• Ясность. Нужно ли расшифровывать плакат? Есть ли там ребусы, мелкие элементы, нужно ли в него вглядываться? Так как это биллборд, лучше, когда всё ясно и читается издалека. Адрес сайта должен быть большим и мощным.
• Использование формата. Биллборд висит в городской среде, вокруг что-то происходит. Биллбордов может быть несколько, это может быть серия. Используете ли вы эти возможности, чтобы лучше решить задачу? Серия биллбордов лучше, чем один. В идеале — чтобы биллборд как-то взаимодействовал со средой (этого не было ни у кого).
• Красота. Красивое лучше некрасивого. Так как мы работаем с картинами, полезно было использовать их красоту на пользу. Если есть красивый супрематизм, его нужно было использовать как элемент дизайна плаката.
• Шок-фактор. Иногда можно нарушить все правила и сделать просто полную дурь, и это запомнится и сработает.

Я считаю, что неплохо справилась с задачей:

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

А это ко мне приехал приз за конкурс

Хочу поступить в Школу редакторов Бюро Горбунова. Редактор в понимании бюро — капитан корабля. Его работа — не текстики, а информационные продукты, которые меняют сознание людей. В распоряжении редактора слова, картинки и все шрифты мира. Я хочу научиться управлять всем этим добром.

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

Оценивать работу будут по 4 критериям:

• Срок — максимальный балл можно получить до 2 июня.
• Идея — простые, работоспособные, непротиворечивые идеи оцениваются выше.
• Логика — способность разобраться в предметной области, понимание принципов дизайна, интерфейса, редактуры и издательского оформления, наглядность и последовательность результатов работы.
• Эстетика — выбор иллюстраций, шрифтов, цветов, общего тона и стиля.

Изучила матчасть

Плакат как жанр имеет свои особенности. Рекомендации искала в Советах Бюро и блоге Максима Ильяхова.

В телеграм-канале «Визуальное повествование» (@ilyahov_smotrit) Максим рассказывает, что должен делать хороший плакат:

1. Говорить о его владельце: «Владелец классный, он в теме, он молодец». Задача «показать, что я классный» хорошо решается плакатами в менторском тоне. Типа «Как правильно верстать».
2. Запоминаться и привлекать внимание издалека.
3. Быть либо очень запоминающимся (образно, текстом), либо очень полезным. А лучше и то, и другое одновременно.

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

1. Где висит плакат? Какие люди его видят?
2. Кто его туда повесит и почему?
3. Что в этот момент они делают?
4. Чего мы от них хотим? Что они должны сделать?

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

Еще я смотрела видео с разбором вступительных заданий прошлых лет. Выделила для себя несколько принципов:

• Делать вертикальным. Удачных горизонтальных решений пока не встречалось, оставьте этот формат для объявлений и стенгазет.
• Выбирать простые посылы. Не пытайтесь охватить много тем и засунуть в плакат все знания. Лучше ясно рассказать об одной небольшой проблеме, чем разместить 100500 правил, и никто это не прочитает.
• Использовать мало цветов. Пестрота мешает восприятию. Делайте плакат контрастным, выбирайте несколько красок и используйте цвет для связей между элементами.
• Хорошо работаю серии. Лучше сделать несколько плакатов с максимально простой идеей, чем один сложный.

Посмотрела готовые решения

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

Суперинформативные плакаты. Их нужно изучать в несколько подходов. Для моих целей не подходит

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

Следующий шаг — разбор заданий прошлых лет. На вебинарах Максим не просто говорит об ошибках, а показывает, как улучшить работу. Формат «Было-стало» помогает сразу увидеть разницу. Ниже несколько понравившихся трансформаций.

Сделали заголовок заметным. Упростили структуру. Нет смысла делать таблицы — их нужно расшифровывать. Не бойтесь писать просто текст

Плакат был сделан по принципу бутерброда. Таблица в середине давала дыры в верстке. Убрали лишние слои и упростили структуру

Заголовок намекает, что в магазине бывает некачественный товар — кто повесит такой плакат? Блоки схемы разного размера, поэтому кажутся неравнозначными. Много мелкого текста — сложно читать. Цвет бессмысленный. Упростили, заменили заголовок. Добавили яркий фон и рамку

Вступительное с лучшими баллами — серия плакатов. Но и их можно улучшить. Облегчили шапку: логотип убрали совсем, фактоид и контакты переместили. Здорово, что цвет фактида и маечки совпадает — усилили его рамкой

Удачные варианты

Придумала свое решение

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

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

Еще один неочевидный момент. Подъезд — это общее имущество жильцов, и в принципе они могут повесить или написать там что-то полезное. Но за порядком следит УК. Если я сделаю посыл вроде «УК плохая и кругом вам все должна» — у плаката будет мало шансов остаться на стене.

Хорошо работают серии. Но в моем случае это не очень подходит: у нас в подъезде не так много свободных стен, а самые лучшие места уже заняты официальными сообщениями. Серию плакатов я смогу разместить только там, где их никто изучать не будет — например, у входной двери. Все хотят домой, кому они там нужны?

Итак, нужен простой плакат с полезной информацией для жильцов и яркой иллюстрацией. Не обижаем УК.

Сначала я хотела рассказать о поломках в доме: кто поможет решить проблему и как быстро. Схематично идея такая:

Уже на этапе эскиза я поняла, что информации слишком много, воздуха нет. К тому же получается, что опять должна все только УК.

Решила сократить информацию до самой частой аварии в доме — потопа. Дать алгоритм действий, полезные телефоны и сроки, в которые аварию устранят. Начала верстать и… снова это слишком много.

И тут пришло решение. На самом деле, что делать в общем-то все знают: позвонить в УК, чтобы перекрыли стояк; по возможности собирать воду в емкости; идти к соседям сверху; составить акт. Проблемы начинаются потом, когда вода больше не течет, а ты видишь последствия. Пострадавшего волнует главный вопрос: кто оплатит ремонт? Об этом и расскажу в плакате.

Спойлер: виноваты могут быть не только соседи сверху, но и УК. Ответственность возлагается в равной степени. Плакат никого не обижает: нормально делай — нормально будет.

Приступила к верстке

Верстать я не умею от слова совсем. В теории знаю о правиле внутреннего и внешнего и прочем, но на практике не делала такого сама, а поручала дизайнеру. Из графических программ немного работала с Adobe Lightroom и Adobe Photoshop. Училась всему в процессе.

Верстала плакат в Adobe InDesign. Никогда до этого с ним не сталкивалась, поэтому отправной точкой стал вебинар Максима Ильяхова. Советую начинающим редакторам — без него было бы сложно понять общие принципы. Детали и тонкости уже гуглила. Я думала, будет сложнее :)

Текст писала сразу в InDesign. Так проще представлять итоговый вариант — видно, где убрать текст, а где добавить. Эту идею тоже украла у Ильяхова.

Иллюстрацию рисовала сама на бумаге, потом сканировала и раскрашивала уже в Photoshop. С ним пришлось помучиться, но в целом я довольна.

В процессе работы возникла идея добавить немного ми-ми-ми. Рисую варианты котиков

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

Фрагмент переписки. Правлю, правлю, правлю)

Пока поправляла, придумала добавить котенка. Это развеселит плакат на грустную тему и привлечет внимание. Идея так захватила, что я всерьез задумалась о серии — мужчина зонтом и кот в ковшике во время потопа, мужчина в шапке в обнимку с котом при отключении отопления, мужчина и кот сидят при свете свечи. Вышло бы забавно.

Ниже итоговый вариант. Дьявол кроется в деталях: сравните с первой версией.

Слева — первый вариант, который я показала другу. Справа — итоговая версия, ее я отправила в Бюро

Проверила плакат в деле

По условиям задания, нужно повесить плакат в подъезде и прислать фотографию. Вечером пошли с мужем на дело :)

Вешаем плакат. Муж просит поторопиться с фоточками

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

Убедились — плакат читаемый

Дождалась результатов

Вечером четверга 30 мая я отправила заявку. Ее рассматривают в течение трех рабочих дней. Но уже в воскресенье 2 мая я получила письмо счастья.

Заветное «Да»

Теперь остается три месяца ждать объявления результатов. Интересно, какое место в рейтинге?

***

Upd. Баллами за задание очень довольна, особенно за эстетику. Правда, я не проходила подготовительные курсы, поэтому оказалась на 24 месте в рейтинге. Если баллы за курсы не учитывать, была бы на 4 месте.

Баллы за вступительное задание

На первой неделе учебы Максим Ильяхов провел разбор вступительных заданий. Краткие выводы по моему плакату:

• + Рамка. Это простой способ выделить плакат на фоне объявлений в подъезде и сделать его цельным.
• + Иллюстрация. Она отлично работает на привлечение внимания (правда визуально Максиму не очень нравится, но это уже дело вкуса).
• − Плакат чисто информационный. Не хватает информации о том, куда звонить и что делать.
• − Логика. Нужно идти от проблемы: у меня прорвало трубу в квартире, значит оплатят соседи. А у меня наоборот: соседи оплатят ремонт, если прорвало трубу в квартире. Поэтому лучше переделать плакат так, чтобы заголовки стали выводами.

Следующая цель — не вылететь из тридцатки))

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

Первый конспект — книга Издательства Бюро Горбунова «Типографика и вёрстка». Многое из нее есть в Советах, поэтому я вряд ли делаю что-то плохое, опубликовав свой конспект :)

Правило внутреннего и внешнего

Внутренние расстояния объектов (букв, строк) должны быть меньше внешних!

Внутреннее ≤ внешнее

В интерфейсе близость — самый естественный способ показать связь =>

• в формах группировать связанные поля
• радиокнопки либо вертикально, либо без кружков
• тулбары делить по смыслу

Правило: наборы элементов интерфейса разделять на смысловые группы

нет: ○ ○ ○ ○ ○ ○ ○

да: ○ ○ ○ — ○ ○ ○ ○

Интерлиньяж

Это функция кегля, длины строки и формата

Правило:

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

Принцип модульности

Макет должен быть «нарезан» на аккуратные непересекающиеся прямоугольные модули.

Правило якорных объектов

Любой якорный объект должен тяготеть или располагаться в одном из углов или в центре своего прямоугольника.

Визуальный центр выше геометрического (для подсознательной компенсации гравитации)

С противоположных сторон должен быть «воздух» или менее заметные объекты.

Якорный объект может быть привязан к одной из сторон прямоугольника.

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

Книжный канон Иоганна ван де Граафа (голландский типограф) — книжный канон раннего Возрождения

Базовые элементы

Заголовок

Обычно «накрывает» текстовый модуль.

Если слишком короткий, лучше отделить модули линейкой.

Текст

Кегль экранного текста обычно в диапазоне 12—16 пунктов, интерлиньяж — 1,2—1,4 от кегля.

Иллюстрация

Привлекает внимание быстрее заголовка.

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

Если есть направление, картинка должна “смотреть” на текст.

Фотография должна быть четко ограничена собственным фоном или тонкой рамкой => не сливаться!

Элементы управления

Должны быть на расстоянии, чтобы не было ошибочных нажатий.

Между соседними элементами — минимум 2 пробела, между элементами и подписью — минимум 1 пробел.

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

Все элементы управления — модульные якорные объекты => их нужно сортировать, отделять, собирать в однородные модули и выравнивать друг с другом.

Подпись

Если подпись к иллюстрации, выносные линии должны быть тонкими — не более 20% черного.

Двоеточия в подписях полей не обязательны.

В конце подписей точка не ставится!

Гиперссылка

Предлоги и союзы всегда включаются в ссылку!

Желательно обходиться без переносов.

Плохо выглядят многострочные ссылки.

Хорошо организованная верстка состоит из однородных блоков подобных элементов.

Модули

Нежелательно разрывать заголовок и начало текста => подписи и теги отправлять в конец.

Каноническая конструкция вертикального текстового модуля. Соответствует естественному порядку чтения

Иллюстрация «в подмышке» может быть только правой:

Фотография не должна отделять заголовок от начала текста

Если заголовок не накрывает картинку, оба варианта приемлемы:

В горизонтальном текстовом блоке иллюстрация может располагаться слева или справа от основного модуля

Ничто не выглядит так уродливо, как обтекание иллюстрации текстом справа => обтекание текстом только слева!

Правильное обтекание текстом

Форма текста и порядок чтения

Человек читает слева направо и сверху вниз:

Естественный порядок чтения

Если текст разорван иллюстрацией, чтение прерывается.

Если это посторонний баннер, читатель может решить, что текст закончился.

Если текст разбит на колонки, дочитав, читатель идет к началу следующей => все колонки должны выравниваться по верху.

Иллюстрации

Положение иллюстрации тоже задает направление => в сложной структуре траектория должна быть простой:

«Траек­то­рия» взгля­да — простая линия без непред­ска­зу­е­мых поворотов

Хороший дизайн создает иерархию, выделяет главное и подчиненное.

Жизнь приходит с разнообразием размеров и формы.

Кирпич из иллюстраций выглядит как… кирпич. Неболь­шой поток воз­ду­ха вокруг фото­гра­фий ожив­ля­ет гале­рею.

Допол­ни­тель­ный воз­дух и под­пи­си «отжи­мать» к кра­ям галереи.

Текстовая страница

Текст, выров­нен­ный вле­во с рва­ным пра­вым кра­ем, дол­жен «дышать» спра­ва, то есть край фор­ма­та или сосед­няя колон­ка не долж­ны под­хо­дить к нему слиш­ком близко.

Подзаголовки

Заголовки второго уровня: кегль увеличен по сравнению с основным текстов. Перед ним — отступ в 2 строки, после — 1 строка.

Заголовки третьего уровня: полужирный основного кегля. Нет отступа перед текстом.

Подзаголовок в подбор к основному тексту: помогает избегать отступов. Полужирный.

Заголовки четвертого уровня не использовать!

Списки

Любой список предваряется обобщающим текстом или заголовком в этой синтаксической роли.

Первый элемент перечня ставится на следующую строку ( без увеличе­ния рас­сто­я­ния меж­ду стро­ка­ми), чтобы подчеркнуть, что это одно предложение. Между элементами — дополнительное расстояние.

Таблицы

По умолчанию все значения выравниваются по верху и по левому краю.

Главная страница

Глав­ная стра­ни­ца сай­та — это его лицо, облож­ка, фир­мен­ный стиль, одеж­ка и квинт­эс­сен­ция. Глав­ная стра­ни­ца объ­яс­ня­ет суть, зна­ко­мит с воз­мож­но­стя­ми, опре­де­ля­ет сце­на­рий и зада­ёт тон.

Виды: лента, плитка, фоторама и рубрикатор. Ино­гда в чистом виде, ино­гда в комбинации.

Лента

Общий принцип устройства — бесконечная средняя часть.

Плитка

Кладка из прямоугольников. Модули плотно упакованы по рядам.

Фоторама

Листалка должна быть информативной — с подписями или миниатюрными картинками.

Кнопок-стрелок или точек чаще всего недостаточно.

Рубрикатор

Рубри­ка­тор чаще все­го име­ет фик­си­ро­ван­ный макет (ино­гда с неболь­ши­ми вари­а­ци­я­ми) и устро­ен по прин­ци­пу «бутер­бро­да», чтобы дизайн не сло­мал­ся при изме­не­нии содержания.