Попрощайтесь с обычными миниатюрами: создание визуальных эффектов для технических блогов
Когда я просматриваю статьи на Medium.com или других платформах, я знаю, что большинство миниатюр, вероятно, взяты из Unsplash или были созданы одним из наших любимых ИИ-друзей.
Я знаю, потому что это именно то, что я делал до сих пор. Бесшовная интеграция Unsplash в Medium сделала это слишком простым. Удобный и понятный редактор Medium делает это практически без усилий. Поскольку мы пишем и делимся техническими статьями, почему мы продолжаем выбирать общие, безвкусные или беспокойные изображения?
Выводы кажутся почти очевидными. Вы должны стремиться создавать визуальные эффекты и диаграммы для технических статей, которые отражают содержание, а не полагаться на общие изображения. Не так просто, не так ли? Возможно, вы не художник, поэтому создание визуальных эффектов может показаться несбыточной мечтой.
Мы все можем согласиться с тем, что технический блог должен содержать изображения и диаграммы, отражающие содержание. Главный вопрос в том, как это сделать и стоит ли это усилий.
К счастью, именно об этом статья. Вы познакомитесь с миром инженерных визуалов. Как некоторые писатели и создатели контента эффективно используют их, чтобы украсить контент, сделать его более привлекательным и расти в Интернете. Какой урок мы можем извлечь из опытных писателей о визуальных эффектах для инженерных блогов и статей на Medium?
Различные типы изображений и диаграмм — почему они работают?
Наглядные материалы и диаграммы необходимы для технических блогов, и благодаря им выделяется самый успешный писатель. От инфографики до блок-схем, диаграмм UML и даже фигурок — существует множество способов улучшить ваш контент и предоставить читателям более привлекательные визуальные эффекты. У каждого типа визуализации или диаграммы есть свои сильные и слабые стороны, и понимание того, почему они работают, может помочь вам создавать более эффективные визуальные эффекты.
Этот раздел представляет собой обзор различных техник и мое мнение о том, почему они работают.
Инфографика
Если вы зайдете на realpython.com, вас, вероятно, зацепят их отличные эскизы и общее оформление. Иллюстрации, используемые Real Python, идеально подходят для иллюстрирования технических статей. Визуальные эффекты простые, но привлекательные, с использованием ярких цветов для привлечения внимания к содержимому и полужирным шрифтом текста, который выделяет соответствующие ключевые слова. Визуальные эффекты просто забавны и увлекательны, с использованием персонажей и карикатур, помогающих донести мысль.
Тем не менее, немногие писатели являются графическими дизайнерами, и не все блоги могут посвятить один из них созданию индивидуального визуального оформления статьи. Так что этот визуальный уровень, возможно, слишком многого требует.
Инфографика, без сомнения, лучшее, что вы можете использовать для статьи в блоге. Но сложность доступна для большинства писателей и технических блогеров.
Они работают, потому что создают ощущение уникальности, профессионализма, фирменного стиля и качества.
В некотором смысле, я думаю, что этот уровень качества или посвящения (в зависимости от того, как вы хотите это назвать) не нужен. Вы можете достичь своей цели с гораздо более простым изображением и создать что-то уникальное и привлекательное для читателя.
Стик-фигурки
Я всегда был большим поклонником Что, если? Что делает веб-сайт и книгу запоминающимися, так это забавные фигурки из палочек. В то же время отвечая на большинство вопросов с инженерным складом ума.
Фигурки из палочек — отличный способ иллюстрировать технические блоги, потому что их легко и просто создать, но при этом передать смысл. Стикеры можно использовать для развлекательного объяснения концепций и создания отличных мемов в социальных сетях для дальнейшего продвижения вашего контента.
Для технических блоггеров это может быть самый простой способ добавить что-то уникальное и привлекательное в свой контент.
Фигурки из палочек великолепны, и люди искренне их любят!
Они работают, потому что привлекают внимание читателя.
Единственным недостатком является то, что вы можете не придерживаться этой глупой иллюстрации подхода и предпочли бы что-то более гладкое и профессиональное. Это больше брендинговое решение.
Примечания к эскизу
В некотором смысле фигурки из палочек можно считать нарисованными от руки иллюстрациями. Однако я хотел отделить их от того, что будет дальше. С одной стороны у вас есть липкая фигурка в стиле комиксов; с другой стороны, у вас есть нарисованные от руки пояснители. Ниже приведен пример нарисованной от руки Rich Steinmetz иллюстрации внутренней работы Ruby.
Я считаю, что нарисованные от руки заметки создают уникальную связь со зрителями. Это отличный способ придать индивидуальность вашему контенту, а также добавить немного творчества к вашим статьям. Нарисованные от руки иллюстрации могут облегчить понимание сложных концепций. Скетч-заметки выглядят так, как будто вы вернулись в университет и позаимствовали блокнот у одного из своих одноклассников. Я считаю, что они имеют тенденцию быть более выразительными и привлекательными.
Заметки Sketch предназначены для обмена информацией, которая является частью контента. Этот формат мы знаем и хотели бы освоить в школе.
Они работают, потому что ведение заметок кажется личным и творческим.
Нарисованные от руки иллюстрации
Вы можете повеселиться с нарисованной от руки иллюстрацией, но она должна быть очень чистой и точной. Карикатуры и нарисованные от руки иллюстрации также работают, и вы можете переключаться между серьезными и забавными иллюстрациями. Ниже приведен еще один пример из Rich Steinmetz, показывающий, как заставить докер работать на вашем новом MacBook.
Один взгляд на иллюстрацию, и вы поймете суть сообщения. Разве у вас не возникло бы больше искушения прочитать эту статью с нарисованным от руки изображением, изображающим простой процесс?
Нарисованные от руки иллюстрации просто работают; прекрасный пример, о котором я могу думать, — это Denilson Nastacio, который публикуется здесь, на Medium. Денилсон использует карандашные наброски для иллюстрации всей своей статьи и включает эти наброски в миниатюру. Его контент великолепен, но я уверен, что с его уникальным стилем иллюстраций у него был бы такой быстрый рост.
Возможно, у вас нет навыков рисования, как у Денилсона, но простые нарисованные от руки иллюстрации не так уж сложны, если немного попрактиковаться.
Я думаю, что такая иллюстрация имеет много общего с ведением заметок. Делая заметки для статьи, попробуйте сделать набросок или схему вместо того, чтобы писать. Это поможет добавить иллюстрацию в ваш арсенал.
Нарисованные от руки иллюстрации лучше всего подходят для создания личного бренда. они одновременно передают ваш индивидуальный подход и креативность.
Они работают благодаря двум аспектам: личному бренду и творчеству.
Опять же, этот стиль может показаться слишком неформальным для вас и вашего блога. Просто знайте, что, отказавшись от этой техники, вам может понадобиться помощь в создании узнаваемой подписи для ваших статей.
Прямоугольные и стрелочные диаграммы
У вас нет под рукой замечательного графического дизайнера. Вы не хотите, чтобы люди думали, что вы пишете комиксы, и верили, что рисованная иллюстрация вам подходит.
Ну, есть и другие способы отразить контент. На самом деле, все три изложенные выше техники могут быть очень артистичными и привлекательными; однако они могут быть не лучшими для передачи точного сообщения. Поскольку мы говорим о техническом содержании, существует средство, которое особенно хорошо подходит для этой цели, и это не что иное, как диаграммы.
Диаграммы бывают всех форм и форм. Тот, о котором я говорю, называется коробкой и стрелой. Это неформальная, неструктурированная диаграмма (что означает отсутствие правила построения). Например, Петран недавно добился особого успеха на Substack, используя подход в своем информационном бюллетене о дизайне и архитектуре программного обеспечения.
Другим примером прямоугольных и стрелочных диаграмм является Дэвид Бойн, который строит свой блог на создании диаграмм для объяснения событийно-управляемой архитектуры (EDA). Его диаграммы очень популярны в Твиттере и показывают, как несколько диаграмм могут легко заменить статью из тысячи слов. Эти визуальные эффекты очень близки к примечаниям к эскизам; однако кажется, что с помощью этого подхода легче добиться хорошей читабельности.
Диаграммы в виде прямоугольников и стрелок по-прежнему содержат некоторую долю творчества, но больше ориентированы на чисто информативный подход.
Они работают, потому что сочетают ясность, информацию и немного творчества.
В двух приведенных выше примерах используются неструктурированные диаграммы со стилем эскиза, что придает им этот уникальный стиль. В этом процессе по-прежнему много творчества и вкуса. Другой подход состоит в том, чтобы использовать структурную диаграмму и использовать проверенный подход для построения представления системы.
Блок-схемы, диаграммы UML и т. д.
Структурированные диаграммы, такие как блок-схемы, диаграммы UML и диаграммы последовательности, всегда использовались для объяснения сложных технических концепций. Большинство разработчиков знакомы с их концепциями и сочли бы их самоочевидными, не пройдя курс, чтобы понять их.
Все структурные диаграммы работают одинаково — разбивая систему на компоненты и иллюстрируя отношения между ними, они помогают читателям лучше понять основную логику и значение концепции. Ниже приведен пример из GitOps Cookbook: автоматизация Kubernetes на практике.
Структурированные диаграммы также легче модифицировать и поддерживать, поскольку они создаются с помощью специального программного обеспечения и могут быть определены как код. Это делает их идеальными для документации и других видов технического письма. Так что научиться пользоваться этими инструментами и создавать такие диаграммы — это хорошая трата времени, но это то, с чем вы уже должны быть знакомы как разработчик программного обеспечения.
Отличным примером является диаграмма последовательности, которую проще всего составить правильно, но она содержит много информации о работе системы. Мне нравится, как Slack использует эти диаграммы в своей документации для объяснения взаимодействия между ботами, пользователями и Slack API.
Для меня структурные диаграммы (блок-схемы, UML и т. д.) являются вариантом по умолчанию. Вы должны начать с этого и, возможно, позже применить более творческие методы.
Ваша основная цель — донести сообщение. Если у вас нет опыта создания набросков или визуального дизайна, вам следует обратиться к диаграммам. При этом, если у вас есть навыки и мотивация, вам следует выбрать другой тип визуализации, представленный в статье. Тип визуала вводился от самого сложного к легкому.
Блок-схемы, диаграммы UML и т. д. — идеальные инструменты для проектирования, и они могут выглядеть очень красиво.
Они работают, потому что представляют профессионализм, структуру и качество.
Прежде чем вы закроете эту страницу и вернетесь к своим повседневным задачам, я подготовил ниже список инструментов, которые можно использовать для создания визуальных эффектов, особенно позже, поскольку создание диаграмм в значительной степени зависит от специального программного обеспечения.
Популярные инструменты и ресурсы
Эта статья лишь поверхностно затрагивает мир визуальных эффектов и диаграмм. Доступно множество других инструментов и ресурсов, которые помогут вам создавать эффективные визуальные эффекты. Чтобы сделать этот список более полным, я настоятельно рекомендую вам внести свой вклад, оставив комментарии и предложения.
Нарисованный от руки (цифровой)
Я использую hp x360 (ноутбук-трансформер для тех, кто не знает) и некоторое время искал хорошую программу для рисования. Я не знаю, что используют художники, которых я представил в этой статье, но я протестировал Sketchbook и Procreate, очень дешевый вариант, который работает на вашем Ipad. Два последних предложения уже включены в вашу подписку Adobe Creative Cloud.
Коробка и стрелы
Первый, Excalidraw, мне больше всего нравится, но я начала им пользоваться совсем недавно. Я давно пользуюсь Draw.io, и точно знаю, что Петран использует его для своих иллюстраций.
Блок-схемы, диаграммы UML и т. д.
Еще раз, я поместил свой любимый вариант вверху, а другой доступный вариант ниже. Я большой поклонник диаграмм как инструментов кода, и я считаю, что вы должны изучить хотя бы один из инструментов, перечисленных ниже, чтобы создавать хорошую документацию на работе.
- Плантумль
- "Русалка"
Заключение
Независимо от того, какой тип визуального элемента или диаграммы вы решите использовать, важно выбрать визуальные элементы, которые точно отражают содержание и просты для понимания. Если вы сомневаетесь, лучше не усложнять и сосредоточиться на сообщении, а не пытаться втиснуть слишком много в одно изображение. Приложив немного творчества и усилий, вы можете создавать визуальные эффекты, которые помогут читателям лучше понять ваш контент и взаимодействовать с вашим блогом.
Ниже приведен список из пяти категорий, рассмотренных в этой статье. Помните, что они субъективно упорядочены от самого креативного к наименее креативному. Если что-то кажется вам слишком сложным, вы всегда можете пройтись по списку и найти то, что вам подходит.
- Инфографика
- Стикеры
- Примечания к эскизу
- Рисованные иллюстрации
- Коробка и стрелы
- Блок-схемы, диаграммы UML и т. д.
Чтобы больше узнать о блок-схемах, диаграммах UML и т. д., я создал репозиторий GitHub, который содержит все примеры и список будущих статей, которые я хочу осветить. Репозиторий — это живой проект, и я планирую добавлять больше по мере того, как продолжаю изучать и исследовать эту тему.
Не стесняйтесь проверить это и дайте мне знать, если у вас есть какие-либо предложения или идеи для новых статей.
