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

верстка

Позднее Ctrl + ↑

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

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

2018   верстка

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

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

Что плохо:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Короче:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узел Диляры

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

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

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

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

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

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

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