Дизайн — это процесс разработки идеи и воплощения ее в жизнь. Построение концепций играет в нем важную роль, в том числе обсуждение того, каким образом использовать пространство интерфейса или как лучше построить композицию с учетом принципов гештальта.
1. Перспектива в дизайне
Перспектива — это способ изображения на плоскости трехмерных объектов с учетом особенностей зрительного восприятия. Именно последние определяют, каким образом мы видим пространство.
Это одна из фундаментальных тем в дизайне, в которой нам необходимо разобраться, чтобы создавать реалистичные, визуально привлекательные проекты.
Существуют следующие виды линейной перспективы.
Перспектива с одной точкой схода
В этом случае объекты расположены прямо перед нами, и обращены к нам одной из сторон. При этом образующие их параллельные линии сходятся на горизонте в одной точке.
Пример.
Вот некоторые мои попытки исследовать перспективу с одной точкой схода.
Перспектива с двумя точками схода
В этом случае объект несколько развернут и расположен к нам ребром, то есть зрители видят его под определенным углом. Обе точки схода располагаются на линии горизонта.
Пример.
Вот некоторые мои попытки исследовать перспективу с двумя точками схода.
Перспектива с тремя точками схода
Объекты расположены под определенным углом к зрителю, при этом мы видим их или сверху, или снизу. Две точки схода располагаются на линии горизонта, а еще одна — либо ниже, либо выше нее.
Пример.
Вот некоторые мои попытки исследовать перспективу с тремя точками схода.
2. Принципы гештальта в дизайне
Визуальное восприятие — это то, каким образом человеческий глаз видит визуальные элементы и организует различные формы в композиции. Именно этот процесс описывают принципы гештальта в дизайне.
Существует более 10 таких принципов, однако чаще всего используются всего 7.
Принцип завершения
Этот принцип гласит, что, когда мы видим какую-либо сложную форму или паттерн, наш мозг пытается найти в изображении знакомый объект.
Например, на рисунке выше некоторые увидят звезду, а другие — квадрат. Все зависит от того, каким образом воспринимает фигуру мозг конкретного зрителя.
Принцип близости
Объекты, размещенные близко друг к другу, воспринимаются как более связанные между собой, чем те, которые расположены на большом расстоянии. Причем это правило действует, вне зависимости от цвета и формы элементов.
На рисунке выше мы видим две отдельные группы треугольников.
Принцип сходства
Объекты, обладающие аналогичными визуальными характеристиками (например, форма, цвет, размер), воспринимаются как единая группа.
На рисунке выше мы видим сгруппированные по принципу сходства треугольники и квадраты.
Принцип общей судьбы
Люди воспринимают как часть группы объекты, которые повернуты в одну сторону или движутся в одном направлении, даже если они сильно различаются.
На рисунке круги расположены вдоль невидимых линий, идущих в одном направлении, поэтому мы воспринимаем их как группу.
Принцип фигуры и фона
Этот принцип определяет, каким образом наш мозг интерпретирует взаимосвязь между передним планом и фоном. Обычно мы воспринимаем область меньшего размера как передний план, а большего — как фон. Однако ситуация меняется, если и там, и там содержатся различные объекты или изображения.
На рисунке в качестве фона воспринимается черная форма, напоминающая букву “I”, а в качестве переднего плана — два белых прямоугольника. Или наоборот?
Точка фокусировки
Точкой фокусировки называют тот объект, который визуально выделяется в группе или композиции и привлекает внимание зрителя.
Красный треугольник на рисунке сразу же привлекает наше внимание в отличие от остальных одинаковых объектов. Именно он является точкой фокусировки в композиции.
Принцип непрерывности
Суть этого принципа в том, что человеческий глаз перемещается по расположенным в линию схожим объектам и воспринимает их как единое целое.
Размещенные в центре рисунка квадраты образуют линию, и поэтому воспринимаются зрителем как группа, в отличие от остальных элементов.
Чтобы лучше разобраться в принципах гештальта, я изучил около 100 композиций. Ниже вы можете увидеть некоторые из них.
Я создал несколько композиций на бумаге и в Figma, чтобы показать, как я понимаю принципы гештальта и объяснить, каким образом я принимал те или иные решения в ходе их разработки.
3. Композиции на бумаге
Космические объекты
Это пример использования:
- Принципа близости — круги образованы объектами разной формы, расположенными близко друг к другу. При этом сами круги находятся на значительном расстоянии друг от друга.
- Принципа общей судьбы — 4 круга в правом нижнем углу воспринимаются как единая группа, которая двигается в одном направлении.
Эта композиция изображает планеты, состоящие из различных элементов, и перемещающиеся в безвоздушном пространстве.
Вихрь
Это пример использования:
- Принципа общей судьбы — круги двигаются сверху, слева и справа к одной точке.
- Точки фокусировки — красный круг в центре композиции сразу же привлекает внимание зрителя.
- Принципа непрерывности — круги формируют кривые, проходящие через весь рисунок.
Эта композиция представляет концепцию вихря, который постепенно затягивает все круги в центр, обозначенный красным кругом.
Гидросфера
.webp)
Это пример использования:
- Принципа завершения — изогнутые линии, похожие на водоросли, образуют форму, напоминающую шар или рыбу.
- Принципа сходства — волнистые элементы немного различаются по форме, однако выглядят как взаимосвязанные части одной группы.
Эта композиция изображает подводный мир: центральный объект напоминает шар, но если рассматривать расположенные справа элементы как хвост, можно увидеть рыбу. Кроме того, все детали здесь по форме похожи на водоросли.
Связь
Это пример использования:
- Принципа сходства — хотя круги различаются по размеру, цвету и текстуре, они воспринимаются как родственные объекты.
- Принципа общей судьбы — все круги соединены, и создается ощущение, будто они движутся в направлении центра композиции.
Если убрать соединяющие круги линии, композиция напоминает изображение планет. На самом деле я пытался показать, как связаны частицы внутри атома.
Симбиоз
Это пример использования:
- Принципа сходства — все изогнутые объекты выглядят как часть одной группы.
- Принципа завершения — объект слева напоминает букву “К”.
Эта композиция показывает идею взаимодействия между двумя организмами.
5. Композиции в Figma
Один против всех
Это пример использования:
- Принципа сходства — черные треугольники в правом верхнем углу образуют единую группу.
- Точки фокусировки — красный треугольник в правом нижнем углу привлекает внимание зрителя в первую очередь, выделяясь на фоне остальных объектов.
Эта композиция демонстрирует деление объектов на группы: серые треугольники встречаются чаще всего, черные — выделяются, благодаря цвету, а от фигур в левом нижнем углу остались лишь фрагменты. Красный треугольник — единственный объект, движущийся в противоположном направлении.
Пузыри
Это пример использования:
- Принципа фигуры и фона — круги в центре композиции и на заднем плане кажутся взаимосвязанными и создают отношения “фигура-фон”.
- Принципа завершения — если перевернуть рисунок, то соединенные круги в центре напоминают по форме снеговика.
Можно увидеть на этом рисунке планеты, но я изобразил здесь группу пузырьков, которые накладываются друг на друга и образуют новые формы.
Конечная бесконечность
Это пример использования:
- Принципа общей судьбы — цифры вращаются и встречаются в одной точке.
- Принципа завершения — композиция выглядит как знак бесконечности, а если его повернуть, то мы увидим цифру “8”.
Конечно, зрители могут воспринять эту композицию по-своему, но моя идея заключалась в создании знака бесконечности из конечных элементов.
Между сном и явью
Это пример использования:
- Принципа близости — два круга и расположенные внутри них элементы, формирующие группу, находятся на большом расстоянии друг от друга.
- Симметрии — композиция, разделенная по центру линией, является симметричной.
Это концепция соотношения сна и состояния активности: круги символизируют наше воображение и мыслительный процесс, когда мы спим или бодрствуем. При этом круг, отмеченный звездами, обозначает подсознание, которое действует на наши сны, а круг, украшенный точками, — это логическое мышление.
Путешествие
Это пример использования:
- Принципа общей судьбы — нам кажется, что черные фигуры определенным образом связаны, поскольку они двигаются в одном направлении.
- Точки фокусировки — красный круг сразу же привлекает внимание зрителя.
Эта композиция воплощает идею путешествия: красный круг падает вниз, ударяется о зафиксированный треугольник и приземляется либо на квадрат, либо на ломаную линию.
Если вас заинтересовали мои идеи, вы можете найти еще больше примеров здесь.
Выводы
Изучив все это, мы можем сделать вывод, что принципы гештальта используются практически в каждом дизайне или другом творческом проекте. Однако особенности нашего восприятия зависят от того, каким опытом мы обладаем, а также в какой среде мы росли.
Таким образом, однозначного правильного ответа здесь не существует, поэтому не останавливайтесь и продолжайте изучать эту тему.
Спасибо за внимание!
