Дизайн+Фронтенд=любовь. Как собрать экспертное сообщество и решить проблему низкого качества вёрстки
Генеральный директор AFFINAGE рассказывает, почему решил сформировать экспертное сообщество дизайнеров и фронтенд-разработчиков, и как этому способствует онлайн-конференция. В статье — тонкости организации Design is Frontend, PR-план со статистикой эффективности каналов и рекомендации для начинающих организаторов онлайн-конференций.
С чего всё началось
Три года наша команда аутсорс-продакшна по фронтенду перерисовывала элементы, «вылизывала» иконки, расставляла слои по местам и пыталась сверстать неверстабельное. Мы читали ТЗ, закладывали на задачу три часа и делали её 20 часов.
Конечно, были и чек-листы, и оптимизация процессов, и закладывание времени с коэффициентом х3, но это не помогало. Летом 2020 наше терпение закончилось. Мы решили, что проблему низкого качества нужно решить кардинально, и заговорили об этом публично.
В августе собрали пять экспертов из разных ИТ-компаний и попросили их рассказать о своём опыте на первой онлайн-конференции Design is Frontend. В прямом эфире эксперты говорили о неверстабельном дизайне, кликабельных прототипах и взаимодействии разработчиков с дизайнерами. Нашей конференцией заинтересовались 1000+ человек.
Уже в конце сентября прошла конференция FrontendLive, где коллеги поднимали аналогичные вопросы: как продуктовые дизайнеры коммитят во фронтенд, что такое хороший интерфейс и как выстроить эффективное взаимодействие между дизайнером и фронтендером. Пара докладчиков повторяется, и это доказывает актуальность темы :)
Спикеры — ядро экспертного сообщества
Наша команда постоянно общается с коллегами из digital-продакшенов и большими корпорациями с инхаус-командами, поэтому мы знали «изнутри», кто и как подходит к решению дизайн-задач. Самыми удачными практиками мы и предложили поделиться.
На первой онлайн-конференции выступили два дизайнера и три фронтенд-разработчика из НТВ/Ведомостей, JAMI, AGIMA, AFFINAGE и Voximplant.
- Арт-директор интернет-департамента НТВ (ex. Ведомости) Екатерина Булыгина поделилась опытом выстраивания эффективных процессов digital-отдела известного Издательского дома и показала чек-лист на баги.
- Frontend TeamLead Voximplant Игорь Шеко рассказал, как организовать эффективное взаимодействие между дизайнером и фронтенд-разработчиком.
- Руководитель отдела фронтенд-разработки AGIMA Сергей Кузнецов поговорил о трендах в анимации на верстке и подходящих технологиях для «оживления дизайна» проекта.
- Генеральный директор AFFINAGE Игорь Яковлев рассказал, как передавать дизайн разработчикам не плодя лишний код и каким должен быть качественный дизайн с точки зрения вёрстки.
- Product Teamlead «Простор» (ГК JAMI) Артем Чернышев показал, как анимировать интерфейсы и цифры по окупаемости анимации.
После докладов был круглый стол, где дизайнеры и фронтенд-разработчики обсуждали проблемы коммуникации. Завершал конференцию разбор сайтов Кинопоиска, Пикабу, Sports.ru и других.
После конференции шквал вопросов не останавливался. Мы поняли, что актуальную проблему нужно решать в потоке и создали чат в Telegram, где эксперты дают практические рекомендации — https://t.me/designisfrontend
Визуальный стиль конференции
Мы использовали элементы корпоративного стиля нашей компании: цветовые сочетания, графические формы и типографику. Это формирует легко узнаваемый образ компании и нашей онлайн-конференции. Каждый визуал — это маленький ключ к пониманию нашей миссии, принципов работы и путей развития.
Знаете, что такое аффинаж? Это очистка тяжелых металлов от примесей. Наш фирменный цвет — жёлтый. Это цвет чистых золотых слитков, которые прошли аффинаж. Два дополнительных цвета — чёрный и белый. Такие цвета позволяют нам выглядеть одновременно строго и агрессивно. Сочетание цветов привлекает внимание, позволяет создавать нестандартные компоновки и убирает цветовой хаос на визуалах.
Картинки в фирменном стиле использовали для всех каналов привлечения аудитории: в Timepad, группе Facebook, рекламных постах в Telegram-каналах и календарях.
Через некоторое время человек, увидев чёрные силуэты на жёлтом фоне, поймёт «ага, это та самая тусовка дизайнеров и фронтендеров! Надо посмотреть, что интересного они придумали на этот раз».
Обработка картинок: как это было
Мы попросили спикеров прислать фотографии на однотонном фоне в полный рост. Оказалось, что таких почти ни у кого нет. 4 из 5 фотографий спикеров сделаны специально для нашей конференции.
Каждую фотографию обрабатывали и интегрировали в картинки для соцсетей.
Мы посчитали, что в общей сложности наши спикеры работают в digital 58 лет. После этого во внутренний чат прилетели картинки с digital-дедушками.
Идея нам понравилась, и мы решили использовать эффект состаривания из FaceApp для одного из постов.
Кстати, идея подписывать имена и компании спикеров принадлежит управляющему партнёру «Тэглайн» Алексею Раменскому. Мы проконсультировались с Алексеем перед началом организации конференции и получили много стратегических советов, о которых вы узнаете в следующих статьях.
Как продвигали конференцию
Для продвижения использовали пять каналов: профильные Telegram-каналы, чаты, сообщества ВКонтакте, таргетированная реклама в Instagram, календари и публикации в соцсетях у лидеров мнений.
Телеграм-каналы
Новость о конференции была опубликована в четырёх Telegram-каналах: @tpverstak, @webstandards_ru, @awdee и @digitalrussian.
Самым эффективным оказался @webstandards_ru. Основатель канала продублировал новость о конференции на других своих ресурсах — в Твиттере, ВКонтакте, Facebook, а также упомянул нас в своём подкасте.
Telegram-чаты
Про конференцию написали в пяти digital-чатах. Некоторых участников мы просили рассказать о нас, но в основном рекомендации были добровольными.
Публикации в Telegram-чатах и каналах принесли нам 82% регистраций.
Facebook и Instagram
В Facebook задействовали спикеров и других известных участников digital-рынка. Спикеры писали посты и делали репосты о выступлениях. Лидеры мнений делились информацией о предстоящей конференции.
Пост о конференции от члена Программного Комитета Frontend Live и основателя онлайн-школы HTML Academy Сергея Попова
Мы настроили таргет в Facebook и Instagram на владельцев студий и включали промотирование уже опубликованных постов на аудитории: посетители сайта affinage.ru, собственников веб-студий, арт-директоров, менеджеров, тимлидов и всех, кто интересуется веб-разработкой.
Этот канал хорошо сработал на узнаваемость, но регистраций принёс немного — 12%.
ВКонтакте
ВКонтакте была всего одна рекламная публикация в сообществе For Web. Ещё два анонса были бесплатными.
Через неделю после старта продвижения о конференции узнала большая часть профессионального сообщества. Один из пользователей даже высказал недовольство по этому поводу.
Из ВКонтакте было 5% регистраций.
Календари
Мы разместили новость в календарях RUNET-ID, IT-Events и GitHub. Tagline и Cossa информацию о конференции не опубликовали, — возможно, информация не прошла модерацию.
Этот канал также был не очень эффективным: менее 1% регистрации.
Мы изначально делали ставку на продвижение именно в Telegram. Опытным путём мы выяснили, что не ошиблись. К следующей конференции скорректируем план продвижения и увеличим количество публикаций в Telegram.
Общее распределение количества регистраций выглядит так:
Группа конференции в Facebook
Мы создали отдельную группу, где публиковали истории о процессе подготовки конференции, спикерах и докладах.
Нам было важно, чтобы слушатели увидели, что спикеры — тоже люди, которые когда-то только начинали свой путь в digital и совершали ошибки. Например, руководитель отдела фронтенд-разработки AGIMA Сергей Кузнецов однажды уронил сайт одного из топ-20 банков на полтора часа, генеральный директор AFFINAGE Игорь Яковлев сделал из кулинарного сайта рекламную площадку фильмов 18+, а из-за ошибки Frontend TeamLead Voximplant Игоря Шеко один маленький банк чуть не закрылся.
Отзывы пользователей
Мы очень вдохновились комментариями во время трансляции и отзывами в анкете. Люди благодарили за интересный контент, с удовольствием отвечали на вопросы в анкете и давали рекомендации для следующих онлайн-конференций.
Примеры тем, которые пользователи хотели видеть на следующей конференции
Все отзывы мы учли, и спустя три месяца после первой Design is Frontend готовы снова прокачивать рынок и делать лучшую версию онлайн-конференции. 9 декабря поговорим о потерянных багах, ТЗ на всех этапах и сложных видах анимации на вёрстке.
Как это все способствует развитию профессионального сообщества? В нашем Telegram-чате можно задавать вопросы спикерам и получать ответы. Вопросы и ответы видны в чате, это самый настоящий диалог! Ещё мы выкладываем перезентации докладчиков и записи докладов. Делиться знаниями — главный фактор формирования сообщества.
Бонус: рекомендации для начинающих организаторов онлайн-конференций
Всё, над чем нам стоит поработать, мы собрали в список. Он может пригодиться тем, кто, как и мы, только начинает собирать единомышленников в онлайне.
- Выделите отдельного человека для организации трансляции.
- Ноутбук с программой для потокового вещания должен быть очень мощным.
- Используйте Restream.io для мультистриминга.
- Записывайте видео для звука, чтобы на записи устранить звуковые лаги. Чем больше вариантов записи, тем лучше.
- Используйте готовый сервис рассылок, чтобы избежать ошибок рассылок Timepad. Например, Mailchimp.
- Исправьте шаблон письма Timepad и добавьте информацию о том, что ссылка на трансляцию придёт в день трансляции.
- Сделайте каждому спикеру виртуальный фон, добавьте ФИО и должность.
- Подготовьте анкету для сбора обратной связи у пользователей, спросите, что им будет интересно узнать на следующих конференциях.
- Пообщайтесь со спикерами после конференции и спросите, что было хорошо и над чем еще нужно поработать.