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

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

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

“Хороший дизайнер понимает, насколько важную роль в визуальном восприятии играет психология. Что происходит, когда взгляд зрителя падает на вашу дизайнерскую работу? Как отреагирует его мозг на сообщение, которое вы пытаетесь передать?”

— Лаура Буше, стратег по бренд-контенту в Autodesk

Гештальт-принципы помогают нам понять взаимодействие между дизайном и психологией.

 

Что же такое Гештальт?

Гештальт — это принципы визуального восприятия, придуманные немецкими психологами ещё в 20-х годах прошлого века. Основная суть теорий в том, что целое воспринимается нами как нечто большее, чем сумма его частей.

“Целое — это не просто сумма составляющих его частей”

— Курт Коффка

 

Гештальт-принципы строятся на четырех ключевых идеях:

 

Появление

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

 

Завершение образа

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

 

Фигура и фон

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

 

Неизменность

Человеческий мозг может распознавать предметы не зависимо от их расположений в пространстве. Тем самым распознавая предметы, находящиеся в разной перспективе.

Гештальт-принципы, помогающие в построение современных интерфейсов.

 

Близость

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

 

Принцип Близости в дизайне

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

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

При создании сайтов мы можем практически везде использовать принцип близости.

 

Общность

Расположение элементов в одной области позволяет воспринимать их как группу.

 

Применение общности в дизайне

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

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

 

Схожесть

Одинаковые визуальные объекты воспринимаются нами как более связные, чем выглядящие по-разному.

 

Принцип схожести в дизайне

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

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

 

Замкнутость

Мы воспринимаем группу элементов как один объект, а также не завершённые или неполные фигуры дорисовываем в сознание создавая единый объект.

 

Принцип замкнутости в дизайне

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

 

Симметрия

Симметричные элементы даже будучи на некотором расстоянии друг от друга воспринимаются как единое целое.

 

Симметрия в дизайне

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

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

 

Продолжение

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

 

Продолжение в дизайне

Расположенные вдоль одной линии элементы мы воспринимаем как сгруппированные.

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

 

Общность

Если элементы движутся в одном направлении, для нас они выглядят более связными, чем разнонаправленные.

 

Общность в дизайне

Как бы далеко не располагались объекты друг относительно друга, если они движутся в одном направлении, то воспринимаются нами как взаимосвязанные.  Даже при отсутствие явного движения, а лишь визуально показанного направления.

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

 

 

Вывод

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

Плакат к фильму Lala land

Погружение в разработку плаката для фильма. Проработка деталей. Знакомство с новыми эффектами Photoshop на примере плаката. Третья композиция из курса Супер Photoshop

Рекламный баннер к фильму Star wars

Изучение новых эффектов. На примере разработки баннера для фильма. Углублённая работа с дизайном. Результат второго урока, курс Супер Photoshop.