• 6 минут чтения

• Дизайн, Инфографика

• Поделись ТвиттерЛинкедин

Что показывает инфографика

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

• Просмотр в большом разрешении (.jpg, 2 Мб)

Мало слов

Все пионеры в этой инфографике оказали большое влияние на область программирования. Тем не менее, этот список никоим образом не является исчерпывающим. Языки программирования, такие как C, C++ и Java, сформировали мир программирования, и поэтому участие их создателей здесь было крайне важно. То же самое касается таких первопроходцев, как Кен Томпсон, Ричард Столлман и Линус Торвальдс, каждый из которых внес значительный вклад в мир открытого исходного кода.

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

Разработка инфографики

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

Макет

Учитывая доступную информацию, я решил разделить инфографику на три основных раздела:

1. Самые важные люди в истории программирования,
2. Хронология истории программирования,
3. Статистика по языкам программирования.

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

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

Этот первый макет прост, но ему не хватает привлекательности хорошей инфографики. Итак, я решил отказаться от него.

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

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

Я использовал Pixus, чтобы создать золотую прямоугольную сетку для этой инфографики. Это удобно, когда у вас есть несколько золотых прямоугольников в дизайне.

Цвет

Цвета представляют собой непрерывный поток, постоянно связанный с изменением соседей и изменением условий. — Йозеф Альберс

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

Я выбрала светлый оттенок золота (#f9ebb3) для фона. Затем я применил гранулированный узор к фоновому слою и уменьшил его масштаб до 51%. Я также уменьшил непрозрачность примерно до 52%. Иллюстрации теперь хорошо смотрятся на этом фоне.

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

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

Типография

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

Используйте два или максимум три типа шрифта в дизайне. Я выбрал Colaboarte Light для имен программистов и Calibri Italic для их описаний. Оба шрифта без засечек.

В рамках одного семейства шрифтов различия в весе, ширине и стиле могут существенно изменить ритм, что влияет на общение. Чтобы контролировать это, я выделил Calibri курсивом до размера шрифта 15 и оставил имена программистов размером 21. Выравнивание по левому краю. Я также использовал Calibri для описания иллюстраций, но выделил ему другой цвет, чтобы отличать его от описаний программистов. Я выбрал шрифт ChunkFive для числовых значений на иллюстрациях.

Отображение статистики

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

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

Я выбрал три разных способа отображения статистики по языкам программирования. Статистика Project Euler отображается в кругах разного радиуса. Проект основан на математических задачах, поэтому отображение статистики в геометрических фигурах было уместным. Статистика StackOverflow отображается в текстовых редакторах разных размеров и цветов, а статистика Tiobe Index отображается в терминалах разных размеров и цветов.

Последние мысли

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

Полезные ссылки и ресурсы

• Что можно и чего нельзя делать в инфографическом дизайне: новый взгляд
• Визуализация данных и инфографика
• Ресурсы по визуализации данных и инфографике

(аль)