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

верстка

Не ставьте текст на фотографию

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

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

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

Решение очень простое: ставить текст за пределами фотографии:

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

Еще у Бирмана о том же

2018   верстка   иллюстрация

Семён, не тули

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

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

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

2018   верстка   иллюстрация

Цвет как информационный слой

Цвет — это вам не хухры-мухры. Цвет — это информация. Если вы красите текст в какой-то цвет, это нужно делать не просто так, а по какой-то причине.

Давайте пошагово. Вот просто текст:

Допустим, мы что-то выделили внутри, оно обращает на себя внимание:

Теперь я хочу что-нибудь на поля:

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

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

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

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

Мораль такая:

Не надо добавлять цвета в текст ради красоты. Только если вам нужно с чем-то текст связать.

Вот примеры, где это нормально работает:

Цветной фон в тексте показывает, к какой части схемы этот текст относится. Картинка из курса Ильи Бирмана «Пользовательский интерфейс и представление информации»
Цвет в заголовке становится легендой к схеме. Из канала «Смотрю»
Фактоид говорит: «Я отношусь к красному графику». Из студенческой работы

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

Воздух в верстке

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

2018   верстка

Быстро освежить верстку

Имеем сверстанную в Редимаге страницу:

Что плохо:

  1. Всё слишком сжато
  2. Неаккуратные невыразительные заголовки
  3. Слишком активный фон
  4. Фактоид ни о чем
  5. Подписи под фото не читаются

Лечим фон. Текст удобнее читать на светлом фоне:

Пробуем какой-нибудь выразительный заголовок. Для этой статьи я сходил на сайт студии Лебедева и взял несколько шрифтов на пробу. Это Дереза:

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

Фактоид был дурацкий — про «1—50 участников». На кой черт мне об этом знать? Расскажите мне что-то в моем мире:

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

Успокаиваем цвета заголовков, чтобы они не побеждали фотографии:

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

На всё про всё 20 минут.

2018   верстка
2018   верстка   иллюстрация   редактура

Широкие слайды — в два столбца

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

Я поклялся на Мильчине, что закрою секретные данные

Первый шаг — убрать отступы слева. Заодно сократили текст:

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

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

Еще поработали с цветом, но об этом в другой раз
2017   верстка   дизайн   цвет

Не играйте в шарады. О фокусе

Ирина! У вас в учебной промостранице шарада.

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

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

Посмотрите, как устроена страница десятого «Лайва». Там есть важные мысли, которые они хотят подать хорошо, и для каждой этой мысли сделан отдельный экран. Фокус на чем-то одном:

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

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

Посмотрите еще вебинар. Жаль, что вы его не посмотрели до того, как сели делать задание:

Также почитайте:

Фоточки побольше надо
Сигнал и шум
Визуальная иерархия

Текст в таблицах

Леныч! Смотри, вот ты пишешь текст про налогообложение. У тебя абзацы текста, а потом ты сравниваешь системы налогообложения в таблице. Это выглядит визуально интересно, но есть проблемы:

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

Это выглядит нормально только издалека, пока не вчитываешься. Внутри это читать не хочется — слишком сложно:

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

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

Короче:

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

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

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

Основы дизайна текста для редактора — лекция в «Республике», на примере серых черточек и заголовков создаем считываемый смысл.

Вёрстка печатного издания — то же самое, только в виде совета.

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

Принцип контраста и заголовок — выпуск продвинутого курса Главреда

Демонстрации в рекламе — лекция на «Просмотре». О блендерах и алгоритмах сжатия.

Элементы управления вниманием + проклятие инструмента. Как и зачем избегать многоколонников и прочей ерунды.

Картинка и иллюстрация — не путать.

Иллюстрация и декорация — глубокое погружение.

Практика: информационная статья — все знания на практике.

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

2017   верстка   КМБ   управление вниманием

Узел Диляры

Студентка второй ступени Школы редакторов Диляра сдала на прошлой неделе промостраницу вот с таким узлом. Он классный:

Что здесь хорошего:

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

Есть мелкие замечания:

Но если это исправить, принципиально ничего не изменится, по-прежнему мило:

Здорово, когда правила применены не механически, а с любовью. Диляра, спасибо!

2017   верстка   дизайн   иллюстрация   подпись