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

Общий подход

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

В своем творческом процессе дизайнеры разработали следующий подход к задаче.

  • анализируем общее сообщение для содержания
  • tries to define the core keyword which can become a point of departure for the illustration
  • пытаемся определить ключевое ключевое слово, которое может стать отправной точкой для иллюстрации
  • рассматриваем способы воспроизведения темы через цвета и оттенки.

С практикой мы сформировали три основных метода, которые мы применяем для создания иллюстраций блога.

Литеральный метод

Этот метод кажется самым простым, но это не значит, что он самый выигрышный. Литеральный метод означает отображение персонажа, работающего на ноутбуке, ПК или мобильном устройстве; в этом случае фон может содержать отображение элементов устройства или интерфейса, отражающих тему статьи.

В качестве примера рассмотрим иллюстрацию к статье «Принципы гештальта в пользовательском интерфейсе: принцип близости». Он имеет простую статическую композицию, привлекающую внимание с помощью текстур и ярких цветовых акцентов.

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

Комбинированный метод

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

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

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

Аллегорический метод

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

Совет дизайнера: смотрите ссылки с танцорами или спортсменами — они всегда выразительны и динамичны.

На рисунке выше была построена игра с ключевым словом «Цели». Образ баскетболиста был идеальным для темы, поскольку момент попадания в корзину — это реальное отражение достижения цели. Богатые броские цвета добавляют ощущение уверенности и силы в иллюстрацию.

Another example to check is the illustration created for the article 3C of Interface Design: Color, Contrast, Content. In it, the designer chose the keyword “Color” as a core semantic element and showed the literal process of coloring something with paint. The contrast is reflected in the color palette of the artwork while the content is shown with the elements of the furniture in the office shown in the picture. The cat becomes a bright detail which adds dynamics and humor to the scene.

Designer’s Tip: Don’t forget that allegories should be recognizable and easily understood by people from different countries and cultures as most articles from the sphere are written for the broad international audience.

Animated Illustrations

Animation can broaden the potential of the graphic artwork and makes even simple illustration original and impressive.

This animation is based on the illustration to the article UX Design Glossary: Navigation Elements. Motion made the graphics more expressive and strengthened the accents.

Handy Tips on Design Process

Color. Proper choice of color and texture adds harmony to the graphics perception in connection with the theme. Moreover, it supports the psychological perception of the illustration and sets the necessary mood: bright colors are perfect for entertaining content while minimalist palette will correspond well to the business themes.

Composition. Creating the illustration, it’s essential to decide on the way of theme presentation — by means of one character catching all the attention of the viewer or by means of a group of characters interacting with each other and reflecting the process based on the article message.

Details. Working on an illustration, don’t forget about the details and accent which make an important contribution into the general image, style, and originality of the illustration — as well as correct punctuation makes a sentence better.

Inspiration. Collect your own big collection of references and images for inspiration. These may be poses of people you like, nice color palettes and combinations, interesting photos, your own sketches, illustrations and artworks by other artists. What’s important, you have to get inspired instead of trying to copy someone else. Sometimes just watching these inspirational sets may light a flame of an idea in your head.

And the final tip:

Never stop where you are, always stay in search of new ways to realize your unique artistic style and creative ideas.