Перевод англоязычной статьи The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method.
Для недизайнеров графический дизайн часто кажется сложной работой. Существуют тысячи правил о цвете, шрифтах, макетах, пользовательском опыте и другом. Ну да, технически это так. Но удачный дизайн документов создается, при соблюдении 50 принципов. Освоив основы, вы станете хорошим визуальным коммуникатором, даже если вы не профессиональный графический дизайнер.
Недавно меня спросили, на что я уделяю внимание при оценке дизайна, а затем попросили разработать рубрику по этой теме. Размышляя над этим вопросом, я пришел к выводу, что теорию дизайна документов можно разделить на 10 фундаментальных областей. Для облегчения запоминания, я сформулировал эти принципы оформления документов в виде мнемонической аббревиатуры: Color-CRAYON-TIP (кончик цветного карандаша).
- Color | Цвет
- Contrast | Контраст
- Repetition | Повтор
- Arrangement | Расстановка
- “Why” | “Почему”
- Organization | Организация
- Negative-Space | Негативное пространство
- Typography | Типографика
- Iconography | Иконки
- Photography | Фотография
Под каждой из 10 категорий я прописал пять правил, которым следует хороший дизайн. На инфографике ниже показано, как работает метод Color-CRAYON-TIP.
Категория «Почему» может показаться странной. Знание как люди реагируют на визуальные сигналы - основа для создания хорошего дизайна . Дизайнер знает, почему люди реагируют так, а не иначе. И использует иногда простые, иногда сложные коммуникативные приемы, такие как метафоры и высказывания, чтобы повысить понятность и вовлеченность.
Есть ли еще принципы и теории, которые применяются при создании и оценке хорошего дизайна? Несомненно. Но если вы освоите эти 50 понятий, ваши навыки оформления документов и визуальной коммуникации будут на высоте. Если изображение слишком велико для просмотра, я включил описания каждой категории в текст ниже.
Цвет
1. Цветовой круг
Используйте цветовой круг для создания соответствующих цветовых схем. Они бывают монохроматическими, аналоговыми, комплементарными, сплит-дополнительными, триадными или тетрадными.
2. Четыре или меньше
Создавайте дизайн, используя цветовую схему из четырех или менее цветов.
3. Эмоции и насыщенность
Используйте темные, ненасыщенные цвета, чтобы выразить серьезность и профессионализм. Используйте яркие, ненасыщенные цвета, чтобы выразить дружелюбие и профессионализм. Используйте насыщенные цвета, чтобы привлечь внимание или понравиться детям.
4. Психология цвета
Знайте, как люди и культуры реагируют на цвета; покажите осторожность, опасность, счастье, ревность, страх, приемлемость и другие эмоции и переживания с помощью цвета.
5. Белый хорош
Относитесь к белому как к цвету. Используйте белый цвет, чтобы передать ясность, изысканность, чистоту, профессионализм и даже, в некоторых случаях, дороговизну.
Контраст
1. Цвет
Используйте контрастные цвета для ясности и визуального интереса. Если это другой цвет, сделайте его явно другим.
2. Размер
Главный элемент сделайте самым большим и жирным. Используйте разные размеры шрифтов и значков. Если по дизайну задуман разный размер текста, это отличие делайте явным.
3. Шрифты
Используйте разные семейства шрифтов при использовании более одного шрифта. Сочетайте шрифт с засечками для основного текста с заголовком без засечек или рукописным шрифтом. Если это разные шрифты, они должны быть очень разными.
4. Выделение
Выделяйте не более 10% объектов в документе. Выделяйте заголовки, важный текст и объекты. Используйте полужирный шрифт, цвет, курсив, подчеркивание и вывернутый шрифт. Используйте только две или три техники одновременно и не используйте ЗАГЛАВНЫЕ буквы для выделения.
5. Наложения
При наложении текста или водяного знака поверх изображения, добавьте контраста фона с текстом, чтобы избежать конфликтов или визуального шума.
Повтор
1. Повторяйте внутри
Повторите визуальные элементы внутри документа. Количество шрифтов, цветов, размеров, форм, макетов должно быть ограничено. И повторяться повсюду.
2. Повторяйте между документами
Повторяйте визуальные элементы в нескольких документах, чтобы создать связанность, ясность и брендинг между документами.
3. Визуальные элементы
Рассмотрите возможность создания визуальных элементов — фигур, логотипов, значков — которые повторяются от страницы к странице (или от слайда к слайду), чтобы документ выглядел однородным и упорядоченным.
4. Индивидуальность
Поддерживайте индивидуальность и профессионализм документа, используя один стиль письма, тон, верстку и другое содержание.
5. Руководство по стилю
Разработайте и используйте руководство по стилю. Оно поможет придерживаться фирменного стиля: цвет, верстку, типографику, плотность бумаги, использование логотипа и т. д.
Расстановка
1. Цель
Располагайте объекты на странице с четкой целью, и связывайте их между собой. Избегайте произвольного размещения или «плавающих» объектов, которые визуально не связаны ни с чем другим.
2. Выравнивание
Все на странице должно быть выровнено с чем-то другим. Не злоупотребляйте выравниванием по центру.
3. Расстояние
Поместите связанные предметы близко друг к другу, а не связанные предметы подальше друг от друга. Избегайте случайного размещения объектов и текста на странице.
4. Стабильность
Расположите объекты так, чтобы показать явную стабильность или её отсутствие. Плоские и горизонтальные объекты кажутся устойчивыми и спокойными. Вертикальное расположение может выглядеть более активным. Наклоненные объекты могут передать движение.
5. Расположение
Располагайте объекты стратегически. Пространство предполагает время. Наклоненные предметы подразумевают нестабильность. Объекты в верхней половине подразумевают свободу и счастье. Знайте как влияет расположение на восприятие.
“Почему”
1. Ожидание
Соответствуйте ожиданиям аудитории или намеренно удивляйте. Используйте брендинг, типы документов, тон, цвета и т. д., которые соответствуют тому, что ваша аудитория ожидает или надеется увидеть.
2. Заслуживающая доверия сложность
Увеличьте сложность дизайна или контента, чтобы повысить доверие. Упростите документ, чтобы он выглядел элегантнее и изысканнее. Заполните документ элементами, чтобы товары или услуги выглядели недорогими.
3. Метафора
Применяйте различные визуальные образы речи, такие как метафоры, каламбур, гиперболы, метонимии и т. д., чтобы повысить понятность, творческий интерес и осмысленную глубину цели вашего сообщения.
4. Пропозициональная плотность
Упростите элементы визуального дизайна, одновременно увеличивая коммуникативные высказывания или идеи, которые необходимо передать. Разделите количество идей на количество визуальных элементов и найдите число больше 1.
5. Риторическая четверка
Сделайте так, чтобы ваш документ достиг своей аудитории с помощью этоса (достоверности), пафоса (эмоций), логоса (логики) и кайроса (тайминга).
Организация
1. Пять способов организовать информацию (LATCH)
Существует пять способов организации информации: по местоположению и пространству, по алфавиту, по времени и хронологии, по категориям и по иерархии.
LATCH: L - location, A - alphabet, T - time, C - category, H - hierarchy.
2. Иерархия
Постройте иерархию информации по приоритету. Добавьте визуальные подсказки, чтобы направлять аудиторию от важной информации к менее важной.
3. Диагональная читабельность
Организуйте документ так, чтобы человек мог просматривать информацию быстро по диагонали. Признайте, что люди редко читают документы от корки до корки — они просматривают и удовлетворяются.
4. Правило третей
Чтобы повысить визуальное внимание, разделите документ на девять равных сегментов (трети по горизонтали и по вертикали) и разместите наиболее важные или интересные детали на пересечениях, где сегменты разделяются невидимыми линиями.
5. Вылеты
Чтобы повысить эстетичность и уменьшить визуальный шум, переместите края некоторых объектов и изображений за края страницы.
Негативное пространство
1. 1 + 1=3
Обратите внимание на формы, которые возникают между двумя объектами. Осознайте, что каждый раз, когда вы создаете два объекта, между ними создается третья форма.
2. Мультистабильность
Повысьте интерес к некоторым дизайнам логотипов, сделав их мультистабильными. Например, негативное пространство изображает фигуру, как на изображении с вазой и профилями лиц.
3. Шум пустоты
Наблюдайте за пустым пространством и определяйте, является ли оно важным и полезным. Если белое или пустое пространство не сделано специально, оно создаст нежелательный визуальный шум и снизит доверие.
4. Объект-фон
Четкие различия между объектами и фоном сохранят визуальный дизайн стабильным. Объекты в нижних областях или те, которые перекрывают другие объекты, кажутся ближе и воспринимаются как более важные.
5. Поля
Будьте внимательны к полям. Избегайте тонких или неудобных полей между объектами и текстом, а также краев страниц, которые случайно создают формы и контуры.
Типографика
1. Два шрифта
В большинстве документов следует использовать два разных шрифта (редко один, или три и более), как правило, из двух разных семейств шрифтов. Используйте один шрифт для титульной страницы и заголовков, а другой — для основного текста.
2. Семейства шрифтов
Знайте свои семейства шрифтов и используйте их надлежащим образом. Большинство шрифтов относятся к следующим типам: с засечками, без засечек, рукописный, декоративный или гранж.
3. Характер
Примените шрифт, соответствующий характеру вашего документа. Признайте, что тонкие нюансы в шрифтах сильно влияют на индивидуальность вашего документа. Избегайте стандартных и чрезмерно используемых шрифтов.
4. Разборчивость
Убедитесь, что ваш шрифт разборчив для конкретных слов, которые вы используете. Некоторые шрифты хорошо подходят для одних слов, но не для других. Если слово распространено, вы можете использовать менее разборчивые шрифты. Для имен используйте только очень разборчивые шрифты.
5. Удобочитаемость
Повысьте читабельность за счет увеличения межстрочного интервала, использования разборчивых шрифтов, сокращения длины строки и использования достаточного веса для контраста фона.
Иконки
1. Четыре типа
Используйте иконки, чтобы упростить чтение, сделать его увлекательным и универсальным. Применяйте подходящий для цели тип иконок: похожие, примерные, символические и произвольные.
2. Узнаваемость бренда
Используйте иконки и формы, чтобы улучшить мгновенное распознавание. В то время как логотипы полезны для брендов, иконки и формы также могут быть полезны для дизайна, не ориентированного на бренд, например, для указателей пути, раздаточных материалов и рекламных кампаний.
3. Мнемотехника
Используйте мнемонические приемы в иконках, чтобы сделать их более четко связанными с названием бренда или идеей. Таким образом, их легче будет запомнить.
4. Линии и контуры
Используйте линии, стрелки и другие визуальные инструменты, создающие контур, чтобы направлять взгляд и мысль зрителя в конкретных, важных и нужных направлениях. Избегайте линий и стрелок там, где важность уже очевидна.
5. Пиктограммы
Используйте пиктограммы в диаграммах и графиках, чтобы сделать информацию удобочитаемой и привлекательной для широкой аудитории.
Фотография
1. Сила изображения
Для большинства дизайнов используйте как можно больше изображений и иконок, поскольку информация станет более четкой и представлена этично. Аудитория запомнит общение с изображениями на 60% лучше, чем общение без изображений.
2. Разрешение
Используйте соответствующее разрешение для конкретного носителя (72 dpi для большинства цифровых и 300 dpi для большинства печатных). Не используйте пикселизированные или искаженные каким-либо образом изображения; ваш документ немедленно потеряет доверие.
3. Коэффициент фейсизма
При использовании изображений людей увеличивайте покажите только лицо, чтобы передать личность и интеллект. Чтобы передать здоровье, жизненную силу и чувственность, покажите человека во весь рост.
4. Направление
Убедитесь, что лица обращены внутрь или корешку документа. Избегайте направления лица в сторону от центра.
5. Соответствие стиля
При использовании нескольких фотографий в одном документе убедитесь, что их фотографические стили, включая освещение, положение и цвета, совпадают.
Автор: Кертис Ньюболд, доктор философии, специалист по визуальным коммуникациям
Литература
- Bang, Molly. Picture This: How Pictures Work. Boston, MA: Brown & Company, 2000.
- Katz, Joel. Designing Information: Human Factors and Commons Sense in Information Design. Hoboken, NJ: John Wiley & Sons, Inc., 2012.
- Lidwell, William; Holden, Kritina; and Butler, Jill. Universal Principles of Design. Beverly, MA: Rockport Publishers, 2003.
- McWade, John. Before & After: How to Design Cool Stuff. Berkeley, CA: Peachpit Press, 2010.
- Tufte, Edward. Envisioning Information. Cheshire, CT: Graphics Press, 1990.
- Weinschenk, Susan. 100 Things Every Designer Needs to Know about People. Berkeley, CA: New Riders Press, 2011.
- Williams, Robin. The Non-Designer’s Design & Type Book. Berkeley, CA: Peachpit Press, 2008.
