5-6 ОКТЯБРЯ • МОСКВА • МЕТРОПОЛЬ
Конференция iSpring Days 2018: курс на вовлеченность
image/svg+xml image/svg+xml image/svg+xmlimage/svg+xmlimage/svg+xml Дизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеровДизайн электронного курса – 17 примеров

Сцена из художественного фильма «12 стульев»

Предыдущий урок
Это четвертый урок из цикла «Марафон: как создать онлайн-курс». Для полного погружения в тему лучше начните с первого.

Знаете высказывание: «Не стоит судить книгу по обложке»? Мы частенько выбираем тома в богатом переплете, хотя видавшая виды книга может таить невероятные истории. То же и с электронным курсом. Даже если ваш контент накачан пользой, он зацепит отнюдь не каждого, если выглядит неряшливо и блекло.

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

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

Композиция

При дизайне курса мало сгрузить текст и картинки в 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 Kuler — сервис автоматически подберет гармоничную цветовую комбинацию для курса. Также сервис предлагает готовые цветовые сочетания, созданные профессиональными дизайнерами.

Гифка Верстка

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

Гифка Верстка

Учитывайте психологию цвета

При выборе цветовой палитры учитывайте и психологические особенности. Так зеленый вызывает надежность и доверие, красный — чувство опасности.

Выравнивание

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

  • светло-зеленый — для продуктовых курсов;
  • сине-зеленый — для курсов по ПК;
  • монохромный синий — для тренинговых курсов.

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

Стиль

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

Электронный тест

Кажется, что курс не сделали с нуля, а копировали из нескольких презентаций

Используйте одинаковые элементы дизайна во всем курсе. Это создает ощущение порядка и единства. Если же на слайде появляются новые элементы, порядок пропадает.

Электронный тест

На каждом слайде — одинаковый стиль: кнопки, шрифты, фон. Это создает ощущение порядка и помогает сконцентрироваться на информации

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

Для вдохновения: примеры электронных курсов с аккуратным дизайном

«Йога для начинающих»

Это практическое руководство поможет новичкам поближе познакомиться с йогой и освоить несколько базовых асан. Курс дополнен аудио- и видеоматериалами и оснащен удобной навигацией. Занятие «ведет» персонаж-йог, специально разработанный для данного курса.

«Анатомия нервной системы»

Медицинская компания A.D.A.M. выпустила курс по строению самой сложной системы в организме человека. Здесь хорошо проработаны такие элементы дизайна, как стиль, цвет, контрастность, шрифт.

«Связь с Хаджи Камалом» (в оригинале «Connect with Haji Kamal»)

Компания Kinection разработала электронный курс в виде комикса для армии США. Он учит американских солдат преодолевать культурные различия и налаживать контакт с представителями других наций. Подробнее о курсе можно прочитать здесь.

Где взять качественный контент для дизайна курса

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

Как быстро создать курс при помощи библиотеки контента, смотрите в этом видеоуроке:

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

Если вам понравилась статья, дайте нам знать — нажмите кнопку Поделиться.

А если у вас есть идеи как можно улучшить текст — расскажите нам. Мы будем рады доработать материал!

Предыдущий урок   Следующий урок →

Разрабатывайте профессиональные электронные курсы прямо в PowerPoint. Интерактивные курсы, видеолекции, тренажеры, скринкасты, тесты, опросы – все в одной программе.

Подробнее о редакторе курсов 14-дневная пробная версия

 
 
 
 

Редактор онлайн-курсов iSpring Suite

Легко создавайте электронные учебные материалы: курсы, тесты, видеолекции, тренажеры и скринкасты.

  • Александр Александр

    Очень полезная статья, спасибо!

    • Павел Храмкин

      Александр, спасибо большое. Рады стараться для вас!

    • Павел из iSpring

      Александр, спасибо большое. Рады стараться для вас!

  • Алексей

    Спасибо! Очень ценные советы по оформлению и дизайну.

    • Павел из iSpring

      Алексей, здравствуйте.
      Вам большое спасибо за столь лестный отзыв =)

 
iSpring Online
До запуска вашего учебного портала всего 1 клик
  • Создайте единую базу знаний, доступную сотрудникам 24/7
  • Загружайте курсы, проводите обучение, контролируйте результаты
  • Всего за 96 рублей в месяц на 1 сотрудника