Skvot

Mag

Skvot Mag
Курсы по теме:

Метафоры в дизайне web-продукта

Как создать метафору в цифровом дизайне и правильно встроить ее в продукт.
card-photo
card-photo
Саша Гусаков
Вадим Гайдай

Тимлиды League Agency

2 ноября, 2022 / Дизайн / Статья

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

Тимлид web-команды League Design Agency Вадим Гайдай вместе с тимлидом графической команды Сашей Гусаковым объясняют, как использовать метафоры в веб-дизайне — и делать это нативно и точно.

Типы мышления и сила метафоры

Перед тем как перейти к разбору метафор в веб-продуктах, разберемся, как вообще человек думает. Есть два типа мышления:

  • #1. Логическое (структурное) — когда видим объект как сумму отдельных частей.
  • #2. Образное (гештальтное) — когда мы воспринимаем объект как целостный образ, не делящийся на составляющие.
  •  

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

Гештальты могут быть: 

  • врожденными — например, реакция малышей на лицо взрослого, простые движения головой, базовые цвета и геометрические формы
  • приобретенными — в течение жизни мы формируем собственные смыслы вещей (для одних собаки — друзья, для других —  опасность)
  •  

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

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

 

Какими бывают метафоры

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

Аристотель определял метафору как «использование несвойственного имени, перенесенного с вида на вид, либо с вида на род, либо с вида на внешний вид, или по аналогии». В книге «Хвост ящерки» Роман Уфимцев говорит о трех типах метафор:

  • #1. Деревянные метафоры, сконструированные на основе общего признака двух вещей («длинный как телеграфный столб»).
  • #2. Каменные метафоры (аналогии), сформированные на основе похожей структуры двух вещей («нос корабля»).
  • #3. Золотые метафоры, выстроенные на основе общего гештальта двух вещей («женщина — это гитара»).
  •  

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

Как использовать метафору в веб-дизайне

Все метафоры объясняют бренд, но при этом у них разные акценты.

#1. Метафора продукта нужна, когда имеем дело со сложным продуктом и нужно на основе простого и знакомого образа объяснить, как он работает.

К примеру, в одном из проектов, который сейчас под NDA, мы работали с сайтом виртуальной галереи. Пользователь мог навести телефон на QR-код, сканировать изображение, а потом с помощью AR-технологий «примерить» объемную картину на стену дома. Для этого мы использовали метафору мыльного пузыря: когда достаешь палочку из банки с раствором, мыльный пузырь еще плоский, но стоит подуть — и он становится объемным.

 

#2. Метафора бренда помогает сделать акцент на характере и эмоции бренда — характеризует его стиль, правила работы и принципы. Такая метафора может быть человеком, предметом, природным явлением и характеризует образ в динамике. 

Например, метафора реки: у реки есть притоки и устья, через которые она впадает в океан. Этот образ может настолько встроиться в стратегию компании, что даже бизнес-процессы могут адаптироваться под образ реки. Такая компания не выберет бизнес-стратегию «максимально снизить себестоимость, чтобы получить максимум профита». Потому что такая стратегия будет восприниматься как дамба, замедляющая реку.

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

К примеру, в проекте подкаста HARD STOP мы строили сюжет в мире детективов. И это диктовало правила того, как мир существует и оформляется в дизайне. Мы должны были ответить на вопросы: 

  • Как будут открывать метафору детектива джинглы подкаста?
  • Какими будут перебивки?
  • Каким будет монтаж?
  • Чем он отличается от подкаста в стиле ситкома или мелодрамы?
  •  

Цель подкаста — докопаться до истины в разговоре со звездными гостями, выяснить стратегии их успеха, чтобы потом повторить. Мы создали персонажей-детективов, чтобы подчеркнуть архетип исследователя — и оживить их на сайте. У наших позитивных детективов нет антагонистов и протагонистов, для них самое важное — быть исследователем.

Чтобы поддержать метафору расследования, секцию с социальными сетями мы оформляем как доску расследований детектива. А обложки статей у нас выглядят как коробки с уликами:

Как работать с метафорами 

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

  • #1. Если метафора кажется слишком сложной — это не метафора. Упрощай и исследуй дальше.
  • #2. Анализируй, какие метафоры выбирают часто. Это поможет выделить опорные моменты и адаптировать их под свой кейс.
  • #3. Экспериментируй с образами — поиск меткой метафоры может быть долгим, но ты точно ее найдешь.
Поделиться материалом