Обзор книги Тафти «Visual Explanations». Семь правил, которые сделают дизайн лучше.

Смотреть на Ютубе

Смотреть на Дзене

Смотреть в ВК

Смотреть на Рутубе

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

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

Люди покупают серию кукол на Etsy.com по преордеру за $200 из-за того, что у них вручную нарисованы румяна и блики.

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

Мы с бюрошными челами сделали плакаты по эргономике. Отрисовывали схемы в одном масштабе и двигали по десятым долям пикселя стрелки, чтобы они самым кончиком втыкались в шкафы и стулья.

Теперь вы можете повесить на стену не стоковый паттерн с вб, а сверстанные с любовью плакаты.

Адаптация книги это не просто перевод. Некоторые книги надо перевести так, чтобы не поплыла их верстка. И это вопрос не эстетики, а функциональности.

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

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

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

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

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

И теперь методичка, из-за которой все буквы написаны, а картинки подготовлены:

Тут есть 3 проблемы:

1. Начало описания схемы и ее изображение находятся на разных разворотах.
2. Чтобы разобраться где какой элемент, придется сначала переворачивать туда-сюда страницы, а потом туда-сюда прыгать глазами с текста на плотную картинку.
3. Бессмысленные ссылки на изображения.

Почему ссылки бессмысленны? Потому что они сделаны по правилу «ссылка на изображение, а потом само изображение». Но это шаблон. Т.е. он нужен, чтобы студенты успевали в последний день сделать курсовую, а не занимались ее оформление еще пару дней после срока сдачи.

Вместо подписи к схеме «Рис. 3.3» можно было бы подписать «Схема высокочастотного усилителя мощности». Бай зе вей, «рис.» — идиотское сокращение, ровно настолько же, насколько идиотское английское «fig.»

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

Вместо «Рис. 3.2» просто пишем «Структурная схема ВЧ блока». И все. Избавились от идиотского сокращения, и от идиотской ссылки на изображение, которое стоит на строчку ниже.

А теперь приготовтесь. Переходим к вкусностям.

Кто самые ленивые люди на планете? Конечно, студенты.

А кто самые несконцентрированные люди на планете? Конечно, «Дети ТикТока».

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

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

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

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

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

Вот что я сделал. Это разворот А5 книжки. У методичек сгиба практически нет, но все равно чисто для пробы убрал текст от сгиба.

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

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

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

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

А еще при таком оформлении сложно закопать пиздеж, что тоже может быть полезно.

Осознанное отображение информации это про честность, аккуратность, ясность, ответственность и уважение к читателю.

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

Вообще я это сделал ради иллюстрации полезного принципа, а не чтобы в МАИ переделали все методички. Но про реализуемость скажу.

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

Если методичка предполагает схему на каждой странице, то можно сделать ее формата А4, тогда большие схемы тоже влезут на разворот А4.

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

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

А потом у людей появился компьютер с Вордом и возможность создавать свои веб-странички на «народ дот ру».

Когда я бегал за лягушками в плаще князя Владимира и кинжалом Маугли, которые мне сделал дед, в вебе был бардак с текстом. Ширина строки была равна ширине экрана, абзацы отбивались одновременно красной и слепой строкой, картинки обтекались текстом, а по книжной привычке люди верстали текст в распорку (выравнивание по ширине, justify)

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

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

Те, кто знаком с версткой текста, просто ставят табу на сложную типографику в вебе. А многоколоночная верстка с ровными краями это сложно.

В газетах колонка текста всегда одного размера, поэтому текст можно упихнуть в прямоугольную колонку красиво. Если какие-то слова мешают красоте, то применяют редакторские приемы.

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

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

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

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

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

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

Чисто ради эксперимента я вставил в классический шаблон ворда на страницы А5 полный текст «Войны и мира». Текст в распорку занял 1250 страниц, а текст с рваным правым краем — 1272. Книга стала длиннее почти на 2%, зато на каждой странице есть абзац с рваными ритмом и иногда коридорчиком.

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

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

В ЦСС появились свойства, которые позволяют расставлять переносы в тексте, следить за краем текста и обрезать «коробку», в которой находятся литеры букв.

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

Текст в распорку

Добавляем строчку hyphenate: auto, которая автоматически расставляет переносы по словарю. В Хроме пока нет поддержки других свойств, но скоро можно будет указать: ограничение на количество переносимых символов; зону переноса, попав в которую текст перенесется; максимальное количество последовательных переносов.

Уже сейчас:

Кегельные площадки

Когда мы задаем font-size, то на самом деле задаем размер площадки, внутри которой рассчитывается размер шрифта. Из-за этого возникают проблемы с расстановкой расстояний и выравниванием.

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

Теперь «поломанный» контейнер это норм, в ЦСС появилось экспериментальное свойство, которое позволит настроить такое же поведение.

leading-trim: both;
text-edge: cap alphabetic;

Ровно из-за этих же контейнеров текст иногда плохо встает в кнопки и инпуты по вертикали:

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

Разбалансированные заголовки

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

Я уже говорил про то, что можно контролировать сирот с помощью orphans, а можно сказать тексту text-wrap: pretty; На сайте W3C сказано: «The pretty value is intended for body text, where the last line is expected to be a bit shorter than the average line». Я немного потыкал и иногда получается, что свойство убирает много висячих предлогов, а не только убирает вдов.

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

Так глядишь, в ГОСТы добавят требования, чтобы была включена галочка на переносе слов.

Андрей Андреевич и синьор Бацыла выдали авторитетное мнение.

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

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

Да и у меня в инвентаре нет бафнутого мозга, чтобы с серьезным лицом писать про рамки нормальности в обществе, роль государства или отдельного человека и прочие неподъемные темы.

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

С того времени я так и не понял что плохого в рекламе выборов, казино или техники не от Эпла.

Я читал ветки комментариев, спрашивал людей, но понравившегося ответа не нашел. Обычно говорят:
1. «Ну бля, чувак жопу продал»
2. «Он нас обманул, а мы ему верили»
3. «А представь, что твоя мама…»

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

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

И эти отношения мне до какой-то степени понятны, но совершенно не нравятся

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

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

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

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

В последнее время какая-то реклама стала считаться «нормальной», все меньше людей, которые ставят дизлайки просто за наличие рекламы.

А какая-то реклама все же остается «ненормальной». И вот про нее мне как раз интересно.

Для меня имеет смысл рассматривать такую рекламу в контексте аудитории. Если среднему зрителю за 25, то ему можно более элегантно передать мысль:
«Смотри, есть вероятность, что уволившись с завода, я смогу чаще выпускать видосы и они даже могут быть интереснее и качественнее, чем сейчас. Все что тебе надо, это смотреть, нет ли в конце поста надписи „#нативнаяинтеграция“. А в начале каждого видоса высматривать в левом нижнем углу плашку со словом „реклама“».

Владу А4 было бы стремно рекламировать виски, а вот Парфенову норм.

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

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

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

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

Быстрый вывод такой:
Если аудитория знает, чему равен синус, то можно делать любую рекламу с пометкой.

Возможно в один момент у меня откроется третий глаз и я узнаю, почему за действия людей отвечает незнакомый им человек

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

Альбрехт Дюррер нарисовал бронированного носорога, который в головах людей выглядел так до конца 18 века, пока в Европу не завезли достаточно носорогов для разоблачения.

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

Лебедев в посте говорит и про правый край, но с ним все нормально. Его трогать не будем.

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

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

Игорь Штанг писал про 120-й параграф в «Ководстве», но писал так, будто это Лебедев придумал и посеял клевету в головах дизайнеров.

К счастью, сотрудники компании «Адоби» не читали параграф 120, поэтому в Индизайне свешивание по-настоящему оптическое.

Но в том же 2005 году Марк Боултон писал про такой же способ. А в версии иллюстратора CS3 (2007) уже была такая опция для текста, и все еще есть в новых версиях. Называется она Roman Hanging Punctuation. И она правда ужасненькая. Посмотреть можно выше, прямо под Лебедевским примером.

Куда лучше нормальное оптическое выравнивание, которое так и называется — Optical Margin Alignment, которое не только свешивает знаки пунктуации в зависимости от их веса, а не просто выкидывает за край, но еще и компенсирует образовавшиеся дыры слева от букв по типу W.

В Фигме, которая теперь тоже часть Адоби, есть висячая пунктуация, но работает она не как в Фотошопе, Иллюстраторе или Индизайне. Там полностью свешиваются только кавычки, стоящие в начале абзаца. И все. Так можно, к примеру, выделять начало текстового блока каким-нибудь символом, но тогда странно, что свешивается только символ кавычки.

А самое странное, что все люди, которые говорят про висячую пунктуацию, имеют ввиду именно Лебедевскую интерпретацию, где смешана Roman Hanging Punctuation и Optical Margin Alignment. Все просто поверили и перепощивают без сомнений, как перепощивали отдельную от материка Калифорнию и вымышленного носорога.

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

Когда-то ВК постоянно прилетало за то, что это калька с Фейсбука. Даже Урагант про это шутил. А сейчас Фейсбук выглядит так, будто его слизали с ВК, а не наоборот.

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

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

Дизайн про удобство и понятность, а не про креативность и оригинальность

Можно посмотреть про воровство дизайна 8-й выпуск Жени Арутюнова.

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

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

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

Кстати, даже на 11 винде все еще можно нажать ctrl+C, чтобы скопировать сообщение из диалогового окна.

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

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

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

Почему принято оставлять чаевые официантам или курьерам, но не принято куче других профессий? Почему не у каждого работника сферы обслуживания есть кьюаркод для чаевых? Есть еще профессии, которые типа можно обидеть чаевыми. Но мне кажется, что чаевые могут обидеть только типаж людей, которые смотрят на ютубе шортсы «как одеваться в стиле Old Money».

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

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

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

А вот как и почему я оставлял чаевые официантам я не помню