Хороший дизайн не отвлекает, а направляет. Он делает курс понятным, легким для восприятия и помогает ученику сосредоточиться на сути. Даже красивая анимация не спасет, если текст трудно читать, а кнопки приходится искать.
Разберем, как оформить обучающий инструмент так, чтобы его хотелось читать: какие шрифты выбрать, какой размер, цвет и контраст настроить.
Читаемость текста
Шрифты
Используй шрифты без засечек: Arial, Roboto, Lato, PT Sans, Calibri, Tahoma, Helvetica. Они поддерживают кириллицу и корректно отображаются в PowerPoint, Storyline, iSpring и КурсЭдиторе
Не больше двух шрифтов в курсе: один для заголовков, другой для основного текста
Если используешь кастомный шрифт, его нужно подключить, и проверить отображение на разных устройствах. Не забудь приложить шрифт, при отправке файлов 😉
Размер текста
Размер помогает расставить акценты и выстроить логику на экране.
Ориентируйся на такие значения:
Основной
заголовок (H1)
заголовок (H1)
36–48 pt
Подзаголовки 2 уровня (H2)
24–32 pt
Подзаголовки 3 уровня (H3)
18–22 pt
Основной текст
16 (±2) pt
Проверь курс на телефоне, планшете и ноутбуке. Особенно если это неадаптивный слайдовый инструмент. Если читать комфортно везде, значит, размер выбран верно
Межстрочный интервал
line-height
Интервал делает текст «воздушным» и удобным для глаз.
Если оставить значение по умолчанию, строки часто слипаются, особенно на телефонах.
Если оставить значение по умолчанию, строки часто слипаются, особенно на телефонах.
Подбери интервал вручную под размер шрифта.
Основной текст
1.4–1.6
×
размер
шрифта
шрифта
Пример
Размер шрифта — 16 pt. Интервал — 22–25 pt
Заголовки
1.1–1.3
×
размер
заголовка
заголовка
Пример
Заголовок — 24 pt. Интервал — 26−30 pt
Сноски и подписи
1.2–1.4
×
размер сноски
Пример
Мелкий шрифт — 12 pt. Интервал — 14−16 pt
Где настраивать:
PowerPoint: Абзац → Интервал → Междустрочный → Точно
КурсЭдитор: Стиль → Межстрочный интервал
Выделения
«Жирный» и «курсив» помогают расставить акценты. Используй их для ключевых слов и фраз, это направляет взгляд и упрощает восприятие.
Главное — мера.
Если выделить все подряд, текст потеряет акценты, и внимание рассеется
Если выделить все подряд, текст потеряет акценты, и внимание рассеется
Цвета и контраст
Цвет помогает структурировать информацию. Ориентируйся на брендбук или подбирай палитру с помощью сервисов: colorscheme.ru, colorhunt.co, coolors.co.
Соблюдай простое правило:
Светлый фон — темный текст
Темный фон — светлый текст
Проверить контраст можно на contrastchecker.com или gradients.app.
Графика
Следи за качеством
Изображения, иконки и кнопки должны быть четкими, в одном стиле и не сливаться с фоном
Бери картинки не меньше 1200 px по ширине. Уменьшить можно, увеличить без потери качества нельзя
Подбирай иконки одной семьи
Линейные, флэт или 3D — выбери один стиль и придерживайся его
Скачивай готовые наборы в едином стиле, например, на flaticon.com. Или освой графический редактор для кастомных иконок
Не накладывай текст на пестрые фото
Если текст нужен поверх изображения — добавь затемнение фона или контрастную плашку
Структура и иерархия
Когда элементы расположены логично, взгляд двигается по понятному маршруту.
Как выстроить структуру
Делай один экран — одну мысль
Разбивай текст на блоки с подзаголовками
Строй иерархию: заголовок → подзаголовок → текст → вспомогательные элементы
Добавляй акценты (цвет, иконку, рамку), чтобы направлять внимание. Делай это точечно, чем меньше акцентов, тем сильнее каждый из них
Оставляй «воздух» (отступы) — теснота утомляет больше, чем пустое место
Пример
Заголовок и кнопка сливаются с фоновым изображением
123
Текст сгруппирован в блок
123123
Методическая целесообразность
Оформление не существует само по себе. Каждый элемент должен помогать учиться.
Фокус на сути
Все, что на экране, должно поддерживать тему урока.
Если курс про охрану труда — иллюстрации и примеры должны быть по теме
Поддержка метода обучения
Формат визуала зависит от задачи:
для запоминания — таблицы, схемы, карточки
для тренировки — интерактивы и кейсы
для объяснения — пошаговые иллюстрации
Это важно, потому что разные форматы по-разному работают с вниманием и памятью.
Если визуал не соответствует учебной задаче, он выглядит красиво, но не помогает усвоению
Меньше шума
Избегай лишних анимаций, картинок и эффектов. Они отвлекают и утомляют
Пример
В курсе по общению с клиентом — сплошной текст без примеров и с пестрым фоном
В курсе по общению с клиентом — интерактив «разговор по ролям»
Советы новичкам
Проверяй на себе
Пройди курс как ученик. Если сам устал или запутался — экран перегружен
Не усложняй
Если для чтения текста нужно сделать три клика — значит, нужно упростить
Используй реальные примеры
Одно фото рабочего места лучше, чем десять абстрактных картинок
