+7(343) 344-34-20
г. Екатеринбург, ул. Горького,
дом 65, офис 296
Online-заказ

Иллюстрации для сайта. Теория и практика. Часть 2. Оформление посадочной страницы

28 Сентября 2016

В первой части мы рассказали, почему так важны визуальные образы (http://promoteh.ru/articles/_aview_b360). В этой статье рассмотрим, какие элементы можно разместить на главной или посадочной странице сайта, и почему «красиво» не значит «эффективно».

Чем привлекают внимание?

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

  • Фон. Он может быть однотонным, двухцветным, иллюстрированным или анимированным (последнее следует использовать с крайней осторожностью). Даже видимое отсутствие фона создает определенную атмосферу. Смысловая нагрузка ложится на цвет: от его восприятия зависит первое впечатление человека, попавшего на сайт. Фон, содержащий иллюстрации, часто становится своего рода декорацией, но он должен подчеркивать суть сообщения, не отвлекая внимание от текста.
  • Иллюстрации с героем. В этом случае фотография человека или товара призвана продемонстрировать преимущества продукта. Пожалуй, самый распространенный пример – это счастливый клиент компании (модель в одежде бренда, радостный предприниматель, рядовой пользователь). В роли героя может выступать и сам товар, если он действительно чем-либо примечателен. Главная опасность при использовании иллюстрации с героем – ошибка в выборе действующего лица. Образ должен быть прямо или ассоциативно связан с предложением компании, поэтому использовать растиражированные стоковые фотографии ни в коем случае не следует.
  • Иллюстрации с персонажем. В этом случае создается фантазийный образ, задающий восприятие компании на интуитивном уровне. Как правило, это рисованный персонаж, который должен запомниться и впоследствии ассоциироваться с брендом. Яркий пример – белый человечек из шин компании Michelin. Удачно придуманный персонаж может использоваться не только на всех страницах сайта, но и в рекламе.
  • Информативные иллюстрации. Задача таких картинок – упростить навигацию по сайту. Но это не иконки: информативные иллюстрации могут быть крупными, оригинальными, анимированными, созданными в определенном стиле или выполненными в виде графиков. Главное, чтобы смысл был понятен всем пользователям (представителям целевой аудитории).
  • Тематические иллюстрации. Они могут дополнять текст как декорация или почти полностью заменять его, выражая дух компании, демонстрируя пример работы и явно указывая на особенности компании. Часто такие иллюстрации используют на сайтах дизайнеров, демонстрируя авторский стиль.  
  • Анимация. Интерактивные элементы оформления одновременно и привлекательны, и опасны. С одной стороны, забавные и интересные оживающие картинки нравятся очень многим. Но посетитель сайта может чересчур увлечься и не обратить внимания на главное сообщение компании. И, конечно, избыток анимированных элементов не вызывает ничего, кроме желания закрыть слишком «подвижную» страницу.
  • Украшения. Как и следует из названия, такие элементы используются исключительно для красоты. Но желательно, чтобы они все-таки привлекали взгляд к нужной части страницы, а не были добавлены просто ради искусства.
  • Указатели. Задача таких картинок – заставить посетителя обязательно увидеть то, что важно для владельца сайта. И это не только стрелки. Направить взгляд можно с помощью определенного расположения и оформления блоков на странице, или используя изображения людей (персонажей), смотрящих или показывающих на нужный элемент.
  • Оригинальный шрифт. Его можно считать иллюстрацией, поскольку буквы рисуются от руки и являются авторскими. Шрифт может создавать общее настроение, выделять нужный текст или быть частью корпоративного стиля.
  • Иконки. Этот элемент оформления используется повсеместно и особых пояснений не требует. Однако надо отметить, что назначение иконок – помочь посетителю быстро сориентироваться и найти нужное, не вчитываясь в текст. Поэтому желательно, чтобы они действительно выполняли эту задачу, были понятными и не вызывали спорных ассоциаций.

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

Как выбрать иллюстрации?

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

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

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

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

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

Где взять картинки?

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

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

В заключение: о пользе

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


Иллюстрации для сайта. Теория и практика. Часть 2. Оформление посадочной страницы

 
ссылка на эту статью:

Обратная связь

Нажимая "отправить" я соглашаюсь на обработку моих персональных данных
Положение об обработке персональных данных