Блог Максима Розова

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

Перевёрстка — 3. Объявление об отключении горячей воды

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

Я не подавал заявку, но задание решил выполнить. По-моему, задачка больше была про текст, а не про вёрстку, поэтому я сначала расскажу, как переписал объявление, а результат покажу в конце.

Процесс

Переписываю текст. Сначала нужно чётко сформулировать главное.

С 16 по 24 июня в доме не будет горячей воды.

Бестолковый заголовок «Уважаемые жильцы» и годы в датах не нужны.

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

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

Артём Горбунов советует: «В конце хорошего объявления стоит подпись: имя и должность. Это личная ответственность и человечность. Вопреки распространённому в России заблуждению, „Администрация“ — это не подпись, а её эмуляция.»

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

Николай Александрович Добротин, главный инженер 5-го филиала ЭВАЖД
+7 495 681-07-21

Теперь можно верстать. Формат объявления — А4. Скорее всего, печатать его будут на конторском чёрно-белом принтере, поэтому буду делать дизайн без цвета.

Набираю тексты. Заголовок делаю крупным, чтобы объявление читалось с большого расстояния. К датам подписываю дни недели — теперь понятно, что без воды предстоит сидеть выходные (ага, пойду на выходные ночевать к подружке) и всю рабочую неделю (ага, значит буду ходить в тренажёрку каждый день и принимать душ там).

Добавляю название и адрес конторы.

Тут можно закончить, но я хочу, чтобы объявление было еще заметнее. Вдруг ему придётся висеть на доске с кучей других? Цвет применять нельзя, но можно использовать картинку. Что хуже всего, когда нет горячей воды? Нельзя сходить в душ.

Подбираю картинку и делаю на всякий случай ещё цветной вариант. Готово, можно печатать и вешать.
 

Перевёрстка — 2. Результаты анализа крови

Сверстал справку с результатами биохимического анализа крови.

 

 
В отличие от оригинала, в моей таблице врачу и пациенту проще найти нужный показатель. А тётеньке в регистратуре будет легче отыскать нужный листок в стопке других, потому что ФИО и номер карты пациента вынесены на край листа

Процесс

Оригинальная бумажка выглядит так:

 
Формат листа — А5. Печатается на офисном принтере
 
 

Две главных проблемы верстки:

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

Есть и смысловые косяки:

  • символ номера в заголовке есть, а номера нет;
  • дата дублируется;
  • непонятна смысловая нагрузка строки «Отделение: поликлиника» (и сформулировано роботом);
  • зачем-то указан пол пациента (врачи — умные люди, умеют определять пол по имени).

Надо исправлять.

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

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

Единицы измерения нельзя игнорировать (для меня медицина — точная наука). Но пациенту они опять же, по боку, а врачи их знают и так. Поэтому набираю единицы мелким кеглем.

Колонки с показателями не очень связаны с первым столбцом. Добавляю отточия.

Подписываю столбцы. Кажется, непонятные «референсные значения» можно обозвать просто нормой.

ФИО пациента и номер карты — это главные идентификаторы всего документа. Размещаю их на краю листа. Теперь найти нужную бумажку в стопке других будет проще.

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

Теперь можно разместить второстепенные элементы. Контактным данным и логотипу клиники много чести для размещения в шапке. Лучше в подвале.

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

Сначала разбираюсь с таблицей. Надо объединить данные в строки. Придется использовать линейки. Единицы измерения выношу в отдельный столбец. Их уместно выровнять по правому краю — так лучше видно, в чем измеряется количество вещества в литре крови.

Да, так хорошо. Добавляю ответственных лиц. Данные о клинике размещаю вертикально — теперь они не смешиваются с результатами. Указываю дату, которую забыл поставить в первом варианте.

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

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

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

Было и стало:

܀

Я проебался и не выложил переверстку на прошлой неделе, поэтому на этой опубликую еще одну.

Как правильно делить телефонные номера

Делить номер телефона на части надо так:

Первым должен идти код страны, через пробел код оператора (или города), еще через пробел кусок с 3 цифрами, и еще два куска по 2 цифры.

Вот так делать не надо:

Даже если номер очень красивый (хотя красивые номера — самообман), вся сказка разобьется об интерфейс смартфона:

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

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

Перевёрстка — 1. Расписание поезда «Челябинск — Москва»

Сверстал расписание поезда «Челябинск — Москва (и обратно)».

 

 
В отличие от варианта, который использует РЖД, мое расписание удобнее читать, а вероятность неправильного считывания (об этом в процессе) гораздо ниже

Процесс

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

Это плохое расписание, и вот почему.

  1. Формат использован неэффективно — под само расписание отведена примерно треть, зато еще треть отъедает бестолковая картинка. Из-за этого таблица набрана очень мелким кеглем, который тяжело читать (особенно в трясущемся поезде).
  2. На первый взгляд кажется, что левая таблица для русско-, а правая — для англоговорящих пассажиров. На самом деле нет. Уважаемым пассажирам приходится расписание поезда в сторону Челябинска читать по-русски, а в сторону Москвы — по-английски. Догадаться об этом можно, самому наступив на грабли (так случилось со мной), или по разделителю в форме секс-игрушки (точнее, по стрелочкам вокруг него). Представляю, каково бедным иностранцам.
  3. Выключка содержимого столбцов по центру и вертикальные надписи в шапке таблицы делают чтение таблицы еще более неудобным.

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

Поехали. Сначала хочется набрать все крупно. Для этого нужно освободить место — выкидываю к ебаной матери картинку и половину расписания. Да, если я еду из Челябинска в Москву, мне не нужно знать график обратного следования. Расстоянием до станции и часовыми поясами тоже жертвую, чтобы снизить шум (расписание используется не в самых удобных условиях).

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

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

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

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

Пришлось использовать горизонтальные линейки.

Добавляю таблице заголовок, без него нельзя. Слово «расписание» выкидываю — об этом говорит само содержимое таблицы при первом же взгляде.

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

Вроде ок, но хочется решить задачу без выхода в надсистему. Вдруг РЖД разорится на двухсторонней печати.

Пробую впихнуть невпихуемое, для этого немного уменьшаю кегль. Заголовок последнего столбца сокращаю, чтобы вместить две таблицы на формате. Текст внутри столбца выравниваю по центру — читаемость не пострадала (значения в ячейках маленькие), зато выглядит аккуратнее. Удалось обойтись без линеек, круто!

Добавляю заголовки. Нужную часть расписания пассажир будет выбирать по направлению (например, «Челябинск—Москва»), а не по маршруту. Поэтому номера маршрутов набираю в конце строки.

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

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

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

Было и стало:

܀

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

Бесполезные голосовые объявления в самарских автобусах

Услышал в автобусе такое объявление:

Уважаемые пассажиры!
Своевременно и правильно оплачивайте проезд. В салоне работает кондуктор.

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

Вывод — польза объявления нулевая.

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

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