Keep on botching, “designer” // Фигачь дальше, «дизайнер»

Normally, I don’t criticize other people’s work publicly. But since this advertising was shown to me without my permission, I think I have every right to criticize it. After all, no one shows an ad to get no reaction at all. So here is my reaction.


You see, how “MBA” is not in the center of the context (the lower part of the human shoulders)? The designer nailed it across the main symmetry line (the center of the face), but… in the context of the shoulders, this location of the inscription looks sloppy (more space on the right than on the left). The inscription should be moved a bit to the right, but no… keep on botching, “designer”.

— In Russian —

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

Видите, как «MBA» не по центру контекста (нижней части пояса человека)? Дизайнер зафигачил ее по основной линии симметрии (от центра лица), но… в контексте нижнего пояса это расположение надписи выглядит неаккуратно (справа больше места, чем слева). Надпись бы сдвинуть чуток вправо, но нет… фигачь дальше, дизайнер. И так сойдет. А так не сойдет. Это халтура. На этом всё.

Тренажер типографики «идеального» абзаца // Typography game

https://betterwebtype.com/triangle/

Мои результаты 4-х попыток: 58, 46, 70, 73. Видно, что веб — это чуть другая типографика, чем слайды/документы. Если бы после неправильного ответа показывалось «как надо», то цены бы не было тренажеру.

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

— English —

My results after four attempts taken: 58, 46, 70, 73. It seems that «web» has a bit different typography than slides/documents. I think that a major improvement of the simulator is to show correct examples “as it should be” after the wrong answers.

And yes, if you train using such simulator, keep in mind that you get the author’s way of judging just like in my slide trainer.

Драматургия конфликта в визуализации данных

Вводная

В драматургии конфликт — это столкновение героя и злодея. Хороший конфликт создает интерес смотреть пьесу дальше. За счет чего создает? За счет столкновения двух равных по силе соперников. Иначе интереса нет. Вы вряд ли будете смотреть футбольный матч с середины, если счет уже 9:1. Но, если счет 0:0, то почему и нет. Иными словами, когда вам становится «все понятно», то пропадает интерес. Нет неопределенности, все ясно, понятно и предсказуемо, значит скучно.

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

график 1

Сколько ни крась США в красный, но особого интереса при первичном сканировании они не вызывают. Ну тратят чуть больше других стран, но они же первая экономика в мире. А по годам «вроде бы» не сильно отличаются от других развитых стран. Зато на первый план начинает выходить Южная Африка (ZAF), но они тоже не вызывают интереса, ибо многие догадываются или могут сделать умозаключения, почему там все не так хорошо. В общем «все понятно» говорит читатель —  «в бедных странах хуже, в богатых лучше, ничего необычного» и его внимание переключается на что-то еще.

А теперь другой график с точкой отсчета от 74 лет (выбросили по сути ZAF и еще ряд других несильно развитых стран).

И тут уже США на контрасте (конфликте) с другими развитыми странами: Норвегия, Швейцария, Япония, начинает вызывает интерес. Ничего себе! Как так? Нет, серьезно, как так НАСТОЛЬКО? Почему только у них? С чем связано? Из-за чего это случилось? Что такого (не) делают другие, что у них выше ожидаемость? и т.д.

Именно на фоне других развитых стран США выглядит, как «тратят сильно больше, а ожидаемые годы жизни сильно меньше» и хочется понять, почему.

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

Дисклеймер: это пример для главы «про слайды» в книгу моего старого клиента Дмитрия Леонова.

Рисунок 1 — Исходник (по клику крупный размер)
Рисунок 2 — Лучше (по клику крупный размер)

Теперь в деталях, почему исходный слайд работает хуже

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

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

3) Ну и наконец рамочки таблицы. Посредственная верстка всегда спасается рамочками. Здесь рамочки помогают скрыть кашу, которая возникла из-за отсутствия явной визуальной структуры (см. п.1) Они отвлекают человека от текста, а должны помогать.

4) Единственный плюс слайда — это дешевизна создания оного. У тебя есть куча текста и 4 картинки. Быстро создал таблицу, рассовал объекты и вроде пристойно.


Verdana Pro и Georgia Pro

Микрософт обновила дефолтные шрифты — наконец-то Georgia и Verdanа стали хоть как-то конкуретней за счет тонкого и сжатых начертаний. Еще у них обоих появились black начертания, кому обычного болда мало.

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

Вердана 1990-х
Вердана 2017

Кажется, что это все бесплатно для подписчиков офиса 365 — я его нашел прямо в PowerPoint-е. В списке шрифтов выбираете Verdana Pro или Georgia Pro и он сам скачает. И, кажется, бесплатно для пользователей винды вообще — Микрософт ее тоже предлагает скачать через аккаунт. Для всех остальных —  за деньги.

Тренажер слайдов

Написал I-й прототип тренажера слайдов для развития глазомера.

Чтобы хорошо писать, нужно много писать и читать много хороших книг. Чтобы делать приличные слайды надо много делать самому и смотреть на чужие приличные слайды. Увы, книг с чужими слайдами не выпускают. Да и хотелось бы побыстрее этому учиться. Тренажер позволяет развить глазомер и понять основные принципы дизайна слайдов. Это не заменит практику. Но сильно ей поможет.

http://burba.pro/slides.trainer/

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

Пара ответов на Quora про шрифты, 2019

1) Как сочетать два гротеска или две антиквы
https://www.quora.com/How-do-I-get-better-at-pairing-two-serif-or-two-sans-serif-fonts-as-opposed-to-pairing-a-serif-with-a-sans-serif/answer/Alexey-Burba-1

2) Какой шрифт использовать для оформления цитаты
https://www.quora.com/What-would-be-a-good-font-to-use-to-display-a-quote-on-a-PowerPoint/answer/Alexey-Burba-1

3) Как оценить аудиторию перед презентацией
https://www.quora.com/What-are-the-ways-to-evaluate-the-audience-before-giving-a-presentation/answer/Alexey-Burba-1

Может быть перенесу сюда постами, а пока так.

CLIMB Program

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

Готовы ли они подумать вместе с вами?

Мне кажется, когда мучаешься сомнениями, сколько уместно пихнуть на слайд вот под эту встречу — полезно спросить себя: «А готовы ли они подумать вместе со мной?» Хотят ли они? Если да, то ваш удел не слайды с «картинка + 8 слов», а сложная, но понятная схема, или 4 графика, или, возможно, 10 иконок с текстом (а иногда можно и без). Нет ничего катастрофически плохого в отсутствии части визуальных «костылей», если ваши отношения с людьми уже на том этапе, когда для вас обоих важнее всего смысл.

Нужна ли схема при линейном списке?

Отвечает молодой консультант по презентациям: «Если у вас процесс из 10 последовательных шагов, то можно обойтись списком. Да, будет много текста. Но делается быстро и будет сразу понятно. А городить схему — излишнее украшательство. Вон в месяце 30 дней и все идут друг за другом, но никто почему-то не рисует календари в виде схем. Просто таблица. Ну вот и вы тоже просто списком сделайте»

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

Этой переверсткой он порадует всех вокруг. Он молодец.

Но, отмотаем время на 25 лет назад, где профессор Эдвард Тафти нарисует для компании Bose схему со стрелочками и иконками из тоже обычного линейного списка «Шаги подключения аудио-системы» (a).

Схема Э. Тафти для компании Bose, https://www.edwardtufte.com

И профессор будет тоже прав. И тоже молодец.

Возникает разумный вопрос — когда идти в сторону списка, а когда в сторону схемы со стрелочками и картинками, если у нас просто линейная последовательность?

Мне кажется, что полезно смотреть на 1) мотивацию и 2) знания людей, которые будут пользоваться этой схемой. Это два последовательных фильтра-условия осмысливания информации согласно модели ELM (b).

Любая простая визуализация (в смысле стрелочки или тайм-лайн), не говоря уже об иконках, добавляет мотивации чуть больше повтыкать в это. Есть ли мотивация читать инструкцию у человека, купившего аудио-систему? Ну, очень минимальная. Он надеется, что все само заработает. Будет ли он с радостью читать текстовый список «включи, нажми и т.д.» — с трудом. А уж если у него и знаний не хватает — не знает он, как выглядит «круглая кнопка №3 сбоку», то пиктограммы ему сильно помогут — ибо это не только мотивация, но и знания.

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

А вообще в идеале процессы компании не должны описываться в отдельных документах. Они должны быть частью самих процессов, например, набор досок в Trello.

Список ссылок

а. https://en.wikipedia.org/wiki/Elaboration_likelihood_model
b. https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=000402

Шрифты 2018 году

Куда ни глянь — везде подборки типа «ТОП лучших шрифтов», которые мне кажутся малополезными. Почему? Во-первых, для кого лучшие? Кто отбирал? По каким критериям? Регулярно вижу в одном списке Garamond и Roboto [это как «лучшие машины»: мерседес и лада калина]. Во-вторых, часто это лишь восхваление шрифта через перепечатку чужого «ТОП-листа» без какого-либо описания, кому и зачем этот шрифт имеет смысл использовать. А именно это и важно нам с вами, обычным пользователям PowerPoint-а, Word-а и Excel-а.

Поэтому ниже шрифты, которые я заметил в 2018 году. Никаких «лучшие». Просто шрифты и мое мнение о том, кому и в каких случаях они подойдут, а кому не подойдут. Возможно вам будет полезно. Да, там еще будет и восхваление шрифтов, но моими словами. Поехали.

1. CoFo Sans

Добротный современный гротеск (Franklin Gothic, 1902 — не очень современный гротеск). В меру нейтральный, но не Helvetica (1954 — тоже уже песионерка). В меру геометричный, но не Futura (1927). Очень близок к Formular (2014), но не такой грубовато-прямолинейный. Для меня CoFo Sans, кажется, пока занял место Circular (2013), которым можно просто набрать название книги на обложке, и будет все равно эстетично.

Кому подойдет: любая бизнес-тематика, т.е. все эти вещи про стратегию, ценообразование, финансы и т.д., где нужна умеренная строгость, изящность и тонкий налет инновационности. Apple или Tesla вполне уместно бы смотрелись в этом шрифте.

Кому не подойдет: детские, сказочные, хипстерские и прочие не очень sophisticated бизнес-тематики, т.е. набирать вывеску «Автомастерская Михалыча» я бы не стал. Хотя это тоже бизнес.

2. CoFo Chimera

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

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

Кому нет: всему, что не попадает выше.

3. 20 Kopeek

Смесь Никола Тесла, Harvard Business Review и Жюль Верна. Нескучный гротеск «начала 1900 годов». Техничней вековой давности Franklin Gothic и интереснее, чем технично-стерильная Ida (2017) И у него же еще и курсив прямо как отдельный шрифт.

Кому да: бизнес-тематикам, маккинзи-стайл отчетам, обзорам и исследованиям, экономическим и научным публикациям. Да, этот блог набран этим шрифтом.

Кому нет: кто хочет показать какую-то супер-инновационность, я бы даже сказал новаторство. Тут шрифт спасует. Он скорее про стимпанк изобретателя, а не про AI программиста. Это больше Никола Тесла, чем Илон Маск.

4. AntiQuasi

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

Кому да: кто не боится быть смешным, сохраняя достойное спокойствие; вывеска уютного кафе в центре города; ателье по пошиву костюмов, но без «гладим механическими утюгами 1800-х годов»; что-то продвинутое, но без пафоса;

Кому нет: кому надо добавить официальности, нарастить дистанцию от читателя. Антиквази будет наоборот работать на сближение.

5. Spectral

Скорее это просто хороший шрифт из бесплатных с нормальной кириллицей от Ильи Рудермана. Как текстовый шрифт — трудновато читать в совсем мелком размере. Общее впечатление: какой-то колкий, но статный. И вроде бы в старину, и в тоже время что-то современное есть. Это одновременно его выделяет для кого-то, и отталкивает от других. Но вот заменить им Times New Roman по-моему стоит.

Кому да: тем, кто про изящность и технологичность; каким-нибудь науч-поп журналам/порталам, книжному магазину; допускаю, что даже какой-нибудь журнал про моду вполне может его использовать.

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

6. Circe Slab

Ну наконец-то Александра Королькова с командой сделала это. Прикольный брусковый шрифт в массе начертаний. Сильно современней всяких Officina, Unit, Museo и даже Archer. Это такой образованный мебельных дел мастер — ну там джаз-музыканту сделать студию на заказ.

Кому да: мебельному магазину upper-medium класса
Кому нет: магазину с ручным изготовлением мебели на заказ из дуба королевских лесов Великобритании. Им нужен Garamond какой-нибудь.

7. IBM Plex Serif

Бесплатный шрифт на Google.Fonts. На мой непрофессиональный взгляд — неплохая кириллица. Т.е. я не вздрагиваю от букв Л, К, Ж. Достоинство шрифта в том, что он пока незаезжен плохим дизайном. Подойдет всем, кому от вашего текста нужна эмоция статности, вполне такой себе серьезности, может быть даже въедливости.

На слайдах в действии

Где покупать/качать:

1. СoFo Sans — contrastfoundry.com/fonts/sans
2. СoFo Chimera — contrastfoundry.com/fonts/chimera
3. 20 копеек — https://yurigordon.com/en/shop/fonts/20kopeek
4. AntiQuasi — yurigordon.com/en/shop/fonts/antiquasi
5. Spectral — type.today/en/spectral, fonts.google.com
6. Circe Slab — www.paratype.ru/fonts/pt/circe-slab
7. IBM Plex Serif — fonts.google.com

В догонку еще несколько шрифтов за 2018 год:
1. Amalta — анти-Химера шрифт — type.today/en/amalta
2. Graphik — свежий современный гротеск — type.today/en/Graphik
3. William — свежий Caslon — typotheque.com/fonts/william_text

Ну и behind-the-scenes, что сделал пока писал пост, но не нашел куда приткнуть:

Наложение Spectral на учебник геометрии
с шрифтом Петра 1
Здесь же, AntiQuasi

Когда равнять слайды слева, а когда по центру

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

Межстрочный интервал на слайдах

Правильный межстрочный интервал текста повышает читаемость слайда. Но на слайдах тексты скачут — от небольших (10-15 слов на слайд) до больших (4 увесистых абзаца). И тут наиболее частая рекомендация «ставьте межстрочный интервал в 110% — 135%» начинает сбоить. Ее написали для условной ситуаций, где тексты на весь экран/страницу. Соответственно, для неравномерных слайдых текстов уже не работает. Что делать — описал ниже из своего опыта.

Разумеется все это принцип, а не правило. Если чувствуете, что не нужно играть интервалом — не играйте.

Ну наконец-то кто-то поюморил на тему «правил» типографики

Читать типографическим дизайнерам. Хотя и дизайнерам тоже можно.

https://medium.com/@kapanaga/что-запрещено-в-типографике-db44c294d642

Если вы недизайнер, но полезете туда, то вот вам вводная. Бюро — это умелая дизайн-студия, которая издает много неплохого обучающего материала по дизайну и верстке.

Но… Вы же понимаете, что всегда есть какое-то «но». У Бюро —  это «но» в том, что их коммуникация какая-то, как мне кажется, очень «powerful».  Т.е. они вроде бы заявляют «принципы», но описывают их так и следуют им так, что их читатели/студенты, возможно, воспринимают это, как «правила».

А у правил есть недостаток. Они негибкие. Но есть и достоинство — с ними, наверное, жизнь становится как-то проще. Кому-то проще принимать дизайн. Кому-то проще делать дизайн.

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

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

Что-то подобное уже было в типографике (правда, явно с более позитивной развязкой), цитирую wikipedia:

Несмотря на то, что «Новая типографика» и сейчас остается классической работой, сам Чихольд постепенно отказывался от своих жестких модернистских взглядов. В 1931 году он выпустил лиричный и нежный шрифт Saskia. В 1932 году Чихольд начинает набирать основной текст книг классическими шрифтами с засечками. Постепенно он склоняется к классическому стилю в типографике. Впоследствии Чихольд осудил свою «Новую типографику», как чересчур максималистскую. Модернизм (видимо, его ранний, авангардный период) Чихольд оценивал как авторитарный, по сути фашистский стиль.

Чихольд страдал потому, что не было интернета 🙂 Никто ему быстро не написал, что он, возможно, чуток перегнул.

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