Принципы графического дизайна

Есть три ответа на эффект дизайна – да, нет и НИЧЕГО СЕБЕ! «Ничего себе» – это то, к чему надо стремиться.

– Милтон Глейзер. 

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

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

Курсы графического дизайна для новичков

Равновесие 

Это состояние в композиции, когда элементы сбалансированы друг с другом. Для понимания равновесия представь, что каждый элемент дизайна – текстовое поле, фигура и изображение – имеет визуальный вес. Отсюда и понятие «равновесие»: элементы дизайна должны уравновешивать друг друга и вызывать интуитивное чувство завершенности увиденного. 

Композиция натюрморта: а – уравновешенная по цвету, б – неуравновешенная по цвету.

Виды равновесия:

• Симметричное

Объекты на одинаковом расстоянии от оси. Подходит для оформления дизайна с намеком на формальность, строгость и элегантность.

• Ассиметричное

Часто отражает динамику. Содержит объекты с одинаковым визуальным весом, но разные по виду.

• Радиальное

Элементы изображения расходятся из общего центра. Внимание удерживается в центре композиции. 

• Мозаичное

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

Ни один элемент не доминирует в композиции, четкий центр отсутствует, баланс сохранен.

Выравнивание и модульные сетки

Нужны для создания упорядоченной и целостной композиции, в которой элементы выровнены относительно друг друга. 

Модульная сетка — это инструмент, который помогает выровнять блоки относительно друг друга. 

Цвет 

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

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

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

Контраст

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

Варианты контрастов:

• темный и светлый; 
• толстый и тонкий;
• современное против традиционного; 
• большой и маленький.

Текст резко выделяется на затемненном фоне. 

Иерархия и масштаб 

Дизайнеры рассказывают визуальные истории, в которых элементы располагаются в порядке важности. Самый важный элемент обладает большим визуальным весом: взгляд сначала задерживается на нем, затем скользит по менее важным объектам. Этот порядок расположения элементов и есть визуальная иерархия. Примеры, как её достичь:

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

Плакат для The Night Market от Мэри Гэллоуэй. 

Ритм 

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

Повторение

Повторение помогает связать между собой отдельные элементы. Это ключевой элемент брендинга, но используется и в «одноразовых» дизайнах. А ещё, повторение – основа паттернов и текстур. 

Вспомните Coca-Cola или Apple: в голове сразу вспыхивают их логотипы и цветовые схемы. Всё дело в повторении: оно создает согласованный образ бренда и связывает элементы воедино. 

Работа от Anagrama

Направление

Поскольку дизайн делается для людей, важно понимать, как движется «поток» внимания пользователя. В каком порядке его глаза исследуют страницу? Как человек понимает, куда смотреть дальше?

Ученые Nielsen Norman Group выявили некоторые закономерности движения глаз. Испытуемые просматривали веб-страницы, а ученые фиксировали направление взгляда, чтобы выявить паттерны «потребления» контента. Результаты в форме тепловых карт приведены выше.

Исследования открыли стандартные паттерны движения взгляда: в виде букв «F» и «E». Поэтому максимум внимания концентрируется в верхнем левом углу страницы, а при движении вниз оно плавно рассеивается.

Типографика

Правильно подобранный шрифт, как и цвет, задает эмоциональный тон дизайну. 

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

О том, как подбирать шрифтовую пару, читай здесь.

Негативное пространство 

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

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

 Дизайнер использовал пространство между птицами, чтобы создать форму рыбы. 

Пример от Malika Favre. 

Заключение

Принципов визуального дизайна, конечно, больше десяти. Надеемся, что тема тебя заинтересовала и мотивировала на дальнейшие интеллектуальные поиски. Или, например, на посещение курсов UX Mind School. На всех наших курсах подробно разбираем как практику, так и теорию: никакого интуитивного тыкания, а работающие кейсы и научно доказанные принципы визуального дизайна. 

Советуем также прочитать эти книги:

Удачи! 😉