Визуальный срок годности — почему иллюстрации веб-дизайна устаревают

Опубликовано: 2022-03-11

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

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

Иллюстрация веб-дизайна
Иллюстрация изображает мир знакомым и неожиданным образом (приложение Emaar EMR).

Несмотря на положительные моменты, есть и проблемы. По своей сути иллюстрация — это инструмент повествования, но по мере роста ее популярности она становится все более обязательной. У нас есть сайт, поэтому у нас должны быть иллюстрации .

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

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

Наверняка вы видели это.

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


Виновник 1: изображениям не хватает остроумия

Происхождение

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

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

Эта проблема

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

На многих веб-сайтах иллюстрации представляют собой визуальное представление текста, с которым они связаны. Попробуйте нашу уникальную функцию планирования! [Вставьте однострочную иллюстрацию календаря]

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

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

Средство

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

  • Каковы большие болевые точки и почему они существуют?
  • Кто больше всего пострадал в финансовом, профессиональном или эмоциональном плане?
  • Существуют ли противоречивые или спорные мнения среди компаний, клиентов или экспертов?

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

Хорошо выполненная работа: Большой картель

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


Виновник 2: Безудержная имитация разрушает новизну

Происхождение

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

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

Эта проблема

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

Бренды замешаны. Компании X нужен стиль иллюстраций компании Y, поэтому они заказывают подделку. Это происходит снова и снова, сайт за сайтом, и каждая итерация вводит новые слои энтропии. В конце концов, целая индустрия использует целый парад дегенеративных клонов, таких как Майкл Китон в « Множественности ».

Не смотрите дальше преобладающего стиля иллюстрации ландшафта SaaS. Это смущающе однородно.

Средство

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

  • Мешап истории . Переосмыслите вдохновляющий стиль иллюстрации глазами опытного художника.
  • Быстрая перерисовка . Аккуратно нарисуйте объект, ссылаясь на стиль другого иллюстратора. Затем быстро перерисуйте один и тот же объект 7–10 раз без эталонного стиля и примите во внимание возникающие причуды.
  • Добавьте правило . Создайте ограничение, влияющее на процесс иллюстрации. Например: я могу рисовать только прямые линии. Они могут быть любой длины или угла, но они должны быть прямыми.
  • Переключатель инструментов . Подражайте стилю иллюстрации с помощью инструмента для рисования, который плохо подходит для этой работы. Например, если стиль основан на точных линиях, повторите его с помощью туши и кисти с мягкой щетиной.
  • Слепая интерпретация . Соберите коллекцию из 3–4 убедительных стилей иллюстраций и попросите коллегу описать один из них в письменной форме. Откажитесь от всех исходных эталонных стилей и используйте письменное описание для обоснования творческого выбора.

Работа выполнена хорошо: Toggl

Иллюстрации на сайтах
Благодаря своему 3D-стилю и иронии, Toggle противостоит современной тенденции 2D, приятных на ощупь иллюстраций веб-дизайна.


Виновник 3: системы иллюстраций устаревают и становятся негибкими

Происхождение

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

Точно так же бренды десятилетиями использовали разные стили иллюстраций, но современные системы дизайна ввели новый вопрос: как сделать наш стиль иллюстраций систематизированным?

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

Эта проблема

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

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

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

Средство

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

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

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

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

Работа выполнена хорошо: Notion.so

Стили веб-иллюстраций
Многие системы иллюстраций чрезмерно стилизованы и обременены правилами. Напротив, система монохроматических иллюстраций Notion проста, последовательна и выразительна.


Виновник 4: чрезмерное использование стоковых иллюстраций

Происхождение

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

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

Эта проблема

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

Средство

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

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

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

Хорошо выполненная работа: Bloomberg Businessweek

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


Создавайте иллюстрации для веб-дизайна с определенной целью

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

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

  • Иллюстрация бренда 101: Визуализация повествования
  • Пошаговое руководство по созданию пользовательских иллюстраций без каких-либо навыков рисования
  • Изучение гештальт-принципов дизайна
  • Ретроспектива тенденций UX-дизайна 2019
  • Принципы дизайна и их важность