Как создать интерактивное сравнение изображений «До и после»: сервис Interacty

Как создать интерактивное сравнение изображений «До и после»: сервис Interacty

технология

Как создать интерактивное сравнение изображений «До и после»: сервис Interacty
«До и после» — этот формат еще называют «Было/стало» или «Тогда и сейчас» — позволяет эффектно сравнить любые два изображения, включая гифки.

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

Как создать «До и после»?

Свое собственное сравнение можно создать за несколько минут с помощью универсального конструктора интерактивного контента Interacty. Для этого откройте галерею шаблонов и выберите механику «До и после».

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

Выбрали подходящий вариант? Нажмите «Использовать шаблон». Если вы не зарегистрированы, то сервис предложит создать аккаунт (это бесплатно и займет меньше минуты). Если аккаунт уже есть, то вы сразу же попадете в редактор Interacty.

Перед вами — готовый к публикации проект. Достаточно просто загрузить нужные картинки и настроить оформление в соответствии с вашей идеей.

Для загрузки картинок «До и после» кликните по центральной картинке (в нашем случае это старый и современный Лондон) — блок сравнения выделится голубой обводкой. Теперь весь этот блок можно масштабировать и двигать внутри рабочей области. При этом на панельке справа появятся кнопки загрузки изображений для левой и правой картинок.

Нажмите на кнопку загрузки («Изменить») — перед вами появится всплывающее окно с возможностью выбрать или загрузить изображения. Для примера мы взяли фотографии тающих ледников с сайта NASA.

Если вы выбрали шаблон без текстов, то ваш проект уже готов — публикуйте!

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

Если нужно добавить логотип или, скажем, кнопку «Поделиться» ВКонтакте — включите режим «Эксперт» (на панели справа). В этом режиме можно добавить тексты, картинки и кнопки, перетащив их на рабочую область или просто кликнув на нужный элемент.

У нас получился такой проект:

Если вы активно изменяли дизайн проекта, не забудьте переключиться в мобильный редактор и адаптировать ваш проект для мобильных устройств. Достаточно просто подравнять блоки и вернуть «расползшиеся» тексты и кнопки обратно в рабочую область — это займет около минуты.

Перед публикацией можно настроить то, как ссылка на ваш проект будет отображаться в социальных сетях. Для этого перейдите в таб «Проверка» и нажмите на кнопку «Редактировать».

В открывшемся окне вы сможете указать нужный вам заголовок и пояснительный текст, а также загрузить картинку — поставим уже знакомую нам картинку с сайта NASA.

Обратите внимание на панельку слева.
 

  • «Основные настройки» — это то, как будет выглядеть ссылка на проект, если поделиться ею в мессенджерах или социальных сетях.
  • Экран 1 и 2 — это настройка внешнего вида поста в Фейсбуке и ВКонтакте при нажатии на кнопки «Поделиться» (ведь мы поставили две социальные кнопки). В нашем примере будем использовать везде одинаковые значения.
  • Если вы планируете встроить проект на сайт — в поле «Переадресация» укажите страницу, на которой он будет размещен.

После публикации проект будет выглядеть красиво и именно так, как вам нужно.

Готово! Теперь вы можете смело публиковать проект: используйте прямую ссылку на ваш проект или встройте его на сайт или в блог, используя код, полученный при публикации.

Вот что у нас получилось в итоге: «Самые жаркие дни в Антарктиде за всю историю наблюдений» (клик).

Инструкция актуальна на октябрь 2020 года.

С помощью этой технологии были реализованы следующие проекты

Над материалом работал
Олег Лукинов

Иллюстрации:
скриншоты сервиса Interacty

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!

Удачи и ошибки «Обвинительных клонов». Как в России действует презумпция виновности

Удачи и ошибки «Обвинительных клонов». Как в России действует презумпция виновности

проект

Удачи и ошибки «Обвинительных клонов».
Как в России действует презумпция виновности

ссылка на проект

авторы

Анастасия Сечина,
Александра Яшаркина,
Мария Кольцова,
Тимофей Бутенко,
Ирина Шабалина,
Олег Григоренко,
Ярослав Чернов,
Анна Макарова,
Максим Поляков

Ты не ходишь на митинги, не участвуешь в акциях протеста, не высказываешь свою гражданскую позицию в социальных сетях, но ты всё равно незаконно можешь попасть за решётку, правда, без шумихи — тихо и незаметно. Как в России действует презумпция виновности и почему политический мотив необязателен, чтобы посадить в тюрьму любого? Об этом задумались создатели проекта «Обвинительные клоны». И не просто задумались, а собрали истории тех, кто невинно осуждён.

месяца работы

человек в команде

тысяч знаков текста отредактировано

Анастасия Сечина,
редактор-координатор проекта «Обвинительные клоны»

Сначала была тема

Идея проекта «Обвинительные клоны» выросла из темы, которой я занималась как журналист, — история Николая Смирнова, инструктора по сплавам.

Весной 2019 года ко мне обратилась супруга Николая, рассказала, что муж получил 11 лет колонии строгого режима, попросила разобраться. Я долго изучала документы, ездила к Николаю, встречалась с мамой, родными, адвокатом… Пыталась понять мотив обвинения не политического или общественного деятеля, активиста, а простого тренера. Я начала спрашивать юристов, адвокатов почему так происходит — и у меня родилась идея «объясняющего» проекта как устроена система.

Где-то в августе-сентябре я начала верстать первые макеты, прикидывать, как это всё будет выглядеть.

В поисках способа реализации идеи я вышла на Софию Кропоткину (на тот момент главного редактора интернет-журнала «7×7 — Горизонтальная Россия»), которая поддержала меня. Первыми в проект пришли сотрудники «7×7». Начались обсуждения, переписка, интервью… В ходе этой работы мы «допиливали» концепт идеи. Потом стали думать, кого и чего не хватает, какие задачи не охвачены. Бросили клич по личным каналам, площадкам медиа-проекта «Четвёртый сектор». К нам присоединились Тимофей Бутенко, сотрудник издания «Версия Саратов», журналист-фрилансер Маша Кольцова, другие специалисты.

В октябре началась активная фаза производства. Мы собирали материал, верстали, рисовали… Была у нас одна офлайн-встреча в Москве, на которой мы утвердили структуру. В декабре 2019 года проект опубликовали.

Обложка проекта

Название «Обвинительные клоны» придумал Тимофей Бутенко. Рабочее было — «Презумпция виновности», но мы понимали — это заезженное выражение. Мы крутились вокруг словосочетания «обвинительный уклон», но в какой-то момент Тимофей предложил «Обвинительные клоны», ведь решения «клонируются» по определенному шаблону, к тому же название перекликается со словосочетанием «обвинительный уклон».

На самом деле, в проекте нет каких-то грандиозных открытий. Всё уже описано до нас. Ещё в 2014-ом Институт проблем правоприменения выпустил книгу «Правоохранительная деятельность в России», в которой объяснил, как устроена и работает система. В 2019 году книгу «Невиновные под следствием» издал руководитель юридического департамента фонда «Русь сидящая» Алексей Федяров. Статьи о полицейском произволе и необходимости реформы правоохранительных органов и судебной системы регулярно появляются в проекте «Голунов», запущенном «Медузой»…

Суть и цель проекта

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

Мы начали новый проект. Сейчас, когда его верстаем, сталкиваемся с тем, что из чисто журналистского он превращается в активистский. Мы всё равно приходим к тому, что размещаем некий призыв к действию, в данном случае — призыв присоединиться к комьюнити, которое занимается этой темой.

K

Прочитав проект «Обвинительные клоны», ко мне обратились люди с просьбой помочь им рассказать о смертях в полиции, тюрьмах, СИЗО, в колониях и в ходе антитеррористических операций.

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

Мы думали, а должны ли в одном из блоков дать какие-то идеи борьбы, но отказались, оставив лишь прикладные советы для человека, который незаконно оказался под следствием:
 

  • не признавать свою вину, как бы ни уговаривали оперативники или следователи, и какие бы «сделки» они не предлагали;
  • не ждать, что суд разберётся;
  • найти хорошего адвоката;
  • подписывать протоколы лишь с пояснениями и замечаниями;
  • обращаться в СМИ, и чем раньше, тем лучше.
В проекте «Обвинительные клоны» 8 историй

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

Дизайн и рубрики

Иллюстрации к проекту создала художница Анна Макарова, которую предложили ребята из «7×7», работающие с ней ранее над одним проектом. Мы выдали техзадание, Анна предложила свой вариант. Например, тот монстр, который сейчас есть на сайте — это она увидела.

Верстал Ярослав Чернов. Он из медиа-проекта «Четвёртый сектор». Он у нас занимается фотографией, SMM, вёрсткой и дизайном.

Структуру сайта мы обсуждали на оффлайн-встрече. У нас было две версии, каким образом мы всё будем излагать. Первый вариант — по этапам, от доследственной проверки до обжалования. Но от этого варианта мы отказались, отдав предпочтение той структуре, которая есть сейчас. Мы говорим: «Вот люди, вот их истории, вот что происходит, а вот почему оно происходит. Если такое случается с вами, то поступайте вот так».

Исполнители на проекты порой находятся сами. Например, сейчас, работая над новым проектом о смертях в полиции, тюрьмах и так далее, я просто листала ленту Фейсбук и наткнулась на иллюстрации к музыкальному альбому моей подруги. Заинтересовалась автором обложки — это художница Ольга Молчанова-Пермякова, зашла на её страницу, посмотрела работы — они мне очень понравились. Подумала, что было бы здорово, если бы она нарисовала для нас иллюстрации. А на следующий день Ольга опубликовала пост: «Слушайте, никто не хочет меня позвать в какой-нибудь проект?». И я тут же ей написала. Правда, у человека была сложность, она никогда не рисовала для интернет-проектов, всегда рисовала «для стены»… Но мы с ней всё равно начали работать. Первый раз в жизни она взялась за нечто подобное. Очень здорово, когда находятся такие люди.

Про поиск и отбор экспертов

На сайте есть раздел «Эксперты проекта». Это люди, которые оказали нам неоценимую помощь. В значительной части проект построен на их объяснениях.

Эксперты собирались с миру по нитке. У каждого члена команды были свои контакты, мы их изучали, анализировали, старались, чтобы список экспертов не был однотипным, чтобы был и адвокат по уголовным делам, и учёный — как бы сторонний наблюдатель, и бывший следователь или судья. Нам было важно, чтобы в проект попали те люди, которые побывали внутри. Почему сотрудники бывшие? Действующий сотрудник системы, даже если он не принимает правила, по которым она работает, не будет говорить публично.

С какими-то экспертами я пообщалась, с какими-то журналисты «7×7», Маша и Тимофей. Потом мы собрали все эти интервью, расшифровали и из них начали компоновать итоговый текст. Буквально идёшь по каждому интервью и вычленяешь комментарии, которые относятся к определённому блоку.

А что дальше?

Сейчас я постоянно в мыслях возвращаюсь к «Обвинительным клонам», думаю, что делать с ним дальше, как развивать, поддерживать. Наверное, нужно продолжение? Мне этот вопрос не даёт покоя. Пока это просто мысль. Я даже ни с кем её ещё не обсуждала.

Думаю, если «Обвинительные клоны» развивать, то по образцу другого нашего проекта, посвящённого представителям ЛГБТ-сообщества, — «Мы принимаем (We accept)». Этот проект начинался с историй людей, которые совершили каминг-аут, выбрали открытость в странах с высоким уровнем гомофобии. Это не только Россия, но и Узбекистан, Казахстан, Кыргызстан, Балканские страны. Сейчас мы выпустили продолжение проекта. На той же площадке что-то переверстали, добавили, и появилась вторая часть — истории родителей ЛГБТ-детей. Я не исключаю, что возникнет третья часть — истории гомофобов, которые поменяли свою точку зрения.

Не знаю, нужно ли (развивая проект «Обвинительные клоны») делать исторический экскурс, например, вспоминать 1937 год. Я не очень люблю проводить аналогии, мне кажется это спекулятивным.

Что касается расширения географии проекта в процессе его развития, то это возможно. В первой части мы не ставили цели посмотреть на соседние государства, например, Беларусь, Украину, но во второй или третьей (если они будут) эту идею можно воплотить. Не знаю, надо подумать.

В «Обвинительных клонах» мы хотели сфокусироваться на том, что происходит в России.

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

Если брать другую страну, то нужно точно такое же погружение совершать, потому что очень часто, когда говорят про обвинительные уклоны, начинают сравнивать процент оправдательных приговоров в Советском Союзе, США или другой стране. Это некорректное сравнение, потому что в разных странах по-разному устроена система правосудия, и не только правосудия, а вся система — от доследственной проверки до обжалования.

Месть и страх

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

Основных риска для журналиста в современной России два.

Первый — психи. Если я пишу на темы ЛГБТ, то вполне возможна встреча в тёмной подворотне с активистом движения «Пила», который решит тебе показать, как надо жить в этой стране. Такое возможно, да. Ну, не ходи по тёмным подворотням.

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

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

Ошибки и уроки
Слабым звеном проекта я бы назвала призыв присылать истории. Когда мы кинули этот клич, то, мне кажется, мы не вполне понимали, с чем придётся иметь дело. Ведь присланная читателем история не может быть просто так опубликована. Факты нужно проверить, в деле разобраться. Это очень большой объём работы, перелопачивание горы документов, встречи.

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

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

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

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

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

К сожалению, мы не продумали дистрибуцию таким образом, чтобы был «хвост» у проекта, чтобы не было пика и резкого спада. И это ещё одна причина, по которой мои мысли постоянно возвращаются к «Обвинительным клонам» — мне хочется «реабилитироваться», иначе подойти к его продвижению.

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

Над материалом работал
Дмитрий Артюх

Иллюстрации:
скриншот проекта «Обвинительные клоны»

Делали похожие проекты? Расскажите о своем опыте, нам интересно!

Как сделать голосование-баттл на вашем сайте: конструктор Interacty

Как сделать голосование-баттл на вашем сайте: конструктор Interacty

технология

Как сделать голосование-баттл на вашем сайте: конструктор Interacty

В отличие от привычного «традиционного» голосования, голосование-баттл позволяет отдать за понравившийся вариант неограниченное количество голосов.

Формат голосования-баттла отлично подходит для повышения активности аудитории и лучше всего работает, когда есть 2 «непримиримых» варианта: например, кошки или собаки, платье белое с золотым или синее с черным, Оксимирон или Гнойный.

Как создать голосование-баттл?

Свой баттл можно сделать всего за несколько минут с помощью универсального конструктора интерактивного контента Interacty. Откройте галерею шаблонов и выберите механику «Рейтинг-баттл».

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

Выберите один из вариантов и нажмите «Использовать шаблон». Если вы не зарегистрированы, то сервис предложит создать аккаунт (это бесплатно и займет меньше минуты). Если у вас уже есть аккаунт, то вы сразу же попадете в редактор Interacty.

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

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

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

Когда изображения загружены, можно заняться деталями. Например, перекрасить кнопку голосования (в редакторе это «Подсветка лидера»).

Перед публикацией можно настроить то, как ссылка на ваш проект будет отображаться в социальных сетях. Для этого перейдите в таб «Проверка» и нажмите на кнопку «Редактировать».

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

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

Как добавить в Рейтинг-баттл текст и социальные кнопки?

Если вы создаете рейтинговое голосование, но не планируете встраивать его на сайт или же просто хотите добавить дополнительную информацию (такую как заголовок, подписи или социальные кнопки), вам потребуется режим «Эксперт».

Перед тем как начать добавлять элементы, в уже созданном проекте поменяем фон и сдвинем блок с голосованием ниже, чтобы освободить место для заголовка.

Режим «Эксперт» включается на панели справа и позволяет добавлять тексты, картинки (в том числе логотип) и кнопки. Кликните по элементу, чтобы он добавился в проект (также работает drag and drop).

У нас получился вот такой проект.

Не забудьте переключиться в мобильный редактор и адаптировать проект для мобильных устройств. Достаточно просто подравнять блоки и вернуть «расползшиеся» тексты обратно в рабочую область — это займет около минуты.

Все, публикуйте! Посмотреть, что получилось можно по ссылке.

Инструкция актуальна на сентябрь 2020 года.

Над материалом работал
Артем Гришанов

Иллюстрации:
скриншоты сервиса Interacty

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!

Как чат-бот помог в игровой форме познакомить с музеем

Как чат-бот помог в игровой форме познакомить с музеем

проект

Как чат-бот помог в игровой форме познакомить с музеем

ссылка на проект

авторы

Марина Кутепова,
Лев Якимов

финансирование

средства Музея

Музей советских игровых автоматов во время самоизоляции запустил чат-бот в Telegram, чтобы заинтересовать виртуальных посетителей экспонатами, каналом Музея на YouTube, научными статьями, сувенирным магазином и соцсетями.

человека в команде

минут на прохождение игры

человек пообщались с чат-ботом

Марина Кутепова,
автор проекта, сотрудница Музея советских игровых автоматов (Санкт-Петербург)

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

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

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

Как создавали чат-бот

Над ботом работало 2 сотрудника Музея советских игровых автоматов: я писала сценарий, а мой коллега Лев Якимов собирал все это в блоки в конструкторе. Сделали бот за 3 недели, но это потому, что у меня на тот момент был месячный ребенок, иначе бы справились за неделю. Чат-бот для Telegram мы оба делали впервые.

Бот основывает свою работу на блок-схеме, составленной из разных мини-сюжетов, соединенных смысловыми «мостиками». Например, в нашем боте есть вступление и 6 мини-сюжетов (этого объема достаточно, чтобы пройти бота в среднем за 10 минут). После того, как обозначена основная нить повествования, можно проработать вариативность ответов и параллельные ветки для разнообразия игры, а в последнюю очередь подобрать фотографии. Опыт тестирования аналогичных ботов показал, что нужно по возможности делать фотографии не просто иллюстрациями, а частью заданий, чтобы стимулировать игрока к дополнительному взаимодействию.

Я работала сначала на бумаге, а потом уже все переносила в Таблицы Гугл, для удобства работы с коллегами и внесения правок.

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

Как собирали чат-бота в конструкторе

Для сборки чат-ботов в Telegram существует большое количество конструкторов, все они условно бесплатные (за плату можно отключить рекламу и разблокировать дополнительные опции). Можно было бы собрать бота бесплатно и без ограничений на языке программирования Python, но из-за того, что мы не знали, сколько продлится карантин, пришлось поспешить и воспользоваться готовым конструктором. Мы выбрали простой в освоении и не очень дорогой PuzzleBot (400 руб./мес).

Сборка бота с отладкой заняла несколько дней: сначала собрали структуру,

а потом добавили контент из текста и медиафайлов.

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

Во время закрытого тестирования оказалось, что весь контент между двумя соседними кнопками бот выдает одновременно. Поэтому пришлось добавить дополнительные кнопки типа «Ага!», «Ну понятно!», «Идем дальше!», чтобы держать игрока в тонусе и не дать ему потеряться в лавине сообщений бота.

Для кого создан чат-бот

Основная аудитория Telegram — молодые люди 18-35 лет, поэтому для повествования мы выбрали дружественный ироничный тон, а в сам тур включили забавные ситуации из музейных будней, которые были бы понятны и близки человеку, даже если он у нас не был.

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

Какие выводы сделали

Если бы мы решили сделать еще один бот, то собрали бы его на языке программирования Python, потому что существующие конструкторы более-менее одинаковы. На Python функционал был бы ограничен только платформой (в нашем случае —Telegram) и не вставал бы вопрос финансирования бота (в какой-то момент мы перестанем оплачивать конструктор и чат-бот исчезнет). Возможность загружать видео позволила бы разнообразить статичную картинку и сформировать объемное представление о пространстве музея.

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

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

  1. Замена/помощь справочной службе. В отличие от человека, принимающего звонки, чат-бот может отвечать на вопросы круглосуточно. А заодно принимать запись на экскурсии и занятия.
  2. Социальную историю — возможность для посетителей заранее сориентироваться, как устроен музей, где вход, как выглядят навигационные знаки и этикетки. Социальные истории разрабатываются как элемент доступной среды, но бывают полезны не только людям с расстройствами аутистического спектра.
  3. Новые способы поговорить о коллекции и миссии музея.
  4. Новые инструменты для изучения своей аудитории.
  5. Возможности достичь «не-посетителей» — тех, кто в силу географических, экономических или социальных причин не попадает в музей.

По материалам онлайн-журнала центра «Музейный опыт» (создан при поддержке Благотворительного фонда Владимира Потанина).

Как оформить канал на YouTube

Как оформить канал на YouTube

технология

Как оформить канал на YouTube
Оформление канала на YouTube — работа со статичными изображениями, не требующая ничего сверхъестественного. Но это также важно, как грамотный контент-план и запись качественных роликов.

Аудитория YouTube превышает два миллиарда пользователей. Ежедневно все эти люди просматривают в совокупности более миллиарда часов видео, что сопоставимо с длительностью 670 тысяч полнометражных фильмов (вряд ли такое количество вообще существует).

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

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

Читайте в этой статье:

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

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

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

Бесплатная версия

Независимо от тематики канала, наполнение контентом сопровождается затратами (микрофон, декорации, перемещения, софт для профессионального редактирования видео и т.д.), поэтому как минимум на первых порах нет необходимости добавлять в этот список еще и платное ПО для работы с фото.

Интуитивно понятный функционал

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

Готовый демо-материал

Как мы отметили выше, главное — хорошая идея. Чтобы создать уникальные, выразительные логотип, шапку и превью для ролика не нужно ломать законы верстки, если только на этом не построена концепция оформления. Шаблоны, макеты помогают промотать стадию пустого полотна, сконцентрироваться на «изюминке».

Возможность масштабировать рабочий процесс

У каждого YouTube-канала по ходу развития вырабатывается собственный фирменный стиль: особые шрифты, комбинации цветов, графические вставки, варианты верстки. Под рукой всегда должны быть заготовки для создания нового оформления — дублирование, комбинирование, полное или частичное редактирование.

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

Работать можно индивидуально и командой (до 30 человек) в веб-версии, приложениях для Android, iOS, Windows, macOS. Изменения сохраняются и синхронизируются автоматически. Если видео не требует сложного монтажа и редактирования, здесь же можно объединить фрагменты, наложить текст, изображения, музыку из встроенной библиотеки треков, сделать видео на подложке. Добротный, многофункциональный, и при этом предельно простой инструмент как для текучки, так и для реализации креативных идей в перспективе.

Создаем логотип для канала. Идеи и реализация
Содержание значка для профиля в Youtube чаще всего бывает следующим (рекомендуемые варианты):
 

  • Фотография автора канала (лицо или бюст в профиль или в анфас, реже — во весь рост);
  • Групповой снимок (если канал ведут несколько человек);
  • Надпись (бренд);
  • Иконка (официальный логотип);
  • Надпись и иконка вместе.

 

(неприемлемые варианты): 

  • Без значка (абстрактная иконка человечка для аккаунтов Google по умолчанию);
  • Абстрактное изображение (снимок или картинка);
  • Обрезанная иконка (видна только часть надписи).

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

В конструкторе логотипов для Youtube от Canva собственные фотографии достаточно просто перетянуть на полотно (доступны загрузка с компьютера, а также напрямую с Google Drive и Dropbox), и посмотреть, нужно ли применять какие-либо фильтры или настройки. Например, иногда неплохо смотрятся черно-белые значки.

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

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

Пример легкой адаптации значка для канала на основе шаблона.

Слева — оригинал, справа — значок, созданный на его основе. Мы заменили шрифт с Selima на Elowen Caps, размер текста основной надписи уменьшили со 118 до 80, подобрали хорошо подходящий по стилистике оттенок фона за надписью, указав в строке поиска цветов hex-код цвета текста #222222. Также, сократили интервал между буквами в слове «Комментарии» и добавили иконку с мячом из встроенной библиотеки (вкладка «Элементы»). Это лишь одна из возможных вариаций.

Сохраняем в формате PNG. Логотип готов.

Дизайним шапку (она же обложка или баннер). Тренды и лайфхаки
Шапка — самая простая часть в работе по оформлению. Как правило, используются три легких простых варианта:
 

  • Фоновое изображение + название/описание проекта;
  • Фоновое изображение + название/время выхода новой трансляции/ролика;
  • Изображение без текста.

Первая опция: по сути, нужно просто подобрать хорошее, отражающее суть канала YouTube изображение и добавить название проекта — по такому принципу оформлены баннеры, пожалуй, 99% всех топовых аккаунтов. Его и стоит придерживаться, если нет идей и возможности реализовать какой-либо уникальный художественный дизайн.

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

Третья опция: изображение без надписей. Лидер по простоте реализации, но нужно учитывать, что такая шапка уместна для тех проектов, которые могут подчеркнуть бренд, деятельность, продукцию, масштабы одним изображением. Ниже примеры баннеров (сверху вниз) Google, Intel, LinkedIn, HP, Ferrari, BBC.

Смешайте их (например, добавьте фотографию Ferrari на обложку канала Google, и наоборот), и в фотографиях уже не будет логики.

Любой тип обложки можно сделать в Canva, используя, в том числе готовые шаблоны. Принцип работы аналогичный. Выбираем макет, добавляем свой текст, изображение, корректируем цвет надписей и размер, если необходимо, скачиваем готовый файл. Размер полотна менять не нужно, рекомендуемые YouTube параметры прописаны автоматически.

Несколько лайфхаков

1. При загрузке шапки в профиле качество изображения ухудшается. Это известная головная боль, пожалуй, во всех соцсетях. Чтобы максимально сохранить качество, сохраняйте файлы для обложки с наибольшим доступным размером. Соотношение сторон останется неизменным, но когда YouTube будет сжимать изображение, в частности, текст, мелкие детали будут более четкими.

Эта опция доступна пользователям Canva Pro, однако, можно изначально создать файл с двукратным увеличением, и получить аналогичный результат совершенно бесплатно. Для этого выбираем опции «Создать дизайн» (на главной странице аккаунта) или «Файл» (в окне редактора), затем — «Настраиваемые размеры», и прописываем ширину и высоту (5120×2880 пикселей).

Также можно дублировать надписи (копировать и вставить), а затем поместить друг на друга. Это еще один способ сохранить идеальное качество после сжатия YouTube.

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

3. Когда заменяете фотографию, может потребоваться изменение цвета текста, подложки и т.д. Подобрать оптимальный оттенок просто, используя подсказку «Цвета с фото».

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

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

Три рабочих, наиболее популярных варианта:
 

  • Кадр из видео без надписей и графики;
  • Кадр из видео с текстом и графическими элементами;
  • Изображение в виде заставки к фильму (надпись+графика).

Все приведенные выше миниатюры побуждают к просмотру, не так ли? Они точно и в эстетичной форме отражают суть роликов. На YouTube огромное количество (точнее сказать, большинство) роликов с кричащими, чересчур яркими превью, особенно в развлекательной, игровой тематике, которые набирают сотни тысяч и миллионы просмотров. Стоит ли выбирать такой путь, решать автору канала. Работают оба варианта, но, согласитесь, листать ленту с миниатюрами, как на примере выше, смотреть было бы намного приятнее.

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

Создайте отдельные файлы для миниатюр по рубрикам. Копируйте уже существующую страницу, и вписывайте новый текст. Это позволит за секунды готовить превью для видео в конкретной рубрике в едином стиле (рекомендуется!). Так делают, Expedia, Yandex, Vimeo и другие.

Поэкспериментируйте по мере возможности со светлыми оттенками и «воздухом». В ленте YouTube по любому запросу преобладают тяжелые яркие цвета (красный, желтый, бордовый, синий, оранжевые, фиолетовый, салатовый). Миниатюра, на которой глаза пользователя могут отдохнуть, имеет хорошие шансы побудить зрителя запустить видео. Ниже — оригинал шаблона.

Идеи по оформлению, и источники вдохновения

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

Несколько примеров легких и приятных для восприятия каналов YouTube

Airbnb — достаточно комфортные цвета, брендирование, разное оформление миниатюр в зависимости от рубрики.

Coursera — все структурировано, хороший баланс ярких красок и воздуха.

FitnessBlender — ничего лишнего. Замечательные оформление и подача для обучающей тематики.

Удачных экспериментов и успешного старта!

С помощью этой технологии были реализованы следующие проекты

проект

Над материалом работал
Марк Орлов, региональный специалист Canva

Иллюстрации:
предоставлены Марком Орловым

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: