Рифма, ритм, метафора в дизайне

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

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

Метафора в дизайне или визуальная метафора — это сравнение с помощью картинки.

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

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

Визуальные метафоры нужны, чтобы показывать виртуальные понятия как реальные вещи.

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

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

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

Задача метафор — доступно объяснить непонятное. Но не всегда они несут критически важную информацию. Иногда они используются просто для развлечения аудитории — чтобы показать неожиданные аналогии и привлечь внимание.

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

Давайте рассмотрим метафоры на примере веб-дизайна

ВкусВилл использует иконки, создавая ассоциации с темой раздела:

Здесь компания по производству березовой фанеры использует метафору в фоновых иллюстрациях:

Или, например, книжный магазин «Полка». Дизайн первого блока в виде образа книжной полки:

1. Превращайте незнакомое в знакомое

Метафора помогает объяснить новое, незнакомое явление через то, что пользователь уже знает. Самая знаменитая метафора в сфере взаимодействия между человеком и компьютером — это «метафора рабочего стола» авторства Алана Кея. Она помогла людям перейти от ввода команд в командную строку к управлению визуальными объектами, представленными в цифровой форме, напрямую.

2. Создавайте положительные ассоциации

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

3. Убеждайте людей

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

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

4. Избегайте примитивных, буквальных метафор

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

5. Не копируйте реальный прототип слепо

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

1. Метафоры могут представить абстрактную концепцию в виде конкретного выражения

Например, в продукте стали появляться не только иконки, но и какие-то новые понятия: аплодисменты (applause), хлопки (claps), фанаты (fans) и аудитория (audience).

2. Метафоры создают дружеское отношение

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

3. Метафоры могут вызывать эмоции

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

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

4. Метафоры могут привлекать внимание пользователей

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

5. Метафоры могут мотивировать пользователей совершить действие

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

Как обучиться мастерству метафор?

Метафорами можно объяснить любую идею, если провести ассоциацию с предметом реального мира.

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

• Noun Project

The Noun Project — это огромная база иконок практически обо всем на свете. По любому ключевому слову можно найти множество картинок. Золотая жила для дизайнеров, иллюстраторов и писателей.

• Google Картинки

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

• Тезаурус

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

• Словарь фразеологизмов

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

• Словарь

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

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

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

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

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

Делаем кнопки с округлыми краями. Делаем иконки в круге с обводкой в 2 пикселя. Делаем подчеркивания в главном меню толщиной 2 пикселя и т. д.

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

Рассмотрим рифму в дизайне на примере иконок.

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

Все перечисленное — естественные внутренние элементы иконок. Для них работает простое правило: все похожее должно стать одинаковым.

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

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

Виды рифм на примере дизайна логотипа:

• Цветовая рифма

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

• По насыщенности

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

• По форме и стилю линий

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

• По деталям

Логотип имеет какую-то красивую, характерную деталь — знак, буквицу или завитушку. Можно сделать иконки, буллиты, кнопки с использованием этой детали.

• По толщине линий

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

• По шрифтам

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

• По взаиморасположению

Если графический знак в логотипе расположен сверху и сбоку от названия (как знак степени), можно разместить значки-иконки внутри сайта по тому же принципу. Например, у заголовков.

• По интерактивному поведению

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

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

Можно рассмотреть пример рифмы в макете сайта по продаже текилы. Концепция сайта, где цвет логотипа перекликается с цветом всего проекта:

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

Аналогичный сайт с рифмой:

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

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

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

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

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

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

Аккуратно расположенные линии усиливают порядок в композиции.

Масштабирование элементов — это еще один способ создания ритма.

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

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

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

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

Виды ритма в работе с элементами:

• Ритм формы

Повторение геометрических фигур создает ритм.

• Ритм цвета

Частое применение одних и тех же цветов способствует единству дизайна и ритмичности.

• Ритм тона

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

• Ритм линий

Аккуратно расположенные линии усиливают порядок в композиции.

Линии могут менять толщину, длину или конфигурацию. Это создает ощущение динамики.

• Масштабирование

Масштабирование элементов — это еще один способ создания ритма. Этот прием также помогает задать направление взгляду зрителя.

• Акценты

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

Виды ритма по его частоте:

• Регулярный ритм

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

В регулярном ритме может быть один недостаток: его монотонность.

• Плавный ритм

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

• Прогрессирующий ритм

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

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

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

• Чередующийся ритм

Ритм, при котором повторяется больше чем один элемент в дизайне. То есть частота повторений примерно по такой схеме: 1-2-1-2-1-2. В качестве примера можно рассмотреть шахматную доску. По сути чередующийся ритм — это усложненная версия регулярного ритма.

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

К примеру, в данном макете сайта ритм можно заметить в  сетке и использовании линий:

Здесь можно заметить необычный ритм шрифта при скроллинге:

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

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

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