4 заметки с тегом

типографика

Метроплакат с указателем. Часть 3

Часть 1
Часть 2

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

Узнаю в гугле, что Окружная будет огромным ТПУ с теплыми пересадками и одним (слава богу!) названием. Значит обозначение должно быть аналогично пересадке «Владыкино», одним кружком. Проделываю нехитрые манипуляции:

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

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

Чудом ничего не рушится. Хвалю себя, скидываю Илье итоговые пдф-ки и пнг-шки, и вдруг:

С выравниванием цифр действительно начинает выглядеть опрятнее и эстетичнее.

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

Кидаю ещё один взгляд на схему. Вижу, что подписи Лихобор (Лихоборов?) тесно внутри МЦК, а вокруг Коптево много места. Пишу Илье:

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

Вродё всё. Анонсируем, выкладываем. Выдыхаем.
...
...
...
НАГАТИНСКАЯ

Оказывается, с 1 января 2017 года есть холодная пересадка с «Нагатинской» на «Верхние Котлы». Тут всё оказалось не так сложно, но опять же, волна подвижек прокатилось по всему югу серой и зелёной веток и сдвинула с места Каховскую линию:

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

Ну и под конец — итоговое сравнение схемы до и после.

25 февраля   алфавитный указатель   вёрстка   дизайн   Илья Бирман   метро   типографика

Метроплакат с указателем. Часть 2

Часть 1

У нас было 2 алфавита, 207 станций, 13 линий всех сортов и расцветок, а ещё монорельс, четыре аэропорта и полдюжины планируемых станций. Не то, чтобы это всё было нужно для алфавитного указателя, но раз начал верстать, становится трудно остановиться. Единственное, что меня беспокоило — это станция «Улица Старокачаловская». В мире нет ничего более неудобного и несокращаемого, чем «улица Старокачаловская». И я знал, что довольно скоро мы в это окунёмся.

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

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

Казалось, всего-то и делов — определиться с тем, как показывать станции МЦК и вперёд. На схеме Ильи МЦК отличается от остальных линий толщиной. Ещё у меня были опасения, что цвет будет путаться с коричневой Кольцевой, поэтому я решил, что стоит сделать её стрелку аутлайном. Скинул Илье варианты:

Тут я понял, что всё будет не так просто. Добавляю цифры

В этот момент мне показалось, что с внешним видом стрелок и вёрсткой мы определились (лол!). Нужно было приниматься за полный список станций. Я не горел желанием вручную расставлять стрелки в Иллюстраторе, поэтому засел за Индизайн, нашел шрифт с подходящей стрелочкой и скрипт для поворота символов. Конечно, поворачивать каждую стрелочку всё равно пришлось вручную, но зато потом уже набранные колонки можно было всячески двигать, перевёрстывать и т.д.

Пытаюсь расположить схему и указатель на формате 70×50. В левом нижнем углу остаётся пустота, но я сразу придумываю чем её забить и заодно предлагаю Илье ещё один путь монетизации :-)

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

Выделение болдом — шляпа. Илья не унимается:

Что я показал тогда Илье вы можете узнать у него в телеграм-канале, но стрелочки с кружочками по правому краю я выровнял. В процессе случайно получилась красота :-)

Где-то в этой же итерации решили закрасить стрелку МЦК — всё-таки оттенок у неё легко идентифицируемый, да и номер рядом есть.

Следующий, довольно логичный и очевидный шаг доходит до нас только сейчас — зачем мусорить несколькими стрелочками и тем более кружками, ведь во всех случаях (даже с разными Деловыми центрами) направление у них одно и то же. Ищем варианты, в итоге останавливаемся на перечислении номеров через запятую и одной стрелочкой в цвет последней линии. Номера сортируем по убыванию, чтобы последней не оказалась МЦК. Почему? Потому что линии метро «важнее» чем МЦК и на них найти станцию проще, а значит лучше чтобы последняя стрелочка красилась в цвет одной из метрошный линий.

Всё это я пытаюсь вписать в формат своей икеевской рамки 70×50, а Илья в свою очередь настойчиво просит сделать набор ещё плотнее, а в идеале впихнуть указатель в две колонки. Я сопротивляюсь как могу, но потом узнаю, что в ПринтДиректе, где Илья печатал прошлый плакат, есть только форматы 3:2 и 5:4. Решив, что себе я потом сделаю отдельную версию, беру формат 5:4 и начинаю исполнять мечту Бирмана о двух плотных колонках.

Илья предлагает заверстать заголовок в колонку. Получается сильно многострочно.

Исходим из того, что потенциальные покупатели плаката в курсе как работает указатель, поэтому оставляем просто заголовки «Алфавитный указатель» и Station Index. Чтобы сравнять высоту колонок добавляем в указатель ещё одну станцию ;-) Я откладываю указатель, и решаю пока открыть строящиеся участки, что б распечатанный плакат чуть подольше побыл актуальным.

Но об этом в следующей, заключительной серии. Оставайтесь с нами!

Не знаешь что делать — уменьшай


См. «Не знаешь что делать — увеличивай»

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

Увидеть берёзу в лесу трудно, не увидеть одинокую берёзу посреди чистого поля — невозможно (не знаю почему я выбрал для метафоры берёзу, придумайте что-нибудь более удачное). Об этом стоит помнить — элемент посреди пустоты привлекает много внимания. Иногда слишком.

На этом банере небольшой логотип Мвидео на красном фоне привлекает больше внимания, чем вся композиция про скидки справа, хотя должно быть наоборот )

Резюмируем:
1) Берёте
2) Уменьшаете
3) Следите, чтобы акценты были на нужных местах
4) Готово! Вы великолепны!

2018   вёрстка   дизайн   золотые правила   совет   типографика

Не знаешь что делать — увеличивай


Давно хотел опубликовать золотые правила (я их так назвал), которые я выработал для себя, когда работал в паре местечковых глянцевых журналов в Сургуте.

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

Например, есть у тебя статья на разворот, а текста там — кот наплакал. Или есть задача сделать плакат, а иллюстрации или фото — нет. Или есть, но какая-то невыразительная. В общем, ты в затруднении, а дедлайн — завтра.

Решение такое. Берёшь чё-нидь из того что есть — заголовок, дату, невнятную иллюстрация — и УВЕЛИЧИВАЕШЬ! Прям жми в своём блядском фотошопе cmd+t, или че там у тебя, хватай курсором за уголок и резким движением отправляй мышь куда-нибудь на околоземную орбиту. Главное — не ссать. В результате у тебя получится что-то такое:

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

Примеры журнальной вёрстке. Особенно выручает когда нужно добить материал до определенного количества полос, а нечем :-)
Ну а на сайте ёбнуть в шапку огромный заголовок — вообще милое дело
Или на банковской карте )

Естественно, просто тупо увеличив что-то, ты не сделаешь хороший макет. Дальше надо найти композицию, цвета́, может добавить паттернов, деталей, переколбасить объекты между собой. Главное — это подтолкнёт фантазию и сдвинет макет с мёртвой точки. Возможно итоговый вариант вообще не будет содержать ничего гипертрофированно большого. Как я уже сказал — это рецепт на случай, если ничего в голову не приходит.

Резюмируем:
1) Берёте
2) Увеличиваете
3) Декорируете всё это дерьмо
4) Готово! Вы великолепны!

См. «Не знаешь что делать — уменьшай»

2018   вёрстка   дизайн   золотые правила   совет   типографика