Главная/Блог/Литературные тропы в дизайне: метафоры и их разновидности

Блог

Литературные тропы в дизайне: метафоры и их разновидности

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

МЕТАФОРА


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

Пример метафоры на сайте Почты России

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

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

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

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

Источник: Free Icons

У таких иконок два недостатка: они дублируют заголовок и не учитывают контекст. Значит, никакой самостоятельной ценности они не несут.

Метафора должна работать сама по себе. Для проверки попробуйте убрать текст и оставить одну иконку.



  • Иконки не учитывают контекст
  • Без текста ни звёздочка, ни лесенка не считываются




  • Иконки скутера и сумки используются в контексте
  • Иконки понятны и без текста

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


Алена Белякова, арт-директор медиа «Батенька, да вы трансформер», рассказала БВШД, как она работает с иллюстрациями в текстах. Ее принцип можно применять в любом дизайне:

«Я читаю текст и подбираю слово-метафору, которое могло бы описать прочитанное. Мне важно уловить настроение материала: это что-то тревожное? манящее? воодушевляющее? коллаж или иллюстрация? После того как в голове складывается примерный образ, я вспоминаю, кто из наших иллюстраторов работает в такой технике/стилистике, и пишу ему напрямую».

Сервисы по подбору синонимов и ассоциаций

Подбор слов по ассоциациям

Словарь синонимов

Список фразеологизмов

Остальные тропы и приемы писателей тоже могут помочь в дизайне.

МЕТОНИМИЯ


В отличие от метафоры метонимия основана на переносе смежных значений, которые друг на друга не похожи. Например, когда мы говорим: «книжная полка растёт», мы имеем в виду, что растёт количество книг, а не сама полка, но для простоты мы объединяем их, потому что книги лежат на полке. То есть метонимия соединяет понятия по общему местоположению, времени, выполняемому действию и другим смежным признакам.

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

Когда технология только появляется, мы можем в точности переносить объекты из реального мира в интерфейсы — это называется скевоморфизмом. Так пользователям проще привыкнуть к новой технологии. Яркий пример — интерфейс iBooks с книжными полками.



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

В Wired Клив Вильямс охарактеризовал сквеморфизм, как «элементы дизайна, основанные на старомодных физических объектах […], которые привязывают дизайнеров к объектам из прошлого и мешают инновациям».

Как искать метонимию


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

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

АЛЛЕГОРИЯ


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



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

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


Модель Энн Софи — главное лицо контакт-центра любой компании.
Источник: Shutterstock


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

Как искать аллегории


Чтобы научиться подбирать мощные аллегории, потренируйтесь на абстрактных примерах. Виктор Меламед в лекции о визуальных метафорах давал такой текст: «Каждый день в мире исчезает по одному языку. Умирает последний носитель этого наречия, и язык перестает существовать». Ответьте на вопрос: «Язык — это что? Как можно его изобразить?»

Как дизайнеры в Далее работают с метафорами


Выбор метафоры зависит от задачи и от того, уместна ли она. Элементы интерфейса можно разделить на две группы:

  1. Утилитарные.
    Для иконки в приложении, которая имеет практическую цель, метафора должна быть прозрачной. Чтобы поменять настройки, пользователь будет искать шестеренку, а для поиска – лупу. Такой образ должен считываться сразу, без пояснений. Если дизайнер попытается создать новый образ для поиска, он будет неочевиден для пользователя и отдалит его от цели.
  2. Иллюстративные.
    На страницы услуги слишком прозрачная метафора граничит с дурным тоном. Визуальные метафоры к банковским продуктам чаще всего лежат на поверхности. Зайдите на сайт конкурентов, на странице кредитов вы с большой вероятностью увидите машину и дом, а на странице депозита стрелочки и стопку монет.

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



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



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



Коротко:



  1. Пользуйтесь поиском по ассоциациям и словарями синонимов, когда подбираете метафору к изображению.
  2. Метономия — это переход от целого к частному или от частного к целому. Уменьшайте или увеличивайте масштаб, пока не найдете понятный пример.
  3. Чтобы подобрать аллегорию, подберите эмоциональный образ, задав вопрос: «Это что?»

Другие посты

 

Темное искусство оценки проекта

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

6 августа 2019#marketing#Business#web
 

Сила первого впечатления: как сделать сайт...

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

12 июля 2019#UX И дизайн#кейсы
 

Как уйти от банальных метафор в иконках

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

5 июля 2019#UX И дизайн#creative
 

Как интегрировать сайт с внешними сервисами

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

24 июня 2019#web#кейсы
 

Как создать личный кабинет, который понравится...

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

21 июня 2019#UX И дизайн#Business#кейсы
 

В своем стиле: как сделать дизайн сайта...

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

14 июня 2019#UX И дизайн#кейсы
 

Разрабатываем алгоритм праздника: как...

В 2019 году нам удалось поработать с Почтой Mail.ru уже над тремя интерактивными проектами к праздникам. Расскажем о проектах и технической...

5 июня 2019#digital #кейсы
 

Метод гипотезы. Какие приемы из дизайна...

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

30 мая 2019#UX И дизайн#кейсы
 

Первый хакатон на РИФе: как это было

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

24 мая 2019#digital #web
 

Моделируем реальность: как технологии VR и AR...

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

15 мая 2019#UX И дизайн
 

Как сделать сайт для премиального сегмента...

Иллюстрации, видео и текст— это и есть эмоции, которые передает ваш сайт. Они задают тон и контекст — то, как пользователи будут воспринимать...

7 мая 2019#UX И дизайн
 

Ключевые детали: как повлиять на решение...

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

18 апреля 2019#UX И дизайн#creative#Business
 

Мифические существа в digital: фулл-стек...

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

11 апреля 2019#digital #Business#web
 

Уникальность в рамках системы

Разбираемся, ограничивают ли дизайн-система и UI-kit творческие решения дизайнеров, как разработать нестандартную идею в рамках системы и...

5 апреля 2019#UX И дизайн#Business#кейсы
 

Проверяем свое везение. Как работают розыгрыши...

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

29 марта 2019#digital #web#кейсы
 

Как найти сокровища в фотостоке

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

21 марта 2019#UX И дизайн#creative#web
 

Искусство диалога: налаживаем общение с клиентом

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

14 марта 2019#marketing#Business
 

Страница 404: как помочь пользователю, если он...

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

7 марта 2019#digital #UX И дизайн#кейсы
 

5 Полезных инструментов для менеджера и всей...

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

25 февраля 2019#digital #Business#web
 

Как работать с другим агентством и улучшить проект

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

21 февраля 2019#Business#web
 

Когда релиз? Оцениваем эффективность команды...

В команде разработки МегаФона мы постоянно работаем над контролем качества кода. Для этого у нас есть практика code review, автотесты и разные...

13 февраля 2019#Business#web
 

Must have в веб-дизайне

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

8 февраля 2019#UX И дизайн#creative
 

«Как у Тинькова»: какими решениями мы обязаны...

Российские банки одними из первых в рунете начали превращать свои сайты в сервисы. Этому способствовало несколько факторов. Во-первых,...

25 января 2019#digital #web#кейсы
 

Волшебная кнопка. Чек-лист для повышения...

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

25 января 2019#marketing#digital #web
 

Тренды диджитал-маркетинга в 2019 году

Мы давно слышим о том, что блокчейн и VR меняют нашу жизнь в Сети, но пока они все еще кажутся технологиями из сериала «Черное зеркало». Поговорим...

16 января 2019#digital #Business#web
 

Топ 5 материалов 2018 года

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

27 декабря 2018
 

Новогодние традиции в Далее. Спойлер: это не...

В декабре все переживают не только из-за отчетов и мероприятий, но и о том, как поздравить клиентов. В Далее есть праздничная традиция, которая...

20 декабря 2018
 

Как нанять робота вместо менеджера проекта

Мы в Далее ищем новые способы оптимизировать распределение ресурсов и тестируем для этого разные технологии. Недавно наша команда разработала...

13 декабря 2018#Business
 

Микромультик для Микролакса

Для продвижения средства Детский Микролакс наш клиент Johnson & Johnson предложил конкурс, который порадовал мам и детей, а также помог в...

6 декабря 2018#кейсы
 

Время экспериментов. 10 карточек по A/B...

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

27 ноября 2018#web
 

Не заставляйте меня думать: как снизить уровень...

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

19 ноября 2018#UX И дизайн#web
 

В поисках Dream Team для разработки сайта

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

6 ноября 2018
 

Релиз или жизнь? Хеллоуин в digital

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

30 октября 2018#creative
 

Как данные и эмоции меняют дизайн

Четкий подход при создании нового сайта или его редизайне поможет систематизировать работу: не нужно принимать решение наугад и думать, выстрелит...

23 октября 2018
 

Темная сторона дизайна

Apple сделал темную тему основной по умолчанию для новой Mac iOS, а Youtube начал тестировать темный фон еще год назад. Темные темы в интерфейсах...

17 октября 2018#digital #UX И дизайн
 

Зачем нужно тестирование сайта

До тестирования сайт ведет себя как кот Шредингера. Вы не знаете, работает ли все так, как задумано. Тесты перед запуском или обновлением сайта...

10 октября 2018#web
 

Большой брат: как и зачем использовать...

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

3 октября 2018#digital #UX И дизайн#кейсы
 

Дизайн B2B-портала: найдите отличия

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

27 сентября 2018#UX И дизайн#web
 

Еще раз об эффективности: чек-лист перед...

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

20 сентября 2018#web
 

Типографика в веб-дизайне

Типографика на сайте – это не просто выбор шрифта, а набор правил оформления текста. Они основаны на том, как пользователь воспринимает текст на...

13 сентября 2018#UX И дизайн
 

Как бренду рассказать свою историю

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

16 августа 2018#marketing#UX И дизайн
 

Финансовые сервисы в digital: будущее уже...

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

9 августа 2018#digital #UX И дизайн#web
 

UX-аналитик и другие профессии с приставкой UX

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

27 июля 2018#UX И дизайн
 

Как отличить атомарный дизайн от UI-kit

Невозможно перестараться, оптимизируя работу над дизайном. Можно подойти к вопросу глобально и воспользоваться методологией атомарного дизайна, а...

23 июля 2018#UX И дизайн
 

Преимущество использования отзывчивого веб-дизайна

Как адаптировать дизайн под разные устройства, чтобы он оставался удобным для пользователя? Вместе с контент-продюссером компании InVision Уиллом...

19 июля 2018#UX И дизайн
 

Лучшие диджитал-кампании к Чемпионату Мира 2018

Чемпионат стартовал 14 июня, и острая борьба среди брендов началась задолго до этого. На самом главном спортивном мероприятии в мире мы увидим не...

25 июня 2018#кейсы
 

Как составить контент-план, который работает

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

1 июня 2018#smm
 

Правило Хемингуэя: как агентству и заказчику...

В оценке качества креативной концепции есть две проблемы. Первая — как его оценивать агентству, внутри команды, что пропускать дальше, а что...

29 мая 2018#marketing#digital #creative
 

Обзор самых популярных систем для управления...

Система для управления проектами может сильно повлияет на продуктивность компании. Сложно определиться с системой для работы с клиентами, и еще...

15 мая 2018#Business#web
 

Сам себе Youtube: 5 шагов к вирусному контенту

Над видео для компании лучше работать вместе с продакшн-агентством. Вы смотрите портфолио агентств и выбираете подходящее по стилю и по цене. Что...

4 мая 2018#marketing#digital
 

Как агентства представляют свои кейсы

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

24 апреля 2018#кейсы
 

Просто о сложном: agile-разработка

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

17 апреля 2018#web
 

Что такое нативная реклама и как она работает

Несколько лет подряд все говорят о нативной рекламе. Недавно Business Insider заявили, что к 2021 году выручка от нее вырастет до 74% от общих...

12 апреля 2018#marketing#digital #creative
 

Разработка единой дизайн-системы для группы ВТБ

Собственные дизайн-системы – что это? Модный тренд или рабочий инструмент для качественного продвижения бренда? Рассказываем про наш опыт.

10 апреля 2018#UX И дизайн#кейсы
 

Чем дизайнер продукта отличается от просто...

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

5 апреля 2018
 

Быстрее, выше, сильнее: как использовать видео...

Почему видеоконтента становится всё больше, где стоит размещать ваши видеоролики, и как сделать их ещё лучше.

3 апреля 2018#marketing#digital
 

Микроинфлюенсеры – будущее маркетинга влияния

Одним из трендов инфлюенс-маркетинга стал «подъем микроинфлюенсеров» — блогеров с небольшой, но активной аудиторией. Бренды обращают меньше...

27 марта 2018#marketing
 

Мессенджер-маркетинг как современный способ...

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

23 марта 2018#marketing#digital
 

Формы оплаты работ за разработку сайта

Мы разберем детально какие бывают формы ценообразования на создание интернет-проекта.

31 января 2018#Business#web
 

Как убрать непонимания при общении с исполнителями

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

24 января 2018#Business#web
 

В каких конкурсах участвовать, если вы...

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

17 января 2018#digital #Business
 

Ищем подрядчика по разработке сайта (2 часть)

Как начать искать подрядчиков? Чем руководствоваться при выборе таких специалистов? Читайте продолжение статьи про особенности подбора...

10 января 2018#Business
 

Как искать подрядчика по разработке сайта (1...

Самый надежный путь — сформулировать свои задачи, критерии поиска и отбора подрядчика и заняться поиском самостоятельно.

27 декабря 2017#Business
 

Поддержка и развитие сайта

Работа над сайтом не прекращается после подписания акта и сдачи проекта. Сайт или интернет-проект — это инструмент, который постоянно...

20 декабря 2017#Business#web
 

PR-менеджер в digital-агентстве: 2017

Бюджеты, зарплата, показатели, достижения и профессиональные трудности.

14 декабря 2017#digital #Business
 

Выбор платформы для создания сайта

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

13 декабря 2017#Business#web
 

Сколько стоит разработка корпоративных сайтов

Мы рассмотрим самый популярный тип проекта — корпоративный веб-сайт. На основе рыночных исследований мы выделили 3 ценовых группы и разобрали...

7 декабря 2017#Business#web
 

Цели проекта: имиджевые, финансовые, смежные.

В первую очередь ответьте на вопрос «Для чего и для кого делается этот интернет-проект?»

29 ноября 2017#marketing#Business
 

На западном фронте: особенности работы с...

О работе с западными заказчиками писали много, но в основном о финансово-юридических моментах. Мы же осветим другую сторону — организационную,...

22 ноября 2017#Business
 

Онлайн-трансляции в соцсетях любят больше, чем...

Live-трансляции могут быть полезны и для продвижения товаров, услуг, бизнес-мероприятий. На примере благотворительной акции банка расскажем как...

15 ноября 2017#smm #кейсы
 

Блогеры решают: Influencer Marketing в действии

Лучше всего работает та реклама, которая не выглядит, как реклама. Поэтому сегодня Influencer Marketing становится всё популярнее. Рассказываем,...

8 ноября 2017#marketing#digital #creative
 

«Мы решили заправить Instagram тем, чего от...

Агентство «Далее» запустило кулинарный Instagram-сериал с комедийной актрисой Мариной Федункив из «Реальных пацанов» в главной роли.

6 ноября 2017#marketing#digital #smm #creative#кейсы
 

UFS.Travel: увеличение количества продаж за...

Команда UFS.Travel и digital-агентство «Далее» о том, какие обновления на сайте поспособствовали повышению конверсии на 16%.

3 ноября 2017#UX И дизайн#creative
 

KPI digital-кампаний: к чему нужно быть готовым

KPI (Key Perfomance Indicators) — ключевые показатели эффективности. Иногда их для краткости называют «метрики». Существование метрик...

1 ноября 2017#marketing#digital
 

Как решать конфликтные ситуации с трудными...

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

30 октября 2017#marketing#Business