Как сделать таймлайн в сервисе Timeline JS
Таймлайн — это формат подачи информации, где события выстроены в хронологическом порядке. Если история развивается во времени, таймлайн — один из лучших способов организовать повествование.
В чём разбираемся
  • 1
    Как подготовить контент для размещения на таймлайне
  • 2
    Как создавать интерактивные таймлайны в Timeline JS
  • 3
    Как обновлять уже опубликованные таймлайны
Сравните два способа представления биографии
Таймлайны уместны для многих тем. Используйте этот формат, чтобы рассказать биографию героя или осветить благоустройство набережной в вашем городе. Визуализируйте, какой путь прошли учёные, чтобы запатентовать новую технологию. Много просмотров получают ленты времени об исторических событиях. Таймлайн — это способ переупаковать и актуализировать уже опубликованный или известный контент. Соберите публикации, посвященные одному событию или актуальной теме в вашем (или чужих) изданиях, не забудьте указать источники данных и создайте новый мультимедийный продукт.
Изучаем примеры
Проанализируйте кейсы мультимедийных проектов, выберите визуальные и содержательные приёмы, которые удерживают внимание пользователя. Найдите ошибки/неточности.
История зимних Олимпийских игр
«Коммерсант» рассказывает о том, как зимние виды спорта занимали своё место в Олимпийском движении
Чемпионат мира по футболу-2018
«АиФ в Беларуси» использовал формат обновляемого таймлайна, чтобы сообщать пользователям результаты игр.


Преимущество таймлайна перед текстом — визуализация и погружение читателя в важные вехи развития истории, а также акцент на временных промежутках между событиями.
Рассматриваем проект «Планшет, который мы не увидели»
Анализируем примеры
«Ревда-инфо.ру», издание из небольшого города в Свердловской области, активно использует таймлайны для представления актуальных для местного сообщества тем.
Капитальный ремонт улицы Зыкина в Ревде
Цена ремонта: 17,3 млн рублей (14 млн выделила область). Заказчик ремонта: Управление городским хозяйством.
Дорога после капитального ремонта начала разрушаться
Цена ремонта: 30 млн рублей. Работы выполняла екатеринбургская компания «УралДорТехнологии».
После изучения кейсов сформулируйте, что редакциям удалось в этих материалах сделать хорошо, а что вы бы посоветовали подправить/изменить.
Самый трудозатратный этап создания ленты времени — подготовительный: найти и верифицировать материал, выстроить хронологию, подобрать фото, видео, посты в соцсетях, новости по теме. Если вы уже поработали над историей, собрали необходимые факты, сама «упаковка» контента в таймлайн не займёт много времени. Это несложно и не затратно по времени, а результат выглядит более объёмным и привлекательным для пользователя, нежели привычный сплошной текст.
Как подготовить таймлайн к публикации
Отрабатываем порядок действий, необходимых для создания таймлайнов
1
Формулируем, чему будет посвящен таймлайн
Какую историю он будет рассказывать? Представлять биографию? Показывать динамику изменений? Демонстрировать действия разных участников одного события?
2
Выбираем ключевые точки
Уточняем точные даты событий и время (если это значимо для повествования). Проверяем, не нарушается ли логика рассказа, нет ли лакун в сюжете. При необходимости группируем события в параллельные линии.
3
Формулируем заголовки и описания
Они должны быть выдержаны в едином стиле, даже если за основу вы берёте ранее опубликованные материалы с разноформатными заголовками.
4
Подбираем видео и фотографии
Они должны быть однозначно связаны с точками на ленте времени. Откажитесь от идеи разукрасить таймлайн иллюстрациями «просто по теме».
5
Создайте обложку таймлайна
Заголовок должен ориентировать пользователя в истории, иллюстрация должна вызывать эмоцию и задавать тон рассказу.
6
Настройте внешний вид таймлайна
Выберите цвет фона, фоновые иллюстрации (если они необходимы). Выделите визуально самые важные точки на ленте времени. Если у вашего издания есть фирменные цвета, используйте их при оформлении.
Восстанавливайте контекст для читателей, даже если уже много раз писали на выбранную тему, и объясняйте, что происходило, в новом формате. Переупаковка контента помогает найти новые смыслы и придаёт материалу дополнительную ценность.
Оксана Силантьева рассказывает подробно, как создавать таймлайны в сервисе Timeline JS
Алгоритм создания таймлайна в сервисе Timeline JS
Пример таймлайна со сгруппированными событиями
Сервис Timeline JS позволяет объединять события в группы и показывать их отдельными строками в таймлайне. Этим функционалом создатели пользуются нечасто. А зря.
Годовой отчет Благотворительного фонда Владимира Потанина
Фонд работает по нескольким векторам: «Развитие филантропии», «Культура», «Образование». Таймлайн, представляющий деятельность фонда, содержит группировку событий по этим направлениям.
Весь XIX век в одной таблице
Этот проект «Арзамаса» сделан не в сервисе Timeline JS, но хорошо демонстрирует принцип группировки. Ключевые явления XIX века объединены не только лентой времени, но и в колонки «Война», «Герой», «Искусство», «Идея».
Сложности при использовании таймлайнов в онлайн-публикациях
Проверь себя
Как создавать таймлайны
Проверьте, насколько вы разобрались в том, как пользоваться сервисом Timeline JS
Начинаем!
Сколько точек рекомендуют помещать на таймлайн разработчики сервиса Timeline JS?
Дальше
Проверить
Узнать результат
Как встроить готовый таймлайн на сайт или блог?
Дальше
Проверить
Узнать результат
Вам нужно изменить что-либо в уже опубликованном таймлайне. Что предпримете?
Дальше
Проверить
Узнать результат
Как задать на таймлайне дату «сентябрь 1991 года»?
Дальше
Проверить
Узнать результат
Как указать титульную страницу таймлайна?
Дальше
Проверить
Узнать результат
Можно ли использовать видеофрагменты в таймлайне?
Дальше
Проверить
Узнать результат
Нужно перечитать :)
Кажется, вам нужно освежить знания о некоторых свойствах мультимедийных материалов.
Пройти заново
Истина где-то рядом
Вы знаете терминологию и некоторые приемы, но еще есть куда стремиться
Пройти заново
Вы настоящий сторителлер
С нетерпением ждем ссылок на ваши таймлайны!
Пройти заново
Люди в теме
Стоит подписаться и наладить профессиональные связи
11 идей, где применить таймлайн
  • 1
    Хронология ЧП
    Как только вы понимаете, что происходит резонансная история, начинайте делать таймлайн. Следите за развитием событий и дополняйте ленту времени. Такой мультимедийный элемент можно вставить в любую новость по теме, и он станет для вашей редакции «тузом в рукаве».

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

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


  • 2
    Вечнозелёные темы
    Подготовьте ленту времени об истории своего города или о том, как в вашем населённом пункте встречали Новый год, 1 мая (День металлурга, железнодорожника или химика) последние 20 лет. Проиллюстрируйте таймлайн архивными снимками или фотографиями газетных материалов. Подобные материалы виральны, оправдывают ресурсы, которые тратятся на их создание, и повышают лояльность читателей. Такие спецпроекты можно предлагать различным рекламодателям как площадку для размещения, участвовать с ними в конкурсах грантов.
  • 3
    Презентация проекта
    Когда вы представляете руководителю новую идею или защищаете диплом, выступаете с питчингом перед грантодателями или инвесторами, разнообразьте презентацию таймлайном. Сфокусируйте внимание аудитории на значимых аспектах и добавьте в выступление больше интерактива. Если вы делаете презентацию в режиме онлайн, тем более сделайте интерактивный таймлайн, тогда ваш собеседник сможет быть не просто пассивным слушателем/читателем материалов.
  • 4
    Отчёты
    Долой унылые текстовые «простыни» и длиннющие таблицы, от которых рябит в глазах. Расскажите, что сделали, просто и понятно с помощью ленты времени. Пригласите коллег, клиентов и благополучателей к совместной работе — соберите разнообразный мультимедийный материал, который может войти в отчет.
  • 5
    Биография
    Пишете о новом губернаторе или мэре? В ваш город приезжает звезда? Делаете портретное интервью? Представьте биографию героя публикации в виде таймлайна. Выясните, кто был рядом с человеком в периоды взлётов и падений, сколько он зарабатывал в разные моменты жизни. Представьте информацию наглядно, с иллюстрациями и видео, с фрагментами карт и инфографикой, чтобы читателю было проще её воспринимать.
  • 6
    Городская проблема
    Расскажите, например, когда и сколько раз городская администрация обещала залатать дыру в стене дома или починить фонтан. Новый мост пошёл трещинами? Соберите информацию, когда и кто его ремонтировал, были ли раньше подобные повреждения и что делали тогда, и создайте таймлайн. Читатель, листая ленту новостей, не соотносит друг с другом отдельные сообщения, они кажутся ему разрозненными. Помогите найти связи, выявите предпосылки и представьте историю объёмнее.
  • 7
    Резюме
    Выделиться среди кандидатов можно, рассказав о своём опыте работы с помощью ленты времени. Ещё несколько лет назад продвинутые соискатели представляли свой опыт в виде инфографики. Только помните правило «выбирать для таймлайна только ключевые события». Вашему работодателю непринципиально знать, когда именно вы ходили в кружок робототехники. Упоминайте только релевантный для вакансии опыт.
  • 8
    Продвижение бренда
    Расскажите через таймлайн историю своей компании, о том, как расширялось дело. Вовлекайте потенциальных клиентов и выгодно выделяйтесь на фоне конкурентов. Такая история может быть расказана как во внешнюю среду, так и внутри компании. Сильная история бренда поможет найти новых партнёров, а ваши сотрудники лучше поймут атмосферу и стандарты места, в котором работают.
  • 9
    История семьи
    Сохраните самые важные вехи жизни вашей семьи в виде таймлайна. Собираетесь на свадьбу или юбилей? Подарите/покажите на празднике интерактивную ленту времени — аплодисменты гостей вам обеспечены.
  • 10
    Портрет во времени
    Соберите таймлайн из событий, которые повлияли на формирование вашей личности. Встречи с яркими людьми, воплощённые идеи, знаковые путешествия, взлёты и падения, смены векторов, мест и профессий. Попробуйте нарисовать таймлайн не только про прошлое, но и про будущее — как вы его видите.
  • 11
    Вдохновляющее прошлое
    Вспомните свои достижения. Пятёрки в школе и участие в соревнованиях, учёбу в вузе, любимую работу и успешные проекты. Создайте таймлайн своих «эверестов» и периодически пролистывайте, когда хочется накрыться одеялом с головой и ничего не делать. Хандрите и думаете, что ничего не добились? Отметьте на ленте времени значимые для вас события, которые произошли за год или всю жизнь, и поймите, что вы настоящий молодец (хотя бы потому, что изучаете этот модуль).
Таймлайн твоей жизни
Режиссёр Цезарь Курияма записывает видео каждый день по одной секунде, которая является частицей непрерывного проекта, цель которого — собрать все особенные моменты его жизни.
Как создавать таймлайны
Подводим итоги
  • Выбираем тему, которая долгое время останется актуальной для аудитории


    01
  • Собираем и верифицируем даты, даже если берем их из уже опубликованных материалов
    02
  • Подбираем визуальный контент, тесно связанный с каждой точкой на ленте времени
    03
  • Используем дополнительные возможности сервиса — группировки, фоновые изображения, шрифты, расположение ленты времени.


    04
  • Размещая таймлайн внутри публикации, помогаем пользователям-новичкам разобраться, как пользоваться интерактивными лентами времени.


    05
  • Продвигаем таймлайны на сайте и в социальных сетях, промотируем их отдельно.
    06