Понятный макет. 12 разборов оформления текста

Сначала задача, потом оформление

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

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

Во всех двенадцати парах содержание сохраняется. У нас нет права придумать удобную дату, убрать неприятное условие или обещать свободные места ради красивой композиции. Если информации не хватает, это отдельный вопрос к её владельцу. Макет не должен незаметно менять факты.

Как читать пару «до/после»

Начните с исходных данных: кто читает, где смотрит и какой ответ ищет. Затем рассмотрите вариант «до» и попробуйте сами назвать затруднение. Только после этого переходите к диагнозу, варианту «после» и решениям. Плохой вариант — учебный пример, а не работа реального клиента.

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

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

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

Рабочий протокол на один лист

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

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

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

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

Практика и границы книги

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

Для упражнений достаточно бумаги или любого привычного текстового либо графического редактора. Покупать программу не требуется. Книга не объясняет кнопки конкретного приложения и не включает редактируемые файлы объявлений. Числа в учебных макетах описывают эти примеры, а не обязательные настройки всех документов.

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

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

Разбор 1. Объявление: сначала понять, что происходит

Задача: Назначить текстовым строкам разные роли, исходя из вопроса читателя, а не из желания выделить всё сразу.

В фойе висит объявление для человека, который ещё не знает о событии. Ему нужно понять, что предлагают, затем решить, подходит ли время, и найти место. На листе написано: «Открытая мастерская», «Бумажный город», «12 сентября · 14:00–16:00», «Зал 2», «Материалы на месте», «Регистрация у стойки».

Все строки сохраняются. «Бумажный город» — название события, «Открытая мастерская» — пояснение формата. Меняем зрительные акценты, а не содержание или условия участия. Рост посещаемости этим примером не измеряется.

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

В исходном варианте строки одинаково тяжёлые. Жирность сама по себе не создаёт иерархии — различия в важности элементов. Если усилить всё, название получает тот же вес, что и сообщение о материалах. Читатель сам выясняет, какая строка представляет событие, а какая уточняет условия.

Есть и смысловая конкуренция двух верхних строк. «Открытая мастерская» звучит как заголовок, но не отличает эту встречу от других мастерских. Для выбранной задачи полезнее первым сделать узнаваемое название, сохранив рядом пояснение формата: одно отвечает на вопрос «что именно?», другое — «что это за событие?».

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

После: первым выступает «Бумажный город», затем дата и время; формат, зал, материалы и регистрация поддерживают эти опоры.

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

Второй уровень отдаём дате и времени: «12 сентября · 14:00–16:00». Держим их вместе, потому что решение о возможности прийти требует обоих сведений. Не разбиваем время начала и окончания на самостоятельные декоративные акценты: это части одного интервала.

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

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

Проверяем макет конкретными вопросами: «Как называется событие?», «Когда оно закончится?», «Где зарегистрироваться?». Просим человека показать строки, на которых основаны ответы. Если он принимает формат за название или не находит стойку, выясняем причину и правим соответствующую группу. Это локальная проверка, не доказательство универсального маршрута взгляда.

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

На объявлении «Бумажный город» дата «12 сентября · 14:00–16:00» набрана средне, название — мелко, а «Материалы на месте» занимает половину листа. Объявление адресовано незнакомым с событием посетителям фойе. Что следует изменить первым и почему?

Проверить задание 1.1

Тот же лист теперь стоит у входа в зал для уже зарегистрированных участников «Бумажного города». Обязательные строки: «Открытая мастерская», «Бумажный город», «12 сентября · 14:00–16:00», «Зал 2», «Материалы на месте», «Регистрация у стойки». Все надо сохранить. Как изменится главный акцент?

Проверить задание 1.2

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

К списку задач

Разбор 2. Программа: время должно держаться своего события

Задача: Показать связь между двумя частями записи через расстояния и проверить, не объединяет ли макет соседние записи по ошибке.

Участник смотрит на «Программу встречи», чтобы найти нужный этап и его начало. Даны пять записей: «10:00 Знакомство», «10:30 Работа в парах», «11:20 Перерыв», «11:40 Обсуждение», «12:00 Завершение». Порядок и написание записей менять не требуется.

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

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

Человек ищет не отдельное число и не отдельное слово, а соответствие между ними. Когда расстояние от «10:30» до «Работа в парах» велико, взгляд должен преодолеть пустоту и выбрать правильную строку. Чем слабее связь внутри записи, тем важнее становятся случайные ориентиры, например близость чужого времени.

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

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

После: «10:00 Знакомство» и остальные четыре записи собраны в пары; между парами повторяется отчётливый интервал.

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

Задаём названиям общий левый край, а временам — собственную устойчивую позицию. Так ширина надписи «Работа в парах» не влияет на начало следующего события. Общий край — воображаемая линия, на которую опираются начала похожих элементов; рисовать её не обязательно.

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

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

Проверяем две операции: найти начало обсуждения и назвать событие в 10:30. Это поиск в противоположных направлениях — от названия к времени и от времени к названию. Если в одном направлении легко взять соседнюю строку, проверяем расстояния и совпадение строк, а не просим читателя внимательнее смотреть.

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

В вертикальной программе строки идут так: «10:00», через 24 условные единицы — «Знакомство», ещё через 8 — «10:30», через 24 — «Работа в парах». Человек связывает «Знакомство» с 10:30. Как объяснить ошибку и исправить расстояния, не меняя текст?

Проверить задание 2.1

Нужно разместить «10:00 Знакомство», «10:30 Работа в парах», «11:20 Перерыв», «11:40 Обсуждение», «12:00 Завершение» в узком поле. «Работа в парах» целиком не помещается рядом со временем, уменьшать буквы нельзя. Как перенести эту запись?

Проверить задание 2.2

Проверьте, что теснее связано в пространстве: части одной записи или случайные соседи. Хороший интервал сначала объясняет принадлежность, а уже потом создаёт ритм.

К списку задач

Разбор 3. Прайс: сопоставить формат и сумму

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

Посетитель выбирает печать и ищет стоимость одного листа нужного размера. Учебный прайс называется «Печать в мастерской». В нём две колонки: «Формат» и «Цена за лист». Записи: «A5 — 20 ₽», «A4 — 35 ₽», «A3 — 60 ₽». Под списком стоит «Бумага включена». Все цены вымышленные.

До изменения суммы стоят на разном расстоянии от форматов. После названия выровнены слева, суммы — справа. Содержание одинаково: скидки, тираж и свойства бумаги сверх приведённой строки не заданы.

До: цены 20 ₽, 35 ₽ и 60 ₽ стоят неровно; для каждой приходится заново находить соответствующий формат.

Чтобы сравнить цены, взгляд должен переходить между однотипными значениями. Если 20 ₽, 35 ₽ и 60 ₽ разъезжаются по ширине, у списка нет устойчивой колонки сумм. Читатель каждый раз заново находит число и проверяет, к какому формату оно относится.

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

Заголовок «Цена за лист» — часть смысла, а не необязательная подпись. Без него число можно принять за стоимость пачки или заказа. Строка «Бумага включена» уточняет состав указанной цены для всех трёх форматов. Если придвинуть её только к A3, область действия примечания станет двусмысленной.

После: форматы имеют общий левый край, суммы — правый; «Цена за лист» задаёт единицу, а примечание относится ко всему прайсу.