Векторная графика для начинающих: теория и практика технического дизайна — страница 9 из 31

Применение иллюстраций для адаптивного дизайна веб-ресурса

Рассмотрим техническое исполнение адаптивного дизайна в приложении к промо-иллюстрированию и аналитической проверке качества исполнения – эта лекция, по сути, является логическим и углубленным продолжением лекции № 5.

От основ адаптивного дизайна – методом декомпозиции – к решению типовых задач с подробным пояснением каждого примера. Такой путь познания позволит на практике создавать иллюстрации для веба, проводить A/B-тесты для выявления наиболее мотивирующего рекламного инфоблока с промо-иллюстрацией (для фокус-группы целевой аудитории).

В примерах будут использованы технологии HTML + CSS и растровая графика (с прозрачностью в альфа-канале) в формате PNG и элементы векторной масштабируемой графики в формате SVG для создания комплексных иллюстраций, адаптируемых под размеры экрана клиентского устройства (ПК, планшет, смартфон) с учетом необходимой детализации.

Примеры, рассмотренные в лекции, соответствуют высокому уровню качественного исполнения.

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

Что такое адаптивный дизайн веб-ресурса

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

В России адаптивный дизайн набирает обороты технологического внедрения после 2010 г. – параллельно с активным спросом на мобильные устройства (смартфоны).

По данным агентства Mediascope, лидера российского рынка медиаисследований и мониторинга рекламы и СМИ, год от года доля мобильных пользователей растет – наряду с покрытием крупных и средних городов России вышками связи для доступа к сети с высокой скоростью: от 3 G до 5 G.

Аудитория Интернета в России

Доли (%) от групп населения.

Вся Россия.

Среднемесячный охват за февраль- ноябрь 2020 г.

Рисунок 9.1 – Статистика Mediascope из исследования российской аудитории сети Интернет за 2020 г.

По данным MediaScope и графику на рис. 9.1, сводная характеристика российской аудитории сети Интернет формулируется следующим образом.

1. Среднесуточная мобильная аудитория составила 79,8 млн человек, или 65,2% населения.

2. Около 10 из 11 минут в смартфоне мы используем мобильные приложения и только 9% времени – просматриваем веб-страницы.

3. Половина трафика – с мобильных устройств.

Чуть больше половины времени в сети проводится при использовании мобильных гаджетов — 50,1%. Более 30 млн человек пользуются Интернетом только с мобильных устройств.

4. Сегодня 92% пользователей имеют возможность находиться онлайн с мобильных.

5. Тем не менее 44% всех запросов в Интернете, согласно Statcounter, все еще выполняется с десктопов.

Применение адаптивного дизайна в разработке и внедрении веб-ресурсов

Большинство людей используют сразу несколько устройств для выхода в Интернет. Разные устройства используются в разное время и для разных целей. Следовательно, в таргетинге (целеполагании) в рекламе следует применять сбалансированный подход и в равной степени ориентироваться на все типы устройств.

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

Что такое адаптивный дизайн

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

Качественный адаптивный дизайн:

• быстрый в загрузке;

• удобный для использования и навигации;

• с комфортными размерами текста для чтения.

Все эти характеристики, по определению веб-разработчиков корпорации Google, объединены в термине mobile friendly, в российском сленге закрепился термин адаптивный веб-сайт.

Рисунок 9.2 – Пример адаптивного дизайна промо-сайта с каталогом продукции ювелирного бренда Aaron Jewelry

Определение ширины экрана в основе адаптивного дизайна сайтов

Адаптивные сайты используют технический метод определения ширины экрана (блоки @media в каскадных таблицах стилей CSS для грамотного отображения содержания по ширине экрана с учетом зрительного масштаба).

Ключевые точки экрана (для адаптивного дизайна) – это условные фиксированные размеры по ширине и высоте экрана пользователя, соответствующие популярным устройствам для доступа к сети Интернет. Отметим, условными называют размеры по ширине и высоте экранов пользовательских устройств от минимального до максимального в контексте заданных в ТЗ требований.

На практике ключевые точки экрана используются для адаптивной верстки, что гарантирует качественное отображение адаптивного веб-ресурса. По умолчанию стандартно принимается следующая градация ключевых точек по ширине экранов (см. рис 9.3): от минимального размера 360 px до максимального 1920 px.

Рисунок 9.3 – Основные ключевые точки размеров экранов по ширине для адаптивного дизайна веб-интерфейса

Промежуточные размеры по ширине являются отчасти проблемными и адаптируются в ходе тестирования и отладки при помощи блоков правил @media.

Какие ключевые точки следует использовать как основные при оформлении и верстке веб-ресурсов?

Представленный диапазон – достаточно широкий диапазон. Правильно выбрать ключевые точки возможно аналитически.

1. Если задача – адаптировать существующий веб-сайт: после проверки статистики веб-ресурса по данным пользовательских устройств (в Яндекс.Метрика или Google.Analytics).

2. Если разработка нового веб-ресурса: при анализе целевой аудитории и ее локализации (города, региона страны), чтобы установить процент мобильной аудитории, популярные устройства в регионе и т. д.

Технически ключевые точки применяются для адаптивного дизайна в виде медиагрупп при верстке стилей в каскадной таблице CSS.

Пример кода CSS

@media (min-width:360px) and (max-width:480px) {
     h1 {
          display:block;
          margin:15px 0 15px 0;
          padding:0;
          font-size:1.2em;
          font-weight:normal;
          line-height:1.5em;
     }
}

В этом примере инструкции CSS описано форматирование заголовка H1 для малых экранов смартфонов на отрезке ширины от 360 до 480 пикселей. Аналогично задаются размеры и стили для всех остальных объектов веб-страницы на указанных отрезках по ширине и высоте экрана.

Рисунок 9.4 – Главная страница российской мебельной компании Vitti

Графическая идея:

Визуальный ряд выполнен в виде адаптивного (по ширине и высоте) слайд-шоу.

Смена кадров растворением от 100% к 0% прозрачности (Fade In / Fade Out).

На кадрах интерьеры с индивидуальной мебелью Vitti.

Целевое действие – клик по кнопке.

Открыть каталог (для перехода к выбору мебельных изделий компании Vitti).

Рисунок 9.5 – Главная страница ювелирного бренда Aaron Jewelry (Россия)

Графическая идея:

Уникальные, произведенные в одном экземпляре ювелирные изделия бренда Aaron Jewelry в виде объектов (графики без потерь и с прозрачным фоном в формате PNG) в слайд-шоу.

Смена кадров растворением от 100% к 0% прозрачности (Fade In / Fade Out).

Фон кадров слайд-шоу – со сложным градиентом, визуально рифмующимся по тонам с ювелирным изделием.

Рисунок 9.6 – Главная страница промостраницы лизинговой компании GT Auto Lab (Нью-Йорк, США)

Графическая идея:

Визуально эффектный фрагмент автомобиля

в обработанном изображении с серо-черной + металлик палитрой на заднем фоне.

Сложное меню плитками в виде композиции из шестиугольников для доступа к разделам сайта на первом плане.

Адаптировано под экраны ПК и планшета.

Интерфейс адаптивного дизайна

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

Визуальное представление сайтов

Все веб-сайты можно условно разделить по визуальному представлению и назначению. Рассмотрим первый аспект – визуальное представление.

Дизайн веб-сайтов исторически разделен технологическим решением на следующие группы:

• фиксированные (по ширине) сайты – визуально подходят для экрана ПК;

• адаптивные сайты – для ПК, планшетов и смартфонов.

Технологически смена фиксированных сайтов на адаптивные пришлась в России на 2010–2013 годы в связи с ростом популярности мобильного Интернета.

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

Популярные разрешения экранов среди пользователей сети Интернет в России

Рисунок 9.7 – График популярности разрешений экранов среди пользователей Интернета в России (2020 г.)

Анализ качественных и количественных показателей дизайна сайта

Проверка качества адаптивных сайтов определяется несколькими критериями.

Удобство использования (в англ. литературе – usability, mobile friendly) с экрана мобильного устройства: логический принцип удобно/не удобно (навигация, чтение, масштаб элементов).

Скорость загрузки (в англ. литературе – page speed) – как быстро загружаются интерфейс и контент сайта для мобильного устройства.

Соответствие трендам дизайна – плоский дизайн (flat design), metro style, информационный дизайн и т. д.

Проверка качества адаптивного дизайна и верстки сайтов

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

Google Mobile Friendly

Главное при тестировании адаптивного дизайна сайта – определить не только usability, но и скорость загрузки. Измерить эти показатели можно c помощью Google Speed Test и Google Mobile Friendly.

Рисунок 9.8 – Скриншот результата проверки веб-ресурса Inmotus Design на адаптивность веб-интерфейса инструментарием Google Mobile Test

Конверсия целевой аудитории на сайте с адаптивным дизайном

Основной вопрос, возникающий у маркетологов, – это достижение уровня конверсии трафика целевой аудитории на сайте с адаптивным дизайном.

Не каждый представленный макет эффективен по умолчанию: необходимо тестировать композиции целевых страниц для целей маркетинга (получения заявок, нажатия на ссылку или кнопку и т. д.) Это означает, что необходимо проводить A/B-тесты для выявления наиболее эффективных адаптивных дизайн-решений (по конверсии по целям маркетинга).

Рисунок 9.9 – Полный набор ключевых экранов веб-сервиса Miss Future

Выбор технического решения для разработки промо-иллюстрации

Выбор решения для разработки промо-иллюстрации (для размещения на веб-ресурсе в коммерческих целях) зависит от ряда взаимосвязанных факторов.

Перечислим основные:

• формат представления товара (или услуги);

• верстка существующего веб-сайта;

• требования заказчика к исполнению промо-иллюстрации;

• допустимые сроки на разработку иллюстрации;

• заданный бюджет.

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

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

Пример подготовки адаптивного дизайна и верстки рекламного блока с промо-иллюстрацией

Рассмотрим пример рекламного блока, представленного на рис. 9.10 в трех размерностях:

1) для ноутбука (от 1024 px и более);

2) для планшета (от 768 px и до 1024 px);

3) для смартфона (менее 768 px, на размере 360 × 640 px).

Рисунок 9.10 – Визуализация трех размеров вывода рекламного блока с промо-иллюстрацией для продвижения услуги оператора связи

Иллюстрация визуально эффектно воспроизводит рекламное сообщение, соответствует фирменному стилю и адаптируется по ширине под размеры ПК (ноутбука), планшета (в данном случае вертикальной ориентации), смартфона (вертикально).

Декомпозируем рекламный блок по слоям и рассмотрим детально исполнение кода и графики в HTML + CSS.

См. далее «Код HTML и CSS для примера № 1».

Пример № 1. Код HTML для вывода баннера

Промо-иллюстрация
                Управляйте связью
с комфортом и выгодой
Оформить подписку

Пример № 1. Код CSS для адаптивной верстки и оформления баннера

/* Следующий стиль задает положение и оформление рекламного инфоблока */
div.promo {
  display:block;
  width:100%;
  min-height:480px;
  background-color:#00b856;
  border-radius: 15px;
}
/* Следующий стиль задает оформление ссылки, обрамляющей баннер */
a.illustration {
  margin-bottom:0;
  color:#fff;
  text-decoration:none;
}
/* Следующий стиль задает положение и оформление заголовка в инфоблоке */
a.illustration h2 {
  display: block;
  width: fit-content;
  padding: 50px;
  font-size: 26px;
  font-family: Arial,sans-serif;
  color: #fff;
  text-align: center;
}
/* Следующий стиль задает оформление заголовка в инфоблоке */
a.illustration h2 i {
  display:block;
  font-size: 0.8em;
  font-style: normal;
  letter-spacing: 0.01em;
}
/* Следующий стиль задает минимальную высоту слоя с выводом подарков на фоне */
div.gifts {
  min-height: 495px;
}

/* Следующий стиль задает оформление кнопки в неактивном состоянии по умолчанию */
a.illustration b:not(:target) {
  display: block;
  max-width: 155px;
  margin: 0;
  padding: 8px 16px 10px 16px;
  border-radius: 100px;
  background-color: #872997;
  border: 2px solid #fff;
  font-family: Arial,sans-serif;
  font-size: 15px;
  text-align: center;
}
/* Следующий стиль задает оформление кнопки в состоянии при наведении, при нажатии */
a.illustration b:hover, a.illustration b:target {
  display: block;
  max-width: 155px;
  margin: 0;
  padding: 8px 16px 10px 16px;
  border-radius: 100px;
  background-color: #972195;
  border: 2px solid #972195;
  font-family: Arial,sans-serif;
  font-size: 15px;
  text-align: center;
  color: #ebebeb;
}
/* Следующий стиль задает положение фона слоя подарков для экранов ПК */
@media (min-width:1024px) {
  div.gifts {
    background-image: url('gifts.png');
    background-size: auto 340px;
    background-position: 0 20px;
    background-repeat: repeat-x;
  }
}
/* Следующие стили задают положение, размеры и оформление слоев для экранов ПК */
@media (min-width:1000px) {
  div.promo {
    max-width: 1000px;
    margin: 0 auto 0 auto;
  }
  div.smartPhone {
    display:block;
    width:100%;
    min-height:480px;
  }
  div.promo div.bottomCorner {
    display:block;
    width:100%;
    min-height:480px;
  }

  /* Следующий стиль задает положение и оформление нижних скругленных углов */
  div.promo div.bottomCorner span {
    display: block;
    width: 100%;
    height: 105px;
    margin: -120px 0 0 0;
    background-image: url('bottom-corner.svg');
    background-size: 100% 115px;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  a.illustration {
    display: block;
    width: 100%;
    min-height: 480px;
    background-image: url('smartphone.png');
    background-size: auto 375px;
    background-position: 74% 100px;
    background-repeat: no-repeat;
  }
  a.illustration div.textBlock {
    display: block;
    width: 320px;
    padding: 120px 0 0 200px;
  }
  a.illustration h2 {
    display: block;
    width: fit-content;
    margin: 20px 0 0 0;
    padding: 0 0 20px 0;
    font-family: Arial,sans-serif;
    font-size: 32px;
    text-align: center;
  }
}
/* Следующие стили задают положение, размеры и оформление слоев для экранов планшетов */
@media (min-width:768px) and (max-width:1023px) {
  div.promo {
    max-width: calc(100% – 10px);
    margin: 10px 5px;
  }
  div.smartPhone {
    display:block;
    width:100%;
    min-height:480px;
  }
  div.promo div.bottomCorner {
    display:block;
    width:100%;
    min-height:480px;
  }
  div.promo div.bottomCorner span {
    display: block;
    width: 100%;
    height: 80px;
    margin: -80px 0 0 0;
    background-image: url('bottom-corner.svg');
    background-size: calc(100%) auto;
    background-repeat: no-repeat;
    background-position: 0 5px;
  }
  a.illustration {
    display: block;
    width: 100%;
    min-height: 485px;
    margin-bottom: 0;
    background-image: url('smartphone.png');
    background-size: auto 425px;
    background-position: 50% 380%;
    background-repeat: no-repeat;
  }
  div.promo div.gifts {
    min-height: 495px;
   background-image: url('gifts.png');
    background-size: auto 340px;
    background-position: -80px 20px;
    background-repeat: repeat-x;
  }
  a.illustration div.textBlock {
    display: block;
    width: 300px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    zoom: 110%;
  }
  a.illustration h2 {
    display: block;
    width: fit-content;
    margin: 20px 0 0 0;
    padding: 0 0 20px 0;
    font-family: Arial,sans-serif;
    font-size: 30px;
    text-align: center;
  }
}
/* Следующие стили задают положение, размеры и оформление слоев для экранов смартфонов */
@media (max-width:768px) and (min-width:481px) {
  a.illustration {
    display: block;
    width: 100%;
    min-height: 485px;
    margin-bottom: 0;
    background-image: url('smartphone.png');
    background-size: auto 425px;
    background-position: 50% 400%;
    background-repeat: no-repeat;
  }
  a.illustration b:not(:target) {
    display: block;
    max-width: 155px;
    padding: 8px 16px 10px 16px;
    border-radius: 100px;
    background-color: #872997;
    border: 2px solid #fff;
    font-family: Arial,sans-serif;
    font-size: 15px;
    text-align: center;
  }
  a.illustration b:not(:target),a.illustration b:target, a.illustration b:hover {
    margin: 10px auto;
  }
  a.illustration h2 {
    display: block;
    width: fit-content;
    max-width: 300px;
    margin: 0 auto 0 auto;
    padding: 60px 0 20px 0;
    font-size: 26px;
    font-family: Arial,sans-serif;
    text-align: center;
  }
  span.corner {
    display: block;
    width: 100%;
    height: 100px;
    margin: -100px 0 0 0;
    background-image: url('bottom-corner.svg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center 102%;
  }
}
/* Следующие стили задают положение, размеры и оформление слоев для смартфонов iPhone */
@media (max-width:640px) and (min-height:480px) and (max-height:820px) {
  a.illustration {
    display: block;
    width: 100%;
    height: calc(100% + 10px);
    background-image: url('smartphone.png');
    background-size: 240px auto;
    background-position: center 120% !important;
    background-repeat: no-repeat;
  }
  a.illustration h2 {
    display: block;
    width: fit-content;
    max-width: 300px;
    margin: 0 auto;
    padding: 100px 0 0 0;
    font-size: 26px;
    font-family: Arial,sans-serif;
    text-align: center;
  }
  div.gifts {
    min-height: 495px;
    background-image: url('gifts.png');
    background-size: 110% auto;
    background-position: -150% 30%;
    background-repeat: repeat-x;
  }
}
/* Следующие стили задают положение, размеры и оформление слоев для малых экранов смартфонов */
@media (max-width:480px) {
  div.promo {
    min-width: 340px;
    max-width: 100%;
    height: calc(100vh – 15px);
    margin: 0 auto 10px 0;
  }
  div.promo div.textBlock {
    padding-bottom: 30px;
    background: -moz-linear-gradient(top, rgba(0,184,86,1) 0%,
    rgba(0,184,86,1) 1%, rgba(0,184,86,0.62) 70%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,184,86,1) 0%, rgba(0,184,86,1) 1%,rgba(0,184,86,0.62) 70%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,184,86,1) 0%, rgba(0,184,86,1) 1%,rgba(0,184,86,0.62) 70%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#00b856', endColorstr='#00000000', GradientType=0 );
    border-radius: 20px 20px 0 0;
  }
  a.illustration {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('smartphone.png');
    background-size: 240px auto;
    background-position: center 150%;
    background-repeat: no-repeat;
  }
  a.illustration h2 {
    display: block;
    width: fit-content;
    max-width: 300px;
    margin: 0 auto;
    padding: 100px 0 0 0;
    font-size: 26px;
    font-family: Arial,sans-serif;
    text-align: center;
  }
  a.illustration b:not(:target),a.illustration b:hover,
  a.illustration b:target {
    margin: 30px auto;
  }
  div.gifts {
    min-height: 495px;
    height: 100%;
    background-image: url(gifts.png);
    background-size: auto 220px;
    background-position: -120px 100px;
    background-repeat: repeat-x;
  }
  span.corner {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: -60px;
    border-radius: 0 0 15px 15px;
    background: -moz-linear-gradient(top, rgba(0,184,86,0) 0%, rgba(0,184,86,0.62) 56%, rgba(0,132,62,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,184,86,0) 0%, rgba(0,184,86,0.62) 56%,rgba(0,132,62,1) 100%);
    background: linear-gradient(to bottom, rgba(0,184,86,0) 0%, rgba(0,184,86,0.62) 56%,rgba(0,132,62,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#0000b856', endColorstr='#00843e',GradientType=0 );
  }
}

Уточнение к стилям CSS в файле banner.css

1. По умолчанию все относительные адреса заданы без длинного пути соответствия (как в случае, когда изображения в той же директории, что и файл стилей CSS, и веб-документ HTML).

background-image: url('smartphone.png');

2. Если рассматривать стандартную структуру, как в лекции № 6, то изображения будут по адресу:

public_html/img/content/
…

Обращение к изображениям из свойств классов CSS следующее:

background-image: url('../img/content/smartphone.png');

Файл стилей CSS по адресу: public_html/css/banner.css.

Соответственно, вывод стилей в HTML-документе:

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

Отображение баннера на экране ПК, [1024 × 800] px

Отображение баннера на экране iPad (горизонтально), [1024 × 768] px

Отображение баннера на экране Nest Hub, [1024 × 600] px

Отображение баннера на экране iPad (вертикально), [768 × 1024] px

Отображение баннера на экране Surface Duo, [540 × 720] px

Отображение баннера на экране Moto G4, [360 × 640] px

Риcунок 9.11 – Адаптивное отображение баннера на экранах устройств различных размеров

Важное уточнение к рисунку

1. Отображение баннера на экране Moto G4 [360 × 640] px выполнено почти полностью с покрытием рабочего экрана без прокрутки с равными отступами от краев для создания полноценного вида и удержания максимального внимания пользователя на содержании баннера.

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

Как подготовить технически маску нижних загнутых краев для фигурного баннера?

Для решения этой задачи техническому дизайнеру потребуется использовать инструментарий векторного графического редактора Corel Draw или Adobe Illustrator. Дизайн-макет размерами: [1024 × 107] px.

В панели инструментов воспользуйтесь инструментом кривая Безье для создания сложной замкнутой фигуры с заливкой цветом: HEX: #000 или RGB:.0,0,0. Контур фигуры должен быть толщиной 0 px. Пример реализации приведен на рис. 9.12.

Рисунок 9.12 – Фигура маски нижних загнутых краев для баннера

Перед экспортом измените цвет готовой маски с черного на белый:

HEX: #FFF или RGB: 255,255,255.

Выполните экспорт готовой маски нижних границ баннера, вызвав диалоговое меню сочетанием горячих клавиш Ctrl + E. Название файла должно быть однозначным с указанным в стилях CSS: bottom-corner.svg.

Сохраните маску слоя в SVG в необходимую директорию (либо в корне проекта, либо, например, «../img/content/..») с корректной адресацией из стилей banner.css.

Критерии оценки качества промо-иллюстрации

Выделим ключевые критерии, т. е. факторы требований, предъявляемые к оценке качества исполнения промо-иллюстрации для веб-ресурсов.

Ключевые факторы оценки качества логотипа

* Булева переменная (в дискретной математике) представлена отображением B → B, где B = {0,1} – булево множество. Элементы булева множества {1, 0} обычно интерпретируют как логические значения «истинно» и «ложно», хотя в общем случае они рассматриваются как формальные символы, не несущие определенного смысла.

** Кроссбраузерность – свойство веб-сайта отображаться и функционировать во всех часто используемых браузерах идентично. Соотносится с основными веб-браузерами: Google Chrome, Mozilla Firefox, Opera, Internet Explorer. Вследствие постоянного развития веб-технологий приемлемую кроссбраузерность возможно обеспечить только для последних версий браузеров.

Иллюстрация как часть стратегии нативной рекламы

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

Рисунок 9.13 – Визуальная схема размещения нативной рекламы в адаптивном дизайне веб-ресурсов

Что такое нативная реклама

Естественная, т. е. нативная реклама (от англ. native advertising) – это способ, которым рекламодатель привлекает к себе внимание в контексте площадки и пользовательских интересов.

По определению нативная реклама – это один из видов естественной рекламы, спонсируемый брендом компании заказчика. По форме исполнения –  публичная статья, напоминающая 1:1 редакционную (англ. advertorial –  от англ. advertising: реклама и англ. editorial: редакционная статья), с платным размещением посреди основного нерекламного контента.

Рисунок.9.14 —.Схема восприятия нативной рекламы в контенте информационного веб-ресурса (новостного портала или тематического издания)

Выделим основные характеристики нативной рекламы.

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

2. Этот тип рекламного размещения дает высокую эффективность для продвижения товаров и услуг в сегменте масс-маркет (для широкой аудитории в сегменте B2C).

В основе эффективной работы сайта-площадки для нативной рекламы:

• качественный периодический контент;

• удобство чтения (адаптивный дизайн сайта);

• аналитический подход к статьям: рекомендации по выбору на основе факторного анализа.

Как различить нативную рекламу

Пользователями информационного веб-ресурса нативная реклама воспринимается как часть просматриваемого контента (новости или статьи), она учитывает особенности площадки, т. е. адаптирована под оформление целевой страницы. Она не воспринимается как реклама и не вызывает у аудитории отторжения (отказов от просмотра – минимум, конверсия в целевое действие (клик) – высокая по соотношению с другими рекламными форматами).

Рисунок 9.15 – Пример адаптивной рекламы в контенте информационного веб-ресурса

Эффективность применения нативной рекламы

По данным американского исследования IPG Media Lab и Sharethrough, имея дело с нативной рекламой, пользователи гораздо более охотно ассоциируют себя с брендом (+ 42%), чаще замечают (+52%) и делятся в соц. сетях (+68%) сообщением – в сравнении с традиционными баннерами. И нативная реклама в 1,5 раза больше, чем баннерная реклама, стимулирует к покупке товара или услуги.

Нативная реклама в СМИ может иметь вид инфоблока для анонса обычной новости или редакционной статьи.

По стилю, форме и языку она будет идентична принятому в издании. И что интересно, пользователи обращают внимание на нативную рекламу даже чаще, чем на редакторский контент, 26% и 24% соответственно.

Лицензионное использование коммерческих изображений для иллюстрирования веб-ресурсов

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

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

Что такое коммерческая графика

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

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

• для элементов дизайна – лицензия Creative Commons;

• для логотипа – регистрация торгового знака в «Роспатенте» или международной Мадридской системе WIPO,, международной организации, занимающейся администрированием ряда ключевых международных конвенций в области интеллектуальной собственности.

Рисунок 9.16 – Лицензия Creative Commons для коммерческой графики

Рисунок 9.17 – Логотип международной Мадридской системы регистрации торговых знаков WIPO

Векторная графика, распространяемая в формате SVG (Scalable Vector Graphics с лицензией для коммерческого использования), – это универсальная коммерческая графика для разработки цифровых продуктов, отвечающих требованиям дизайн-систем Material Design и др. Дизайн-система – комплекс компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов.

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

Целевое действие в иллюстрации как инструмент конверсии рекламы

Ценность промо-иллюстрации с точки зрения маркетинга заключается в решении трех основных задач.

1. Захватить приоритетно внимание пользователя для просмотра иллюстрации.

2. Передать визуальным рядом рекламное сообщение, заданное в иллюстрации.

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

Понятно, что яркий визуальный ряд промо-иллюстрации крупного формата относительно размеров экрана (до прокрутки), например около 100% по ширине и 2/3 по высоте, вызывает фокус внимания пользователя на себя и удерживает его взгляд до целевого действия. Если пользователю приятен и понятен визуальный ряд – вероятнее всего, он выполнит целевое действие: клик по кнопке для дальнейшего изучения содержания веб-ресурса. Но возможен по какой-то причине и отказ пользователя.

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

Далее разберемся, как привести к максимуму конверсию из просмотра промо-иллюстрации в переход к покупке представленных товаров (и/или услуг).

A/B-тест конверсии промо-иллюстрации по целевому действию

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

Факторный анализ позволяет качественно подготовить варианты промо-иллюстрации для A/B-теста.

A/B-тестирование – это метод в маркетинге, используемый для технико-эконометрической оценки и контроля за эффективностью подачи рекламного сообщения в веб-странице. Этот метод также называется сплит-тестированием (от англ. split testing – раздельное тестирование).

Зачем так нужен A/B-тест для проверки промо-иллюстрации

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

Базовое правило экономики предприятия действует единообразно по классической формуле:

Доходы – Расходы = Прибыль [1]

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

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

Поэтому в маркетинге принято использовать A/B-тест как способ проверки вариантов целевой промостраницы на конверсию при таргетинге на ограниченной репрезентативной фокус-группе (пол, возраст, финансовая и др. характеристики – иначе портрет целевой аудитории).

Формат может быть различен.

1. Электронная рассылка писем с предложением нового продукта.

2. Контекстная реклама (объявление) с таргетингом по портрету аудитории.

3. Нативная реклама на веб-ресурсе, активно используемом целевой аудиторией.

Рисунок 9.18 – Визуальное сравнение предложений A и B в адаптивном веб-интерфейсе на экране смартфона Moto 4G, [360 × 640] px

Результатом A/B-теста является однозначный выбор вариантов A или B, существенно отличных по визуальному решению и подаче коммерческого предложения для покупки или просмотра описания нового продукта. В качестве A и B могут быть использованы визуальные решения:

• какое выбрать словосочетание для определения продукта;

• как оформить кнопку для покупки;

• как выделить цену и т. д.

Как провести A/B-тест рекламного инфоблока с иллюстрацией

Для проведения A/B-теста инфоблока рекламного содержания с промо- иллюстрацией необходимо выработать гипотезы – например, о признаке мотивации потребительского спроса:

• вариант A – предложение с выгодой;

• вариант B – предложение с ценой.

Сформируем два варианта HTML-документа с разными по содержанию рекламными сообщениями.

Для проверки гипотез нам потребуются UTM-метки (сокр. UTM от англ. термина Urchin Tracking Module) – специализированный параметр в URL-адресе активной ссылки, используемый маркетологами для отслеживания рекламных кампаний в Интернете. Аббревиатура образована от названия модуля отслеживания ссылочных переходов американской компании Urchin, переименованного в Google Analytics после поглощения корпорацией Google и существенной переработки.

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

UTM-метки для A/B-теста гипотез мотивации потребителей

Уточнение к таблице

1. В примерах ссылок указаны условные домены https://example.com.

2. В реальном A/B-тесте домен один и раздел веб-ресурса для адресации обоих ссылок к целевым страницам. Например, если домен https://auto.ru и раздел (категория) для теста Jeep, то аналогичные ссылки примут следующий вид (см. табл. ниже).

UTM-метки для A/B-теста гипотез мотивации потребителей на условном домене https://auto.ru в категории Jeep

Более подробно о параметрах UTM-меток студенты смогут узнать в ходе самостоятельного изучения справочника Яндекс.Метрика в главе UTM-метки (ссылка на источник размещена в Рекомендуемой литературе).

Как сформировать инфоблоки предложений A и B (целевые страницы) и установить в них UTM-метки

1. Начнем по порядку. Сформулируем предложения A и B.

Предложение A с выгодой

Рисунок 9.19

Предложение B с ценой

Рисунок 9.20

2. Сверстаем HTML-документы с данными предложениями для теста гипотез.

Предложение A с выгодой

HTML-код реализации гипотезы с установленной UTM-меткой

Промо-иллюстрация
        Управляйте связью
с комфортом и выгодой
Оформить подписку

Предложение B с ценой

HTML-код реализации гипотезы с установленной UTM-меткой

Промо-иллюстрация
        Управляйте связью
всего за 1199 руб./мес.
Оформить подписку

Для четкого восприятия кода установки UTM-меток укажем точно строку и точный код подстановки в атрибут адресации ссылок (Copy/Paste).

UTM-метка для гипотезы A с выгодой

До установки UTM-метки для предложения A

11-я строка и далее по коду

  …

После установки UTM-метки для предложения A

11-я строка и далее по коду

  …

UTM-метка для гипотезы B с ценой

До установки UTM-метки для предложения B

11-я строка и далее по коду

  …

После установки UTM-метки для предложения B

11-я строка и далее по коду

  …

Ключевые метрики A/B-теста промо-иллюстрации

Рассмотрим ключевые технические метрики по результатам A/B-тестирования вариантов промо-иллюстрации и их характеристики в таблице.

Основные метрики для анализа результатов A/B-теста промо-иллюстрации для получения лидов[4]

Как выглядит типовой лид для обработки в отделе продаж

Отделы продаж и маркетологи обычно согласовывают типовой формат лида для оперативной работы в процессе продаж продукции компании.

Рассмотрим два основных типа лида.

Типы и параметры лидов для обработки в отделе продаж

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

Исследование Яндекса: Выгода или цена? A/B-тестирование посадочной страницы с помощью Метрики

Компания Яндекс совместно с официальным дилером Toyota «Тойота Центр Челябинск Север» провела маркетинговое исследование методом A/B-теста.

Задача: как получить лид, если посетитель чувствителен к цене и при этом не до конца определился, какой автомобиль ему нужен?

Решающий фактор при покупке автомобиля – цена. В зависимости от комплектации автомобиля цена варьируется, а клиент часто покупает авто дороже, чем рассчитывал: в процессе захотел более богатую комплектацию или выявил для себя новые требования к автомобилю, о которых раньше не задумывался. Было проведено A/B-тестирование посадочной страницы с помощью Метрики.

Выяснили: если указывать на сайте выгоду при покупке автомобиля, а не его цену, можно получить +40% к обычной конверсии.

Детальное знакомство с результатами исследований показало интересные результаты, которые будут полезны и дизайнерам промо-иллюстраций, и маркетологам, ответственным за их конверсию: указание выгоды на посадочной странице повышает конверсию.

С точки зрения теории вероятности, это событие интерпретируется базовыми выражениями:

P(A) = m_A / N,

P(B) = m_B / N,

где

P(A) – вероятность наступления события A, т. е. выбора предложения с выгодой, в серии из N уникальных посетителей (отражает конверсию в процентах по выгодному предложению);

P(B) – вероятность наступления события B, т. е. выбора предложения с ценой, в серии из N уникальных посетителей (отражает конверсию в процентах по ценовому предложению);

m_A – количество клиентов по предложению с выгодой из всей фокус-группы (уникальных посетителей целевой веб-страницы);

m_B – количество клиентов по предложению с ценой из всей фокус-группы (уникальных посетителей целевой веб-страницы);

N – общее количество уникальных посетителей.

После того как через A/B-тест прошло необходимое количество посетителей (N), нужно проверить статистическую значимость результатов.

В итоге исследования выявили следующие результаты:

• конверсия варианта A (с выгодой) составила 2,57%;

• конверсия варианта B (с ценами) – 1,81%.

Эконометрически это выражается следующими соотношениями:

P(A) = 2,57% P(B) = 1,81%

P(A) > P(B)

Вывод: промо-иллюстрация с выгодой от покупки продукта будет по прогнозу выше по уровню конверсии (по статистической гипотезе).

Термин выгода в этом контексте трактуется как выгодное предложение, как вариант со скидкой или бонусная программа и т. д.

Вот мнение веб-аналитика (Registratura.ru) С. С. Кирова: «А/В-тест помогает понять, как именно повысить конверсию посадочной страницы. Не останавливайтесь на достигнутом – для оптимизации всегда есть место. Закончился один А/В-тест – планируйте новый! Регулярное тестирование гипотез позволит не только улучшить коэффициент конверсии, но и даст вам более полное представление о ваших клиентах».

В заключение отметим, что коммерческие иллюстрации, выполненные в адаптивном дизайне с учетом ключевых критериев оценки качества, отличаются значимой характеристикой mobile friendly, т. е. удобные для просмотра как с ПК, планшета, так и с мобильных устройств. Это гарантирует относительно низкий процент отказов у целевой аудитории, использующей смартфоны.

Факторный анализ позволяет сделать оптимальный выбор технического решения по реализации промо-иллюстрации (с учетом всех значимых критериев качества исполнения работы технического дизайнера).

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

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

Рекомендуемая литература

1. Развитие Интернета в регионах России

Использованы данные Яндекс.Метрики и Яндекс.Браузера, отчеты Фонда «Общественное мнение» и исследовательской группы TNS. Дата публикации: весна 2016 г. Режим доступа: https://yandex.ru/company/researches/2016/ya_internet_regions_2016

2. Google Mobile Test

Веб-инструмент для разработчика адаптивных веб-ресурсов. Режим доступа: https://search.google.com/test/mobile-friendly/

3. Цена или выгода? A/B-тестирование посадочной страницы с помощью Метрики

Аналитическая статья для маркетологов от разработчиков компании Яндекс. Режим доступа: https://yandex.ru/adv/solutions/cases/toyota-avtomir-ab-test

4. Отчет «Метки UTM»

Справочник Яндекс.Метрика

Режим доступа: https://yandex.ru/support/metrica/reports/tags-utm.html

Лекция № 10