9 заметок с тегом

дизайн

Пять сотен агитматериалов без армии дизайнеров за три недели

11 декабря 2017, 15:11

О кампании

Летом 2017-го работал в кампании по выдвижению демократов в муниципальные депутаты в Москве. Создали и поддерживали удобный сайт для кандидатов, который помогал политическим новичкам преодолеть страх перед бюрократией и вести свою кампанию по всем правилам. Штаб координировал порядка тысячи кандидатов. 266 из них стали депутатами. Подробнее в большом интервью Максима Каца на Виладже. Или у него в блоге.

Описание задачи

В один прекрасный момент пришла пора агитировать. Наши кандидаты были в каждом районе Москвы, а их 125. В каждом районе по несколько округов. Всего было 295 округов, где были наши кандидаты. Один округ равно одна команда. Так вот, для каждой команды нужно было сделать большую листовку, газету, открытку и плакатик в подъезд. Ну не для каждой, а только тем, кто изъявил такое желание и собрал деньги на печать. Итого получилось столько агиток:

Конечно, кандидаты сами могли дизайнить себе агитки, но получалось не очень-то хорошо. «Лучшие» макеты вешали над моей головой:

Технологичное решение

Работало это так:

  1. Кандидаты в личном кабинете пишут контент и загружают фотки, глядя на превью макета.
  2. Кандидаты собирают деньги на печать. Это отдельная большая тема, её я касаться не буду.
  3. Корректор в админке правит тексты кандидатов.
  4. Когда есть весь контент, деньги на печать и выходные данные от типографии, бот в Телеграме говорит дизайнеру, что можно начинать делать макет.
  5. Дизайнер из специальной таблицы выгружает архив с фотками и XML-файлом.
  6. Импортирует в заготовленные шаблоны в Индизайне.
  7. Загружает макет в PDF в специальную папку на Гугл Драйве.
  8. Бот бегает по папке, ищет новые макеты и уведомляет об этом корректора. Корректор присылает правки в Телеграм дизайнерам.
  9. Дизайнер вносит правки, перезаливает макет на то же место.
  10. Корректор в админке ставит галочку, что все норм.
  11. Бот отправляет кандидату макет на утверждение.
  12. Кандидат ставит галочку, что все норм.
  13. Дизайнер загружает печатную версию макета в специальную папку на Гугл Драйве.
  14. Отдел производства видит у себя в таблице ссылку на макет и отправляет в печать.

А можно было просто нанять в штаб армию верстальщиков =)

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

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

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

Все макеты дизайнеры хранили на Яндекс.Диске, чтобы каждый мог по-быстрому что-то поправить в чужом макете. Пару раз пригодилось.

В каждой команде было разное количество кандидатов. Поэтому и шаблонов в Индизайне было на разное количество. В зависимости от количества кандидатов макет был на А3 или на А4. На пятерых, на четверых, на троих печатали на А3. На двоих и на одного — на А4. Еще листовок было два типа: для тех, кто всей командой шел от партии «Яблоко», и для всех остальных. Итого десять шаблонов.

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

Файлы назывались во всей системе по единому принципу, чтобы не запутать ботов и людей. Пример: Куркино1_КA3_3ч_м1.indd. Расшифрую: Куркино, округ №1, Квадрокоптер (кодовое название листовки), формат А3 (важно для отдела производства), на троих кандидатов (важно дизайнеру, чтобы знать какой шаблон брать), тип шаблона №1 (значит, яблочная команда, просто так договорились).

С таким названием и приезжал архив с фотками и XML-файлом. Сам XML-файл выглядел примерно так:

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

Вернемся немного в начало. Я создал шаблоны в Индизайне, затем затегал нужные фреймы в панельке Structure. Потом экспортнул пустой XML со структурой и отдал его прогерам, они возвращали его уже с контентом.

Кстати, XML-шаблон был один на все типы шаблонов, по количеству кандидатов. Если макет был меньше, чем на пятерых, то лишние затеганые фреймы просто валялись на полях и никому не мешали. Так выглядела структура в Индизайне.

Например, для имен и фамилий я не тегал фрейм каждого кандидата. Тегнул первый, остальные просто связал. А в стиле сказал, чтоб каждый новый абзац (имя или фамилия) начинался с нового фрейма. И попросил прогеров отбивать абзацы энтером. Так было проще всем.

Страница создания листовки кандидатами. Слишком длинная, чтоб вставить её в этот пост. Там внизу еще адская система согласования текстов в команде. Листовка-то командная. Выход за размер или недобор по размеру — большая проблема в агитках на много человек. Тут помогало технологическое решение, которое чётко объясняло новичкам, как писать хорошие тексты, и не давало им выйти за лимиты.

А так выглядело общение с ботом:

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

Красота:

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

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

Визитки

Создание визиток для кандидатов было вообще полностью автоматизировано. Они просто скачивали готовый PDF из своего кабинета и сами шли печатать. Я сделал только шаблон. Шаблон не простой, а пригодный для печати. Мы не нашли ни одного плагина, который бы умел генерировать на сервере PDF для печати. То есть с припусками по 5 мм и метками реза. Но они же нам нужны! Пришлось просто заверстать их прямо в макете. Да, в типографии не могли их отключать при необходимости, когда делали спуск полос. Ну и что, это не так уж часто нужно было. Всего один типограф позвонил выразить недоумение.

Остальное боги-прогеры.

Выводы

Такая система сократила время создания макета во много раз. Точно сказать невозможно, это зависело от количества правок, как корректорских, так и кандидатских. Всего на кампании было четыре дизайнера. Я и три девушки, Люба и две Александры, которые помогали пару недель в самую жару, во время производства листовок и газет.

А все началось с того, что Кац повелел делать макеты автоматически, чтобы не нанимать армию дизайнеров. Несколько дней он получал ответ, что это невозможно, так как никто не знал, как это должно работать. В итоге первый тестовый XML-файл вышел из Индизайна после получаса гугления. Дальше колдовали прогеры.

По такой системе на создание одной листовки у дизайнера уходило примерно 5 минут, газеты — 15—20. Дальше все зависело от количества правок и хотелок кандидатов (логотип побольше, всё такое).

Пользуйтесь!

Стенд про транспорт в Питере

2 января 2016, 17:29

Напротив Гостинного двора обнаружил такой вот интерактивный стенд.

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

Итак, на первом экране мы видим несколько маршрутов автобусов и троллейбусов, и через сколько они подъедут к остановке. Стоит заметить, что стенд стоит на приличном расстоянии от остановки ОТ. Время прибытия показывает довольно точно, я проверял.

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

Экран покрупнее.

Обратите внимание, что не всё переведено на английский. Иконки внизу только на русском, хотя там много полезной информации.

Нажав на иконку Карта города можно построить маршрут. С трудом, но можно. Ткнул на Петроградку.

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

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

Из реально полезного есть карта метро и график развода мостов. А сбоку два USB порта, молодцы.

Возможность поговорить с кем-то внутри стенда не стал (есть кнопочка под краном).

Нумерация мест в двухэтажном вагоне

4 апреля 2015, 1:23

Почему так? Кто знает?

Двухэтажный поезд Москва—Питер.

Чем старше…

17 марта 2015, 0:31

Чем старше становишься, тем больше делаешь резервных копий
Когда верстаешь, например, буклет почти каждый день сохраняю новую версию. Легко можно вернуться к определенному этапу. Когда клиент, например, захотел вернуться к первой версии обложки =) Ну и помогает если вдруг что-то случится с текущей версией, с незначительными доделками можно восстановить её из предыдущей.

Чем старше становишься, тем чаще делаешь бэкапы
Завел специально отдельный внешний диск, копирую туда все рабочие файлы и фотки раз в два-три месяца. Ну мало ли, крякнет основной диск. Следующий этап, наверно, рейд массив (или как его там?..)

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

Чем старше становишься, тем меньше экономишь на образовании

Чем старше становишься, тем более безразличен к говнодизайну вокруг, но более внимателен к своему
«Иди и сделай лучше» — говорит мне моя совесть. Правда, не всегда её слушаю…

Что ещё?

«Старше» я имею ввиду в профессиональном и личностном плане, это не про возраст.

Барселона. Находки

10 октября 2014, 1:12

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

Светофорные фазы удобно рассчитаны, не приходится долго ждать зелёный свет.

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

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

На маленьких площадях можно попить водички, например. Таких площадей достаточно много, кругом скамеечки, красота. Там устраиваю мини ярмарки и другие мероприятия.

Такие вот таблички на домах не броские.

Татарка

Большинство входных дверей с ручкой по середине.

Футболист, который в прошлой жизни был солдатом. Стадион Барселоны.

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

Стоят на конечной остановке.

Разовый проезд очень дорогой, 2,15 евро. Лучше купить проездной Т10. На десять поездок, на все виды транспорта в пределах Зоны 1 (почти весь исторический центр). И все пересадки в течении 75 минут считаются как одна поездка, очень удобно. Вход в автобусы через переднюю дверь, но турникетов нет, только валидаторы. Можно легко проехать без билета, вот только штраф в 100 евро отбивает желание.

Велодорожку защищают букашки.

Все такси в городе в цвет букашек.

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

Дизайнерский люк.

Инвалидам приятно. Для них, кстати, часто встречается отдельная навигация.

Почтальон.

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

В Кафедральном соборе Барселоны электрические свечки. Кинул монетку в автомат — свечка зажглась. Монетка номиналом побольше — 5 свечек зажглись.

Даже с колечком.

Будет не больно.

Искусство.

В первой же кафешки после самолёта.

Типичный лифт в Барселоне. И для слепых удобно. Первый этаж, где вход, называется «РВ» (что это значит?) Второй этаж — «Е» (тоже не понятно) Нумерация в нашем доме шла только с третьего этажа, он назывался «1». Но квартиры были и на этаже «Е».

Креатифф

Красивый плакат

Не плавно подошли к общественному транспорту. Такая вот штуковина на остановке автобусов, чтоб мудаки не парковались.

Щит с расписанием маршрутов. Выглядят они по разному, потому что компаний-перевозчиков несколько, ну я так понял. Зато все вписываются в одинаковые форматы.

Покрупнее

На жёлтом фоне номера других маршрутов, куда можно пересесть.

Маршрут прямо поверх карты города. Удобно.

Табличка на автобусной остановке с номерами маршуртов. «D» — тут, видимо, самый главный. «N» — ночные автобусы. Что значит телефончик у красного номера не понял.

Схема маршрутов. Справа в углу схемка отдельно взятой площади Испании. Нужную остановку находишь за секунду.

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

К автобусу Н12 туда. Навигация на тротуаре.

В метро стильно, на чёрном фоне. Да и стены на станциях часто тоже черные — не круто, и так под землёй.

Как создаются «штучки»

11 января 2014, 21:52

Снял прекрасный ролик, как дизайнер Диляра Закирова делает милые штучки. Текстиль плюс графика.

Три дизайнерских богатыря

30 сентября 2013, 21:11

Источник Не Указан организовал крутейший мастер класс. Прискакали Иван Богданов, Вова Лифанов и Андрей Кожанов и рассказали и показали, как они работают, жарили мозг. Вот, что увидел мой телефон.

Всем придумали ники

Ваня буянил

Питаемся

Сказал Вова

Три команды получили бриф и приступили к работе. А придумайте-ка банан с начинкой!

Вова тестирует банан

Команда Вовы

Команда Андрея

Размер не важен

Визуализируем концепции в студии «Шишки»

Часть проекта Ваниной команды

Перекур

Естественно команда Вовы победила =)
Отмечаем победу!

Было супер-пупер круто!

Выставка «Города для людей» Городских проектов Варламова и Каца

21 ноября 2012, 0:45

Рисовали мы с Кацем картинки для выставки, рисовали, рисовали, много рисовали, ночами рисовали, я в Питере он в Москве. Хвала Скайпу. И вот, я решил поехать посмотреть на картинки в живую, да с заказчиками познакомиться.

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

Шикарный интерьер музея архитектуры имени Щусева

Плакаты отлично смотрятся

Самый умный плакат

Картинки для стенда про городские туалеты

Стенд про людей гуляющих с колясками

Стебный стенд. Тот кто знает поймет, то, о чём речь идет.

А вот сами знаете кто

Кац машет руками :-)

Варламова покажут по телевизору

Умный стенд тоже покажут

И красивые открытки тоже

А вот и телевизоры. Крутили классные ролики о том, как можно сделать город живее

Шикарный макет

Разглядывают стенд студии Лебедева, разумеется, стенд в духе Артемия

Присел отдохнуть. Весь день гулял по Москве

Плакат с человеком похожим на мэра Москвы виден из всех щелей

Кажется, этот плакат очень популярен на выставке

Прекрасная женщина...

тоже интересуется этим плакатом. Тем временем на фоне Варламов, Кац и Алексей Навальный позируют для фото на память

А вот и он, сами знаете кто

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

Немного заигрался с Фотошопом

Вот и состоялось открытие

Очень круто работать с Городскими проектами, я прям прозрел пару раз от иллюстрируемой информации.
Рекомендую побывать на выставке, да послушать лекции…

…и почитывать этих товарищей:
Илью Варламова
и Максима Каца

Есть те, кто так не делал?

4 июля 2012, 23:46

Очень часто встречающийся прием в последнее время. Маска из знака или логотипа, а внутри разные картинки. Красиво, что сказать…