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

сделал

Переверстка — 5

Прошлым летом киевскому офису студии Лебедева нужно было больше дизайнеров. Соискателям нуно было привести в порядок объявление.

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

2018   переверстка   сделал

Перевёрстка — 4. Анонс лекции Станислава Дробышевского

22 апреля в Самару приехал Станислав Дробышевский — антрополог, популяризатор науки и крутой чувак. Он прочитал классную лекцию об эволюции человека в музее Алабина.

Главной информационной площадкой мероприятия был ВК. Анонс лекции выглядел вот так:

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

Надо переделать.

Процесс

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

«12+» убираю с макета — крючкотоворы обойдутся упоминанием минимального возраста в тексте поста.

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

Чтобы привлечь ещё больше внимания к посту, решаю поставить в макет большое фото Станислава. Теперь можно вообще не читать текст — фанаты узнают лектора по колоритной внешности :) Пробую разные варианты:

Думаю, что лучше сделать фото чёрно-белым, а заголовок цветным — так получается контрастнее всего. Примеряю картинку к посту:

Готово!

2017   дизайн   переверстка   сделал

Оформил портфолио

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

܀

Самое время признать ошибку — я снова обосрался с обещаниями и не смог выполнить план по еженедельному выпуску перевёрсток.

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

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

2017   сделал   факап

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

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

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

2017   дизайн   переверстка   сделал

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

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

 

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было и стало:

܀

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

2017   дизайн   переверстка   сделал

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

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

 

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было и стало:

܀

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