Главное Авторские колонки Вакансии Образование
Выбор редакции:
😼
Выбор
редакции
14 816 76 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как мы сделали первый в рунете конструктор HTML5 баннеров

Читайте о том, кто мы, как пришла идея создать BannerBoo.com, про посещаемость и количество сделанных баннеров, про планы на будущее и много другого интересного.
Мнение автора может не совпадать с мнением редакции

Поправочка — мы его еще делаем ) Сейчас запущена и работает бета-версия конструктора, которая, тем не менее, уже позволяет делать крутые HTML5 баннеры. Нет, правда, классные. Там только один зацикленный слайд, который можно анимировать, но все остальное работает — цвета, шрифты, клипарты с иконками, графиками, SVG анимациями, готовые шаблоны баннеров.

Такой себе, мини-фотошоп в браузере.

b_57e15c95cd0fa.jpg

Вы уверены, что он первый в рунете? А то достаточно громкое заявление )

Публичный — первый. Я подозреваю, что у больших игроков рекламного рынка есть нечто подобное внутри их корпоративных разработок, типа как у Google есть свой встроенный HTML5 конструктор, но то другая история, другая целевая аудитория и другая реализация.

Я понимаю, что первым быть страшно, поскольку есть теория, что если нет конкуренции, то и сервис не будет востребован. Но конкуренция в англоязычном секторе есть, и довольно серьезная, поэтому мы решили застолбить русскоязычный рынок, пока не поздно.

Если уж зашла речь о конкурентах, то чем собираетесь их бить?

Я дизайнер и владелец дизайн-студии, поэтому обращаю большое внимание на внешний вид и удобство интерфейсов. Когда мы начали разработку, у всех наших конкурентов были довольно страшненькие, устаревшие интерфейсы. «УРА!» — подумал я, ведь мы сделали зашибенный и удобный canva-like интерфейс. Но время идет, и конкуренты начали обновлять свои сервисы, так что в этом плане, увы, конкурировать будет сложно.

Вообще идея такова, что секретарь Нюра из Глуходальнинска зашла на наш сервис и по поручению директора за 15 минут сделала для компании крутой баннер. Даже не сделала, а выбрала из 1000 шаблонов тот, который наиболее им подходит. А ребята из веб-студии «Быстродел» зашли и сделали для клиента по-быстрому пакован баннеров с готовыми ресайзами. Ну вот так.

Будем делать, чтобы было удобно, быстро, чтобы были тонны клипарта, иконок, тысячи готовых шаблонов. Чтобы процесс занимал 10-20 минут, не больше.

Как вы вообще додумались его сделать?

Мы делали баннеры для своих студийных продуктов, это готовые решения для 1С-Битрикс. Поскольку флеш умирал, я не хотел делать баннеры на флеше, а начал искать подходящие аналоги. Скачал Google Web Designer, который сейчас типа наш конкурент, зашел, ужаснулся, и закрыл. И это, заметьте, я работаю дизайнером лет так с 14-ти, работал практически со всеми графическими программами, но, блин, реально сложно разобраться.

b_57e15caae2c86.jpg

Потом я зашел на зарубежный конструктор и по-быстрому склепал для нас крутые баннерочки. Получилось очень хорошо. Вот они:

b_57e15cba2b33c.jpg

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

Откуда такое странное название придумалось, BannerBoo?

Я уже не помню первоначальные идеи, но в названии нужно, чтобы было слово «banner». Это хорошо для поисковиков и вообще, для быстрого понимания, о чем сервис. Помню, мы остановились было на похожем «BannerBee», но домен .com был занят и выкупить его стоило несколько тысяч долларов. Так что с легкой нашей руки «BannerBee» превратился в «BannerBoo», нам понравилось, так и оставили ).

Но слушайте, говорят, что баннеры умирают. Что их блокируют, что на них никто не смотрит. Ведь правда же?

Да правда ). Мы уже три статьи наклепали и в каждой мы говорим о том же ). Но есть нюансы, и они важные.

Первое — то, что реклама никуда не денется. Реклама была еще в первобытные времена, когда на деревянной табличке царапали слово «Вода», не исчезнет она и через 100 лет ). Это такой двигатель прогресса, что он просто физически не может исчезнуть. Онлайн-реклама постоянно трансформируется, переходит в мобайл, технологии развиваются, появился программатик, появляется все больше «умных» интерактивных richmedia-баннеров, да что говорить, тут надо отдельную большую статью писать.

b_57e1870b8b9a4.jpg

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

Третье — эффективность адблокеров переоценивают. Да, есть статистика, что больше 40% людей во всем мире отключают рекламу, но есть и такие моменты:

  • все больше крупных игроков интернет-рынка (Facebook) выражают свое недовольство программами блокировки рекламы. Соответственно, они имеют вес, чтобы влиять на индустрию и лоббировать свои интересы
  • появились программы, которые обходят блокираторы и все равно показывают рекламу (Page Fair)
  • cами блокираторы рекламы (например AdBlock Plus) идут на уступки и создают новые стандарты для рекламы, при которых она будет показываться даже с включенным блокиратором
  • блокираторы рекламы в мобильных браузерах только начинают появляться, а в нативных приложениях вы не заблокируете их никак.

b_57e18bf9f3189.jpg

Так что это все — уравнение со многими неизвестными. Будет развиваться рынок, будем развиваться и меняться мы. Тем более планов по развитию у нас ого-го.

Отлично. Почти переубедили. Ну давайте про планы, раз начали.

Надо доделать и выпустить полноценный релиз. Это прежде всего. Нужно, чтобы сервис выполнял то основное, для чего он был сделан — и делал это хорошо. Сейчас мы работаем над таймлайном — это когда можно анимировать несколько слайдов для более длительной анимации. Потом сделаем возможность загружать баннер в ZIP-архиве. Потом прицепим клипарты — фотобанки, иконки. Сейчас постоянно работаем над созданием новых шаблонов. На днях запустим англоязычную версию. Одним словом, много работы.

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

b_57e15ccf4f424.jpg

Дайте цифры какие-то. Посещения, доходы, расходы, инвестиции.

Мы закрытую альфу запустили 28 апреля 2016. То есть около 4 месяцев назад. Бета-версию — 10 августа, чуть больше месяца назад. В месяц пока к нам приходит около 1000 посетителей, рекламу никакую мы не давали, приходят с органического поиска. Сейчас, когда начали публиковаться на Spark.ru, посещение возросло — в день публикации статьи набегает до 200 человек. Регистрации на сервисе тоже вырастают — если в среднем около 10 регистраций в день, то после публикации их число может вырастать до 50-ти.

b_57e1895244e7f.jpg

Что касается сделанных в сервисе баннеров, то общее число созданных объектов где-то около 900, но среди них мало полноценных баннеров, часто посетители просто балуются и тестируют работу системы. Но хорошие профессиональные баннеры тоже попадаются, и это радует ).

Доходов нет пока — это понятно ). Мы не будем делать сервис платным, пока не допилим полноценный релиз. Но даже после этого мы сделаем «forever free» тариф — с некоторыми ограничениями, но бесплатный. Тем пользователям, которые будут зарегистрированы у нас до выпуска финальной версии, мы подарим пол года бесплатного сервиса без ограничений.

Расходы не считали еще, но пока тянем ). Доходы студии позволяют держать проект на плаву, да и сотрудников пока немного, так что все терпимо. Инвестиции тоже пока не ищем — хотя я понимаю, что они могли бы придать ускорение для развития проекта.

Ага, вот и до сотрудников добрались. Сколько вас работает над проектом?

Раз-два и обчелся ). У проекта два сооснователя, это я и Надя Юзькова, full-stack программист и просто отличный человек ). Собственно благодаря ей все и стало возможным, потому что потянуть большую команду на стадии развития очень сложно. Говорят, что у стартапа должно быть минимум два кофаундера, потому что по-другому инвесторы не сильно любят, так что у нас в этом плане все хорошо. Она — технический специалист, я больше по дизайну и общей идеологии ). Кроме этого, есть дизайнер, который делает шаблоны баннеров прямо в сервисе и ресайзит их, иногда этим занимаюсь я — для души. Ну и понятно, что на подхват есть около 10 сотрудников студии, которых можно привлечь в случае крайней необходимости.

b_57e18e075f1e0.jpg

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

Да, вам не кажется довольно странным, что вы берете интервью сам у себя?

Да нет, чего )). Большие статьи в виде интервью читать легче, я просто отвечаю на вопросы пользователей, которые могли бы возникнуть в процессе. Кроме того, всегда приятно пообщаться с умным и скромным собеседником ).

Отлично! Тогда желаю удачи и жму вашу правую... Нет это моя правая — жму вашу левую руку! Пишите еще!

Беседовал с собой Михаил Хейна, сооснователь и руководитель Bannerboo.com

+20
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Start Fellows
Программа ВКонтакте по поддержке стартапов
Пётр Савченко
Спасибо за статью. Пожелание на будущее: хотелось бы видеть меньше «будет/сделаем» и больше «есть/сделали». И было бы интересно узнать, во сколько обошелся проект.
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Ценное замечание, спасибо ) На самом деле «есть/сделали» уже достаточно, поскольку бета-версия работает вовсю. Но да, мы сделаем отдельный пост со списком фич, которые уже работают в бете и список того, что планируем сделать в релизе.

Мы постараемся посчитать в отдельной статье. Поскольку время шло наше личное, мы не особо его записывали а иногда могли работать на выходных и поздно вечером. Но все, что можно посчитать, посчитаем.
Ответить
WinteX
Аутсорс разработка смартконтрактов и децентрализованных приложений
Павел 45868
Если не секрет, на какой "зарубежный конструктор" вы зашли?
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Не секрет, Павел, про конкурентов мы расскажем отдельно.
Это был html5maker.com
Ответить
WinteX
Аутсорс разработка смартконтрактов и децентрализованных приложений
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Классный лонгрид! Сервис поюзаем.. может че и себе создадим )))
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Спасибо, Андрей. Если будут замечания, у нас там есть кнопочка «Отзывы» — пишите туда.
Ответить
Ru-Charters.com
Аренда яхты в СПБ | Аренда катера в СПБ | Аренда теплохода в СПБ.
Дмитрий Панин
http://joxi.ru/n2Y0y0hjE4GXm6?d=1 маловато методов появления, я бы разделил методы появления на все возможные http://easings.net/ru и отдельно вынес подменю откуда появляется блок будет: из центра, сбоку, слева , справа спереди, сзади тд.
Слежу за вашим сервисом с момента когда еще бета не была запущена, изначально надеялся что будет инструмент где можно сделать баннер который на 100% примет выбранная площадка, сложность в изготовлении баннеров - как раз угодить требованиям площадок. Но это я как профессиональный баннер-мейкер рассуждаю, а для не профессионалов, что бы у себя на сайте баннер разместить — да, сервис будет полезен.
Ответить
Показать предыдущие комментарии
Ru-Charters.com
Аренда яхты в СПБ | Аренда катера в СПБ | Аренда теплохода в СПБ.
Дмитрий Панин
ну это стандартные требования эдривера, всегда так делаем баннеры.
Ответить
Ru-Charters.com
Аренда яхты в СПБ | Аренда катера в СПБ | Аренда теплохода в СПБ.
Дмитрий Панин
а можно поподробнее про плагин?
Ответить
Ru-Charters.com
Аренда яхты в СПБ | Аренда катера в СПБ | Аренда теплохода в СПБ.
Дмитрий Панин
Ой, я показал на скрине какой код добавляется в готовом файле но мы делаем в программе Adobe Edge animate, хотя я думаю суть не меняется.. забыл написать что на кнопку в исходнике нужно все же повесить клик, например мы вешаем window.open("url", "_blank");
Ответить
Hands4U
Вся ручная работа. Продавай, покупай, обучайся, общайся!
Стас Соколов
Саппорт присылал другой код и вариант решения. Совпадает только ссылка на подключение их html.js
Ответить
Hands4U
Вся ручная работа. Продавай, покупай, обучайся, общайся!
Стас Соколов
Подробней не знаю. Но некоторые наши заказчики присылают баннеры и там в коде указано что сделано для AdFox. В понедельник наш дизайнер из отпуска вернется. Узнаю. Отпишусь.
Ответить
Михаил Великий
Спасибо за оригинальную статью!
Мы анонсировали публикацию на главной странице vc.ru.
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Большое спасибо! Нам очень приятно )
Ответить
Иван Грибов
Есть ли возможность делать стандартные jpg банеры заточенные под стандартные размеры?
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Сейчас можно сделать статичный баннер в стандартных размерах. Единственное, мы пока забрали опцию сохранения картинки, она просто показывается в iframe. Можно сохранить ее оттуда.

В релизе будет сохранение в JPG, PNG, GIF, можно будет скачать HTML5 в виде архива.
Ответить
Иван Грибов
Когда планируете выйти из беты?
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Планируем в Новый год отмечать релиз )
Ответить
Toque Advertising
Авторский блог о маркетинге vanhels@bk.ru https://vk.com/toquetoque
Максим Лунин
Спасибо за материал! Интересно пишите, живо - мало таких текстов на Спарке. Удачи в вашем проекте! Может, и себе сделаю парочку баннеров)
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Спасибо, Максим! Мы планируем не останавливаться на этом, так что ждите еще )

Если сделаете, нам будет приятно )
Ответить
Toque Advertising
Авторский блог о маркетинге vanhels@bk.ru https://vk.com/toquetoque
Максим Лунин
Кстати, есть пару замечаний по сайту от меня, как от маркетолога:

1. Отзывы слишком быстро листаются, гость сайта может не успеть прочитать.
1.1. И нет такого слова "рекламист" )
1.2. И да, со временем там нужно будет вставить реальные отзывы)

2. Нужны еще примеры сделанных баннеров. Этот, конечно, забавный, но этого мало.
2.1. И не только анимированных, а статичных тоже.

3. На главном экране ну нужна кнопка "Подробнее", которая ведет на экран ниже. Лучше ее убрать (как и кнопку "Галерея"). А вставить сюда еще одну форму заявки. Просто "Создать баннер".
3.1. Возможная одна из кнопок "Создать баннер" лишняя. Достаточно той, что на главном экране и в самом низу. Люди не дураки. )

В остальном - все отлично. Продолжайте в том же духе)
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Максим, спасибо.

Согласен с каждым пунктом ). Отзывы есть уже реальные, так что вставим их в ближайшее время, и время листания уменьшим.

Примеры баннеров есть готовые. Мы будем запускать скоро английскую версию, поставим сразу новые баннеры на оба лендинга.

И кнопки тоже переделаем. Вообще, там работы много, если по хорошему )
Ответить
Toque Advertising
Авторский блог о маркетинге vanhels@bk.ru https://vk.com/toquetoque
Максим Лунин
Нужна будет консультация - обращайтесь. )
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
OtzyvMarketing
Сервис для поиска маркетинговых инструментов.
Романов Станислав
Осталось, кажется, только в Startpack добавиться ;)
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Да ) Стоит в чеклисте )) Передвину повыше ))
Ответить
Михаил Волосовский
>зашел, ужаснулся, и закрыл.

Вместо того что бы потратить от силы пару часов и разобраться как он работает(как потребовалось мне) вы предпочли сделать свой. Я изначально предвзято отнесся к вашему проекту, так как Google Web Designer является мощным бесплатным конструктором с огромным количеством шаблонов. И вот я аторизировался на вашем сайте и немного поигрался. Мне понравилось что разнообразие баннеров большое. Есть тот же ФБ, твиттер, гугл. Но мне показалось что для баннеров с гугловским разрешением не мешало бы подписать самые распространенные (те же небоскребы) Так же возможно написать элементарные рекомендации от гугл (например CTA, ссылки на целевые страницы) что бы люди попросту не сливали бюджет. Так же порадовала работа со шрифтами, можно выбирать кернинг и межстрочный интервал, но в выпадающем меню эту функцию легко пропустить. Ну и конечно же сильно не хватает слоев, но это вы и сам знаете:) А так в целом весьма симпатично и понятно. Буду ждать дальнейших новостей)
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Да, со стороны это странным кажется, наверное ) Но предыстория такова, что я очень хочу уйти от заказной веб-разработки в сторону разработки SAAS сервисов, сделать хороший продукт и развивать его. Поэтому моя логика сработала сразу в эту сторону )) Потому что мы увидели, что это можно и нужно делать быстрее и легче.

Я не спорю, что с Google Web Designer можно разобраться. До него я работал много лет с Macromedia Flash а после него с Adobe Edge Animate. Но хочется, чтобы это занимало пару минут, а не день или неделю )

Спасибо за отзыв. Мы собираем все пожелания и будем реализовывать по ходу )
Ответить
Sasha Beep
GWD - это такой отстой, что даже гугл перестал его обновлять и поддерживать. Flash (Animate CC) - наше все
Ответить
Михаил Волосовский
Понятное дело что Анимейт лучше. Но не всегда предприятию целесообразно покупать отдельно целую прогу для создания нескольких баннеров. А GWD бесплатная и обладает прекрасным функционалом для этого дела
Ответить
Sasha Beep
Хз какое это предприятие, которое не может позволить 1500 рублей в месяц за все программы махом при стоимости баннера от 1000...
Ответить
Sasha Beep
Лично мне без таймлайна вообще ничего не было понятно...
Также интересует, можно ли будет скачать креатив
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Там сейчас есть возможность анимировать каждый элемент, давать задержку появления, задавать скорость и тип анимации. Так можно сделать анимацию одного слайда. С таймлайном да, будет проще.

Креативы можно будет скачивать.
Ответить
Жизнестории
Жизненные истории простых людей
Макс про медиа
проковырялся 30 минут долбил по кнопке создать новый баннер, ничего не происходит, а столько было надежд (
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Максим, жаль, иногда могут быть моменты ( Вы с Хрома смотрели? В других браузерах еще не все отлажено.
Ответить
Жизнестории
Жизненные истории простых людей
Макс про медиа
И Хром и Фаерфокс
Ответить
Жизнестории
Жизненные истории простых людей
Макс про медиа
так и не починили?
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Спасибо, мы посмотрим в чем дело
Ответить
Котей Андрей
мммм верстка у вас от бога и вы та баннеры тоже делаете??
Где регистрация?Где то внизу видать.
А авторизация через вк требует очень дофига привилегий.

Вроде приложение похоже на SPA, но переходы по 2с на роут??И на этот роут рефрешится вся страница, серьезно??? у вас там 1 div меняется только -там инфы динамчной 0. Просто выбор размера баннера
Ответить
Сергей Лойша
про вк согласен. по этой причине зарегался через email
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Спасибо за отзыв, Андрей. У нас есть веское оправдание — надпись BETA на странице )) Но безусловно, эти моменты нужно исправлять. Комменты сообщества в этом плане нам очень помогают.
Ответить
Маркетинг по Пиратски
Увеличение прибыли в малом бизнесе от 30% и более малобюджетными методами
Александр Филатенко
Ребята и девчата! Команда - вы создали гениальный продукт. 5 минут работы и куча удовольствия - баннер закружился. Спасибо вам огромное. Вот первая попытка в доказательство: http://app.bannerboo.com/banner/9d91973241fcb
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Александр, спасибо за отзыв ) Мы рады, что вам понравилось. И круто, что сразу показали результат!
Ответить
Александр 28472
Вот не знаю ... мигалки/перделки аля Мэйл.ру/Одноклассники, мне кажется, уже, наконец-то, уходят в прошлое. Но задумка хорошая, молодцы!
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Александр, не совсем понял за "мигалки", но за задумку спасибо )
Ответить
Александр 28472
Имелись ввиду баннеры, которые мультяшат - это сильно раздражает )) Есть уже куча исследований про обратный эффект всех этих подмигивающих/перемигивающих баннеров ...
Ответить
BannerBoo
Онлайн-конструктор HTML5 баннеров
Michael Heina
Теперь понятно ) У нас в релизе будут опции — "Проиграть один раз", "Два раза", так что сильно мигать не будет, если не нужно. А еще каждый шаблон будет в статическом виде, поэтому на вкус и цвет можно будет выбрать, кому что нравится.
Ответить
Показать следующие
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.