← Предыдущий урок
Это четвертый урок из цикла «Марафон: как создать онлайн-курс». Для полного погружения в тему лучше начните с первого.
Знаете высказывание: «Не стоит судить книгу по обложке»? Мы частенько выбираем тома в богатом переплете, хотя видавшая виды книга может таить невероятные истории. То же и с электронным курсом. Даже если ваш контент накачан пользой, он зацепит отнюдь не каждого, если выглядит неряшливо и блекло.
Хорошая новость: не нужно быть профессиональным дизайнером, чтобы создать аккуратный курс. Есть шесть составляющих, которые надо соблюдать: композиция, шрифт, выравнивание, контраст, цвет и стиль.
В этом уроке мы рассмотрим все составляющие и покажем, как правильно ими пользоваться, чтобы ваш материал изучили от первого до последнего слайда. Попутно будем улучшать этот курс:
Композиция
При дизайне курса мало сгрузить текст и картинки в PowerPoint. Куда лучше аккуратно расположить их на слайде, чтобы отдельные элементы слились в цельную картину. Речь идет о композиции.
Композиция — это единство и цельность.
Пытаясь добиться хорошей композиции, вы словно собираете пазл — передвигаете объекты по слайду, меняете их местами. При удачном сочетании груда деталей превращается в цельную картину, при неудачном — в кляксу.
Существуют разные правила для создания гармоничной композиции. Рассмотрим два известных — правило третей и перевернутой пирамиды.
Соблюдайте правило третей
Это правило широко используют в фотографии и видеосъемке. Изображение условно делится на три части по горизонтали и вертикали. Объекты нужно расположить на пересечении линий.
Разглядывая картинку, мы не смотрим на нее сразу целиком. Наше внимание фокусируется на пересечении линий — композиционных центрах.
Слайд, построенный по правилу третей, приятнее для глаз и выглядит аккуратнее странички, на которой объекты стоят сбоку или по центру.
Используйте правило перевернутой пирамиды
При верстке профессиональные разработчики используют правило «перевернутой пирамиды» — здесь придется поколдовать над текстом. В чем суть подхода: основная мысль стоит в начале текстового блока, затем следуют разъяснения — ключевые моменты, а в заключении — дополнительная информация. Ученик сразу схватывает главный посыл и потом словно съезжает с горки за подробностями.
Разберем правило «перевернутой пирамиды» на примере этого слайда.
В начале основная мысль: Subaru — экологический чемпион среди других промышленных компаний. Ключевые моменты: компания Subaru одна из первых начала внедрять экотехнологии. Заключение: блок о том, как компания успешно запустила проект, который повысил вторичную переработку сырья до 99,8%.
Подробнее о приемах уверенной композиции можно прочитать в книге «Slide:ology». Автор — Нэнси Дуарте, основатель крупной дизайнерской компании «Duarte Design». В книге она собрала полезные рекомендации, как создать вдохновляющие презентации, от которых не оторваться.
Шрифт
Шрифт — не просто способ подачи текста, а мощный инструмент в оформлении. 80% дизайна составляет текст. Буквами можно не только передать смысл, но и подчеркнуть стиль изложения. Вот несколько рекомендаций по работе со шрифтами.
Используйте не больше 3 шрифтов на слайде
В курсе должно быть до трех шрифтов: для заголовка, подзаголовка и основного текста. Если вы используете больше шрифтов, курс станет неряшливым.
Важный момент: для электронного текста лучше использовать шрифты Arial, Verdana, Trebuchet. Они удобнее для чтения с экрана компьютера или телефона.
Шрифты должны быть читабельными
При оформлении курса велик соблазн использовать витиеватый шрифт. Кажется, что он придает изюминку слайду. На деле это просто мешает считать информацию.
Курсив или полужирный шрифт — выберите что-то одно
Выделять слова одновременно жирным, курсивом и подчеркиванием не стоит — будет визуальный перегруз.
Подчеркивание лучше вообще исключить, так как его можно принять за гиперссылку.
Совет: больше узнать о сочетании шрифтов вы можете в книге «Дизайн для недизайнеров» Робин Уильямс. Автор приводит базовую классификацию шрифтов, объясняет их отличия и принципы совместного использования. В книге много практических заданий, которые помогут закрепить полученные знания.
Выравнивание
Ключевая задача текста в электронному курсе — передать информацию. При этом важны не только цвет, шрифт и контрастность текста, но и его положение на слайде.
Выравнивайте текст по левому краю
При чтении мы автоматически переводим взгляд к левому краю страницы и на строчку вниз. Если текст выровнен по центру, то глаза останавливаются в непривычном месте — падает скорость чтения и сбивается восприятие.
Оставляйте «воздух» на слайде
Не лепите иконки и текст вплотную друг к другу. Курсу нужно «дышать». Есть правило: 20% слайда должны быть пустыми. Оставляйте отступы от краев слайда до текстовых блоков — так проще усвоить информацию.
Чтобы текст не казался громоздким и тяжелым, как пианино, разбейте его на компактные абзацы, используйте списки и деление на параграфы.
Соблюдайте основные правила верстки
Выравнивать текст по ширине не стоит. Между словами из-за этого появляются пробелы — текст становится неопрятным, его трудно читать.
Текст, выровненный по ширине, трудно читать из-за больших пробелов
Делите информацию на блоки
Делите длинные предложения на короткие. Идеальный размер — 70-100 символов. Так пользователям проще удерживать внимание и уловить суть.
Упаковывайте информацию в блоки. Разбросанный по слайду текст, как раскиданные по квартире вещи: раздражает и мешает найти главное.
Используйте разное форматирование: выделение жирным, маркированные и нумерованные списки. Ученику будет проще усвоить информацию.
Убирайте лишнее. На слайде должно оставаться только то, что действительно важно — квинтэссенция знаний.
Важно: шрифты, фоны, изображения, анимации — все это должно помогать достичь учебную цель, а не создавать информационный шум и визуальную нагрузку.
Каждый элемент, который находится на слайде, должен быть оправдан. С какой целью он здесь размещен, и отвечает ли это задачам курса? Ответ на этот вопрос помогает избежать большинства ошибок в сборке и оформлении электронного контента.
Контраст
Это один из индикаторов хорошего дизайна. Контраст поможет разделить разнородные части контента, сделать более заметной навигацию, выделить главную мысль на слайде.
Без контраста непонятно, куда смотреть — ученик теряется, блуждая глазами по слайду и не схватывая сути.
Контраст должен быть очевиден сразу.
Поэтому при создании контрастных элементов делайте их действительно разными.
Используйте полупрозрачные подложки для фона
Если вы используете в качестве фона фотографии, разместите под текстом полупрозрачный блок однородного цвета. Фотография останется хорошо видна, а текст можно будет легко прочитать.
Измените прозрачность самого фона
Чтобы текст нормально считывался с экрана, можно также уменьшить или увеличить прозрачность фона.
Подробнее о том, как сделать фон прозрачнее, можно прочитать здесь.
Выделяйте важный текст другим цветом
Чтобы заострить внимание ученика на важной фразе, выделите ее с помощью жирности, курсива или другого цвета.
Цвет
Цвета пробуждают чувства. Как писал художник Поль Сезанн: «Цвет — это точка, где наш мозг соприкасается со Вселенной». Так, зеленый цвет может ускорить сердцебиение, а оранжевый — улучшить настроение. В курсе цвет помогает достичь большей выразительности.
Используйте в курсе до трех цветов
Не превращайте курс в радугу. Уравновешенная цветовая гамма не отвлекает внимание, усвоить материал легче.
Придерживайтесь правила 60–30–10 — вместо того, чтобы смешивать цвета в одинаковой пропорции, разделите их на части: 10%, 30%, 60%.
Используйте цветовой круг
Чтобы выбрать цветовую схему курса, воспользуйтесь цветовым кругом или инструментом наподобие Kuler.
С их помощью проще подобрать палитру цветов, которые хорошо работают вместе. Существует три классических варианта сочетания цветов:
О дополнительных вариантах цветовой гаммы можно прочитать здесь.
Если вы не можете самостоятельно выбрать цветовую гамму, есть два удобных сервиса для подбора цвета:
Adobe Color — сервис автоматически подберет гармоничную цветовую комбинацию для курса. Также сервис предлагает готовые цветовые сочетания, созданные профессиональными дизайнерами.
Сolor.romanuke.com — сервис разбирает фотографии на составляющие цвета. Можно задать определенный цвет и получить подборку сочетания различных оттенков и тонов красного, синего, фиолетового. Сервис поможет, если вы берете фотографию в качестве фона.
Учитывайте психологию цвета
При выборе цветовой палитры учитывайте и психологические особенности. Так зеленый вызывает надежность и доверие, красный — чувство опасности.
Во многих компаниях есть брендбук (brandbook) — набор стандартов и инструкций по оформлению бренда. Даже если у вас нет задачи верстать курсы в корпоративном стиле, загляните в брендбук и изучите выбранные сочетания. На их основе можно создать шаблоны цветового оформления. Например:
- светло-зеленый — для продуктовых курсов;
- сине-зеленый — для курсов по ПК;
- монохромный синий — для тренинговых курсов.
Иногда приходится верстать курсы с космической скоростью, и нет времени полировать дизайн. В этом случае сильно выручат проработанные шаблоны.
Стиль
Нам всем встречались курсы, будто собранные из 10 разных PowerPoint-презентаций: на каждом слайде новый шрифт, цвет и фон. Это отвлекает внимание учащегося и нарушает основополагающий принцип дизайна — единый стиль.
Кажется, что курс не сделали с нуля, а копировали из нескольких презентаций
Используйте одинаковые элементы дизайна во всем курсе. Это создает ощущение порядка и единства. Если же на слайде появляются новые элементы, порядок пропадает.
На каждом слайде — одинаковый стиль: кнопки, шрифты, фон. Это создает ощущение порядка и помогает сконцентрироваться на информации
Если применить все советы к электронному курсу, который мы показали в начале, то он заметно преобразится. Теперь материал больше похож на серьезный образовательный продукт, чем на детскую раскраску.
Для вдохновения: примеры электронных курсов с аккуратным дизайном
 | «Йога для начинающих» Это практическое руководство поможет новичкам поближе познакомиться с йогой и освоить несколько базовых асан. Курс дополнен аудио- и видеоматериалами и оснащен удобной навигацией. Занятие «ведет» персонаж-йог, специально разработанный для данного курса. |
 | «Анатомия нервной системы» Медицинская компания A.D.A.M. выпустила курс по строению самой сложной системы в организме человека. Здесь хорошо проработаны такие элементы дизайна, как стиль, цвет, контрастность, шрифт. |
 | «Связь с Хаджи Камалом» (в оригинале «Connect with Haji Kamal») Компания Kinection разработала электронный курс в виде комикса для армии США. Он учит американских солдат преодолевать культурные различия и налаживать контакт с представителями других наций. Подробнее о курсе можно прочитать здесь. |
Где взять качественный контент для дизайна курса
Если вам нужно быстро и качественно задизайнить курс, можно использовать готовые шаблоны из библиотеки контента iSpring Suite. Здесь огромная коллекция заготовок, созданная профессиональными дизайнерами: красочные темы, персонажи, картинки, фотографии, иконки, кнопки. Курс можно собрать из готовых блоков, как конструктор — остается лишь добавить текстовую информацию.
Если вы хотите вовлечь сотрудников с первых слайдов, но нет возможности обратиться к иллюстраторам или дизайнерам, можно воспользоваться встроенным конструктором персонажей. Он позволяет буквально за пару минут создать уникального нарисованного героя, который впишется в общую атмосферу курса.
Собрать такого персонажа очень просто, ведь для этого используются готовые блоки: комбинируйте между собой лица, одежду, причёски и аксессуары. Такой герой поможет завладеть вниманием сотрудника и поможет довести его конца курса.
Созданных персонажей можно сохранить в библиотеке контента и использовать при создании других учебных курсов.
Как быстро создать курс при помощи библиотеки контента, смотрите в этом видеоуроке:
В следующем уроке расскажем, что такое диалоговый тренажер, для чего нужен и как создать.
Если вам понравилась статья, дайте нам знать — нажмите кнопку Поделиться.
А если у вас есть идеи как можно улучшить текст — расскажите нам. Мы будем рады доработать материал!
Быстрый конструктор курсов и тестов
Поможет создать интерактивные курсы и тесты в рекордно короткие сроки. Без дизайнера и программиста.
