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

Простой способ повысить привлекательность ваших постов, статей и презентаций.

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

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

Проанализировали несколько существующих решений. Не понравились. Все-таки красота — дело субъективное. В итоге решили разработать свое. Красивое ©. Так появился прототип INSTAD.IO.

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

«Красивое» нас захватило. Диаграммы и схемы, стилизованные под рисунки, цепляли. Хотелось этим делиться. В результате нескольких часов программирования и веры в то, что красота спасет мир, появился самостоятельный онлайн-сервис INSTAD.IO.

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

Ради фана анонсировали запуск INSTAD.IO на ProductHunt. Рестайлер собрал много положительных отзывов и в течение дня, к нашему удивлению, даже выходил на четвертое место. А дневную гонку завершил на седьмом месте и позже попал в рассылку среди подписчиков продактханта. Согласитесь, неплохо, с учетом того, что мы нигде не анонсировали проект, не просили апвоутов, не тратили денег на рекламу. Ага, такое бывает.

Кстати, Крис Мессина нас тоже «лайкнул»;).

А для чего «красивое»?

В настоящее время мы используем INSTAD.IO для внутренних задач. Предполагаем, инструмент будет интересен и полезен маркетологам, контент-менеджерам и блогерам при подготовке креативных материалов.

Безусловно, диаграммы в стиле «от руки» не подойдут для оформления серьезных отчетов. Там, где важна точность и серьёзность, художественная небрежность не уместна.

Но когда главная цель — привлечь внимание и выделить свой контент за счет красивых картинок с графиками и схемами, INSTAD.IO сработает отлично. Это отдельные виды презентаций и отчетов, посты для соц сетей, картинки для оформления блогов.

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

Кроме того, что INSTAD.IO умеет рестайлить диаграммы, он неплохо справляется с конвертацией некоторых графических рисунков и даже текстовых заголовков, набранных, например, в MS Word или Pages.

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

Было (шрифт Phosphate):

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

Стало:

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

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

Как работает INSTAD.IO

INSTAD.IO работает с готовым контентом, то есть он не создает графические изображения, а «рестайлит» их. Устанавливать на компьютер ничего не нужно, сервис работает в браузере. Специальных знаний не требуется.

Диаграммы. Диаграммы и схемы для загрузки в INSTAD.IO должны быть сохранены в PDF или SVG. В Google Sheet сохранить диаграмму в PDF можно в два клика:

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

Рисунки. Лучше всего для рестайлинга подходят иллюстрации в стиле flat design. В google довольно много сайтов по запросу flat design free. Если нужно, готовы поделиться подборкой в комментариях. Лучше всего работает формат SVG и PDF. (С JPEG пока не всегда выходит удачно).

Было (автор оригинала frik, vecteezy.com):

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

Стало:

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

Было (автор оригинала Yuda Rizwan Simatupang, vecteezy.com):

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

Стало:

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

Текстовые заголовки. С ними все просто. Пишем текст в любом текстовом редакторе, делаем Print Screen, вырезаем буквы, сохраняем в PNG.

Было:

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

Стало:

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

Диаграммы в стиле «скетч»

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

Было:

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

Стало:

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

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

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

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

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

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

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

Небольшая инструкция по работе сервиса

На панели инструментов сервиса есть три основные вкладки:

Как мы придумали «красивое». INSTAD.IO — сервис, превращающий скучные диаграммы в прикольные иллюстрации
  • Пресеты. Кликая по «рыбам» вы можете подобрать готовый пресет для своей диаграммы/рисунка/заголовка.
  • Стиль. Здесь можно выбирать вид заливки, толщину контура и штриха, степень «небрежности» рисунка, шрифт. Размер шрифта регулируется комбинацией «Shift +» / «Shift -»
  • Цвета. Можно менять цвет контура и заливки, яркость, насыщенность.

На выходе вы можете скачать файл в формате SVG или PNG высокого разрешения.

Текущая стадия проекта

В настоящий момент INSTAD.IO находится на стадии перехода из проекта-хобби в продукт, работающий по модели “freemium”. Нам важно ваше мнение и любая обратная связь. Как бы вы использовали INSTAD.IO в своей работе или неработе?

INSTAD.IO проходит бета-тестирование и продолжает совершенствоваться. В команду проекта подбирается программист и маркетолог.

Протестировать сервис можно тут: https://go.instad.io

3838
33 комментария

Комментарий недоступен

5
Ответить

пока видимо только показываем))))))

5
Ответить

Комментарий недоступен

4
Ответить

Спасибо) да, ищем сценарии применения.

2
Ответить

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

2
Ответить

Скетчи из графиков - это лишь частный случай. Можно взять любую старомодную диаграмму бизнес-процессов или UML из того же draw.io или visio, и сделать ее более современной, художественной. Смысл тут не про «веселить» аудиторию, а про «привлечь внимание». При прочих равных условиях схемы, нарисованные от руки, заметно выделяются что в презентациях, что в статьях или блоге. Одна из гипотез - это то, что от скетчей люди меньше «зевают» :)

4
Ответить

Спасибо. Вот сами почву прощупываем. Где тот самый баланс. Мнения очень интересны.

1
Ответить