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

Иллюстратор и дизайнер сервиса Shopify Мег Робишо опубликовала в своем блоге на Medium колонку о том, как следует использовать разные графические изображения (например иконки, текстовые иллюстрации и редакционные рисунки) в продукте и для его продвижения. Редакция vc.ru публикует перевод материала.

Meg.jpgМег Робишо

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

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

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

Мы хотим быть надёжными, внушать оптимизм и уверенность в себе. Мы хотим, чтобы вы сказали голосом Мартина Фримена: «Я всегда знал, что вы сможете, продолжайте», и мы отойдём на второй план, чтобы идальше выполнять свою роль сторожа.

В нашем маркетинге есть необходимый энтузиазм, рвение и ясность. Маркетинг Shopify — это не Морган Фримен. Это Аладдин. Он стоит на волшебном ковре, протягивает руку Жасмин и спрашивает, доверяет ли она ему, перед тем, как показать ей мир (сияющий, мерцающий и роскошный).

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

Иконки: взаимодействие — возможность

Иконка — это символ (обычно размером 16×16 px), за которым стоит нечто бóльшее. Это одна из тех вещей, которую вы не должны замечать, если она сделана хорошо, и всегда замечаете, когда она сделана плохо (что происходит довольно часто).

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

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

Несколько простых правил:

  • Используйте закругленные углы.
  • Обрабатывайте линии (толщина штриха, обработка концов линий и так далее).
  • Обращайте внимание на сочетаемость цветов (если бы каждый пиксель был каплей краски, давали бы они более менее похожий тон при смешивании?).
  • Используйте цвета.
  • Убедитесь, что у элементов одинаковый угол наклона.
  • Одинаково ли соединены компоненты? (и при помощи пробелов, и при помощи способа соединить несколько объектов).
  • Похожи ли их силуэты (например, можно все заключить в круги) или у каждого — уникальный силуэт?

В продукте

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

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

В маркетинге

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

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

Текстовые иллюстрации: читаемость

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

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

В продукте

Обновления, уведомления, прохождение — «Послушайте меня секунду. Я знаю, что вы уже хотите начать, но, серьёзно, вам не нужно знать, как использовать мои вещи». Это отличные места для текстовых иллюстраций. Их также можно использовать для иллюстрации небольших подборок с быстрыми опциями — скажем, кредитных карт, или PayPal.

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

В маркетинге

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

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

Иллюстрации места действия: интерпретация

Место действия — это пространство, где можно говорить языком метафоры. Их используют, чтобы взять сложные (и, бесспорно, неинтересные) и объяснить их так, чтобы вы сами захотели понять. Они говорят: «App Store — это ваш магазин для digital-мороженого. Мы положили шарик ванильного, что вам ещё добавить?».

Один укус рассказывает целую историю. Буквально или образно. Метафоры включают в себя объект, действие или характер, а также контекст для иллюстрации и выражают в более тонкую идею.

В продукте

Иллюстрации места действия становятся всё более важны в иллюстрации продукта. Как всё стремится к облаку (если уже не находится там), так и метафора становится самым убедительным инструментом, чтобы объяснить, что происходит понятным и ассоциативным способом.

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

В маркетинге

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

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

Редакционные иллюстрации: ассоциация

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

Они необязательно должны строго соответствовать остальному стилю иллюстраций в продукте, но вместо этого могут дополнять общее направление произведения. Подумайте о The New Yorker — там разные художники занимаются разными статьями, но все они по-прежнему отражают стилистику The New Yorker.

В продукте

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

В маркетинге

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

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

Иллюстрации героев: вдохновение

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

В продукте

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

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

В маркетинге

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

Что дальше

Офлайн-маркетинг

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

Бренд и иллюстративные элементы

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

Мобильные версии

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

©  vc.ru