Многоплановая композиция иллюстрации для веба
Что подразумевается под понятием многоплановая иллюстрация? Это графическая композиция в заданном стиле. Она выполнена с учетом утвержденных технических решений (векторная, растровая, с анимацией или без), в заданном формате – с визуализацией фона, объектов композиции, текста, оформительских элементов, дополняющих, обрамляющих композицию для придания ей завершенного вида. Она готова для публикации и представления целевой аудитории в рекламном носителе (печатном издании, рекламной продукции, веб- и/или мобильном приложении, включая корпоративные и промо-сайты).
Применение, технология и композиция сложной многоплановой иллюстрации
Сложные изображения конструируются на основе трех китов: применение, технология и композиция. Они и определяют содержание коммерческой иллюстрации. Рассмотрим их последовательно.
Применение задается в ТЗ и определяет назначение иллюстрации: ознакомительный или рекламный характер визуального содержания.
Применение задает формат размещения иллюстрации и другие технические требования.
Технология определяет технические инструменты и методы визуализации под выбранный формат размещения.
Композиция задает визуальный ряд. Приоритеты внимания – формат, палитра цветов, стиль. Выбранные технологии позволяют максимально раскрыть содержание.
Важно уточнить, что сложными изображениями в данном случае являются многослойные композиции с использованием элементов статичной растровой и векторной статичной и анимированной графики.
Иллюстративный визуальный ряд: от простого к сложному
Создание иллюстрации проходит несколько последовательных этапов. Сроки исполнения определяются двумя датами: постановки задачи и сдачи проекта (англ. deadline).
Рассмотрим этапы создания многоплановой иллюстрации.
– Постановка задачи, сформулированной в виде ТЗ.
Важно зафиксировать все требования до начала работы дизайнера, чтобы исключить конфликт интересов при сдаче результата.
ТЗ на многоплановую иллюстрацию должно содержать сформулированную задачу, указание характеристики целевой аудитории (сокр. ЦА) рекламируемого товара и/или услуги (иначе портрет ЦА), авторский замысел (идею), формат представления иллюстрации, требования по технологии решения, цветопередаче, шрифтам, соответствию фирменному стилю и т. д., а также срок сдачи работы. В ТЗ могут быть добавлены пункты о проведении A/B-теста на фокус-группе и доработке визуального ряда по требованию заказчика.
– Ознакомление дизайнера с заданием и уточнение возможных вопросов важно провести до начала работы и зафиксировать дополнительные, не указанные в ТЗ пункты – вместе исполнителю и заказчику.
Чем сложнее проект и масштабнее охват целевой аудитории, тем более четким должно быть ТЗ.
– Утверждение исполнителя проекта и подписание договора на выполнение работ.
Формальный по смыслу этап работ и при этом важный с точки зрения качества исполнения авторского замысла.
Важно пройти отбор идей иллюстрации для начала работы и утвердить лучшего дизайнера (с точки зрения реализации проекта — по мнению заказчика).
Для согласования идеи иллюстрации достаточно карандашных черновиков. В профессиональном лексиконе редакторов, арт-директоров и дизайнеров-иллюстраторов встречается англицизм драфт (draft), означающий черновой набросок идеи для согласования будущей иллюстрации – до начала технического дизайна. Эти черновики будут представлены заказчику на этапе первого подхода к реализации проекта. Заказчик соглашается с идеей или критикует, корректирует ее, выслушиваются комментарии по существу концепции – и дизайнер может приступать к основной работе.
– Создание прототипа иллюстрации с заданным форматом и утвержденной композицией.
Это переход от неформального карандашного черновика (драфта) к прототипу в графическом редакторе по требованиям из ТЗ: формату макета и композиции визуального ряда.
Сложности технического характера (многоплановая иллюстрация для веб- и/или мобильной разработки) лучше уточнять у более опытных коллег, в технической литературе.
Прототип – это цифровой макет в графическом редакторе с использованием заданных слоев фона, центрального ключевого объекта, орнамента (опционально), слогана и элементов декорирования. В нем соблюдены технические и визуальные ограничения (ТЗ), авторский замысел (согласно ТЗ) визуально уже обозначен.
На этом этапе возможно промежуточное согласование прототипа между заказчиком и исполнителем.
Не всегда заказчиком является автор рекламируемого продукта. Бывает, что заказчик – это редактор издания, а фактический автор – третье лицо, не принимающее решения об утверждении иллюстрации. Поэтому дизайнеру рекомендуется изучить утвержденные редактором иллюстрации, к которым есть положительная рецензия автора, которые отмечены целевой аудиторией.
По умолчанию в редакторском техническом процессе иллюстрирования придерживаются формального правила: не более трех итераций на каждом этапе, чтобы исключить срыв сроков утверждения и публикации.
– Технический процесс иллюстрирования.
Это подготовка слоев иллюстрации, оптимизация по размеру файлов. Когда иллюстрация подготовлена, дизайнер имеет возможность тестового прогона на фокус-группе доверенных лиц, сопоставимых с целевой аудиторией.
Чем более опытный технический дизайнер-иллюстратор, тем активнее темп производства многоплановой иллюстрации.
– Проведение A/B-теста редактором (отдельно или совместно) с дизайнером.
– Сбор и анализ результатов теста.
Возможна доработка иллюстрации (опционально, по решению заказчика).
– Публикация иллюстрации.
Примеры многоплановой иллюстрации в оформлении промо-сайтов
Для получения визуального опыта рассмотрим примеры комплексной многоплановой иллюстрации в оформлении промо-сайтов.
Рисунок 4.1 – Главная страница веб-сайта художника-портретиста Сергея Артемьева.
Дизайн-идея: картина в рамке является обновляемым блоком. Рама выбирается под тип картины (портрет, пейзаж). Фон задает интерьер галереи для просмотра картин в каталоге веб-ресурса
Рисунок 4.2 – Раздел Вакансии в корпоративном сайте компании «Рацио Инжиниринг».
Дизайн-идея: иллюстрация с лампочкой о заряженных идеями новых сотрудниках для поиска светлых умов в компанию. Объект справа (мужчина с лампочкой) отдельно в PNG с прозрачностью. Фон в формате JPG отдельно
Рисунок 4.3 – Раздел Консалтинг в корпоративном сайте компании «Рацио Инжиниринг».
Дизайн-идея: классическая иллюстрация о команде и работе в компании. Характеризует мозговой штурм для консалтинга. Выполнена аналогично разделу Вакансии
Рисунок 4.4 – Раздел Спикеры в корпоративном сайте юридического форума в Сочи
Дизайн-идея: трибуна и стулья в нижней части иллюстрации (ожидают спикеров). Фон в виде портьеры на контраст с текстом. Логотип на трибуне идентифицирует форум
Рассмотрим более детально пример на рис. 4.5. Это примечательный случай реализации промо-иллюстрации, т. к. помимо фона и дополнительных блоков (освещения) содержит адаптивный блок с представлением картины из галереи автора.
Рисунок 4.5 – Иллюстративный блок с картиной с технической точки зрения
Пояснения к рисунку1. Картина состоит из угловых блоков (каждого неповторяющегося элемента конструкции графического блока рамы). Элементы хранятся в формате PNG с прозрачностью.
2. Повторяемые элементы по горизонтали выводятся фоном верхней части рамы с параметром в стилях CSS:
background-repeat: repeat-x;
3. Вертикальные повторяемые блоки левой и правой частей рамы повторяются по вертикали в стилях CSS:
background-repeat: repeat-y;
4. Изображение картины вставляется через источник ![]()
посередине с внутренней тенью под визуальный уровень восприятия от лица зрителя.
5. Важно при экспорте из Adobe Photoshop выставлять одинаковую палитру RGB или sRGB для всех элементов конструкции картины, иначе получится нестыковка по цветопередаче.
Преимущество – в уникальности многоплановой иллюстрации
С точки зрения уникальности достигнуть высокой оценки по этому критерию несложно: достаточно использовать многослойную композицию из ряда изображений, подготовленных самостоятельно, без копирования из других источников.
Несложно в смысле проверки на антиплагиат результирующего изображения (при условии самостоятельно подготовленных компонентов, слоев сложной иллюстрации). Ровно по этой причине многоплановые иллюстрации активно используются для рекламного иллюстрирования в веб- и мобильных приложениях, корпоративных и промо-сайтах: привлечь внимание целевой аудитории.
Это обстоятельство делает привлекательной сложную многоплановую иллюстрацию для титульных изображений промо-сайтов и веб-приложений – позволяет красочно представить объект или услугу.
Как сделать уникальную композицию для рекламной многоплановой иллюстрацииНе всегда нужно стараться сделать композицию уникальной! Возможно, стоит обратить внимание на ключевой объект и обыграть его визуальной фишкой – оригинально, без копирования, как это выполнено в решении с картиной для веб-галереи Сергея Артемьева. А дальше уже выстроить задний и дополнительные планы иллюстрации. Это даст в целом эффект новизны. Такой навык вырабатывается методом проб и ошибок, мозговым штурмом в команде разработчиков.
Ключевые вопросы применения сложной многоплановой иллюстрации
Технический дизайн сложной многоплановой композиции строится под заданный формат по ТЗ. Представленные сущности – применение, технология и композиция – при детальном рассмотрении позволяют дать ответы на ключевые вопросы, формирующие визуализацию будущей иллюстрации.
Вот эти вопросы.
• Для кого предназначена иллюстрация?
• Где размещается (на титульной полосе или экране)?
• Какой формат (горизонтальный, вертикальный или адаптивный)? Размеры?
• Какие заявлены требования (по цветам, шрифтам, толщине линий, количеству деталей визуализации)?
• Какой стиль необходимо соблюдать техническому дизайнеру?
• Какой размер (файла) по весу допустим для визуализации? Например, в веб- и мобильных приложениях ключевая ставка на скорость загрузки определяет зачастую стиль, близкий к минимализму: Metro Design, Material Design и т. д.
Технологии для многоплановой иллюстрации в применении к веб- и мобильным приложениям
Технология многоплановой иллюстрации определяет выбор технического инструментария для статической или динамической иллюстрации (анимация, движение объектов, освещение и цветопередача).
Слоеный пирог технологий для многоплановой веб-иллюстрации Рисунок 4.6 – Схема реализации многоплановой иллюстрации для веб-ресурса с применением технологий HTML, CSS, JavaScript и современных графических форматов SVG, PNG, WebP
Технология дает техническому дизайнеру ответы на ключевые вопросы по иллюстрированию.
• Какими техническими инструментами следует реализовать данную техническую иллюстрацию?
• Какие ограничения есть в выбранном техническом решении?
Для примера, сложную титульную иллюстрацию для промо-сайта можно выполнить следующими технологическими решениями.
• Сочетание слоев растровой и векторной графики, где многоцветные изображения объектов композиции (для фона и объектов) реализуются в форматах PNG (c прозрачностью), JPG (чаще для красочных фонов), GIF (для мелких объектов детализации, например, снежинок), векторные изображения в формате SVG для наложения масок, анимации текста и объектов композиции.
• В случае жестких требований по скорости загрузки используются только SVG-графика и анимация методами SVG+CSS, SVG+JS(+CSS), инструментарием SMIL.
Трудности и ограничения реализации сложной многоплановой иллюстрации для веб- и мобильных браузеров
Определенные трудности для реализации сложной многоплановой иллюстрации объясняются техническими ограничениями по версиям браузеров, поддерживающих формат SVG. Например, в ранних версиях есть ряд существенных ограничений для визуализации.
Для определения версий используют веб-сервис Can I use, доступный по адресу: https://caniuse.com/?search=svg.
Рисунок 4.7 – Фрагмент скриншота веб-сервиса Can I use по поддержке формата SVG для версий обозревателей
Практически все старшие версии обозревателей поддерживают SVG – за исключением с 9-й по 11-ю версии Internet Explorer, где не поддерживаются анимация и масштабирование векторных изображений в формате SVG.
Сегодня популярность Internet Explorer по частоте использования значительно уступает Google Chrome (движок Blink) и другим веб-браузерам с технологическим движком WebKit, разработанным корпорацией Apple (США) на основании программного кода библиотек KHTML и KJS, используемых в графической среде KDE.
Рисунок 4.8 – Соответствие браузеров и технологических движков для рендеринга кода HTML и CSS для визуализации объектов в веб-документе
Поэтому следует ориентироваться на отображение и тестирование адаптивности сложных многоплановых иллюстраций в веб-браузерах на движке WebKit.
Логическое развитие SVG-анимации для иллюстраций в сообществе технических дизайнеров предопределено широтой визуальных решений и высоким качеством отображения на Retina-экранах высокой четкости с функцией масштабирования ZOOM IN.
Рисунок 4.9 – Технология Retina для воспроизведения графики в веб-интерфейсе (справа) в сравнении с обычным экраном (слева)
Возможной проблемой в реализации сложной графики является абсолютное позиционирование элементов визуального оформления (слоев композиции). Это связано с точкой отсчета координат (в положении [0;0] по осям OX и OY).
Проблема заключается в дизайне мобильных устройств, использующих узкие рамки передней панели смартфона. Это визуально приближает начальную точку отсчета для экрана с отображением браузера и многоплановой иллюстрации очень близко к краю экрана. Поэтому необходимо добавлять дополнительные стили для корректного отображения иллюстрации на мобильном устройстве, адаптируя ее для четкого восприятия.
Многоплановая композиция иллюстрации
Классическая многоплановая композиция иллюстрации состоит из следующих слоев:
• центральный объект и/или название объекта рекламы (товара или услуги);
• фоновое изображение четко выстраивает ассоциативный ряд и задает настроение для восприятия зрителем;
• дополняющие объекты иллюстрации (на заднем и/или переднем планах);
• обрамляющая рамка (опционально), задающая четкую форму иллюстрации.
Рисунок 4.10 – Схема с глубиной слоев в многослойной иллюстрации в веб-документе
Обрамляющая рамка создает определенный стиль, который зачастую наследует фирменный стиль логотипа (возникает визуальная рифма формы и очертаний фирменного знака компании).
В графическом редакторе в процессе дизайна в статичном виде на экране иллюстрация формируется по слоям, расположенным на заданном формате (например A4, A5, другого фиксированного размера в пикселях, дюймах или мм). Слои многоплановой двухмерной иллюстрации размещаются по глубине (по OZ прямо направлено к зрителю).
Глубина слоев в многослойной веб-иллюстрации
В веб- и мобильной разработке в каскадных таблицах стилей CSS этим атрибутом управляется сущность z-index, формирующая глубину объектов композиции в классах, подключенных к этим объектам. Фактически она определяет следующее:
• фон (с самым низким значением z-index:0 или 1);
• объекты заднего плана на фоне (z-index:2 и более);
• центральный объект (условно z-index:3 и более объектов заднего плана в зависимости от значений глубины по OZ);
• объекты переднего плана;
• дополняющие объекты оформления иллюстрации на переднем плане (для создания эффекта визуальной перспективы и глубины иллюстрации и придания эффекта реальности визуальному ряду);
• обрамляющую рамку, задающую финальное стилевое решение композиции.
Золотое сечение композиции иллюстрации
Классически иллюстраторы используют принцип золотого сечения, чтобы обосновать расположение объектов. В центре – ключевой объект (в фокусе восприятия). Дополняющие элементы располагаются по сторонам (равномерно или с усилением внимания к центральному объекту) для создания полного визуального ряда сложной иллюстрации.
Рисунок 4.11 – Схема золотого сечения в пропорциях для горизонтального формата 4:3
Рисунок 4.12 – Золотое сечение в дизайне целевой страницы веб-сайта
Рисунок 4.13 – Построение пропорции золотого сечения для композиции горизонтального формата
Рисунок 4.14 – Соотношение сторон в стандарте золотого сечения
Визуальная интерпретация золотого сечения в адаптивном веб-интерфейсе и в прототипе смартфона в вертикальном и горизонтальном исполнении формируется следующим образом. На рис. 4.15 представлены схематические развертки иллюстраций на экранах смартфонов.
Рисунок 4.15 – Схематические развертки иллюстраций на экранах смартфонов в вертикальном (А) и горизонтальном (B) исполнении
Примеры реализации сложной многоплановой иллюстрации для визуализации объектов в промо-сайтах
Техническому дизайнеру важно видеть образцы сложных иллюстраций для веб- и мобильных приложений, успешно реализованные коллегами. Это позволяет выбрать правильный путь решения, исключает пустую трату времени на поиск дополнительных вариантов, содержащих избыточно сложные технические решения, которые не запоминаются из-за обилия ненужных деталей.
Важно понимать, что число без труда воспринимаемых человеком объектов колеблется в диапазоне 7 ± 3 на одном смысловом экране. Поэтому следует подходить с умом к выбору композиционного решения и количества объектов для восприятия многоплановой иллюстрации.
Рассмотрим примеры сложных иллюстраций для различных рекламных целей и их технические решения.
Одна из примечательных работ Студии Артемия Лебедева – сайт отеля «Феликс Завойский», – удостоенная награды iF Design Award в категории «Сайт» (2011.г.) и Red Dot Design Award в категории «Корпоративный сайт» (2010.г.).
Рисунок 4.16 – Главная страница сайта отеля «Феликс Завойский» в курортном г. Карловы Вары, Чешская Республика
На рис. 4.16 представлена титульная иллюстрация на главной странице сайта отеля. Это комплексная многоплановая композиция с применением нескольких слоев (фона, отражающего дерево процветания). Центральный объект – здание отеля, выполненное в реалистическом виде. Дополнительные атрибуты – на заднем плане силуэты городских зданий, на переднем плане – фигуры горожан Карловых Вар (местечка, где расположен отель). Флаги по обеим сторонам от центрального объекта (здания) используются в качестве активных ссылок на соответствующие языковые версии сайта.
С точки зрения технического дизайна работа выполнена с высокой детализацией и перспективой восприятия для зрителя. Это создает эффект реалистичности титульной иллюстрации, позволяет оценить ценность объекта культурного наследия Карловых Вар – отеля «Феликс Завойский» в исторической части города.
В центральной части представлен блок, привлекающий внимание: с его помощью можно ознакомиться с номерным фондом отеля. Иллюстрация сделана на высоком уровне качества, это характеризует работу как успешный с точки зрения выполнения ТЗ проект. Отметим, что проект реализован в 2009 г., до активного внедрения мобильных устройств как основного источника использования сети Интернет.
Сложность внедрения подобных титульных иллюстраций для мобильных устройств заключается в масштабировании изображения и функциональных элементов (ссылок) для нажатия пальцем в вертикальной и горизонтальной ориентации экрана.
Основные элементы иллюстрации выполнены с использованием формата PNG как надежного графического источника цветопередачи слоев изображений без потерь и с/без сжатия и c подключением альфа-канала прозрачности для наложения этих слоев на композицию по заданной глубине.
Рисунок 4.17 – Схема слоев с заданной глубиной их размещения по параметру z-index
Для исключения проблем с позиционированием объектов относительно здания у каждого из заданных слоев были фиксированные равные размеры с прозрачностью и правильным положением относительно других элементов композиции. Комплексная иллюстрация здания формировалась:
• из фона блока иллюстрации с силуэтами размытых домов c атрибутом глубины z-index:1;
• с векторным изображением дерева (в формате PNG или SVG) c атрибутом глубины z-index:2 и полупрозрачным альфа-каналом opacity:0.2 эквивалентно 20% прозрачности слоя;
• из слоя здания в формате PNG с атрибутом z-index:3 (со значительным весом файла из-за цветопередачи и детализации изображения);
• из слоя переднего плана с силуэтами горожан с атрибутом z-index:4, позиционированных по высоте композиционно четко относительно здания для зрителя перед экраном компьютера.
Как технически решить проблему скорости загрузки слоев титульной иллюстрации при запуске сайта на клиентском устройстве (компьютере или смартфоне)?
Рассмотрим вопрос в контексте точки приложения веб-сайта, где скорость загрузки – ключевой критерий, влияет на поведение потребителя: он может отказаться, если изображение грузится медленно.
Алгоритм решения этой задачи.
1. Использование отдельных слоев для изображений с различной цветовой палитрой.
Доказано, что изображения с однотонной цветовой палитрой при сохранении имеют меньший вес из-за использования меньшего количества кода для описания изображения, чем полноцветные JPG-файлы фотографий, где необходимо множество пикселей для визуального описания композиции.
Согласно процедуре оптимизации слоев иллюстрации, векторный слой дерева с золотистой кроной сохраняется отдельно в PNG 8, где меньшая по количеству кода палитра позволяет описать изображение без потерь и с прозрачностью.
Силуэты домов без прозрачности на фоне. Для технической реализации этого слоя достаточно использовать формат JPG с оптимизацией на уровне 65–70% сжатия и прогрессивной модели загрузки (в настройках Adobe Photoshop > Save for web > JPG > Settings > Quality > 65–70% + галочка на атрибуте Progressive JPEG в палитре RGB).
Флаги по обеим сторонам здания выполнены в формате PNG с прозрачностью и мягкими краями из-за расфокусировки при прямой линии зрения от пользователя по OZ к центральному объекту здания. Именно это создает эффект реалистичности. Он достигнут применением золотого сечения в композиции и фильтра blur для сторонних объектов композиции, дополняющих комплексную иллюстрацию до полного вида Карловых Вар.
2. Оптимизация изображений слоев специальными утилитами для сжатия кода изображений без потерь.
Например, утилита OptiPNG с настройками сжатия и альфа-канала позволяет получить в результате пакетную обработку изображений в формате PNG с необходимым качеством.
3. Предварительная загрузка (на языке веб-разработчиков preloading) с применением JavaScript.
Используется в коде описания блока
в документе веб-страницы с включением списка изображений для приоритетной загрузки при обращении пользователя по заданному адресу веб-ресурса.Пример Preloading. Код JavasScript для вставки в код документа HTML
Уточнения к примеру с прелоадером
1. Пути к источникам изображений заданы относительно (домена веб-ресурса), что требует предварительного задания канонического атрибута (выше по коду блока
):
где вместо domain.ru веб-разработчик указывает фактический адрес размещения веб-ресурса.
2. Последовательность загрузки слоев может отличаться в зависимости от необходимого визуального эффекта проявления слоев, заданных в анимации стилями CSS с использованием атрибута transition-delay: 2.sec (например, отложить на 2 секунды отображение слоя; это необходимо для загрузки слоя при средней скорости загрузки на клиентском устройстве).
Это вычисляется эмпирически относительно целевой аудитории веб-ресурса (по данным статистики об используемых устройствах и операторах связи в регионе таргетинга сайта). Путем детальной настройки можно получить желаемый результат по загрузке слоев последовательно и с необходимым качеством и детализации элементов красочной композиции титульной иллюстрации промо-сайта.
Сложная иллюстрация на основе слогана или названия продукта
Рассмотрим также визуально интересную композицию технически сложной многослойной иллюстрации для промо-сайта с использованием надписи: слогана, названия рекламируемого продукта – с заданным фирменным шрифтом и т. п. В отличие от промо-иллюстрации, где центральным элементом является графический объект (здание отеля), в случае с рекламным слоганом центральным объектом выступает надпись, заданная фирменным шрифтом.
Рисунок 4.18 – Иллюстрация со слоганом I ’m in love Paris
Векторная иллюстрация со слоганом «Я влюблен в Париж» на английском языке выполнена в декорированном орнаментом стиле и содержит несколько слоев, формирующих визуально приятную иллюстрацию с видом на Триумфальную арку.
Сложная форма иллюстративного блока визуально ассоциируется с графическим оформлением детских книг. Орнамент из звездочек на темно-синем фоне поддерживает сказочную тему и добавляет разнообразие в плоскую заливку. Это удерживает внимание зрителя. Золотистая лента обрамления также добавляет сказочный мотив к восприятию слогана, что рифмуется с романтическим образом Парижа – города, где сбываются мечты.
Иллюстрация выполнена автором в векторном редакторе Corel Draw, что позволяет декомпозировать ее по слоям для сохранения в отдельных файлах SVG и анимировать впоследствии слои облаков с заданной траекторией движения для придания динамичности. Метод декомпозиции подразумевает разделение сложной задачи (или макета) на составные элементарные части для последовательного решения.
Критерий успешности иллюстрации для рекламы товаров и услуг
Об успешности применения сложной многоплановой иллюстрации возможно судить по ряду формальных признаков. Ключевой – признание цифрового или печатного рекламного продукта, свидетельством чему являются награды и премии в профессиональном сообществе, а также число покупателей продукта после запуска рекламы (т. е. зрители становятся покупателями). Немаловажный показатель – положительные отзывы о продукте рекламы (косвенно это связано с рекламной иллюстрацией как визуальным образом промопродукта).
При этом важно понимать, что признание иллюстрации в профессиональном сообществе дизайнеров не всегда есть критерий фактической коммерческой ее успешности: восприятие потребителя и оценка профессиональных иллюстраторов и технических дизайнеров, которые иначе оценивают иллюстрацию, все же не равнозначны.
Рисунок 4.19 – Схема представления A/B-теста вариантов размещения веб-иллюстраций
Подчас даже максимально выверенная с технической точки зрения иллюстрация может не дать высоких продаж при запуске рекламной кампании в неудачное время – допустим, на фоне локдауна или других социальных явлений, смещающих фокус внимания целевой аудитории на иные проблемы. Это могут быть ошибочные действия маркетологов и рекламистов под влиянием руководства компании-производителя. Поэтому необходимо оценивать фактор успешности среди целевой аудитории.
Применение A/B-тестов для прогноза успеха сложной коммерческой иллюстрации
Маркетологи используют предварительные A/B-тесты на ограниченной фокус-группе – условно, от десяти человек, репрезентативно отражающих целевую аудиторию рекламируемого продукта, вариант A vs B как взаимоисключающий выбор: что нравится или нет, отзывы по заданным критериям: запоминаемость, простота восприятия, точность отображения объекта рекламы, желание купить рекламируемый товар или услугу и т. д.
Данные A/B-теста позволяют сделать выводы о вариантах сложной рекламной иллюстрации, направленной на извлечение максимальной прибыли от рекламы. По выводам маркетологов принимается решение о доработке лучшего из представленных вариантов.
Для технического дизайнера результаты A/B-теста также важны: восприятие рекламного изображения зависит от возраста потребителей, удаленности объекта, угла восприятия (рекламного билборда) и т. д.
Логически воспроизвести условный A/B-тест можно в ограниченных условиях без участия маркетолога и полноценного прогона на фокус-группе. Техническому дизайнеру достаточно поместить рекламное изображение на экран (или полосу печатного издания) – в реальные условия – и сравнить варианты A и B по ключевым критериям: простота восприятия, запоминаемость, ассоциация визуального ряда с продуктом рекламы, желание купить после просмотра, соответствие авторскому замыслу (визуально передать рекламное сообщение графическим способом), WOW-эффект (удивление от увиденного) и т. д.
Такой упрощенный A/B-тест позволяет техническому дизайнеру сделать профессиональные выводы: добавить или удалить отдельные слои композиции, повысить четкость отображения центрального объекта и т. д.
Более подробно проведение A/B-тестов описано в авторской статье (на англ. языке) «A/B testing for a new emblem in promotion of the product in mass-market» от 6 ноября 2020 г., опубликованной в интернет-издании Medium.com. Публикация доступна по ссылке: https://bundlespace.medium.com/a-b-testing-for-a-new-emblem-in-promotion-of-the-product-in-mass-market-9325e04d7e85.
Подведем итог. Сложная многоплановая иллюстрация выполняется на основании ТЗ с четкой постановкой задачи и требований к исполнению.
В ином случае высока вероятность несоответствия результата формальным пожеланиям заказчика. Будущему техническому дизайнеру рекомендуется использовать собственные заготовки ТЗ с максимальной детализацией, чтобы в случае отсутствия в ТЗ отдельных формальных пунктов требований обязательно уточнять все ключевые вопросы на этапе согласования – до начала работ, т. к. это может существенно повлиять на трудозатраты и утверждение результата в поставленные сроки.
Рекомендуемая литература
1. Спецификация каскадных таблиц стилей CSS. Режим доступа: https://www.w3.org/Style/CSS/specs.ru.html
2. Спецификация формата масштабируемой векторной графики SVG. Режим доступа: https://www.w3.org/TR/SVG2/
3. Гордон Ю. О языке композиции. – Студия Артемия Лебедева, 2018.
4. Авинаш Кошик: Веб-аналитика 2.0 на практике. Тонкости и лучшие методики. – Диалектика, 2019.
5. Кохави Рон, Сюй Я, Тан Диана. Доверительное А/В-тестирование. Практическое руководство по контролируемым экспериментам. – ДМК-Пресс, 2021, с. 298.
Лекция № 5