Блог сложной судьбы

Позднее Ctrl + ↑

Клипы горой

Проверил сегодня с десяток промостраниц в Школе редакторов, и почти у всех был примерно такой узел:

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

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

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

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

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

Еще с огромной осторожностью нужно относиться к многоколонникам с фотографиями — есть проблема сомасштабности.

Наглядность схем: транзисторы

В «Коде» пишем статью про транзисторы. Чтобы объяснить транзисторную логику, нужно было показать разные схемы соединения. Нашли хороший референс в Ютубе, перерисовали более наглядно:

Что тут произошло:

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

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

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

1 год   схема

Самсунг против Айфона

А вот «Самсунг» и «Эпл» рекламируют одну и ту же возможность: широкоугольную съёмку. У одной компании колхоз и позорище, у другой кайф и радость:

В чем отличие:

Сюжет. У «Эпла» искусство, путешествия и приключения, у «Самсунга» бытовая сценка на платформе Ховрино. Зачем она там стоит? Что она делает? Это танцы? Тогда надо показывать видео. У «Эпла» есть ощущение масштаба и контраста большого и малого. У «Самсунга» обычные бытовые человеческие масштабы.

Мусор на фото. У «Самсунга» мусор везде: интерфейс приложения, какая-то грязь под перилами, сами перила случайные, ливневка криво сделана, торчат столбы, из-за горизонта виднеются дома. У «Эпла» идеальная природа, чистый песочек, ни одного окурочка туристы не оставили.

Мусор вокруг фото. «Эпл» тщательно зачистил сайт, чтобы фотография стояла максимально контрастно и четко. У «Самсунга» пришли маркетологи и попросили добавить второй этаж меню, кнопку сделать побольше, еще и стрелочку скролла добавить. А потом пришли юристы и потребовали GDPR-плашку с куками и выбором языка. Получился колхоз.

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

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

Как улучшить

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

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

С такими хорошими фотографиями белый фон как-то не комильфо. Но чу!

«Эпл», это ты?

Что не так с картинками из фотобанков

Пора объясниться по поводу фотобанков.

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

Проблемы начинаются, когда мы идем в фотобанк за людьми.

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

Люди в жизни так никогда не делают. Очевидно, что это не фотография вашего дружного коллектива, а постановочная фотография на тему «Дружный коллектив»
Просто представьте эту сцену в реальности

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

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

Люди из фотостока полезны, когда вам нужен не конкретный человек, а просто любой какой-то человек. Но если вам подходит любой человек, у вас плохая иллюстрация — вы не иллюстрируете, а разбавляете текст. Это значит, что текст слабый, продукт в целом слабый, и единственное, что его украшает — это Алена, королева Фотостока.

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

настоящие фотографии того, о чём пишете;
репортажные фото;
скриншоты и сканы документов;
схемы, графики, диаграммы, инфографику;
на худой конец — коллажи из объектов, которые вы скачали в фотобанке.

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

Прочитайте обязательно:

Что значит «разбавлять статью»
Чем плохо позирование
Полный урок по иллюстрациям
Схемы

Автономность первого абзаца

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

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

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

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

Сравнение несравнимых долей

Допустим, мы провели исследование по поводу кофейных напитков. Мы задали десяти тысячам человек два вопроса:

Какой кофе вы предпочитаете (черный или с каким-то видом молока)?
Как вы его предпочитаете пить — с сахаром или без?

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

Нет! С этой картинкой куча проблем!

Главная проблема в том, что здесь сравниваются 85% и 75%, 15% и 25% — они ведь стоят рядом и они похожи по размерам. Но это не абсолютные доли людей из опроса, а доли относительно ответивших «черный» и «с молоком». Вот эти 85%, пьющих черный кофе без сахара — это 85% от какого числа?

И выясняется, например:

В нашем опросе из 10 тысяч человек
Черный кофе из них пили только 20%, остальные 80% предпочитали пить с молоком
85% от пьющих черный кофе — это 10000 × 20% × 85% = 10000 × 17%
75% от пьющих кофе с молоком — это 10000 × 80% × 75% = 1000 × 60%

И график, соответственно, будет выглядеть несколько иначе:

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

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

Иллюстрации: теория, фотографии, рисунки

Фрагмент курса «Дизайн текста и визуальное повествование»:

О чем тут

Чем отличаются картинки от иллюстраций
Как подбирать картинки к статьям (никак и вообще это неправильный вопрос)
Обязательно ли иллюстрация должна быть картинкой
Как иллюстрации воздействуют на чувства
Фотографии
Рисунки

Ранее Ctrl + ↓