UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Принципы визуальной коммуникации
Редакція
Редакція

Опубліковано

Принципы визуальной коммуникации

#ui

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

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

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

Я написал это стихотворение о себе в восьмом классе

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

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

Визуальный сторителлинг – это процесс передачи идей с помощью визуальных эффектов. По мере того, как мы становимся старше, визуальный сторителлинг пугает нас все больше, поскольку мы убеждаем себя, что визуальные эффекты – детские забавы или чисто декоративные элементы. Нас учили, что все тексты должны быть напечатаны шрифтом Times New Roman 12pt и с двойным интервалом на бумаге размера Letter. Нам сказали, что «намного профессиональнее» убрать восклицательные знаки и смайлики.

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

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

Показать > Рассказать

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

Типографика закладывает основу

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

  1. Придерживайтесь одного шрифта. Найдите шрифт имеющий разные веса и стили. Сложно сочетать разные гарнитуры. Сейчас мои любимые Google шрифты– IBM Plex Sansи Inter.
  2. Меняйте одну вещь за раз. Создание достаточного контраста между стилями шрифта – это искусство. Я рекомендую менять только одну характеристику за раз: размер, вес, стиль и цвет – самые популярные параметры, которые можно изменить.

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

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

  • На слайде 1 я использую один стиль для всего текста.
  • На слайде 2 я выделил самый важный текст на странице полужирным: «Меняйте одну вещь за раз».
  • На слайде 3 я уменьшил размер текста абзаца и переместил заголовок в отдельную строку.
  • На слайде 4 я выделил слово «одну» розовым цветом, чтобы подчеркнуть его важность, и сделал текст абзаца более светлым оттенком серого.

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

Что общего у хороших визуальных эффектов?

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

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

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

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

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

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

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

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

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

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

На этом графике показаны изменения в процессе найма в компанию. Графика отлично подходит для выделения изменений в процессах

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

Тот же процесса найма новых сотрудников в компанию, созданный с помощью Google Таблиц

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

Инструменты для создания визуальных эффектов:

  • У Figma более высокая кривая обучения, но она предлагает наибольшую гибкость.
  • Whimsical прост в использовании и содержит шаблоны для создания общих визуальных элементов, например, блок-схем.
  • Mural похожа на цифровую доску. Она отлично подходит для совместной работы и содержит шаблоны.

Разработка визуальных эффектов в игровой форме

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

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

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

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

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

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

Серия итераций типографики плаката. Лично я считаю, что последняя итерация работает лучше всего, потому что сообщение громкое и четкое

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

На этот раз я менял шрифты: (1) IBM Plex Sans, (2) Inter, (3) Source Serif Pro, (4) Rubik

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

  • В версии 1 я использовал эмодзи Apple.
  • В версии 2 я нарисовал иконку человека, используя два круга и прямоугольник.
  • В версии 3, я использовал библиотеку иллюстраций Humaaans.
  • В версии 4, я использовал набор символов Apple.

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

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

Все четыре версии работают хорошо! Варианты (2) и (4) захватывают внимание зрителя, потому что используют в качестве фона сплошной цветовой блок. Варианты (1) и (3) может быть проще сканировать из-за простоты фона. Мне нравится, как в варианте (3) используется фиолетовый цвет, чтобы выделить рекомендованную дистанцию «6 футов».

Вот как выглядит плакат «Держитесь на расстоянии 6 футов друг от друга», используемый в Сан-Франциско. Он довольно хорошо передает сообщение. Самый важный текст «Держитесь на расстоянии 6 футов друг от друга» выделен желтым цветом, а также включает простой рисунок, который еще раз выделяет сообщение.

Что дальше?

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

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


Перевод статьи smashingmagazine.com

Топ коментарі (0)