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

Группа принципов визуального восприятия, разработанная немецкими психологами в 1920-х годах. Является фундаментальной основой графического дизайна.

ДЕНЬ 3/6

Содержание

Privacy

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

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

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

Что узнаете из урока:

Кто разработал теорию гештальта
Как работают гештальт-принципы
Семь гештальт-законов и ключевой принцип
Как использовать гештальт-принципы в графическом дизайне
Законы восприятия информации

Гештальт — это не дизайн, а группа визуальных принципов, знание которых управляет дизайном.

Что такое гештальт?

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

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

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

«Целое не является суммой частей»
— Курт Коффка

Ключевая идея

Для понимания законов гештальта в дизайне, надо знать четыре ключевых принципа гештальт-психологии:

1. Появление

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

2. Реификация

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

3. Мультистабильность

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

4. Инвариантность

Неизменность. Наш ум очень хорошо распознает сходства и различия. Например, литера «М» представлена разными стилями, но всё же мы понимаем, что это та же самая буква. Мы хорошо умеем распознавать объекты независимо от масштаба и расположения в пространстве. Можно вспомнить пример с бутылкой Coca-Cola и её фрагментом.

Логотип панда

речь идет о логотипе для Всемирного фонда дикой природы

Ваза Рубина

Рубин создал классическое изображение обращающихся фигур (Ваза Рубина, которая кажется то бокалом, то двумя лицами).

litera

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

Долматин

Наш мозг может определить связи между пятнами и распознать долматина

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

1

Визуальное единство

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

2

Подсказки дизайнера

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

3

Практическая польза

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

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

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

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

Закон простых форм

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

Подробнее

Закон простых форм

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

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.
С — CMON, компьютерные игры.
D — Microsoft logo, Pentagram.

В приведенном ниже примере логотипа 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) начинает скользить от логотипа в левом крае страницы, проходит сквозь форму поиска и упирается в иконку с корзиной. Мы не осознаём и не замечаем наличие закона непрерывности, но дизайнеры активно его используют.

Слева направо рис. 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 — динамическая симметрия.

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

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

Динамическая симметрия. Обращали внимание на то, как растут семечки в подсолнухе? Американский архитектор ввёл понятие «динамическая симметрия» в начале 1920-х годов. К сожалению, её использование сложно проиллюстрировать в графическом дизайне, поэтому я расскажу в сильно утрированном виде. Ракушка, круг подсолнуха или кедровая шишка при упрощенном взгляде имеют выраженную зеркальную симметричность. Но современный дизайн редко выглядит симметричным на 100%.

Слева направо рис. A-C.
A-C — пример интерфейса Apple Watch, watchOS 6, 2019.

Хороший и простой пример динамической симметрии — это интерфейс часов WatchOS 6. Создавать дизайн интерфейса очень сложно, особенно для маленьких экранов. На левом примере (фото 1) можно увидеть, что экран симметричен, но на нём выделены акценты. Цветом и выключкой слева дизайнер показал, на что обратить внимание.
Слева (фото С) центр объектов сознательно смещён с оптического центра, и радиальная симметрия превращена в динамическую.

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

Тест на знание блока

Сможете ли вы отличить закон близости от симметрии. А чем фигура-фон отличается от закона смыкания? Пройдите тест — и проверим!

Урок пройден?

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

Show/add comments

Цветовые сочетания:
описание различных взаимодействий между цветами.
Фигура/фон:
фундаментальная концепция дизайна, она относится к контрасту между черным и белым, передним и задним планом, темным и светлым и равновесием. Работа с равновесием может вывести связь фигуры с фоном из равновесия, поэтому зритель не уверен в том, что он просматривает.