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

бюро горбунова

Школа редакторов. Вторая ступень

Пару дней назад опубликовали финальный рейтинг второй ступени Школы редакторов нашего набора. Не верится, что прошли еще три месяца учебы в Бюро Горбунова. Я финишировала на 11 месте в рейтинге. И пока воспоминания свежи, я расскажу о том, как проходил подъем на гору знаний и какие задания мы делали.

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

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

Задание 1. Страница о компании

Первым заданием было написать и сверстать страницу о компании. На выбор было два варианта. Я решила писать про агентство праздников «Тимуровцы».

Здесь нужно маленькое отступление. Чтобы обсуждать работы, Максим Ильяхов завел специальный чат. Он пригласил туда выпускников прошлых лет и разрешил спрашивать там совета. И прекрасные девушки Алина Мишуренко и Оля Зонова предложили присылать свои работы до дедлайна на разбор. Я очень рада, что мне повезло послушать их мнение о первой версии моей работы в первом разборе. Благодаря девочкам я доработала страницу и на первой неделе получила от Максима комментарий «Достойно, красиво, четко».

Слева результат первой недели, оценка — 4,5. Справа вторая итерация, оценка 4,5. Страницу верстала в html

Задание 2. Принципы верстки

Мы верстали страницу «О себе». Эту работу оценивал Михаил Нозик. Он завел отдельный чат в Телеграме, где мы могли публично скидывать свои работы и получать ответы. Еще можно было писать на почту. Я писала и так, и так.

Ничего супер-крутого придумывать не требовалось. Нужно собрать крепкую страницу из заголовка, текста и фотографии. Главное — придерживаться всех принципов верстки. Кажется, это просто. Но нет. Я хотела облегчить себе жизнь и просто скопировать подходящую работу (да, здесь это поощряется). Честно, я никогда еще так не ошибалась: скопировать верстку трудно.

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

Слева результат первой недели, оценка — 4,25. Справа результат второй недели, оценка — 4,75. Задание делала в Фотошопе

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

Задание 3. Переговоры с клиентом. Понимание задачи

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

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

Я писала письмо с извинениями и кратким пониманием задачи (за основу взяла шаблон от Максима Ильяхова). Отметила, что мы могли что-то не понять, поэтому предложила пообщаться еще раз. Правда, указала в понимании задачи сроки выполнения работы, а вот вопрос с ценой оставила непроговоренным — это главная ошибка.

Итог задания: подготовка к переговорам — 4,75, понимание задачи — 3,75.

Задание 4. Информационный текст для сайта

В ближайшие несколько недель нам предстояло заниматься одной статей. Сначала написать ее с Максимом Ильяховым, потом сверстать с Михаилом Нозиком, а потом сделать html с Юрием Мазурским. Суть задания — сделать страницу, которая поможет развенчать мифы и успокоить потенциальных клиентов. Я решила бороться с «уткой» про овечий грипп, от которого умирают люди. Дополнительно в рамках этого задания нужно было сделать тизеры для соцсетей.

Оказалось, что найти годные исследования про шерсть не так просто. Везде горе-копирайтеры переписывают одну и ту же воду про то, что шерсть полезна. В итоге я начала уже делать другую (откровенно слабую идею), но в последний момент нашла данные. Срочно переделывала, чтобы успеть прислать работу Алине и Оле на разбор.

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

Слева результат первой недели, оценка — 4,25. Справа результат второй недели, оценка — 4,5. Страницу верстала в Фигме

Задание 5. Верстка многоэтажной веб-страницы

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

Пример из совета Михаила Нозика. Слева модульная страница, справа текстовая

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

Слева результат первой недели, оценка — 3,5. Справа результат второй недели, оценка — 4,0. Все делала в Фигме

Задание 6. HTML-верстка многоэтажной веб-страницы

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

Критериев два: соответствие макету и гигиена. Соответствие макету нужно проверять с помощью расширений Pixel Perfect. А гигиена — это чистый код. Например, нельзя использовать br br для абзацев или margin‑left: auto; margin‑right: auto; вместо margin: 0 auto; Еще Юрию почему-то не нравятся спецсимволы html для неразрывных пробелов (т. е. буквенные коды, которые дает типограф). Я так и не поняла, почему: объяснение «все эти символы можно поставить обычными символами, а не энтити-кодами» мне ничего не объяснило.

Итог задания: первая неделя — 4,0, вторая неделя — 4,5.

Задание 7. Интерактивная статья

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

Я решила продвигать компанию «Тесла», которая запускает в России продажу «Пауэр уолл» — домашней батареи, которая заряжается от солнечной панели или городской электросети и питает дом днём и ночью. Сейчас «Тесла» хочет заложить фундамент для общения с будущими домовладельцами: объяснить им, почему важно делать дома энергонезависимыми и энергоэффективными. Для этого я придумала тест, который расскажет о достижениях в поиске альтернативных источников энергии. Спойлер: некоторые варианты очень необычные :)

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

Итоговый вариант теста. На первой неделе я получила 3,5. На второй неделе — 4,5 и комментарий «Замечательно. Интересно, красиво и познавательно. Тесла уместна». Верстала в Фигме

Задание 8. Верстка интерактивной статьи

Для Михаила Нозика я сделала сокращенный вариант этого же теста. Вот как изменился тест на второй неделе:

Слева результат первой недели, оценка — 3,75. Справа результат второй недели, оценка — 4,05. Все делала в Фигме

Задание 9. Выбор темы диплома

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

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

  1. Нужно придумать свой проект. Мысль о том, что ты не планируешь сейчас что-то запускать, не допускается. Отсюда куча мертворожденных проектов, создатели которых с первых строк понимания задачи знают, что только зря заняли место на Гугл Диске.
  2. Анонс проекта нужно делать в Фейсбуке. Никто не спрашивает, хочешь ли ты постить что-то на своей личной странице  — альтернатив тут нет. А ведь на нашем потоке даже были ребята, которым договор запрещает в соцсетях рассказывать о проектах не их компании.
  3. Кроме идеи нужно сразу продумать продвижение и способы монетизации. Напомню, что в программе у редакторов нет ни маркетинга, ни других дисциплин, которые в этом помогут. Наверное, предполагается, что каждый редактор должен сразу в этом разбираться, но — сюрприз — это не так. Как по мне, требовать знание того, что не преподавали — сомнительная практика.

В общем, как правильно сказал в своем блоге Дмитрий Сухотский, «в этом задании есть польза, но соус у нее вышел противным». У меня остался какой-то осадок.

Задание 10. Промостраница

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

Для страницы я решила не изобретать велосипед и четко следовать структуре промостраницы из роликов Максима Ильяхова. В итоге потратила на задание в два раза меньше времени, чем обычно. На второй неделе исправляла страницу минимально. До комментария Максима мне почему-то не пришло в голову, что некоторые мои иллюстрации хоть и наглядно показывают свойства продукта, но создают не то настроение. Зачем человеку смотреть на воров в своей квартире? Поэтому на второй неделе работала над этим.

Слева результат первой недели, оценка — 4,5 и комментарий «Вери гуд. Всё по делу, прямо образцово». Справа результат второй недели, оценка — 4,5 Все делала в Фигме

А вот так Максим посоветовал сделать макет не таким душным. Сразу стало свободнее — магия.

Задание 11. Интерфейс мобильного приложения

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

Интерфейс мобильного приложения. Оценка 3,0. Делала в Фигме

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

Итог

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

Вообще под конец второй ступени впечатления смешанные. Школа сдержала обещание — дала кучу знаний и навыков. Я чувствую, что многому научилась за время учебы и браться за новые задачи буду гораздо увереннее. Это именно то, за чем я шла в Школу. И я бы не задумываясь прошла этот путь снова.

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

Советы студентам

Ну и еще немного рекомендация и полезных ссылок.

  • Из инструментов мне пригодились Фотошоп, Фигма и Саблайм Текст (для html). Теперь я бы из этого списка смело выкинула Фотошоп и все делала в Фигме. Несколько заданий однокурсники делали в редимаге или тильде — кому что ближе.
  • Чтобы хорошо сделать задание, смотрите разборы прошлых лет и читайте каналы преподавателей. Вебинары с разборами можно посмотреть на Youtube-канале Максима Ильяхова. «Пиши, соблазняй» — канал Максима Ильяхова, «Нозик скриншотит» — канал Михаила Нозика, «Бирман посмотрел» — канал Ильи Бирмана. Свои каналы с разборами есть и у других преподавателей, но я в них не заглядывала, поэтому советовать не буду.
  • Проверяйте все работы по чек-листу редактора. Кстати, я делала его конспект — можно скачать pdf и распечатать. Может быть, кому-то будет удобнее.
  • Показывайте до дедлайна свою работу Михаилу Нозику. Он быстро отвечает и советует, что исправить. Постарайтесь показать первую версию работы как можно раньше.
  • Html нужно верстать только Pixel Perfect. Используйте расширения для браузера (для Firefox, для Google Chrome), чтобы проверить свой макет. Иногда можно прямо в верстке исправить ошибки макета, но тогда нужно в коде написать комментарий, что и почему вы изменили.
 12633   2020   бюро горбунова   план побед   портфолио   рефлексия   школа редакторов

Школа редакторов, первая ступень

Прошло уже две недели, как я учусь на второй ступени Школы редакторов, и я наконец собралась с духом, чтобы рассказать о первой. Она длилась четыре месяца. За это время я прочитала тонны лекций и советов, выполнила 14 заданий, сдала 40 тестов и сделала курсовую работу. Об этом и расскажу в этой заметке.

Сразу отмечу: информации о школе много и без меня. Я не буду стараться открыть Америку. Хочу просто рассказать, как это было у нас, что понравилось, а что не очень.

Так выглядел мой сертификат об окончании I ступени, пока я не отказалась идти на III ступень, а бюро за это не лишило меня сертификата. Рядом с каждой дисциплиной посчитала свои результаты

Вступительное задание

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

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

Учеба

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

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

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

Тесты

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

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

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

Задания

Задания — самое интересное на первой ступени. Они оцениваются по дедлайну (некоторые мы оценивали друг у друга, но в рейтинг это не идет), но все равно это отличный опыт. Я советую изучить опыт студентов прошлых наборов, чтобы учесть их ошибки.

Ниже расскажу про задания по отдельным предметам.

Управление и результаты

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

Моя осьминожка. Она сильно отличается от той, что я нарисовала за 9 месяцев до этого: во-первых, стала оценивать себя иначе, а во-вторых, рисовала ее сама в Иллюстраторе, а не пользовалась сервисом. Кстати, Иллюстратор я открыла первый раз :)

Текст и редактура

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

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

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

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

У меня получилась такая промостраница. Верстала в редимаге, на больших разрешениях немного «едет»

Верстка и прототипирование

Мы делали два задания: верстали свое резюме и портфолио. Резюме можно было сверстать на любом конструкторе, а портфолио только в html. Я и то, и другое верстала на Bootstrap.

Интерфейс и информация

Было три задания: мы улучшали формы, таблицы и графики.

Задание на формы. Слева — исходный вариант, справа — то, что у меня получилось. Рисовала в Фигме

Переговоры и отношения

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

Советую подготовиться к переговорам, посмотреть разборы и продумать, какие условия вы можете предложить.

Курсовая работа

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

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

За курсовую я получила 355 баллов из 500 (самый высокий балл — 465, самый низкий — 245). Убедилась, что теория без практики мертва: старалась применять все изученные принципы, но все равно сделала не так хорошо, как хотелось.

Оценки за мою курсовую работу

Рейтинг

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

Я начала на 24 месте, долго плавала между 17 и 20, а закончила на 29 месте и прошла на вторую ступень.

Мой рейтинг на первой ступени. График с сайта «Кто студент»

Идти или не идти в школу

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

Польза учебы очевидна:

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

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

Школа для тех, кто хочет учиться. И я продолжу на второй ступени :-)

 1700   2020   бюро горбунова   план побед   рефлексия   школа редакторов

Чек-лист для редактора

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

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

 711   2019   бюро горбунова   конспект   редактура   школа редакторов

Плакат о правах жильцов. Вступительное в Школу редакторов

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

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

Оценивать работу будут по 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 месте.

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

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

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

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

 172   2019   бюро горбунова   верстка   школа редакторов

Типографика и верстка

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

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

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

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

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

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

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

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

нет: ○ ○ ○ ○ ○ ○ ○

да: ○ ○ ○ — ○ ○ ○ ○

Интерлиньяж

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

Правило:

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

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

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

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

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

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

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

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

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

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

Заголовок

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

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

Текст

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

Иллюстрация

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

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

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

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

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

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

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

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

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

Подпись

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

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

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

Гиперссылка

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

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

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

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

Модули

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иллюстрации

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

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

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

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

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

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

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

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

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

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

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

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

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

Списки

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

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

Таблицы

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

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

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

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

Лента

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

Плитка

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

Фоторама

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

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

Рубрикатор

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

 73   2019   бюро горбунова   верстка   книги   конспект