Разработка инфографики «Мир программирования»
[ad_1]
⭐
Разработка инфографики «Мир программирования»
Информационная графика (или инфографика) используются для отображения информации более креативным способом, чем обычный текст. Сегодня они окружают нас в средствах массовой информации, опубликованных работах, дорожных знаках и руководствах. В последнее время Интернет заполонили инфографики на самые разные темы, начиная от науки и техники и заканчивая обществом и культурой. В этой статье мы рассмотрим процесс создания инфографики о программировании.
Что показывает инфографика
Эта инфографика демонстрирует пионеров в области программирования, а также историю и текущую статистику различных языков программирования. Также включены некоторые случайные факты и диаграммы алгоритмов, чтобы сделать инфографику более визуально привлекательной. Нажмите на картинку, чтобы увеличить.
- Просмотр в большом разрешении (.jpg, 2 Мб)
Мало слов
Все пионеры в этой инфографике оказали большое влияние на область программирования. Тем не менее, этот список никоим образом не является исчерпывающим. Языки программирования, такие как C, C++ и Java, сформировали мир программирования, и поэтому участие их создателей здесь было крайне важно. То же самое касается таких первопроходцев, как Кен Томпсон, Ричард Столлман и Линус Торвальдс, каждый из которых внес значительный вклад в мир открытого исходного кода.
Вы также можете заметить, что некоторые важные алгоритмы, такие как динамическое программирование, перебор и хеш-таблицы, отсутствуют. Причина в том, что объяснить эти алгоритмы на одной диаграмме сложно. Следовательно, они были заменены такими, как сортировка вставками и сортировка слиянием, которые относительно проще объяснить. Восемь ферзей и N-головоломка часто использовались в качестве иллюстративных задач для различных методов программирования, поэтому они также включены сюда.
Разработка инфографики
Инфографика — это визуальное представление информации, данных и знаний. Таким образом, макет, цвет и типографика имеют решающее значение для понимания пользователем. Рассмотрим каждый из них по очереди.
Макет
Учитывая доступную информацию, я решил разделить инфографику на три основных раздела:
- Самые важные люди в истории программирования,
- Хронология истории программирования,
- Статистика по языкам программирования.
Цель состояла в том, чтобы сделать инфографику простой, но красивой. Я придумал следующие возможные макеты для отображения информации:
Красные квадраты обозначают иллюстрации, стрелки — временные шкалы, а синие прямоугольники — статистику по языкам программирования. В третьем макете зеленые кружки обозначают случайные факты и схемы алгоритмов.
Этот первый макет прост, но ему не хватает привлекательности хорошей инфографики. Итак, я решил отказаться от него.
Во втором макете иллюстрации расположены по кругу. Но постоянное включение соответствующей информации для каждой иллюстрации было бы затруднительным. Так я тоже от него отказался.
Я выбрал компоновку, сочетающую синусоиду с золотыми прямоугольниками — два свойства, о которых я говорил в предыдущей статье. В остальные золотые прямоугольники я помещаю случайные факты и диаграммы алгоритмов, чтобы сделать инфографику более привлекательной.
Я использовал Pixus, чтобы создать золотую прямоугольную сетку для этой инфографики. Это удобно, когда у вас есть несколько золотых прямоугольников в дизайне.
Цвет
Цвета представляют собой непрерывный поток, постоянно связанный с изменением соседей и изменением условий. — Йозеф Альберс
Выбор правильных цветов — одна из самых важных вещей в графическом дизайне. Цвет влияет на визуальную иерархию и разборчивость шрифта, поэтому важно выбрать правильно цвета, и не только ожидаемые. В инфографике фон должен идеально сочетаться с иллюстрациями. В этом случае иллюстрации выглядели тускло на белом фоне и некрасиво на темном фоне.
Я выбрала светлый оттенок золота (#f9ebb3
) для фона. Затем я применил гранулированный узор к фоновому слою и уменьшил его масштаб до 51%. Я также уменьшил непрозрачность примерно до 52%. Иллюстрации теперь хорошо смотрятся на этом фоне.
Я выбрал «академические» цвета для типографики, потому что они хорошо сочетаются с фоном и иллюстрациями. Мы все знаем, что главное — контраст, поэтому я использовал в основном основные цвета для иллюстраций, потому что они хорошо контрастируют с текстовыми блоками.
Вы всегда можете получить помощь от Adobe Kuler, если у вас возникнут проблемы с выбором цветов для вашего дизайна.
Типография
Единственная важная задача типографа состоит в том, чтобы интерпретировать и передать текст: его тон, его темп, его логическая структура, его физический размер — все это определяет возможности его типографской формы. Типограф к тексту, как театральный режиссер к сценарию, а музыкант к партитуре. — Роберт Брингхерст
Используйте два или максимум три типа шрифта в дизайне. Я выбрал Colaboarte Light для имен программистов и Calibri Italic для их описаний. Оба шрифта без засечек.
В рамках одного семейства шрифтов различия в весе, ширине и стиле могут существенно изменить ритм, что влияет на общение. Чтобы контролировать это, я выделил Calibri курсивом до размера шрифта 15 и оставил имена программистов размером 21. Выравнивание по левому краю. Я также использовал Calibri для описания иллюстраций, но выделил ему другой цвет, чтобы отличать его от описаний программистов. Я выбрал шрифт ChunkFive для числовых значений на иллюстрациях.
Отображение статистики
Представить себе информацию — и какие яркие и великолепные видения могут возникнуть — значит работать на пересечении образа, слова, числа, искусства. Инструменты письма и типографики, управления большими наборами данных и статистического анализа, линий, макетов и цветов. — Эдвард Тафте, Предвидение информации
В течение многих лет мы отображали информацию в виде гистограмм и круговых диаграмм. На самом деле, Эдвард Тафте ввел термин «хлам» для обозначения бесполезных, неинформативных или искажающих информацию элементов в количественных дисплеях. Но в последнее время эта тенденция изменилась с появлением инфографики.
Я выбрал три разных способа отображения статистики по языкам программирования. Статистика Project Euler отображается в кругах разного радиуса. Проект основан на математических задачах, поэтому отображение статистики в геометрических фигурах было уместным. Статистика StackOverflow отображается в текстовых редакторах разных размеров и цветов, а статистика Tiobe Index отображается в терминалах разных размеров и цветов.
Последние мысли
Инфографика — это креативное отображение информации. Процесс разработки инфографики может помочь нам понять и реализовать определенные принципы графического дизайна намного лучше, чем проектирование только для Интернета. Все дело в применении фундаментальных принципов дизайна; мы всегда будем приходить с лучшими результатами, если мы можем сделать это хорошо.
Полезные ссылки и ресурсы
- Что можно и чего нельзя делать в инфографическом дизайне: новый взгляд
- Визуализация данных и инфографика
- Ресурсы по визуализации данных и инфографике

(аль)
[ad_2]
Source: https://smashingmagazine.com
Заключение
Вы ознакомились с статьей — Разработка инфографики «Мир программирования»
Пожалуйста оцените статью, и напишите комментарий.