x
 
Эльдар Азизов
2 декабря 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Задача: нарисовать инфографику про губернаторов Иркутской области. Нужно наглядно сравнить губернаторов: срок полномочий, чем запомнился, откуда пришёл.

Решил использовать таймлайн вместо таблицы. Я пытался разделить на уровни представления информации: карточка, дата, шкала. 1-й блок (45 пикселей — 1 год) и 2-й (120 пикселей — 1 год) блок временной шкалы имеют разный масштаб. Всё ли я учёл в инфографике и сетке?

(Вторая часть. Улучшаем вёрстку.)


Илья Бирман нарисовал новую диаграмму:

В комментариях к совету Ильи выяснилось, что ширина ограничена 940 пикселями. Кроме того, в перерисованной диаграмме есть проблемы: губернаторы Есиповский и Ерощенко стоят так близко друг к другу, что кажется, будто они губернаторствовали один за другим. А на самом деле между ними был Мезенцев, который болтается где-то наверху. Сколько линеечек не проведи, теория близости побеждает. Пересечения тонких линеек с текстом усиливают ощущение беспорядка и ухудшают читаемость. Колонка Тишанина чересчур узкая.

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

Диаграмма стала компактнее, проследить последовательность губернаторов проще.

Теперь можно добавить и какие-нибудь новые данные, например, бюджет и хищения. Данные взял из головы:

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

Пример — диаграмма экспедиций Амундсена и Скотта.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Михаил Озорнин
2 декабря 2015

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

Азизов Эльдар
2 декабря 2015

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

1 Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 1 4




Недавно всплыло

1 1 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 Какие законы для текста, который будет восприниматься только на слух? 1