Как разложить материал по полочкам с помощью дизайна

Вы читаете перевод статьи Кристал Роуз Six Tips to Make Your Visual Design Support Your Content.

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

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

В 2011 Патти Шанк опубликовала цикл статей о четырех главных принципах дизайна: контрасте, единообразии, выравнивании и близости. Я хочу рассказать еще о шести правилах, которые стоит учесть при создании дизайна.

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

Вот эти принципы:

• Иерархия (hierarchy)
• Точки фокуса (focal points)
• Простота (simplicity)
• Баланс (balance)
• Свободное пространство (white space)
• Единство (unity)

Иерархия

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

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

Иерархия определяет путь пользователя сквозь дизайн. Продумайте, в каком порядке пользователь будет получать информацию, тогда контент будет легким для восприятия и усвоения.

На маленьких экранах сложнее передать иерархию, ведь на них показывается лишь небольшая порция контента за раз. Применяйте принцип «сначала контент» (a content-first approach), тогда ваш дизайн будет намного лучше оптимизирован для мобильных устройств.

Способы построения иерархии:

• Располагайте элементы последовательно. Начинайте с самых важных.
• Продумайте положение, размер, стиль и порядок представления информации на экране.
• Работайте с визуальным весом (visual weight), цветом и размерами элементов для выделения важного.
• Не используйте более трех уровней иерархии на одной странице — это приводит к путанице.

Иллюстрация способов построения иерархии

Точки фокуса

Броское изображение или фраза, как навигаторы, помогают учащимся ориентироваться в материале и быстро схватывать главную цель урока. Делайте точки фокуса не только привлекательными, но и актуальными теме занятия, иначе они только запутают.

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

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

Важные аспекты при создании точек фокуса:

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

Создание точек фокуса

Простота

Используйте только те элементы, которые действительно необходимы для понимания материала. Легко скидать все в кучу и радоваться, что у учащегося есть вся возможная информация. Куда сложнее писать кратко и емко. Принцип простоты заставляет находить веские причины для добавления чего-либо.
Советы по достижению простоты:

• Сокращение. Критично оцените каждый элемент на экране. Если заметите что-то, что не добавляет ценности, смело удаляйте. Даже если вам кажется, что элемент очень важен, попробуйте удалить его и посмотреть, сломало это дизайн или нет.
• Системность. Придерживайтесь единообразия в шрифтах, цветах, формах и размерах. Пользователи могут сделать неосознанный вывод о важности элемента, который отличается от остальных.
• Комбинирование. Пусть каждый элемент вашего дизайна служит сразу нескольким целям. Группируйте похожие элементы, чтобы избавиться от ненужной сложности.

Баланс

При хорошем балансе пользователь воспринимает дизайн целиком, а не по частям. Благодаря этому сохраняется фокус и простота понимания.

Баланс измеряют массой (количеством места, которое занимает каждый элемент) и протяженностью (пространство, заполненное элементами). По мере добавления новых элементов нужно постоянно следить за «весом» всех элементов, чтобы ни одна область не начала излишне доминировать.

Свободное пространство (см. рисунок ниже) — отличный способ добавить гармонии и баланса дизайну. Когда вы делаете дизайн для маленьких экранов, сложнее сохранить баланс из-за ограничения по ширине (особенно, если речь идет о колонках). Кроме того, элементы, возможно, больше не будут одинаковыми по высоте. Не пытайтесь придерживаться прежнего макета страницы, если размеры экрана не позволяют этого.

Типы баланса:

• Симметричный баланс
• Асимметричный баланс
• Радиальный баланс

Выберите тип баланса, согласующийся с контентом

Свободное пространство

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

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

Виды свободного пространства:

• Активное: намеренно оставленное свободное пространство для упорядочения структуры страницы.
• Пассивное: естественное пространство вокруг полей экрана или межстрочные расстояния.

Единство

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

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

Советы по достижению единства:

• Близость. Располагайте связанные объекты рядом, чтобы они воспринимались как единый объект.
• Выравнивание. Расположите связанные объекты относительно одной оси так, чтобы один объект следовал за другим.
• Преемственность. Применяйте к элементам одинаковые дизайнерские решения. Будьте последовательны в использовании стилей.
• Единообразие. Придерживайтесь единообразия цветов, форм, принципов и стиля графики, чтобы дизайн был ритмичным, согласованным и завершенным.

Как достичь единства с помощью иконок и фотографий

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