Первоклассные услуги по продвижению и раскрутке сайтов

Эффективная графика для сайта

Опубликовано: 2016/10/07Рубрика:
Полезные материалы
Комментариев: 0
Просмотров: 1324

33

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

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

trash

За последние 10 лет ситуация изменилась. Сегодняшнего интернет-пользователя не удивить даже полностью интерактивным сайтом на Flash или чистом JavaScript. От разнообразия используемых в веб-разработке технологий буквально пестрит в глазах, однако, далеко не все из них можно эффективно применить в контент-маркетинге. Для обычных информационных сайтов не нужны навороченные интерактивные элементы, достаточно качественной и, главное, уместной графики в дизайне и оформлении статей.

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

Роль графики на сайте

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

Важно не переусердствовать. Говоря об уровне графики, совсем не имеются в виду картинки в Motion Design с элементами 3D, рендерящиеся в Real Time и весящие несколько десятков мегабайт.md_3d

 

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

graf

При декорировании сайта и статей не нужно относиться к графике как к своего рода гонке вооружений, руководствуясь принципом: “чем современнее выглядят картинки, тем лучше”. С таким подходом улучшить облик не удастся. После каждого крупного изменения желательно показывать сайт профессиональному дизайнеру и просить его высказать свое мнение и указать на ошибки. Самостоятельно создать хорошую гармонию вряд ли получится, доля субъективной оценки слишком высока. Дизайнеры умеют формировать гармонию не на основе собственного мнения, а по закрепившимся классическим или современным паттернам, следуя которым можно создать сайту хороший образ, соответствующий направленности и целевой аудитории бренда.

Цели использования

1. Мотивирование к покупке

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

view

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

how_to

2. Иллюстрирование содержания

Обычная текстовая статья, в которую добавили графику, ценится гораздо выше как посетителями сайта, так и поисковой системой. В идеале, каждый текст должен быть проиллюстрирован. Распространенный формат – одна-две иллюстрации на каждый подзаголовок. Графика в тексте помогает лучше доносить до читателя сложную информацию. Если текст был понят не полностью, есть вероятность, что будет понята графика – что называется, “объяснение на пальцах”.

1

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

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

3. Самораспространение контента

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

top

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

4. Помощь пользователю

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

etapy

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

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

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

Основные способы визуализации:

  • Скриншоты приложения или сервиса, которые описываются в статье;
  • Графики и диаграммы, представляющие численную статистику в удобном виде;
  • Инфографика, подводящая итог абзаца краткими фактами;
  • Фотографии и коллажи для ключевых моментов текста;

5. Презентация товара или услуги

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

Типы графики для презентаций

  • Собственные фотографии товара, сделанные лично, либо взятые с фотостока или предоставленные поставщиком. Лучше не ограничиваться одной фотографией, а попытаться найти каждому товару по несколько с разных ракурсов.
  • Мокап (Mockup) – демонстрация товара в реальных условиях. Особенно популярен данный тип на Digital-рынке: продукт фотографируется открытым на смартфоне, планшете, ноутбуке, и десктопе с большим монитором – таким образом можно показать, как программа или иной продукт поведет себя на разных устройствах целевой аудитории. Хорошо подходит для презентаций мобильных приложений, веб-сайтов, шаблонов и прототипов дизайна.
  • 3D-модель товара. Пожалуй, лучший вариант для презентации. Такой тип занимает мало места на сайте и во всех подробностях описывает товар, позволяя покупателю рассмотреть его со всех сторон самостоятельно. Найти модель сложно, а создать на заказ – относительно дорого. Это единственный минус. Нагрузку на сервер и канал пользователя можно не брать во внимание, т.к. речь об интернет-магазинах.
  • Инфографика. Редко используется для демонстрации товаров, чаще ею иллюстрируют функционал сервиса, который пытаются продать посетителю сайта. Отличается своей лаконичностью и скоростью донесения информации. 

6.  Для страницы “О компании”

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

team

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

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

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

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

Рейтинг статьи:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (5,00 из 5 на основе 3 оценок)