Язык иконок: самоучитель

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

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

У языка иконок есть преимущества перед немецким. В нём нет артиклей, нет огромных слов в половину строки и нет странных временных форм. Главное преимущество — его вообще не надо учить. Надо просто начать на нём говорить.

Возникает логичный вопрос «А зачем?». Русский язык велик, красив и точен, у нас был Пушкин и т. д. Зачем тратить время на поиски значков, которые, содержательно, ничего нового не внесут?

Ответ прост. Задача слайда — сделать идею наглядной, визуализировать смысл. И здесь возникают три цели.

Мы все визуалы. Ленивые визуалы. Нас разбаловали соцсети, фильмы-сериалы и книжки в кратком пересказе. Наше поколение уже не приспособлено, даже не способно, изучать длинные полотна текста размером в 100 или 1000 страниц.

Дефицит внимания привёл к популярности блогов. Блоги вымерли, настала эпоха Твиттера. Твиттер теперь тоже не в лучшей форме, зато Инстаграм чувствует себя прекрасно. Без картинки нам лень читать даже 140 символов текста.

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

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

Мы получаем около 90% информации через визуальные каналы (великие британские ученые). Грузить мозг мы не любим. Emoji считываются быстрее слов. Иконки на слайдах считываются быстрее, чем текст. Иконка с небольшим поясняющим текстом «дойдёт» быстрее, чем просто набор слов.

Условно все их можно разделить на 4 категории:

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

Вот так ещё страшнее. Контурная иконка контурной иконке рознь. Следите за тем, чтобы контуры были одной толщины.

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

Презентация — это не книжка-раскраска. Даже простые белые слайды с чёрным текстом смотрятся лучше, чем радуга. Иконки на слайде должны быть одного цвета. Если это не так, то происходящему должно быть какое-то логическое объяснение.

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

Размер и выравнивание должны быть (спасибо, кэп). Задайте себе параметры максимальных ширины и высоты иконки и мысленно придерживайтесь их.

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

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

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

То же самое с презентациями. Воспринимайте их как искусство: избегайте очевидного. Мода на реализм прошла. Включайте в себе Дали.

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

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

Ищите картинку того, что всплывает в мозгу первым, когда вы слышите слово.

Если вам надо отрекламировать магазин бензопил «Пила 2», ищите иконку женщины со скалкой в руках.

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

Не ограничивайте себя:-)

На запрос "download icon" Google выдаёт около полумиллиарда ссылок. На самом деле, в 99% случаев достаточно будет и одного-двух сервисов. Чаще всего я пользуюсь Flaticon. На сайте около 250 тысяч иконок, и если вы не ищете что-то нишевое, то вам сюда. Можно отсортировать иконки по цвету, а потом выбрать: контурные или с заливкой.

Если вам, как когда-то мне, понадобится иконка человека в мусорном контейнере (или что-то более экзистенциальное) — переходите на The Noun Project. База иконок сервиса в разы больше, чем у Flaticon. Но возможности их фильтровать нет, поэтому готовьтесь искать иголки-иконки в стоге сена. Могут попасться крутые. Ещё минус — перекрашивать изображения в бесплатном аккаунте нельзя.

К слову о стоимости использования сервисов. Если хотите пользоваться бесплатными версиями, то по правилам сайтов должны указывать ссылки с именами авторов (хотя nobody cares). Платные подписки на The Noun Project и Flaticon стоят по $ 10 в месяц, смотрите сами :-)

Скачивать иконки на Flaticon можно в PNG, EPS, PSD и SVG. Если хотите послать все три буквы на три буквы — маленький экскурс:

• В формате PNG вы скачиваете нередактируемое изображение нужного вам размера и цвета без фона
• В EPS вы скачиваете чёрное нечто, с чем можно работать напрямую в PowerPoint
• PSD и SVG можете забыть, в PowerPoint не пригождается

Очень долго я работала по схеме «Найти иконку на Flaticon → выбрать PNG → перекрасить → скачать → вставить». Это очень простой и классный вариант, но не лишённый недостатков. Если вы сделали презентацию с классными красными иконками, а потом решили изменить цветовую гамму на условный фиолетовый, придётся всё скачивать заново. Звучит не очень страшно, пока количество иконок не приблизится к сотне.

Сейчас я предпочитаю работать с EPS. EPS-изображения можно редактировать прямо в PowerPoint, и это, кажется, секретная функция (про которую молчит даже техподдержка Microsoft). Так что только сегодня и только сейчас:

1. Заходите на Flaticon, выбираете что-нибудь милое и скачиваете
2. Вставляете изображение на слайд
3. Кликаете правой кнопкой мыши – выбираете «Изменить рисунок», соглашаетесь со всем, на что ругается PowerPoint
4. Удаляете контуры у получившейся группы. Восхитительно! Теперь можно перекрашивать.

Работа с EPS — процесс более трудоёмкий, но усилия оправданные. Можно, извращаться с градиентами и с разноцветными заливками. Круто смотрятся, например, частично залитые контурные иконки. Но самое главное не как вставлять, а что. Поэтому уделите достаточное внимание первым трём главам этой статьи :)

Все хорошо в меру. В данном случае иконки захламляют пространство, а не структурируют.

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

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

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

Простите за качество и водяные знаки, не хочу этой заразой диск засорять. Это результаты запросов «Manager», «Process», «Idea». Не надо возвращать 1997-й, пожалуйста! Ищите лучше, из 250 тысяч иконок можно выбрать что-то и без людей-светильников.

1. Иконки – это хорошо. Они вдыхают жизнь в презентации и помогают аудитории оторвать глаза от телефонов.
   
   
2. Хорошие иконки надо искать на специализированных сайтах. Не скачивайте что-то шаблонно-стоковое. Визуализируйте смыслы, а не слова.
   
   
3. Заранее определитесь с цветовой гаммой и стилем иконок. Не используйте на одних и тех же слайдах контурные иконки и иконки с заливкой.
   
   
4. Не превращайте презентацию в выставку достижений народного хозяйства. Соблюдайте меру во всем: в цветах, в количестве иконок и в количестве слайдов с ними.
   
   
5. А теперь включите PowerPoint или Keynote и примените советы на практике.

Да пребудет с вами Flaticon.