Как я разрабатываю демо-материалы: от идеи до публикации

На странице iSpring Suite есть раздел «Примеры», где мы показываем, какие курсы, тесты, диалоговые тренажеры и видеолекциии можно создать при помощи наших инструментов. Часть этих материалов присылают клиенты, а часть делаю я.

Ольга Жолудова, создает демо-курсы в iSpring

Меня зовут Ольга Жолудова и я уже 9 лет занимаюсь разработкой демонстрационных материалов iSpring или, как мы их называем, «демок» . Они наглядно показывают нашим клиентам возможности конструктора курсов.

Вот, например, курс «Россия и космос» — интерактивный путеводитель по истории космонавтики. Он родился из обычной PowerPoint-презентации, которую мы прокачали и сконвертировали в онлайн-формат инструментом iSpring Suite.

В своей статье я расскажу, как разрабатываю подобные демо-курсы, и как создавался именно этот материал.

В чем особенность демо-материалов

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

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

В процессе разработки демо-материалов нужно помнить об обеих функциях и стараться их сбалансировать.

1. Техническое задание

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

Во время обсуждения ТЗ я стараюсь конспектировать основные моменты, записывать идеи, даже самые сырые. Также уточняю сроки.

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

ТЗ на курс «Россия и космос» выглядело примерно так: «Нам нужен курс ко дню космонавтики на русском языке. Можно рассказать о достижениях России в космосе. В курсе должна быть навигация, чёткая структура, красивые лейауты. Нужно продемонстрировать функции программы: вставка YouTube-видео в PowerPoint, вставка web-объекта и другие».

2. Первичное исследование

Когда ТЗ уложилось в голове, я иду в интернет за информацией. Этот этап не должен занимать много времени — важно охватить всю тему целиком и составить общее представление.

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

Вот такой файлик я составляла для курса «Россия и космос»

3. Грубый скетч

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

Не вдаваясь в детали, я стараюсь зафиксировать на бумаге основные «вехи» этой истории. В итоге складывается грубый каркас будущего курса.

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

Грубый скетч помогает мне продумать структуру будущего курса

4. Исследование и сбор информации

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

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

Каркас презентации — это по сути пачка слайдов. Поэтому мой каркас выглядит не как план, а скорее как раскадровка.

5. Бумажный прототип

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

Структура. Важно продумать иерархию и визуально отобразить ее в прототипе. Это можно сделать при помощи заголовков и подзаголовков.

Лейауты. Чтобы презентация не была скучной и монотонной, стараюсь использовать разные компоновки.

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

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

Я тщательно прорабатываю прототип, т.к. его предстоит согласовывать с заказчиком

6. Обсуждение прототипа

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

Вот вам позитивное фото процесса обсуждения одного из макетов =)

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

7. Работа с замечаниями

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

8. Цифровой прототип: версия 0

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

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

Бумажный прототип я загружаю на «Гугл Диск» и отдаю дизайнерам

9. Работа над текстами

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

Копипастить не круто, а с большинства сайтов — нельзя :) Поэтому стараюсь объяснить тему своими словами. Часто получается даже понятнее ;)

Для текстов я обычно завожу гугл-табличку с тремя колонками:

Готовый файлик я передаю дизайнеру. Дальшеидет работа над цифровым прототипом.

10. Цифровой прототип

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

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

11. Публикация на сайте

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

Для этого есть iSpring, который прямо из PowerPoint опубликует наш прототип в формат HTML5. Файл в этом формате можно загрузить на сайт, что мы и сделали.

Все демо-курсы доступны в разделе «Примеры» на сайте iSpring. Можно не только посмотреть курс, но и скачать исходный .pptx файл.

Если вам интересны статьи такого формата, дайте знать. И спасибо, что прочитали до конца.