Маркетологи и владельцы бизнеса должны понимать, как люди интерпретируют и воспринимают дизайн. Особенно это важно при разработке визуальной идентичности бренда.
Зная, как пользователи воспринимают визуальные объекты и их расположение, вы можете создать более последовательный визуальный брендинг, который будет лучше взаимодействовать с вашей аудиторией.
Это важно, поскольку обычный человеческий мозг обрабатывает примерно 11 000 000 бит информации в секунду и передает информацию со скоростью почти 300 км/ч. Этот процесс происходит в основном неосознанно.
Если бы мы осознавали всю эту нейронную активность, наш мозг потреблял бы слишком много энергии. Чтобы экономить энергию и работать с максимальной эффективностью, наш мозг использует индуктивное умозаключение и условную вероятность.
Эти научные наблюдения привели к гештальт-принципам дизайна, объясняющим, как человеческий разум организует и воспринимает визуальную информацию.
В этой статье мы подробно рассмотрим каждый из этих принципов и их практическое применение. Это поможет вам создать логотип, брендинг и другие визуально привлекательные, оригинальные и запоминающиеся дизайны. Рассказывает Ризза Диси для Crowdspring.
Нет времени читать статью? Найдите ее в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.
Содержание статьи
Краткая история гештальт-принципов
Что такое гештальт-теория восприятия?
8 гештальт-принципов визуального дизайна
1. Простота
2. Сходство
3. Близость
4. «Общая судьба» (или синхрония)
5. Непрерывность
6. Замкнутость/завершенность
7. Мультистабильность
8. Симметрия
Краткая история гештальт-принципов
Гештальт не был дизайнером. Его даже не существовало.
Гештальт-принципы были разработаны немецкими психологами Максом Вертгеймером (Max Wertheimer), Вольфгангом Кёлером (Wolfgang Köhler) и Куртом Коффкой (Kurt Koffka) в 1910-х и 1920-х годах. Каждому из них было интересно понять, как люди извлекают значимую информацию из хаотических стимулов — наше врожденное желание найти порядок в хаосе.
В буквальном переводе с немецкого слово gestalt означает «форма, вид, фигура». Речь идет об общем виде чего-то большего, чем сумма его частей.
В психологии под «гештальтом» понимают принципы, позволяющие людям воспринимать порядок визуально.
Что такое гештальт-теория восприятия?
Согласно гештальт-теории восприятия мозг интерпретирует информацию о взаимосвязях и иерархии в дизайне или изображении, используя визуальные подсказки, такие как сходство, близость и завершенность.
Гештальт-принципы обеспечивают психологическую основу для понимания того, как человеческий разум воспринимает и организует визуальную информацию.
Критическое восприятие включает в себя следующие понятия:
- Появление: для понимания объекта в целом необходимо сначала понять его части.
- Неизменность: люди способны идентифицировать похожие формы независимо от разницы в цвете, масштабе, весе или вращении.
- Материализация: даже при отсутствии явных деталей глаза (и мозг) склонны заполнять пробелы и образовывать формы. На этом понятии основан «дизайн негативного пространства» (создание форм и изображений из пробелов или белого пространства).
- Фигура и фон: глаза организуют формы в 3D и разделяют их компоненты на фон и передний план. Глаза способны воспринимать фон, даже если элемент переднего плана плоский: все, что окружает объект, воспринимается как фон.
- Мультистабильность: всякий раз, когда неоднозначную форму можно интерпретировать более чем одним способом, глаза будут воспринимать все способы одновременно.
Кроме того, при наличии нескольких вариантов стабильности взгляд будет перемещаться между различными интерпретациями. Мы можем наблюдать это с оптическими иллюзиями.
- Прошлый опыт интерпретация формы зависит от индивидуального личного опыта или культурного опыта аудитории.
Как все это может помочь вам в создании успешного и устойчивого бренда?
Вы можете использовать гештальт-принципы при выборе дизайнерских решений, чтобы превратить каждый элемент вашего брендинга, веб-дизайна и маркетинга в эффективную визуальную коммуникацию.
8 гештальт-принципов визуального дизайна
1. Простота
В соответствии с первым принципом гештальт-дизайна люди склонны воспринимать и интерпретировать неоднозначные и сложные образы в их простейшей форме.
По мнению психологов, когда мы воспринимаем объект, мы сначала пытаемся определить его очертания, и только после мы сравниваем его с известными формами и узорами. В конце концов мы объединяем идентифицированные компоненты, чтобы построить полную картину, даже не осознавая, что делаем это.
Другими словами, если представить изображение, содержащее несколько форм, мозг может выбрать решение, которое кажется ему наиболее простым, логичным или знакомым.
Для более быстрой передачи желаемого сообщения крайне важно использовать простой и четкий дизайн, нежели детализированные иллюстрации с неоднозначными контурами.
Как применить этот принцип в дизайне:
Рассмотрим логотип молодежной организации «Девочки-скауты Америки» (the Girl Scouts of America):
Дизайн состоит из неправильных фигур с пустыми промежутками между ними. Также в дизайне можно различить три силуэта.
Те, кто уже видел это изображение раньше, скорее всего, воспримут его как единый логотип, нежели как три лица. Им не нужно останавливаться и думать. Люди видят то, что видят.
2. Сходство
Принцип сходства связан с простотой. Однако речь идет о другом аспекте восприятия.
Основываясь на этом принципе гештальт-дизайна, объекты со схожими характеристиками воспринимаются как более тесно связанные.
Наш мозг естественным образом группирует похожие объекты независимо от их близости. Два и более элемента могут иметь схожую форму, цвет, размер, текстуру или значение.
Когда объекты похожи друг на друга, люди обычно воспринимают их как часть узора или группы. Чем более похожи отдельные элементы, тем больше чувство связности.
Используя этот эффект, вы можете создать иллюстрацию, изображение или сообщение из ряда разрозненных элементов.
Как применить этот принцип в дизайне:
Примером может служить логотип Sun Microsystems, состоящий лишь из прямой и перевернутой буквы U, расположенной по кругу. При этом очевидно, что когда перевернутые буквы «U» помещаются вместе, они образуют слово «SUN» (солнце) на всех четырех сторонах четырехугольника.
Вы можете эффективно использовать принцип сходства, даже отклоняясь от него. Выделите один непохожий элемент, нарушив шаблон сходства.
В результате все внимание пользователей будет обращено на это отклонение от узора из похожих элементов. Это явление называют аномалией.
Интересный пример представляет логотип Музея современного искусства в Лос-Анджелесе (MOCA):
В логотипе лишь одна буква настоящая, а остальные буквы «М», «О» и «А» заменены на квадрат, круг и треугольник соответственно.
Черная буква «С» может восприниматься аудиторией как исключение, а все цветные фигуры будут сгруппированы вместе.
Здесь по-прежнему действует принцип сходства. Дизайнеры логотипа MOCA эффективно перевернули этот принцип с ног на голову, чтобы создать оригинальный, наводящий на размышления и в конечном счете умный логотип.
3. Близость
Понятие близости относится к пространственным взаимосвязям между объектами на основе их близости или расстояния друг от друга.
В частности, гештальт-принцип близости утверждает, что объекты, расположенные близко друг к другу, образуют коллективную группу, даже если они не находятся в прямом контакте друг с другом. Кроме того, этот принцип сохраняется независимо от того, различаются ли данные объекты по размеру, цвету или форме.
Уникальная особенность близости заключается в том, что она, как правило, преобладает над другими гештальт-принципами.
Судя по всему, человеческие глаза, обрабатывают прямую корреляцию между расстоянием между двумя объектами и тем, насколько они функционально близки друг к другу.
Люди склонны связывать находящиеся близко друг к другу визуальные элементы, чтобы сформировать целостный образ. Если же объекты находятся далеко друг от друга, люди считают, что они выполняют разные вещи, даже если эти объекты визуально одинаковы.
Взять, к примеру, слова на странице. Буквы образуют отдельную группу или слово, когда их разделяет пробел.
Люди полагаются на правильный кернинг, чтобы определить, какие буквы составляют отдельные слова в предложении.
Если между буквами слишком большое расстояние, может быть довольно сложно определить, где кончается одно слово и начинается другое.
Как применить этот принцип в дизайне:
На примере логотипа IBM мы хотим проиллюстрировать, как человеческий мозг объединяет каждую из соседних горизонтальных полос в единое изображение.
В логотипе IBM три буквы образованы короткими горизонтальными линиями, расположенными друг над другом, а не восемью горизонтальными линиями:
Другой подход к использованию принципа близости заключается в том, что объекты, расположенные близко друг к другу, не должны обладать какими-либо общими характеристиками, чтобы восприниматься как группа.
Логотип может состоять из 10 или 20 разных фигур разных цветов. Однако, если они расположены близко друг к другу по сравнению с другими элементами, разум, скорее всего, воспримет их как единое целое.
Примером здесь может служить логотип Unilever. То, что представляет собой набор, казалось бы, случайных миниатюрных иконок, быстро читается как уникальный логотип, поскольку иконки сгруппированы вместе, образуя букву «U».
Этот креативный логотип включает в себя 25 разных иконок, каждая из которых отражает приверженность бренда принципам устойчивого развития.
Наиболее практичное использование принципа близости в дизайне — это установление визуальной иерархии.
Группировка текста и использование негативного пространства для разделения групп помогает читателям и зрителям систематизировать важную информацию в информационных материалах, таких как плакаты, брошюры и сайты.
Что касается смежных и перекрывающихся объектов, наш мозг, видимо, отдает приоритет их функциям, считая их более значимыми, чем другие объекты. Примером этого является логотип библиотеки Darien Library:
В качестве вдохновения дизайнеры использовали перелистывание страниц книги (в конце концов, речь идет о библиотеке).
Кроме того, прозрачные цветовые оттенки также используются для иллюстрации волны, листьев или птичьего крыла, что предполагает движение и подъем.
4. «Общая судьба» (или синхрония)
Наиболее очевидный гештальт-принцип, синхрония (или «общая судьба»), диктует, что элементы, движущиеся в одном направлении, воспринимаются как более связанные,
независимо от их расположения или непохожести.
«Общая судьба» часто подразумевает движение, что полезно для дизайнеров, делающих акцент на штрихах.
Как применить этот принцип в дизайне:
Чтобы проиллюстрировать принцип «общей судьбы», рассмотрим логотип AT&T:
Самый узнаваемый логотип AT&T берет свое начало в редизайне 1982 года, выполненном известной легендой графического дизайна Солом Бассом (Saul Bass). Этот концепт представляет собой синее 3D-изображение сферы с несколькими белыми горизонтальными полосами, пересекающими ее.
Логотип AT&T точно отражает широту и масштабы телекоммуникационного лидера. Сфера означает глобальные амбиции бренда. Линии представляют собой провода, соединяющие организацию со всей планетой.
5. Непрерывность
Концепция целостности играет роль в том, как наш мозг следует логическим направлениям в визуальных формах, даже если их нет на странице или в дизайне.
Принцип непрерывности — это предположение, что элементы, расположенные по одной линии или кривой, будут продолжаться за пределами своих определенных конечных точек.
Другими словами, как только наши глаза становятся натренированы следовать по линии или кривой, мы верим, что линия продолжит движение в том же направлении, пока не встретится с другим объектом.
Как применить этот принцип в дизайне:
Когда вы поймете, как глаза следуют за отдельными линиями и штрихами и соединяют их, вы также сможете поддерживать желаемую связность изображения или дизайна.
Посмотрите на логотип Crowdspring как на пример работы этого принципа. Поскольку линии в буквах «C» и «S» плавные, глаза продолжают смотреть слева направо.
Принцип непрерывности также может применяться, когда линия пересекает объект, идеально выравнивается со второстепенным элементом, и может указывать на другой элемент в композиции.
Наши глаза следуют линии от природы. Когда мы видим объект, мы автоматически вынуждены двигаться через другой объект.
Это видно на примере логотипа PlayStation:
Несмотря на то, что логотип разделен на три части, он представляет собой две соединенные между собой буквы (P и S), лежащие рядом на двух плоскостях — вертикальной и горизонтальной.
Способность разума соединить эти два понятия определяет успех этого логотипа.
6. Замкнутость/завершенность
Человеческий мозг устроен таким образом, что воспринимает объекты как завершенные независимо от того, так ли это на самом деле. На этом допущении и основан принцип замкнутости/завершенности.
Согласно этому принципу частичный контур передает то же сообщение, что и полный.
Несмотря на отсутствие частей, мозг будет пытаться сопоставить его с известным объектом, при условии что дизайн предоставляет достаточно информации для «заполнения пробелов».
Завершенность можно назвать клеем, связывающим элементы воедино. Как люди, мы склонны находить и искать закономерности.
Ключом к достижению идеальной завершенности является предоставление достаточного количества информации, чтобы позволить глазу заполнить оставшиеся детали. Если дается слишком много информации, потребность в закрытии подавляется. Напротив, если дается слишком мало информации, глаза воспринимают элементы как отдельные части, а не как единое целое.
Во многих отношениях завершенность неразрывно связана с понятием материализации.
Под материализацией понимается конкретизация чего-либо, воплощение его в жизнь. Наш мозг способен создать больше информации, чем есть, чтобы поддержать логику, что является продуктивным принципом нашего восприятия.
Этот принцип можно продемонстрировать с помощью простого пунктирного контура, когда люди фокусируются на общей форме, а не на серии разрозненных коротких линий.
Как применить этот принцип в дизайне:
Уместно отметить, что логотип — это не иллюстрация и не картина. Логотип — это визуальное обобщение идентичности и сущности бренда.
Как следствие, логотип должен коммуницировать в знаковой манере.
Это, вероятно, один из самых сильных аргументов в пользу того, почему логотипы используют гештальт-принцип завершенности. Это связано с тем, что завершенность позволяет представить фигуру с минимальной визуальной информацией.
Возьмем, к примеру, культовый и очень узнаваемый логотип Всемирного фонда дикой природы (World Wildlife Fund, WWF):
Несмотря на то что большая часть контура панды отсутствует, наш мозг может быстро заполнить пробелы, чтобы воссоздать завершенный образ животного.
Ярким примером использования негативного пространства является скрытая стрелка в логотипе FedEx:
Здесь умело использованы очертания букв «E» и «X». FedEx подсознательно сообщает своим клиентам, что они являются быстрой, надежной и дальновидной компанией.
7. Мультистабильность
У людей есть странная способность различать две фигуры на одном изображении на основе неполной информации.
Зритель может испытывать разные переживания при просмотре изображения, поскольку параллельно запускаются разные интерпретации.
Принцип мультистабильности играет с тем, как наш разум воспринимает оптические иллюзии.
Искусство обмана, однако, заключается в том, что невозможно увидеть обе интерпретации одновременно. Разум оказывается перед дилеммой совмещения двух идей и попыткой разрешить, какая из них есть какая.
В конце концов разум решает предпочесть одну интерпретацию другой. Чем дольше вы смотрите на доминирующее изображение, тем сложнее глазам улавливать другие восприятия.
Как применить этот принцип в дизайне:
Один из самых узнаваемых примеров принципа мультистабильности в действии — логотип телеканала NBC. Он представляет собой ярко окрашенные сегменты, расположенные в виде арки.
Однако данный логотип скрывает внутри себя другое изображение. Его элементы напоминают не только перья павлина, но и восход солнца.
Еще один замечательный пример использование принципа мультистабильности — логотип Питтсбургского зоопарка.
Помимо дерева и птиц на переднем плане логотипа, там есть еще пара скрытых существ.
Возможно, вам придется посмотреть несколько раз, но в конце концов вы увидите их.
По обеим сторонам дерева находятся профили льва и гориллы. Крона и ствол дерева обрамляют их очертания. А внизу расположилась пара рыбок.
8. Симметрия
Люди лучше всего реагируют на вещи, представленные организованным образом. Небольшое смещение от центра вызывает у них раздражение.
Неудивительно, что нас привлекают симметрия и централизация. Вещи кажутся нам визуально приятными, когда они аккуратно выстроены.
Гештальт-принцип симметрии вписывается в это предпочтение.
Людей привлекают объекты симметричной формы, так как нам свойственно искать порядок среди хаоса. В связи с этим при создании дизайна важно стремиться к балансу и симметрии.
Симметрия в логотипах способна обеспечить эстетически приятное визуальное качество. Это, в свою очередь, также помогает отразить или передать баланс, надежность и стабильность вашего бренда.
Как применить этот принцип в дизайне:
Важно отметить, что симметрия не обязательно должна быть буквальной. Баланса можно добиться с помощью гармоничной цветовой схемы или схожей, но не идентичной группы элементов с обеих сторон.
- Зеркальная симметрия
Одним из примеров этого типа симметрии являются знаменитые золотые арки McDonald’s. Они равномерно соединены и представляют собой букву «М» в названии компании.
- Параллельный перенос
Данный тип симметрии мы можем наблюдать на примере логотипа Audi. Серебряные кольца представляют собой повторяющиеся формы, которые образуют логотип в виде последовательно переплетающихся колец.
- Вращательная симметрия
Вращательная симметрия описывает логотипы, которые всегда будут выглядеть одинаково, независимо от того, как вы их повернули. Вы можете найти их среди таких знаковых логотипов, как Walmart, Target и BP.
Заключение
Учитывая, насколько дизайн логотипа интуитивно понятен, неудивительно, что психология восприятия имеет такое влияние.
Если вы хотите внедрить мощные принципы психологии, включите в свою стратегию дизайна гештальт-принципы.
Понимание гештальт-принципов позволяет целенаправленно направлять восприятие зрителя, вместо того, чтобы полагаться на внутреннее чутье.
Высоких вам конверсий!
По материалам: crowdspring.com. Автор: Rizza DC
