Shopify Советы дизайнерам и иллюстраторам Иллюстратор и дизайнер Shopify Мег Робишо опубликовано в своем блоге на Medium о том, как использовать различную графику (например, значки, текстовые иллюстрации и редакционную графику) в продукте и продвигать ее.
Редакция vc.ru публикует перевод материала.
Мэг Робишо Не существует жестких или быстрых правил.
Вы можете найти стиль иллюстрации, который отражает как голос вашего продукта, так и голос вашей маркетинговой кампании.
Особенно в небольших стартапах оба голоса пытаются сказать: «Мы думаем, что эта идея перевернет все с ног на голову.
Просто дайте нам минутку, чтобы показать».
Однако в Shopify , поскольку мы такая большая компания, и поскольку нужно серьезно просить людей доверить нам свои средства к существованию, наши мнения о продуктах и маркетинге расходятся.
Голос нашего продукта должен быть серьезным.
Когда у тебя все хорошо, когда ты в ударе, мы хотим, чтобы это было смешно.
Иногда мы можем даже пошутить.
Но в основном мы просто хотим, чтобы вы знали: мы поддержим вас в чрезвычайной ситуации.
Мы хотим быть надежными, вселять оптимизм и уверенность в себе.
Мы хотим, чтобы вы сказали голосом Мартина Фримена: «Я всегда знал, что вы можете, продолжайте идти», а мы отойдем на второй план, чтобы продолжить свою роль смотрителя.
В нашем маркетинге есть необходимая страсть, рвение и ясность.
Маркетинг Shopify — это не Морган Фримен.
Это Аладдин.
Он стоит на ковре-самолете, протягивает руку Жасмин и спрашивает, доверяет ли она ему, прежде чем показать ей мир (сияющий, мерцающий и роскошный).
Мы видим ваше светлое будущее.
Мы не просто надеемся.
Мы настолько уверены в вас, что уже гордимся тем, на что вы способны.
Мы рисуем картину того, что видим в вашем будущем, и вручаем вам кисть, чтобы заполнить пробелы.
Иконки: взаимодействие - возможность.
Значок — это символ (обычно 16x16 пикселей), за которым стоит что-то большее.
Это одна из тех вещей, которые вы не должны замечать, если все сделано хорошо, но вы всегда замечаете, когда все сделано плохо (что случается довольно часто).
Прежде всего, значок должен быть чем-то, с чем вы можете легко взаимодействовать.
Это должно быть интуитивно понятно.
Он должен быстро передавать идею того, что за ним стоит, выходя за пределы всех языков и культур.
Вам нужно дать понять пользователю, что на него можно нажать и что именно произойдет, когда вы нажмете на него.
Прежде чем набор значков начнет выглядеть логичным, требуется много времени и сил, чтобы в конечном итоге дать пользователям ощущение «мы действительно знаем, что делаем», что повысит доверие к продукту.
Несколько простых правил:
- Используйте закругленные углы.
- Технологические линии (толщина штриха, концы линий обработки и т. д.).
- Обратите внимание на сочетаемость цветов (если бы каждый пиксель был каплей краски, давали бы они при смешивании более-менее схожий тон?).
- Используйте цвета.
- Следите за тем, чтобы элементы имели одинаковый угол наклона.
- Компоненты соединены одинаково? (как с использованием пробелов, так и с помощью способа соединения нескольких объектов).
- Похожи ли их силуэты (например, все ли заключено в круги) или у каждого силуэт уникальный?
В продукте
Иконки больше зависят от ресурсов продукта.Со скоростью и интуитивностью они показывают свои функции и возможности.
Их можно использовать для упаковки набора инструментов либо в Adobe Illustrator или Photoshop, либо в более простых программах, таких как текстовый процессор или электронная почта.
Они могут быть специфичными для конкретного продукта (уникальный символ, который пользователь должен запомнить и расшифровать), или они могут быть универсальными.
Иконки должны быть оформлены в соответствии с пользовательским интерфейсом, быть максимально упрощенными и сливаться с ним.
Это не просто возможность придать изделию индивидуальные особенности.
Иконки по-прежнему могут быть уникальными или красивыми и так далее, но только если за этим стоит объективная необходимость, а не просто желание делать симпатичные иконки.
В маркетинге
В маркетинге иконки встречаются редко.Их можно использовать для навигации по страницам брошюры, особенно если речь идет о сложном продукте.
Они могут быть крупнее и сложнее, чем значки в продукте.
Если не переусердствовать, то с их помощью можно придать вашему бренду оригинальности.
Они должны быть универсальными.
Не нужно перегружать пользователя и надеяться, что он сам во всем разберется.
Помните, что иконка создана для человека с нулевыми знаниями о товаре, чтобы ему было легче перемещаться со страницы на страницу.
Текстовые иллюстрации: читабельность
Текстовые иллюстрации предназначены для чтения.Не для того, чтобы объяснять, вспоминать личный опыт или истории.
Как будто они говорят: «О, посмотрите на это», и просто показывают вам ту или иную вещь.
Люди часто путают текстовые иллюстрации и иконки.
Вероятно, это потому, что вы можете использовать иллюстрацию просто как значок, чтобы привлечь внимание к функции.
Разница между ними, на мой взгляд, в функциональности.
Если это не часть пользовательского интерфейса, если вы не ожидаете, что пользователь будет взаимодействовать с объектом, то это не значок.
Не существует такого понятия, как «слишком сложные значки».
Это просто набор пикселей.
В продукте
Обновления, уведомления, прогресс — «Послушай меня секунду.Я знаю, что ты уже хочешь начать, но если серьезно, тебе не обязательно знать, как пользоваться моими вещами».
Это отличное место для текстовых иллюстраций.
Их также можно использовать для иллюстрации небольших коллекций с помощью быстрых опций — скажем, кредитных карт или PayPal. Они могут иллюстрировать пользовательский интерфейс, простые объекты или действия.
Они не должны быть бездушными, но и не привлекать к себе особого внимания – быть на втором месте.
Итак, если значки должны быть частью пользовательского интерфейса, то текстовые иллюстрации — частью текста.
В маркетинге
Вместо того, чтобы говорить «послушай меня секунду», иллюстрации в маркетинге говорят: «Вы зналиЭ» Мы не хотим убеждать вас прочитать — мы уверены, что вы уже хотите это узнать.Иллюстрации используются для того, чтобы вызвать ассоциации или более лаконично объяснить основную часть текста.
Они могут быть простыми предметами или побуждать к действию.
Зачастую они оказываются более выразительными, чем текстовые иллюстрации внутри продукта.
Например, изображение безопасности может быть проиллюстрировано только замком, а маркетинговая копия может демонстрировать все, что связано с безопасностью.
Обязательно объясните не только, что это такое, но и почему пользователей это должно волновать, и поделитесь своими опасениями.
Иллюстрации сцен: интерпретация
Место действия — это пространство, где можно говорить языком метафор.Они привыкли брать сложные (и, несомненно, скучные) вещи и объяснять их так, чтобы вам хотелось их понять.
Они говорят: «App Store — это ваш магазин цифрового мороженого.
Мы добавили немного ванили, что еще добавитьЭ» Один укус рассказывает целую историю.
В прямом или переносном смысле.
Метафоры включают в себя объект, действие или персонаж, а также контекст для иллюстрации и выражения более тонкой идеи.
В продукте
Иллюстрации локаций становятся все более важными в иллюстрации продуктов.Подобно тому, как все стремится к облаку (если его еще нет), метафора становится наиболее убедительным инструментом, объясняющим происходящее понятным и ассоциативным способом.
Он используется, чтобы взять на себя ответственность за неудачу, быстро объяснить, что произошло, и вернуть пользователя к положительному опыту.
Он используется для ознакомления, рассказывая историю о конкретной функции и о том, как она может облегчить жизнь пользователя.
В маркетинге
Отражая потребность в метафоре в продукте, маркетинг часто пытается охватить сложные процессы, а не просто уловить то, что происходит. Итак, легко не только понять, но и объяснить, почему это актуально и интересно для любого пользователя.Их часто используют, чтобы объяснить, как это работает, или продемонстрировать использование продукта.
Когда метафоры используются правильно, нет необходимости повторять сообщение так часто, как мы это делаем сейчас.
Они основаны на определенных персонажах, чтобы вызывать особые ощущения от использования продукта.
Редакционные иллюстрации: ассоциация
Редакционные иллюстрации получают отдельный раздел, поскольку они отличаются от других иллюстраций.Там, где другие изображения функциональны и служат для аргументации содержания, редакционные изображения дополняют содержание.
Они не несут новой информации, но заряжают пользователя необходимым настроением еще до того, как он откроет статью.
Они не обязательно должны строго соответствовать остальному стилю иллюстрации продукта, но вместо этого могут дополнять общее направление произведения.
Подумайте о The New Yorker: разные художники пишут разные истории, но все они по-прежнему отражают стиль The New Yorker.
В продукте
Честно говоря, я не могу припомнить, чтобы видел редакционные иллюстрации где-либо в самом продукте.Возможно, Medium или Dropbox могли бы сделать что-то подобное, потому что это их стиль, но я не понимаю, зачем им это нужно.
В маркетинге
Очевидно, это блоги.Блог компании может отличаться от основного продукта, но находиться под одним брендом.
В целом блог должен быть последовательным, но стиль может меняться в зависимости от статьи.
Редакционный контент может появляться в информационных бюллетенях, электронных письмах и социальных сетях.
Здесь проводится различие между портретами и рисунками.
Портретные иллюстрации особенно трудоемки и дороги, так как требуют от художника найти уникальный фирменный стиль и передать уникальную историю человека.
Более того, сделать это интереснее и оригинальнее, чем использовать фотографию.
Иллюстрации героев: вдохновение
Эти иллюстрации идут ва-банк.Они полноразмерные, полноцветные, насыщенные.
Они могут быть капризными, красивыми или прямолинейными.
Они вызывают у вас желание быть частью чего-то.
Они иллюстрируют невозможное, заставляя поверить, что вы можете сделать еще больше.
В продукте
По большей части героическим иллюстрациям в продукте нет места.Товар должен быть функциональным.
Речь идет не о том, чтобы «заставлять вас возвращаться каждый день», речь идет о том, что вы видите и можете использовать каждый день в течение года.
Конечно, иллюстрации героев могут пойти по этому пути.
Есть несколько заметных исключений.
Например, экран приветствия должен быть настолько рад вас видеть, что сходит с ума.
Для более крупных продуктов вы можете увидеть это на странице вверху, где содержится информация о продукте.
По сути это брошюра.
Поэтому см.
Маркетинг.
В маркетинге
Героические изображения — это инструмент маркетинга.Такие иллюстрации должны служить интересным введением.
Должен быть жирный пункт. Вы должны сделать так, чтобы люди, с одной стороны, понимали, что происходит, а с другой, хотели знать больше.
Что дальше
Офлайн-маркетинг
После того, как вы решили, какой стиль иллюстрации вы будете использовать, чтобы он мог плавно переходить от продукта к маркетингу и отражать их потребности, вы можете выбрать офлайн-стиль.Помимо брошюр, иллюстрации персонажей подойдут для рекламы или торгово-выставочного стенда; Другие иллюстрации не могут быть использованы для этой цели из-за размера или их назначения.
Бренд и иллюстративные элементы
Я ненавижу оправдывать иллюстрации, которые не вписываются в структуру решения проблем.Но по мере того, как стиль ваших иллюстраций со временем становится более последовательным, они начинают более тесно взаимодействовать с брендом.
Если вы сможете найти повторяющиеся черты, которые можно передать бренду, и создать запоминающиеся вещи с помощью иллюстраций, это отличный следующий шаг.
Мобильные версии
Создание плавного перехода между десктопной и мобильной версиями очень важно.Не ленитесь.
Не просто копируйте продукт для мобильной версии.
Решите, чем он отличается, как он соотносится со стилем иллюстрации и адаптируйте иллюстрации к новым ограничениям.
-
Вот Мой Файлообменник «Прижатый К Ногтю»
19 Oct, 24 -
Айпад. Русский Из Коробки
19 Oct, 24 -
Атака На Твиттер: Шаг За Шагом
19 Oct, 24
