Как использовать принципы гештальта в дизайне?

Веб-дизайнГрафический дизайнДизайн-старт 18.04.2021

Как использовать принципы гештальта в дизайне?

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

Откуда мы это знаем? Всё дело в законах и принципах гештальт-психологии. 

Гештальт (нем. Gestalt – личность, образ, форма) – совокупность принципов визуального восприятия, открытая немецкими психологами в 1912 году. Теория гештальта гласит: целое больше суммы его частей. 

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

законы гештальта в дизайне

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

Появление. Целое распознается быстрее, чем его составляющие. Видя объект, сначала мы идентифицируем контур объекта, а наш мозг сопоставляет его со знакомыми нам вещами. Только после такого «узнавания» мы начинаем замечать детали объекта.  

Как применить в дизайне? Форма и контур должны быть в приоритете. Неважно, как креативно выглядит кнопка призыва «купить», если пользователь не поймет, что это кнопка. Объекты должны быть узнаваемыми и сопоставимыми с визуальным опытом. 

применение гештальта в дизайне

Воплощение (Reification). Мы распознаем объекты даже в отсутствие некоторых частей: наш мозг заполняет пробелы, извлекая знакомые шаблоны из памяти. 

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

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

принципы гештальта в дизайне

Инвариантность. Независимо от масштаба, вращения и перемещения объекта, мы воспринимаем его одинаково. Это как с мелодией: слыша её второй раз, мы узнаем её, даже если она будет другой тональности. 

гештальт в дизайне

Принципы гештальта

Близость

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

гештальт в дизайне

Принцип близости: правая часть рисунка воспринимается как три столбика.

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

гештальт в дизайне

«Like», «Comment» и «Share» находятся рядом и дают пользователю понять: всё это способы взаимодействия с этим постом.

Сходство

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

Где использовать? В навигации, кнопках, заголовках и других объектах, связанных с призывом к действию. 

Завершенность

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

Иконки — хороший пример принципа завершенности. Их простота и схематичность быстро и ясно передает значение.

Симметричность

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

Выделяют три разновидности симметрии:

  1. трансляционная,
  2. осевая
  3. вращательная.

Принципы гештальта в вебдизайне

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

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

Продолжение

Расположенные в одну линию элементы воспринимаются как более связанные. Всему виною наш ум: он выбирает путь наименьшего сопротивления, поэтому то, что выстроено в линию, мозг обрабатывает быстрее.

Где применить? В меню и списках, что помогает пользователям плавно перемещаться по странице. 

Направление

Расположенные в одном направлении объекты мозг понимает как более связанные и имеющие общую цель.

Данный принцип полезен в группировке важной информации и уменьшает путь пользователя до его цели (например, до кнопки покупки товара). Верно и обратное: нарушение принципа направления привлечет внимание и тоже направит к нужному элементу. 

Это принцип удобно использовать в выпадающем меню и многоуровневом скроллинге.

Фигура и фон

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

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

Остались вопросы – кликай сюда

Хотите быть в курсе событий?

Подпишись на e-mail рассылку! Там всё только по делу-)

    Email