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

Опубликовано: 2023-02-15

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

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

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

  • Линии
  • Круги и овалы
  • Треугольники
  • Четырехугольники
  • Полигоны
  • Абстрактные формы

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

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

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

Скриншот с веб-сайта Affinity с закругленным треугольным логотипом.
Закругленные края логотипа Affinity смягчают его общий эффект на пользователей.

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

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

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

Скриншот с веб-сайта The Inlay с белым фоном и тремя перпендикулярными линиями.
Креативная студия The Inlay использует тонкие прямые линии, чтобы разбить свой минималистичный сайт и заставить ваш взгляд двигаться.

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

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

Круги и овалы

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

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

Скриншот с веб-сайта Ring, на котором представлены четыре дверных звонка.
Индикатор кнопки в форме кольца на самом продукте — еще один визуальный сигнал для пользователей Ring.

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

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

The Circle, реалити-шоу Netflix, — еще одно место, где круговой брендинг имеет наибольший смысл. Предпосылка заключается в том, что группа людей, которые могут говорить или не говорить правду о своей личности, пытаются завоевать популярность среди своих сверстников только через платформу социальных сетей под названием The Circle. Цель? Оставайтесь в сообществе — оставайтесь в The Circle.

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

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

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

Скриншот изображения для предварительного просмотра хита Рика Эстли «Never Gonna Give You Up» с треугольным значком воспроизведения посередине.
На этом предварительном изображении видео YouTube используется треугольный значок «воспроизведение».

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

Скриншот домашней страницы HGTV с их логотипом
«Home & Garden Television» демонстрирует дом с помощью простого треугольника на логотипе.

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

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

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

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

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

Скриншот рисунка параллелограмма на сайте дизайна Моктара Сагафи.
Скриншот с сайта дизайна Моктара Сагафи

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

Уличные указатели в форме блоков с логотипом Lego.
Фото Фаиза Заки

Хотя Lego может показаться не приземленным или конформным, они, безусловно, стабильны — как еще вы могли бы строить с ними? Их квадратный логотип также является визуальным обратным вызовом их продукта. Он очень похож на квадратный кубик Lego с четырьмя шипами.

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

В математике и дизайне этот набор форм известен как «многоугольники». Многоугольник — это общий термин, используемый для описания любой двухмерной геометрической формы, но обычно он используется для фигур с 5 или более сторонами.

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

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

Снимок экрана с домашней страницы Built By Buffalo, на которой их избранные проекты показаны в виде сот.
Использование этого шаблона для демонстрации своей работы позволяет Built By Buffalo демонстрировать множество проектов на очень небольшой веб-площади.

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

Скриншот со страницы о сайте Pentagon Tours. Три диагональные линии пересекают фотографию тура как графический элемент.
Четкие линии логотипа Pentagon Tours имитируются графической обработкой изображений на сайте.

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

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

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

Капли

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

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

Скриншот из навигационного меню Buzzworthy с выпуклой формой, на которой есть фотография рядом со словами «работа. студия. команда. контакты. дом смеха».
Когда вы открываете меню навигации Buzzworthy, появляется анимированная фигура «буба».

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

Кресты

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

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

Скриншот с веб-сайта Американского Красного Креста, на котором изображен их культовый логотип «Красный Крест».
Скриншот с сайта Американского Красного Креста

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

Спирали

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

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

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

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

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

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

Эти формы, как правило, будут неправильными или асимметричными (но не всегда), и они каким-то образом будут связаны с миром природы. Идея «облака» — это идеальное использование органических образов.

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

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

Разум позади дизайна

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

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

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

Часть 1
Часть 2