Мы постоянно боремся за внимание нашей аудитории — читателей, зрителей, покупателей, клиентов. Даже сейчас я пытаюсь заполучить ваше драгоценное время, отвоевав его у Фейсбука или Слака, да что там — домашнего кота:).

Привет, удаленка в мягких тапках.

Визуализация данных в стиле иллюстраций, нарисованных от руки, — отличный способ выделиться среди привычных диаграмм, дашбордов, блок-схем или бизнес-макетов. Скетчи цепляют. Нарисованные картинки хочется разглядывать, разгадывать, в них хочется вникать. Они уникальны, «залипательны» и интересны.

Скетчи — история персональная. За неровностями штрихов, небрежными мазками кисти мы интуитивно видим индивидуальность, живого человека. Истерзанного музой, кофеином и дедлайнами неспящего творца:)). Поэтому по сравнению с обычными диаграммами скетчи с цифрами выглядят более «ламповыми», привлекательными, а сам месседж — более персональным.

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

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

Вряд ли вам придет в голову оформить еженедельный отчет из Google Analytics или репорт для инвесторов в стиле «рисунки от руки».

Или?..)

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

Специально для таких целей был разработан сервис INSTAD.IO.

INSTAD.IO — онлайн-рестайлер, конвертирующий обычные диаграммы и макеты в изображения, стилизованные под рисунки. К слову, все выше использованные картинки «рестайлились» в INSTAD.IO.

INSTAD.IO не генерит контент, а только стилизует загруженные вами изображения. Для работы с сервисом потребуются данные, сохраненные в PDF или SVG. На выходе вы можете скачать файл в формате SVG или PNG высокого разрешения.

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

Устроим тест-драйв и превратим пару скучную диаграмму в симпатичную картинку! Как работает INSTAD.IO

Познакомимся с INSTAD.IO поближе.

Для начала построим несколько диаграмм. В качестве примера данных возьмем результаты исследования аудитории Телеграм у команды tgstat.ru.

Попробуем конвертировать обычные графики из Google Sheets в привлекательные иллюстрации, нарисованные «от руки».

Переходим на сайт instad.io и жмем ссылку “Try for free”

Заранее подготовленную в Google Sheets диаграмму сохраняем в PDF.
Загружаем PDF — первую заготовку «Распределение по полу».

Одна из фишек сервиса — готовые пресеты. Кликая по «рыбам» («Красивое» ©), вы получаете различные варианты стилизации диаграммы. В текущей версии сервиса вам доступно 12 готовых пресетов.

Например, вариант с жирной обводкой и полной заливкой:

Было:

Стало:

Продолжим кликать по пресетам. На этом пресете уже нет обводки, а вместо полной заливки появляется штрих:

А здесь мы поменяли толщину и направления штриха:

Определившись с основным видом диаграммы, проваливаемся во вкладку Style.

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

На этой же вкладке можно подобрать нужный вам шрифт. Пока на выбор сервис предлагает шесть вариантов шрифтов.

Размер шрифта регулируется комбинацией “Shift +” / “Shift -”

Третья вкладка — работа с цветом. Вы можете перекрасить сегменты диаграммы, изменить яркость, насыщенность, контрастность.

Поменять тон не только сегментов, но и фона:

Теперь добавим еще несколько иллюстраций и применим единые настройки стилизации.

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

Скачаем бесплатные картинки, подходящие по смыслу — например, люди с мобильными телефонами. Пропустим иллюстрации через INSTAD.IO, применяя те же настройки (стиль, параметры штриховки и обводки, цвет), что и для диаграмм.

Получилось неплохо.

Но о рестайлинге картинок чуть позже).

А вот так будут выглядеть ваши схемы, диаграммы из diagrams.net (более известный, как draw.io)

Было:

Стало:

И еще несколько рестайлинговых вариантов:

Организационная структура:

Минималистичная UML-диаграмма «мелом на доске»: