Контент и дизайн – поиск гармонии

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

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

Как реализовать эту связку идеально? Какую работу следует провести и кто должен этим заниматься? Мы попытаемся ответить на этот вопрос и вывести для себя некоторые правила.

Идеальная команда – кто они?

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

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

Связка дизайнер – копирайтер - идеальное решение. Если вы руководите этой взрывоопасной командой, следите за следующим:

1. Не давайте тянуть одеяло на себя никому из них. Отлично, если вы имеете в команде дружелюбного дизайнера и вежливого копирайтера, умеющих прислушиваться к мнению друг друга. Но так бывает далеко не всегда. Копирайтер истово верит в силу слова, дизайн в силу графики. Пусть ищут компромисс.
2. Не допускайте ситуации, когда копирайтеру приходится перекраивать текст для заполнения лоремок в дизайне. Даже самый лучший копирайтер потеряет массу времени и сил на этот процесс. И не факт, что контент выиграет.
3. При обсуждении требований к проекту оба – и дизайнер и копирайтер, должны участвовать в каждой встрече с заинтересованной стороной.
4. Добейтесь совместного сотрудничества при разработке прототипа. Когда они делают свою работу вдвоем, результат может оказаться превосходящим все ожидания. Дизайнер рисует под выбранный текст, копирайтер автоматически формирует текст под дизайн. Это совсем не то, что изменение готовой идеи. Готовую мысль трудно изгнать из головы и следующие варианты будут так или иначе ее повторять. Работая совместно, дизайнер и копирайтер вместе придумывают какую информацию представить и как это сделать с точки зрения графики.
5. Не давайте команде разбежаться по углам до того, как спроектирована каждая типовая страница сайта. Не стоит останавливаться на главной.

Плохо когда дизайн подгоняется под контент или контент пишется под дизайн. Хорошо когда они разрабатываются одновременно.

Дизайн текстового контента

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

Правило 1. Дайте глазу зацепку

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

Правило 2. Контролируйте длину текста

Создаем удобную линию чтения. Линия зависит от размера шрифта и ширины колонки. Большой размер шрифта требует более широкой колонки. Считается, что ширина текста должна включать 45-75 символов для настольных компьютеров и 35-50 для мобильных устройств. Более длинная линия сделает чтение утомительным, посетитель начнет пропускать строки. Увеличение шрифта приведет к увеличению ширины. Имеет смысл контролировать размер символов для разных устройств. Это сделает дизайн отзывчивым.

Правило 3. Равновесие интервалов

Интерлиньяж или высота строки классически вычисляется по формуле размер шрифта* 1,48. Чаще берут значение 1,5. Отступы между параграфами должны отличаться от отступов между строками текста. Иными словами, абзацы должны выделяться. Это известно всем дизайнерам. Для расчета основных параметров текста на странице можно воспользоваться калькулятором – очень удобный сервис по подбору количества символов, высоты строки и шрифта.

Правило 4. Контроль пространства

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

Правило 5. Темп изложения

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

Правило 6. Разбавление текста

В копирайтинге используются заголовки, списки и абзацы. Дизайнер может добавить графики, диаграммы, фотографии, иллюстрации, CTA кнопки. Качественное изображение, вовремя предложенное для подкрепления контента, делает больше, чем хороший заголовок. Исследование Buzzsumo показало, что изображение на каждые 75-100 слов повышает интерес – пользователи чаще делятся ссылкой на такой ресурс в соцсетях. Не для каждой статьи имеет смысл так часто вставлять картинки – зависит от ее тематики. Тем не менее, вовремя представленная графика позволяет глазу отдохнуть, а мозгу чуть-чуть расслабиться. Это повышает интерес к информации, улучшает ее восприятие.

Правило 7. Повышенное внимание к навигации

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

Дизайн графического контента

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

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

Правило 1. Релевантность

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

Правило 2. Единый стиль

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

Правило 3. Качество

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

Правило 4. Инфографика

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

Правило 5. Диаграммы, графики и схемы

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

Правило 6. Экспериментируйте

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

Заключение

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

______________________________________________________________________

Материал создан агентством контент-маркетинга Текстотека.

Хотите самостоятельно внедрить контент-маркетинг в свой бизнес? Подписывайтесь на наше сообщество ВКонтакте, там много бесплатного обучающего материала.