Гештальт: правила дизайна

Группа принципов визуального восприятия, разработанная немецкими психологами в 20-х годах. Является фундаментальной основой графического дизайна.
ДЕНЬ 3/6
Теория Гештальта как раздел психологии, зародилась в Германии в 1920-х годах. В то время как психологи обсуждают его полезность в понимании (в отличие от описания), как работает наш разум; теория очень привлекательна для художников и дизайнеров, потому что дает понимание того, как аудитория воспринимает произведение.

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

При рассмотрении «целого» происходит познание или когнитивный процесс — сознание совершает скачок от понимания частей к пониманию целого. Симметрия, близость, сходство, завершенность, непрерывность и фигура-фон — это принципы, которые помогают раскрыть сообщение дизайнера.
Что вы узнаете в этом уроке:
  1. История возникновения гештальт-принципов
  2. Что такое гештальт-принципы и как они работают.
  3. Семь гештальт законов: близость, повторение, симметрия, группировка, фигура-фон, непрерывность.
  4. Как использовать гештальт-принципы в графическом дизайне.
  5. Как использовать правила в графическом дизайне.
Гештальт это не дизайн, а группа визуальных принципов, знание которых управляет дизайном.
Что такое гештальт
Гештальт (форма, образ) – объединение вещей (звуки, визуальные элементы, чувства) в единое целое. Гештальт-принципы объясняют природу восприятия информации, поэтому являются фундаментальными основами в графическом дизайне.

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

Наряду с такими системами, как модульная сетка, золотое сечение и теория цвета, гештальт-принципы являются основными правилами в дизайне, которыми руководствуются профессионалы.
«Целое не является суммой частей»
— Курт Коффка
Ключевая идея
Для понимания законов гештальта в дизайне, надо знать четыре ключевых принципа гештальт-психологии.
1. Появление:
целое идентифицируется перед частями. Когда мы смотрим на объект, состоящий из форм, наш мозг сначала идентифицирует точки, а затем проявляется собака.
2. Реификация
Процесс превращения абстрактных понятий в якобы реально существующие феномены. Наш ум автоматически заполняет пропущенные пробелы в информации. Хотя форма панды для логотипа Всемирного фонда дикой природы является неполной, наш ум автоматически заполняет форму и распознает панду.
3. Мультистабильность:
Разум стремится избежать неопределенности. Ваза Рубина представлена в форме, которая имеет два возможных значения, ум не может видеть оба в одно и то же время и переключается между двумя состояниями, чтобы избежать путаницы.
4. Инвариантность:
Неизменность. Наш ум очень хорошо распознает сходства и различия. Например литера «М» представлена разными стилями, но всё же понимаем, что это та же самая буква. Мы хорошо умеем распознавать объекты независимо от масштаба и расположения в пространстве. Можно пример с бутылкой Coca-Cola и её фрагментом.
Логотип панда
речь идет о логотипе для Всемирного фонда дикой природы
Ваза Рубина
Рубин создал классическое изображение обращающихся фигур (Ваза Рубина, которая кажется то бокалом, то двумя лицами).
litera
Литера «М» представлена разными стилями, но всё же понимаем, что это та же самая буква. Наш мозг в состоянии определять объекты в разных ракурсах и стилизациях
Долматин
Наш мозг может определить связи между пятнами и распознать долматина

Важные факты для дизайнера

1
Визуальное единство
Работа дизайнера по созданию визуального единства облегчается тем фактом, что зритель на самом деле ищет какую-то организацию, нечто, связывающее различные элементы.
2
Подсказки дизайнера
Зритель не хочет видеть растерянность или несвязанный хаос. Дизайнер должен предоставить некоторые подсказки, но зритель уже пытается найти какой-то связный образец и единство. Действительно, когда такой шаблон не может быть найден, есть вероятность, что зритель просто проигнорирует изображение..
3
Практическая польза
С начала двадцатого века психологи провели большое исследование визуального восприятия, пытаясь выяснить, как глаз и мозг функционируют вместе. Большая часть этого исследования, конечно, очень техническая и научная, но некоторые из основных результатов полезны для художника или дизайнера. В процессе учения я буду называть их гештальт-законами, хотя технически они не являются научными законами, а скорее принципы визуального восприятия.
Наиболее широко известным из этих исследований восприятия называется гештальт-теория визуальной психологии. Знания теории полезны для художника или дизайнера.

Законы гештальта

Гештальт-теория говорит, что люди объединяют вещи (звуки, визуальные стимулы, чувства) в единое целое. Для дизайнеров и художников это означает, что, хотя композиция имеет отдельные части, которые можно изучать и анализировать как отдельные компоненты, вся композиция отличается и часто более важна, чем отдельные части. Для дизайнеров особенно важно помнить, что визуальные элементы в любой визуальной коммуникации работают вместе и должны усиливать друг друга как средство передачи всей идеи или сообщения.
Простота
Фигура-фон
Близость
Сходство
Смыкание
Непрерывность
Симметрия
Закон простых форм
Закон простоты — фундаментальный принцип гештальта. Нам требуется меньше времени, чтобы обработать и распознать простые формы, поэтому мы предпочитаем их сложным. Сталкиваясь со сложными формами, мы склонны реорганизовывать их в более простые компоненты. Вы с большей вероятностью увидите простой круг, квадрат и треугольник, чем сложную и неоднозначную форму.
Фигура-фон
Фундаментальная концепция дизайна: контраст черного и белого, переднего и заднего плана. Наше сознание балансирует равновесием восприятия фигуры и фона, в результате чего зритель не уверен в том, что он видит.
Закон близости
Объекты, расположенные ближе друг к другу, образуют группы. Даже если они имеют разные размеры, форму или цвет, они будут отображаться как группа, если они расположены близко друг к другу.
Закон близости использует пространство в качестве объекта. Когда элементы расположены близко друг к другу, они рассматриваются как часть группы, а не как отдельные элементы. Это особенно верно, когда элементы в группе ближе друг к другу, чем к любым элементам вне группы.
Закон сходства
Люди группируют объекты, которые похожи друг на друга не только с помощью пространства. В дизайне это может быть применено к шрифтам, цветам, тексту и стилям заголовков.
Принцип сходства гласит, что при равных условиях восприятие позволяет увидеть общности и различия одного и того же объекта. Люди различают схожие объекты на основе их визуального сходства. Принцип сходства доминирует над принципом близости. Вы увидите фигуру из цифр 7, прежде чем увидите элементы с цифрой 8.
Закон смыкания
Разум поставляет недостающие фрагменты в композиции, если достаточно заметных существенных признаков. Простые формы требуют немного подсказок, в то время как более сложные могут показаться неполными и заставляют зрителя работать усерднее, чтобы заполнить пробел. Закон смыкания ярко выражен в дизайне логотипов.
Закон непрерывности
Элементы, расположенные на линии или кривой, воспринимаются как более связанные, чем элементы, не расположенные на линии или кривой. Люди найдут линии или контуры и продолжат их за пределами своих конечных точек, если элементы шаблона устанавливают подразумеваемое направление. Простой пример — фотография извилистой дороги, которая выходит за пределы рамок изображения. Это инстинкт следования за рекой, тропой или забором ярко выражен в дизайне сайтов и интерфейсов.
Закон симметрии
качество того, чтобы быть составленным из точно подобных частей, обращенных друг к другу или вокруг оси. Симметричный дизайн сбалансирован и легко понятен зрителю, но может быть визуально неинтересен. Хотя асимметричный дизайн может быть неудобным, он также может привлечь внимание к себе.
Закон простых форм
Закон простых форм — один из фундаментальных принципов гештальта. Нам требуется меньше времени, чтобы обработать и распознать простые формы, поэтому мы предпочитаем их сложным. Сталкиваясь со сложными формами, мы склонны реорганизовывать их в более простые компоненты. Вы с большей вероятностью увидите простой круг, квадрат и треугольник, чем сложную и неоднозначную форму.
Prägnanz — это немецкое слово, которое означает «хорошая фигура» (буквально определяется как «краткий, лаконичный и выразительный»). Человеческий глаз любит находить простоту и порядок в сложных формах — он предотвращает нас от перегрузки информацией.

Проектирование с Законом Prägnanz в виде - мы можем использовать закон Prägnanz , чтобы помочь , когда Wireframing сайта. Наши глаза собирают блоки контента в одну страницу.

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

При редизайне сайта вы можете применить закон Prägnanz для каркаса новой концепции и разместить ее рядом с текущей версией страницы. Глаз может быстро выделить любые отклонения, и пользователь может быстро предоставить отзыв о внесенных изменениях - без необходимости в контенте. Это все, что нужно сделать.

Что такое простота?
Простота - это философия дизайна, отстаиваемая многими успешными компаниями, такими как Apple и Google. Когда вы проектируете с учетом ключевых целей пользователя, вы проектируете функциональность с помощью минимальных средств выражения. Принципы простоты в дизайне помогают создавать лучшие пользовательские интерфейсы, которые быстрее и эффективнее достигают своих целей.
Что такое перегрузка информацией?
Информационная перегрузка описывает избыток информации, доступной человеку, стремящемуся выполнить задачу или принять решение. Это препятствует процессу принятия решений, в результате чего принимается плохое (или даже не принимается) решение. При разработке продуктов (например, веб-сайтов или приложений) дизайнеры должны быть осторожны, чтобы они не грузить излишней информацией, которая может негативно повлиять на опыт пользователей.
Мы интуитивно предпочитаем организовывать и сводить к простым элементам сложные и неоднозначные формы.
Умение упрощать и убирать ненужное — важная особенность восприятия информации. Закон простых форм это наша способность видеть объекты простыми, постоянными и симметричными, насколько это возможно.

Однажды подмастерье спросил старого резчика как вырезать фигурку из массива дерева. «Просто удали всё ненужное», — отвечал старый мастер.

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

Макс Вертгеймер
Один из основателей гештальтпсихологии.
«Способность упрощать означает удаление ненужного – так, чтобы нужное могло само говорить.» — Ганс Хоффман, художник
Закон фигура-фон
Это фундаментальное понятие в дизайне, оно относится к контрасту между черным и белым, передним и задним планом, темным и светлым и равновесием. Регулировка равновесия может вывести связь фигуры с грунтом из равновесия, так что зритель не уверен в том, что он просматривает.

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

Простая композиция может иметь только одну фигуру. В сложной композиции будет несколько вещей, на которые стоит обратить внимание. Когда мы смотрим друг на друга, они становятся фигурами по очереди
Все, что не является фигурой, является фоном.

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

Фигура-земля относится к отношениям между объектом и его окружением. Иногда отношения стабильны, а это означает, что легко найти фигуру с земли. В других случаях отношения нестабильны, а это означает, что трудно выбрать фигуру с земли. В редких случаях отношения неоднозначны, а это означает, что фигура может быть основой или наоборот.
«Пустое пространство следует рассматривать как активный элемент, а не пассивный фон» — Ян Чихольд
Слева направо рис. A-C.
A — Skull, 1991, Octavio Ocampo.
B — Peter and the Wolf, Phoebe Morris,.
С — Symmetry Drawing, Мауриц Корнелис Эшер
D — Ваза Эдгара Рубина.
Октавио Окампо (см. рисунок A) использует теорию Гештальта, чтобы сообщить свое использование формы и ритма для создания скрытых изображений (в данном случае, черепов) из, казалось бы, не связанных изображений и форм.
Самым известным примером восприятия фигура-фон, вероятно, является рисунок лица-вазы (см. рисунок D), который описал датский психолог Эдгар Рубин. Этот рисунок иллюстрирует один из ключевых принципов гештальта фигура-фон. Отношения между фоном и фигурой нестабильны, поэтому мы можем видеть и лицо и края вазы. Зрительная система человека интерпретирует вазу Рубина и чередует образы в сознании.
Гештальт-теория говорит, что люди объединяют вещи (звуки, визуальные стимулы, чувства) в единое целое. Для дизайнеров и художников это означает, что, хотя композиция имеет отдельные части, которые можно изучать и анализировать как отдельные компоненты, вся композиция отличается и часто более важна, чем отдельные части (см. рисунок A). Для дизайнеров особенно важно помнить, что визуальные элементы в любой визуальной коммуникации работают вместе и должны усиливать друг друга как средство передачи всей идеи или сообщения (см. рисунок D).

Слева направо рис. A-C, примеры логотипов
A — The Girl Scouts, 1978, Saul Bass, .
B — Snooty Peacock, logo jewelry boutique.
С — The USA Network logo
D — Fedex logo, Landor.
Вверху рассматривается фундаментальный закон гештальта в дизане логотипов. Сол Басс (см. рисунок A) использовал гештальт для объединения сложных идей - молодых женщин, объединившихся в духе взаимной поддержки и роста, - в единый образ. Snooty Peacock (см. рисунок B), символ ювелирного бутика в Техасе соединил одной фигурой лицо девушки и силуэт павлина на фоне волос, которые являются одномоментно и хвостом павлина.

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

Когда разные элементы располагаются близко друг к другу, они воспринимаются как принадлежащие к одной группе.
Слева направо рис. A-B.
A — IBM лого, Пол Рэнд, 1972.
B — Unilever лого, Miles Newlyn.
В приведенном ниже примере логотипа IBM (см. рисунок A) наш мозг объединяет каждую из соседних горизонтальных полос для создания единого изображения логотипа IBM. Вот почему, когда мы смотрим на логотип IBM, мы видим три буквы, состоящие из коротких горизонтальных линий, уложенных друг на друга, вместо 8 горизонтальных линий, вкрапленных одинаковыми пропусками.

Логотип Unilever (см. рисунок B) также хорошо подтверждает принцип близости Гештальта. Поскольку все миниатюрные значки сгруппированы вместе, результирующая связка легко читается как «U» на логотипе. В соответствии с идеями бренда, стоящими за этим креативным логотипом, марка бренда тщательно разработана для того, чтобы объединить 25 замысловато сплетенных иконок, каждая из которых изображает важный аспект усилий, прилагаемых брендом Unilever для придания устойчивому образу жизни банальности.

Поскольку компания «CMON» хорошо известна своей нацеленностью на высококачественные игры, включающие увлекательный, увлекательный игровой процесс и удивительные миниатюры, в ее логотипе (см. рисунок C) используются популярные игровые компоненты для создания «N» и «C» нового логотипа, чтобы отразить игривость. они стремятся привнести в жизнь геймеров!

Четыре квадрата в логотипе Microsoft образуют окно. Новый логотип Microsoft включает в себя четыре цвета: красный, зеленый, синий и желтый. Эти цвета связаны с продуктами Microsoft. Голубой цвет относится к серверам, облачному бизнесу и операционной системе windows, красный — к офису и продуктам, типа Word, зеленый принадлежит xbox а желтый... появился чтобы остаться загадкой.

Близость является самым простым способом достижения единства, и многие произведения искусства используют эту технику. Без близости (в основном с изолированными элементами) художник должен уделять больше внимания другим методам объединения изображения.
Закон близости в оформлении обложек Logolounge Била Гарднера. Слева направо рис. A-B.
A — стрелка.
B — 2-й выпуск.
С — 3-й выпуск.
В — 5-ой выпуск.
Закон повтора
Ценным и широко используемым средством для достижения визуального единства является повторение. Как следует из этого термина, что-то просто повторяется в различных частях проекта, чтобы связать части друг с другом. Элемент, который повторяется, может быть почти любым: цвет, форма, текстура, направление или угол.
Существует 3 метода повтора: повторение, шаблон и ритм.
  • Повторение — простое дублирование одного и того же элемента много раз в дизайне. Например, вы можете нарисовать треугольник, а затем повторить его несколько раз. Простое повторение используется в типографике, дизайне логотипа или в создании веб-дизайна и приложений.
  • Обратимые (в центре). В этом случае и фигура и фон одинаково привлекают внимание зрителя. Это создает напряжение, в результате чего внимание перескакивает с цветных полосок на темные.
  • Неоднозначные (справа) Элементы могут казаться одновременно фигурами и фоном. Они формируют одинаково интересные формы, и зрителю остается найти свою точку входа в композицию
Ценным и широко используемым средством достижения визуального единства является повторение. Как следует из этого термина, что-то просто повторяется в различных частях проекта, чтобы связать части друг с другом. Элемент, который повторяется, может быть почти любым: цвет, форма, текстура, направление или угол.

Повторение является простым решением и мы часто используем его в дизайне. Повтор это полезный метод, который недооценивают многие дизайнеры. Повторение в фирменном стиле или в дизайне приложения будет усиливать ваше сообщение и единство композиции. Элементы дизайна повторяются в одном и том же месте и это помогает обеспечить согласованное взаимодействие с пользователем. Постоянство дает пользователю возможность комфортного сценария использования.
Слева направо рис. A-C.
A — Софи Таубер-Арп. Композиция с кругами в форме кривых. 1935
B — Джо Миллера, логотип для пространства 47.
C — Михаил Врубель, демон сидящий, 1890.

В картине Софи Таубер-Арп (A) композиция основана на одной форме: круг с удаленными двумя круглыми «укусами». Эта форма повторяется в разных размерах и положениях. В результате получается композиция, в которой объекты остаются те же, но меняются в размере. В картине используется один один из принципов повторения — градации.

Дизайн логотипа Джо Миллера для пространства 47 (B) также показывает единство повторением. В данном случае это не многократное повторение, а простое повторение с поворотом, которое отличает «4» от «7». Созданная с использование похожих или связанных графических элементов, головоломка поражает зрителя и приводит к запоминающемуся логотипу.

Повторение как элемент единства не ограничивается геометрическими фигурами. На картине Врубеля маслом, показанном на рисунке С, мы видим много мазков с быстрым и динамическим ударом широкой кисти художника. Эти нерегулярные и даже или неравномерные мазки сходны по характеру и объединяются художником в узнаваемый визуальный язык. Представьте, насколько отличалось бы это изображение, если бы эти широкие удары кисти заменить точками в стиле импрессионистов. Как минимум, изменится характер героя, как максимум — потеряется трагическое напряжение и динамика.
Слева направо рис. A-D.
A — NBC лого, Chermayeff & Geismar & Haviv, 1986.
B — The Chase лого, Chermayeff & Geismar & Haviv, 1961.
С — bp лого, редизайн Landor Associates, 2000.
D — Старбакс лого, редизайн Lippincott, 2011.
В 1986 году павлин (см. рисунок A) был перерисован, стильный и простой, с инициалами NBC, добавленными к нему в специально созданном стиле надписи. Повторяющиеся элементы в логотипе распространяются от нижней точки в центре, излучая вверх цветные перья павлина. Повторяясь в разных цветах логотип посылает основную коммуникацию — покупайте цветные телевизоры, в котором мир намного ярче, чем в черно-белых аналогах.
Динамика логотипа банка The Chase (см. рисунок B) создается за счет скошенных углов под 45 градусов. Простой повтор прямоугольников и скоса рисует невидимую окружность по часовой стрелке.
Теплые цвета в знаке bp от компании Landor (см. рисунок С), наводят на мысль о тепле, свете и природе. Повтор в логотипе создан на основе листа-шаблона, что делает произведение активным. Градации в элементах поддерживают идею солнца в знаке bp.
Волна — основной визуальный и повторяющийся элемент в логотипе Starbucks (см. рисунок D). Морской мотив родился с персонажем — Русалкой. По краям окружности волна переходит в полоски. Единство обеспечивается одинаковыми размерами в полосках и волнах логотипа.

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

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

Создать сходство объектов на основе цвета, формы, размера — это самые распространённые способы сгруппировать объекты по простому признаку. Более сложные способы — классифицировать объекты на основе выполняемых функций внутри группы. Объединяя объекты в группу, мы транслируем мысль — эти символы работают ради общей цели или выполняют родственные функции.

Применение закона сходства в разных сферах дизайна

1
Веб-дизайн
Принцип сходства можно использовать в веб-дизайне: навигация, карточки товара, блоки. Карточка товара — это группа взаимосвязанных элементов на основе размера шрифта, цвета и расстояний между объектами. Карточка объединяет объекты ради общей цели — выгодно продемонстрировать преимущества товара.
2
Фирменный стиль
Основная задача дизайнера при разработке фирменного стиля — найти сходство визуальных элементов на всех носителях. Вы с одного взгляда должны определить родство в оформлении торговой точки, визитки и веб-сайта.
3
Типографика
Гарнитура в типографике объединяет множество начертаний букв и знаков в единую стилистическую и композиционную систему. Профессионал-шрифтовик может по штриху отличить Helvetica от Arial. Именно сходство в рисунке символов помогают нам классифицировать шрифты по своему назначению и области применения.
Слева направо рис. A-В.
A — Шрифт Футура, геометрический шрифт без засечек, Пол Реннер, 1927.
B — Карточка товара Ikea, 2019.
C — Coolors, мобильное приложение, 2019.
D — Додо пицца, мобильная версия сайта, 2019.
Символы и буквы шрифта Futura созданы в геометрическом стиле. Многие шрифты времени Баухауз объединяет геометрия и Futura является ярким примером стилистического решения. Если вы начнете изучать буквы, то обнаружите сходство в вертикальных, горизонтальных штрихах (см. рисунок A), верхних и нижних выносных элементах. Каждая деталь отдельно взятого символа повторяет рисунок родственных ему букв.

Карточка товара веб-сайта Икея (см. рисунок B) это образец скандинавского минимализма. Но даже в малом количестве элементов, что также присуще скандинавам, отражена стилистика компании. Заголовок, краткое описание, цена и фото на белом фоне — это шаблон, который клонируется на всем сайте. Сходство в лингвистики. Названия товаров на шведском, и это сходство даже немного нервирует.
Элементы, имеющие сходные визуальные характеристики, воспринимаются как более связанные, чем те, которые не имеют сходных характеристик.
Мобильное приложение Coolors (см. рисунок С) создает цветовые палитры. Сходство в интерфейсе во всём: маленькие иконки, одинаковые плашки и даже гармоничные сочетания генерируются с одинаковым интервалом.

Фирменный стиль сайта Додо Пицца (см. рисунок С) очень схож с оформлением мобильного приложения. Разработчики сократили до минимума различие между основными носителями фирменного стиля. Сходство во всем: иконки, кнопки, типографика. Приятный пример закона сходства в дизайне.
Закон смыкания
Разум поставляет недостающие фрагменты в композиции, если достаточно заметных существенных признаков. Простые формы требуют немного подсказок, в то время как более сложные могут показаться неполными и заставляют зрителя работать усерднее, чтобы заполнить пробел. Закон смыкания ярко выражен в дизайне логотипов.
Принцип «смыкание» объясняет основной принцип в создании логотипов. Если в изображении достаточно объема информации, то на основании шаблона наш мозг сделает выводы, заполняя пробелы и создавая единое целое.

Таким образом, мы можем уменьшить количество элементов, необходимых для передачи информации, снижая запутанность и делая дизайн более привлекательным.
  • Дизайн логотипа. Принцип смыкания хорошо сочетается с минимализмом и философией простоты в дизайне. Использование органических линий в дизайне логотипа позволяет оставлять незавершенными целые плоскости. Особенно ярко выражен закон смыкания в дизайне логотипов с геометрией и животными
  • Веб-дизайн. Дизайнеры используют принцип завершения при создании иконок для веб-сайтов и фирменного стиля. Этот принцип помогает оставлять незавершенными части в произведении, что очень актуально для экранов. Чем меньше деталей в иконках, тем чище и проще дизайн.
В графическом дизайне принцип завершения минимизирует визуальный шум, усиливает концепцию передает сообщение в упрощённой форме.
Нам нравится видеть как можно более простую фигуру, поэтому если в объекте есть разрыв, то наш разум стремится завершить форму.
Слева направо рис. A-В.
A — Логотип WWF, Landor.
B — Серия иконок, pixeden.com, 2019.
C — Иллюстрация Малики Фавр, 2019.
D — Фотография, 2019.
Логотип Всемирного фонда дикой природы (см. рисунок А) связал природу и человека. Мы привыкли к этому символу и не воспринимаем его как образец, отражающий один из принципов гештальт-теории. В верхней части логотипа технически не «дорисована» часть панды. Но это не мешает нам воспринимать объект цельным.

Комплект иконок (см. рисунок B) на тему, связанную с погодой. Эти иконки имеют общий и приятный стиль, который позволит легко добавить их в любой проект. Часть линий на объектах имеют незавершенный характер, но нашему сознанию достаточно информации, чтобы понять объект и мысленно «дорисовать» недостающие разрывы.
Известная своим уникальным использованием графических форм (см. рисунок C) и смелых цветов, Favre комментирует на своем сайте: «Я пытаюсь разобраться в сути своей темы, используя как можно меньше линий и цветов, чтобы передать суть идеи.» Бутылки и тени в иллюстрации — это неразрывное целое, но нашему сознанию достаточно информации, чтобы отделить одно от другого.

В фотографии (см. рисунок D) используется простой и эффектный приём. Рука «обозначила» лампочку в пространстве. Несмотря на разрыв между рукой и цоколем мы понимаем, какой предмет изображен на коллаже. Лампочка простой объект. Нашему сознанию достаточно долей секунд, чтобы «расшифровать» идею фотографа.
Закон непрерывности
Элементы, расположенные на линии или кривой, воспринимаются как более связанные, чем элементы, не расположенные на линии или кривой. Как правило, дизайнер применяет несколько законов одномоментно, показывая движение, ритм и непрерывность в графическом дизайне. Одинаковые по массе объекты ритмичны в своей последовательности, разрыв в объектах акцентирует взгляд на законе непрерывности.
Закон непрерывности — один из тех законов, которые невидимы глазу, но часто используемые в графическом дизайне. Рисуя первую букву, мы не думаем, как это происходит. Наш взгляд следует за рукой, которая проводит две диагональные и одну горизонтальную линию. Во всех картах мы визуально прокладываем маршруты. В начале маршрута мы ставим точку «А», а в конец — это точка «B». Линия — это метафора нашего путешествия.

В дизайне веб-сайтов тоже можно найти использование закона непрерывности. Наш взгляд (изображение A) начинает скользить от логотипа в левом крае страницы, потом проходит сквозь форму поиска и упирается в иконку с корзиной. Мы не осознаём и не замечаем использование закона непрерывности, но дизайнер провёл невидимую линию и заставил взгляд пройтись по от логотипа Petbarn до иконки с корзиной.
Слева направо рис. A-F.
A — закон непрерывности в меню сайта petbarn.com.au.
B-F — в графическом дизайне закон непрерывности работает незаметно. Белым пунктиром показаны направления взгляда. Источник @ocean.ui/
Пробелы между пунктами меню работают как пространство и подчиняются закону гештальта фигура-фон.
Если вы хотите, чтобы взгляд вашего пользователя перетекал с одного объекта на другой, вам нужно задать ритм и направление. Расстояния между объектов не должны быть слишком большие, чтобы не нарушать ритм. Выравнивание может быть по середине или краю. Пустое пространство или разрывы могут нарушить закон непрерывности. Когда пустое пространство используется надлежащим образом, оно позволяет взгляду течь как естественный поток.

Пробелы (изображение A) между пунктами в меню отрегулированы по самому длинному названию пункта «Smal Animals», поэтому не кажутся большими. Соблюдайте закон непрерывности и поддерживайте интерес читателей, чтобы обеспечить эффективный просмотр содержимого веб-сайта.
Закон симметрии
Элементы, составленные из подобных частей вокруг оси и обращенные друг к другу могут называться симметричными.

Симметричный дизайн сбалансирован и легко понятен зрителю, но может быть визуально неинтересен. Асимметричный дизайн больше, чем симметричный, привлекает внимание, но сложнее воспринимается аудиторией. Симметричный дизайн — это статика, ассиметричный — динамика и экспрессия.
Геометрическая симметрия — это наиболее известный тип симметрии для многих людей. Например, круг, повёрнутый вокруг своего центра, будет иметь ту же форму и размер, что и исходный круг. Поэтому круг называется симметричным относительно вращения (имеет осевую симметрию). Виды симметрий, возможных для геометрического объекта, зависят от множества доступных геометрических преобразований и того, какие свойства объекта должны оставаться неизменными после преобразования. — Википедия
  • Дизайн логотипа. Наверное, никого не удивлю тем фактом, если скажу, что большинство логотипов, которые нас окружают, симметричные. Почему дизайнеры создают симметричные логотипы? Мгновенное узнавание, простота — основные качества хорошего логотипа, а симметричность в дизайне логотипа проще воспринимается аудиторией.
  • Веб-дизайн. Большинство современных сайтов создаются симметричными. Симметричный дизайн создавать намного проще, чем ассиметричный. Поэтому большинство лендингов — это глубокий поклон симметрии. Внимательно присмотритесь — симметрия во всем, начиная с меню и заканчивая футером. Сайт студии Бренда, кстати, не исключение.
Слева направо рис. A-D.
A — логотип Apple, 2019.
B — интерфейс Apple Watch, watchOS 6, 2019.
C — внешний вид Mac Pro, 2019.
D — мобильное приложение Apple Music, 2019.
Слева направо рис. A-D.
A — лист Tree vector created by freepik - www.freepik.com" style="" rel="" data-redactor-tag="a">Freepic.
B — Иконки Water vector created by freepik - www.freepik.com" style="" data-redactor-tag="a">Freepic.
C — внешний вид Mac Pro, 2019.
D — мобильное приложение Apple Music, 2019.
... небольшое нарушение симметрии может сделать дизайн более интересным и привлекательным
Я специально проиллюстрировал тему с симметрией примерами одной кампании. Почему интерфейс, дизайн, объекты, логотип симметричные? Ответ в нас самих. Мы по природе своей симметричные. Нас окружают симметричные вещи, потому что мы их будем носить, слушать, пользоваться.

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

Бытует мнение, что симметрия скучная, а асимметрия — динамичная и активная. Однако, следует понимать тот факт, что небольшое нарушение симметрии может сделать вещи более интересными. Важно знать теорию дизайна и эффективно её использовать в проектах.
Гештальт
(по нем. — форма, образ) – объединение вещей (звуки, визуальные элементы, чувства) в единое целое. Гештальт-принципы объясняют природу восприятия информации, поэтому являются фундаментальными основами в графическом дизайне.

Виды симметрий

Слева направо рис. A-С.
A — зеркальная симметрия.
B — радиальная симметрия.
C — динамическая симметрия.
Зеркальная симметрия — очень часто встречающийся пример в природе: листья, шишки, яблоко, бабочка, тело человека. Зеркальная симметрия также известна как двусторонняя симметрия. Принцип прост — половина зеркально создает экземпляр самой себя
Симметрия отражения может принимать любое направление: вертикальное, диагональное и др.

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

Динамическая симметрия. Обращали внимание на то, как растут семечки в подсолнухе? Американский архитектор ввёл понятие динамическая симметрия в начале 20-х годов. К сожалению, использование его видение сложно проиллюстрировать в графическом дизайне, поэтому я расскажу в сильно утрированном виде. Ракушка, круг подсолнуха или кедровая шишка при упрощенном взгляде имеют выраженную зеркальную симметричность. Но современный дизайн редко выглядит симметричным на 100%.
Слева направо рис. A-C.
A-C — пример интерфейса Apple Watch, watchOS 6, 2019.
Хороший и простой пример динамической симметрии в интерфейсе часов watchOS 6. Создавать дизайн интерфейса очень сложно, особенно для маленьких экранов. В левом примере (фото 1) можно увидеть, что экран симметричен, но выделены акценты. Цветом и выключкой влево дизайнер показал, на что обратить внимание.
Слева (фото С) центр объектов сознательно смещен с оптического центра, и радиальная симметрия превращается в динамическую.

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

Домашнее задание № 4

Изучите и предложите обновленную структуру блока «Гештальт». Проверьте контент блока, исправьте ошибки, используя онлайн-инструменты и документ Ильи Рудермана.
Задание 4.1
Для успешного выполнения задания нужно уметь пользоваться доступными бесплатными инструментами для проверки текста на знание русского языка: орфографию, грамматику.
Изучение. Изучите тему блока. Создайте новый раздел в гугл-доке. Сформатируйте текст.
Подсказка: Как правильно копировать и вставлять текст. Ссли копируете текст, то при вставке используйте горячие клавиши: вставка → вставить без форматирования (ctr+shift+v).

Проверьте текст блока на ошибки, пользуясь бесплатными онлайн-инструментами, исправьте неточности. Дополните необходимым изобразительным материалом (таблицами, фото, рисунками), который поможет полнее раскрыть тему блока.

  • Материалы. см в уроке
  • Сроки. до 23 июня, 11:00
  • Дополнительные задания. Даются в тексте блока (если есть)
Перед выполнением домашнего задания, надо нажать кнопку «пройден урок». Важно! Задайте вопросы к блоку «Гештальт»
Задание 4.2
Слева направо рис. A-B.
A — элементы для задания.
B — пример выполненного задания.
Симметрия. Скачайте файлы и создайте симметричную композицию из приложенных объектов.
  • Условия. Дается 3 артборда, пропорции — квадрат. Три квадрата — три композиции. Приложите в облако выполненную работу. Назовите по принципу: ваш емайл_симметрия. Файл в формате PDF.
  • Сроки. У вас есть всего один день на это задание.
  • Перед выполнением выполнить домашнего задания, надо нажать кнопку «пройден урок».
Ассиметрия. Скачайте файлы и создайте симметричную композицию из приложенных объектов.
  • Условия. Дается 3 артборда, пропорции — квадрат. Три квадрата — три композиции. Приложите в облако выполненную работу. Назовите по принципу: ваш емайл_асимметрия. Файл прикладывать в формате PDF.
  • Сроки. У вас есть всего один день на это задание.
  • Перед выполнением выполнить домашнего задания, надо нажать кнопку «пройден урок».
Сделайте экспорт артбордов. Запакуйте в один архив. Файл назовите по № задания+ваша фамилия. Прикрепите в форме
Отправьте домашнее задание
Не забудьте файл назвать «№ задания_фамилия»
Прикрепите файл(ы) в формате JPG, PNG, PDF
Тест на знание блока
Проверьте, сможете ли вы отличить закон близости от симметрии. А чем фигура-фон отличается от закона смыкания? Пройдите тест — и проверим!
ТЕСТ ГЕШТАЛЬТ ТЕОРИЯ
Знаете гештальт-принципы? Докажите!
Проверьте, сможете ли вы отличить закон близости от симметрии. А чем фигура-фон отличается от закона смыкания? Пройдите тест — и проверим!
Начать тест
Кто в основном разработал гештальт-законы
Неверно. Гештальт — это общее название законов
Неверно. Но очень близко. Курт Ко́ффка — немецко-американский психолог. Вместе с Максом Вертгеймером и Вольфгангом Кёлером считается одним из основателей гештальт-психологии.
Неверно. Но близко. Коффка и Келер играли большую роль в гештальпсихологии.
Да, верно. Макс Вертгеймер — немецкий и американский психолог, основатель гештальт-психологии.
Вы не правы.
Далее
Проверить
Узнать результат
Определите закон гештальта, показанный ниже
К сожалению, это не верный ответ

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

Вы не правы.
Вы не правы.
Вы не правы.
Вы не правы.
Вы не правы.
Далее
Проверить
Узнать результат
Когда наш разум «дорисовывает» недостающие фрагменты в композиции. Это —
К сожалению, нет
К сожалению, нет
Верно! Разум поставляет недостающие фрагменты в композиции, если достаточно заметных существенных признаков.
Неверно.
Неверно.
Далее
Проверить
Узнать результат
В каком случает вы с большей вероятностью увидите простой круг, квадрат и треугольник, чем сложную и неоднозначную форму. Это —
К сожалению, неверно
К сожалению, неверно
Неверно.
Вы не правы.
Да. Закон простых форм — один из фундаментальных принципов гештальта. Нам требуется меньше времени, чтобы обработать и распознать простые формы, поэтому мы предпочитаем их сложным.
Нет
Далее
Проверить
Узнать результат
Фундаментальная концепция дизайна: контраст черного и белого, переднего и заднего плана. Наше сознание балансирует равновесием восприятия фигуры и фона, в результате чего зритель не уверен в том, что он видит. Это —
К сожалению, неверно.

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

Задайте вопрос или прокомментируйте

Коротко о главном:
  1. Повторение работает с шаблоном, заставляя произведение искусства казаться динамичным. Повторение элементов дизайна в дизайне создает единство.
  2. Образцы для вдохновения часто находят в природе.
  3. Повторение проще увидеть глазу, поэтому потребителю требуется меньше внимания, чтобы запомнить ваше сообщение.
  4. Повторение — один из самых простых техник в создании логотипа.
  5. Постоянство дает пользователю возможность комфортного сценария использования.
Дополнительные материалы:
  1. 7 способов улучшить пользовательский опыт с помощью пустого пространства
    Принципы гештальта в вебдизайне
  2. 7 советов по использованию гештальт-теории для лучшей композиции
    Гештальт в фотографии. Перевод и оригинал
  3. Что такое инсайт и как его достичь
    Гештальт и инсайт

Онлайн-курс по графическому дизайну

99
р.
выбор параметра
Полный образовательный курс по графическому дизайну. Предназначен для дизайнеров, менеджеров, маркетологов и предпринимателей. Содержит базовые основы по основным принципам дизайна. Содержит тесты, пояснения, примеры. От бесплатного курса отличается полными уроками.