Обратный звонок
En
Ru
Связаться
Связаться
20 мая 2021

Правила верстки. 8 принципов грамотного дизайна слайдовых курсов

Что нужно знать дизайнерам-новичкам о верстке и на что обратить внимание при проверке менеджеру и тестировщику

Алена Бас
Старший дизайнер

Знает, как улучшить курс за счет правильной верстки

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

1. Единый стиль оформления. Когда однотипные элементы по всему курсу (заголовки, основной текст, таблицы, иллюстрации и т. п.) имеют:

  • единый стиль
  • один размер (допустимы 2−3 фиксированных размера для одного элемента)
  • одну отбивку (расстояние сверху и снизу)
  • выравнивание элементов;
2. Визуальный порядок. Модульная сетка помогает пользователю быстрее считывать информацию за счет единообразия элементов и одинаковой структуры слайдов.
3. Быстрая работа с макетом, а также предсказуемый результат при работе в команде, но при этом не исключается отступление от уже заданных правил сетки.
4. Уменьшение количества ошибок при верстке. Верстка должна быть единообразной, т. е. однотипные элементы курса (заголовки, подзаголовки, таблицы, иконки и иллюстрации и т. п.) должны быть одинаково сверстаны и иметь однотипную отбивку по всему курсу.

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

В курсах LEVEL используется колоночная сетка. Количество колонок зависит от контента слайда
Это способ выравнивания текста. Он помогает организовать элементы композиции и текст правильно и гармонично. Согласно гештальт-теории, зритель больше склонен видеть гармоничную и стабильную композицию, чем хаос и напряжение, поэтому выравнивание объектов является важной основой графического дизайна.
Правило

Существует 4 вида выключки: слева, справа, по центру и по ширине.

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

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

  • заголовки и подзаголовки,
  • текстовые блоки до 5 строк,
  • подписи под картинкой.
По правому краю текст выравнивают редко, например подписи под иллюстрацией, цифры в таблицах.

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

Основной текст на мониторе всегда занимает 60−70% ширины слайда, а на мобильных устройствах — максимальную ширину экрана.

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

Иногда в конце абзаца образуются короткие строки. Они нарушают размер блока и ритм, поэтому лучше их избегать. Необходимо следить за тем, чтобы все строки абзаца были примерно одной длины.
Главный принцип при разработке любого дизайна, согласно которому любые расположенные рядом друг с другом объекты воспринимаются как единое целое.
Закон близости работает на всех уровнях: в буквах, словах, предложениях, абзацах и модульных макетах.
Правило
Внутренние расстояния элемента должны быть меньше внешних.
Это система организации информации, которая устанавливает порядок важности данных, что позволяет пользователю найти то, что ему нужно.
Правило

Выделяют три основных уровня типографической иерархии:

  • первый уровень — заголовок, цель которого — привлечь внимание пользователя,
  • второй уровень — подзаголовок, описание, цитата и прочая информация, которая помогает пользователю определиться, интересен ли ему материал и стоит ли читать основной текст.
  • третий уровень — основной текст, его задача — донести информацию в полном объеме.
Дополнительно на слайде может присутствовать текст:
  • с важной мыслью,
  • по наведению,
  • текст-подсказка (хелпер)
Чтобы акцентировать внимание на заголовке или других важных элементах текста, можно использовать: начертание, размер, цвет и «воздух».

На одном слайде может находится 1 или 2 шрифта, но не более 3 размеров этих шрифтов. В ином случае можно потерять внимания пользователя.
Это сдвиг текста под определенным углом.
Правило
Вертикальный текст читается сложнее, чем горизонтальный. Но, вертикальный текст можно использовать, если:
  • Это небольшой вспомогательный текст. Например, подписи, колонтитулы.
  • Форма объекта позволяет развернуть тест. Например, корешок книги в иллюстрации.
Это расстояние между двумя соседними строками абзаца.
Правило
Интерлиньяж определяет плотность строк на странице. Чем меньше значение интерлиньяжа, тем визуально тяжелее выглядит текст.

Межстрочное расстояние зависит от длины строки и размера шрифта. Для слишком длинных строк рекомендуется увеличивать межстрочное расстояние. При увеличении размера шрифта необходимо уменьшать межстрочное расстояние.
Это написание текста заглавными буквами.
Пример неправильного и правильного интерлиньяжа. Текст справа имеет больше «воздуха» и читается легче
Пример неправильного и правильного интерлиньяжа. Текст справа имеет больше «воздуха» и читается легче
Правило
Текст, который состоит только из заглавных букв, читать затруднительно, но Caps Lock можно использовать в:
  • заголовках и подзаголовках,
  • текстах на кнопках,
  • коротких строках, которые нужно визуально выделить.
Для текста, набранного Caps Lock, нужна дополнительная разрядка.
Caps Lock в коротких строках в виде подзаголовка на внутренней и внешней сторонах карточек
Caps Lock в коротких строках в виде подзаголовка на внутренней и внешней сторонах карточек

Кратко о правилах верстки:

  1. В процессе написания сценария или на этапе создания концепции дизайна внедрите модульную сетку для ускорения работы и создания единого стиля.
  2. Для основного текста используйте выключку по левому краю. Для выравнивания дополнительных текстов иногда можете использовать выключки по центру, реже ― по правому краю.
  3. Расположите основной текст на мониторах на 60−70% ширины слайда. Старайтесь верстать строки абзаца в пределах одной длины.
  4. Проверьте, везде ли на слайде работает принцип близости для объектов.
  5. Помните про иерархию в типографике, используйте 1 или 2 шрифта и не более 3 размеров этих шрифтов на слайде.
  6. В редких случаях не бойтесь наклонять текст.
  7. Для слишком длинных строк увеличьте межстрочное расстояние. При увеличении размера шрифта стоит уменьшить межстрочное расстояние.
  8. В редких случаях не бойтесь использовать Caps Lock, но обязательно добавляйте разрядку.
Автор: Алёна Бас
Поделиться