Психология дизайна: формируем имидж бренда в сети

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

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

1. Прямые и изогнутые линии

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

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

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

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

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

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

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

2. Круги и овалы

Если вы называете кого-то “square” (дословно — “квадрат”, на сленге — “неинтересный”), вы, вероятно, намекаете на то, что он скучный. Круги же, наоборот, ассоциируются с весельем, молодостью и беззаботностью. А поскольку малыши способны дольше удерживать внимание на изогнутых линиях, логично, что они также предпочитают круглые игрушки.

Когда мы смотрим на круг, в голову приходят такие слова, как “искренность” и “единство”. Круглые формы также могут транслировать чувство общности или защиты, например, ассоциации с пузырем, который ограждает вас от враждебного мира, и крепкими объятиями. Другие значения этой формы: дружба, тепло, женственность и возрождение (вспомните такое понятие, как круг жизни).

Название дверных звонков Ring призвано вызвать у пользователей нужные эмоции (речь об игре слов, “ring” — это в переводе и “звонить”, и “кольцо”). Вы можете сразу представить, какие звуки издает их продукция, а образ кольца нашел отражение как в логотипе бренда, так и в дизайне самого звонка.

The Circle, реалити-шоу Netflix, — еще один пример “круглого” брендинга. Идея заключается в следующем: группа людей, которые могут говорить о себе правду или лгать, пытаются завоевать популярность среди участников в социальной сети под названием “The Circle” (“Круг”). Цель? Остаться частью сообщества, то есть внутри “Круга”.

3. Треугольники

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

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

Кнопка воспроизведения в вашем любимом видео- или музыкальном стриминговом сервисе, скорее всего, представляет собой повернутый вправо треугольник. Она напоминает стрелку, символизирующую движение вперед, — в противовес 2 прямым линиям, обозначающим паузу (между ними буквально есть “перерыв”).

Бренд ​​HGTV грамотно использует треугольники в своем дизайне. Равнобедренный треугольник размещен поверх текстовой части логотипа — это понятный, но простой способ изобразить крышу дома. Буква “V” на другом конце надписи служит отличным противовесом, поскольку направлена вершиной вниз.

4. Четырехугольники

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

Квадраты и прямоугольники зачастую используют бренды, которые хотят выглядеть приземленными и практичными. От National Geographic до LinkedIn и Dominos, эти фигуры пользуются популярностью в самых разных сферах, особенно часто их можно увидеть в дизайне логотипов.

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

На сайте австралийского веб-дизайнера Mokthar Saghafi мы видим паттерн, составленный из параллелограммов. Четырехугольники аккуратно сложены друг на друга и символизируют стабильность. Благодаря небольшому наклону они выглядят более интересно.

Хотя бренд Lego вряд ли можно назвать приземленным и традиционным, детали конструктора, безусловно, являются устойчивыми и прочными — как бы мы иначе строили из них разные интересные объекты? Квадратный логотип соответствует продукту: он сильно напоминает маленький кубик Lego с 4 штырьками.

5. Пятиугольники, шестиугольники и восьмиугольники

В математике и дизайне перечисленные в подзаголовке формы известны как “многоугольники”. Это общий термин для описания любой двухмерной геометрической формы, но обычно его применяют для тех фигур, у которых есть 5 и более сторон.

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

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

Паттерн из шестиугольников, который использует британское дизайн-агентство Built By Buffalo, — отличный способ показать множество примеров работ, не перегружая главную страницу. Он встречается и в других частях сайта: для организации фото членов команды, смешных офисных снимков, а также выделения важной информации.

‍

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

6. Абстрактные формы

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

Пятна произвольной формы (Blobs)

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

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

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

Кресты

Кресты встречаются в веб-дизайне постоянно. Зачастую их используют, чтобы вызвать ассоциации с духовностью или медициной. Это самый популярный способ визуально отобразить пересечение 2 объектов или понятий либо связь между ними. Еще одно привычное решение — знак “плюс”, который показывает, что вы можете добавить что-то в корзину или развернуть секцию для получения дополнительной информации.

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

Американский Красный Крест — одна из самых известных организаций, обратившихся к изображению креста. Ее деятельность находится на стыке 2 миров: людей, которые нуждаются в помощи, и людей, которые могут помочь другим во время или после случившегося. Логотип Красного Креста отражает пересечение этих групп, а также вызывает ассоциации с исцелением и здоровьем.

Спирали

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

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

Rally, продуктовая дизайн-студия из Солт-Лейк-Сити, штат Юта, на сайте которой мы видим простую спираль на белом фоне. Динамичная анимация и меняющиеся цвета удерживают внимание пользователей и создают целостный опыт взаимодействия.

Органические формы

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

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

Идея “облачного” хранения данных связывает нечто очень сложное и техническое (нематериальное “пространство”, в котором хранится информация) с миром природы, делая это понятие более доступным для неопытных пользователей.

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

Продуманный дизайн

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