Текст – основа любой информационной страницы. И выбросить его никак нельзя, особенно если там важные сведения о продукте. Но и простыни неструктурированной писанины тоже оставлять непростительно. Поэтому нужно уметь обыграть буквы так, чтобы текст выполнял свою функцию, при этом смотрелся интересно, привлекал внимание и удерживал его.
Вроде бы уже давно маркетологи отошли от стандартных seo-текстов, которые размещаются на странице только ради ключевых слов. Но все равно такое еще можно встретить на некоторых сайтах. Смотрится ужасно. Но пренебрегать таким продвижением тоже не стоит. Просто нужно превращать даже такие блоки в нечто интересное. А уж тем более информацию на главной странице.
Тебе не нужно это объяснять – не обязательно быть дизайнером или маркетологом, чтобы знать, что большие куски текста малочитабельны. Это очевидно даже рядовому пользователю. Сайт – это не книга и не заметка. Тут должна присутствовать структура.
Даже удачный текст будет бесполезным, если не оформить его как следует. И только дизайнер сможет сделать это хорошо. Как? Вот несколько способов.
1. Разделяй все, что можно разделить
Вообще-то это задача копирайтера, маркетолога или прототиполога – выделить блоки и расставить все по полочкам. Но реальность такова, что чаще эту роль вешают на веб-дизайнера. Тебе дан текст. Попробуй сделать из него логические блоки, раздели их визуально – картинками, рамками, фоном. Выдели отдельные фразы другим шрифтом или оформи в виде заметки или плашки, если это уместно.
Если из одного куска текста нельзя сделать разные однотипные блоки, то делить его стоит хотя бы на абзацы. Все, что длиннее 5 строк уже выглядит как много букв и человек не хочет это читать, откладывая на потом. И если там важная информация, то не стоит позволять читателю пропускать ее. А если не важная, то зачем она вообще нужна? Или выбрось, или скрой под значком дропдауна.
2. Добавь графические элементы
Добавь к обычному тексту несколько остроумных элементов с интеграцией продукта или элементов корпоративного стиля. Это чаще уместно в заголовках, но иногда можно и в стандартный текст добавить какую-то интересную деталь. Такие вставки сделают идею более яркой и запоминающейся, а также повысят мотивацию к прочтению.
Если есть место эмодзи – вполне возможно, это будет самый простой способ разбавить текст и немного его оживить.
3. Внедри интерактивные детали
Игровые анимации, микровзаимодействия и интерактивные элементы также помогут захватить внимание читателя и заставить его погрузиться в текст. Если есть ссылки – отлично. Если можно добавить пасхалку при наведении на слово или блок, то это будет увлекательно и необычно. Можно просто сделать живой фон, но только в том случае, если он не будет отвлекать от важной информации. Помни, что люди любят играться с интерактивными элементами, сайт должен откликаться и предлагать интересные взаимодействия.
4. Попробуй анимировать шрифты
Кинетическая типографика - довольно нетипичный инструмент, с которым надо уметь обращаться. Но это уже привычная вещь для Stories, поэтому люди не пугаются и воспринимают движение в тексте хорошо. Это отлично работает для коротких заголовков, для длинных бегущих строк. Прием используется для раскрытия мыслей и эмоций автора или для того, чтобы произвести впечатление на читателя. И так статичная страница сразу станет живее. А текст более видимым – ведь иногда мелкая строчка не привлекает внимание, но если она шевелится, то невольно хочется посмотреть, что же там написано.
5. Используй 3D-шрифты
3D-шрифты помогут создать пухлые и сочные заголовки, которые будут действовать на читателя как магнит. Такие формы также могут придать тексту больше энергии. Но следует помнить, что перегруженность объемными шрифтами будет разбивать целостность дизайна. Здесь очень важен баланс и мера. Иначе ты рискуешь затруднить понимание текста для пользователя и отвлечь его от общего посыла.
6. Выделяй эмоцию
В зависимости от содержания постарайся усилить эффект от текста визуальным сопровождением. Тебе нужно подобрать правильное выделение, фон, шрифт и эффекты.
Добавь в дизайн конкретного блока больше драматизма или позитива. Сделай упор на основную мысль. И вместо скучной корпоративной писанины ты получишь эмоциональный посыл, который не оставит читателя равнодушным.
7. Придумай свой шрифт
Смелая и необычная типографика всегда привлекает внимание. Придумать свой шрифт нелегко, это работа специалистов, которые посвятили не один год профильному образованию, практике, погружению в историю искусства и изучению тенденций. Но немного видоизменить заголовок в своем индивидуальном стиле ты можешь. Обыграй в буквах особенности сферы деятельности сайта. Добавь что-то интересное. Не бойся экспериментов, ведь только оригинальность поможет выделиться среди конкурентов.
Персонализируй шрифт – добавь фирменные фишки из брендбука, может часть лого или маскота. Важное условие заключается в том, чтобы такие детали не испортили общую читабельность шрифта и при этом оставались понятными и выразительными.
8. Наши любимые иконки
Есть какой-то список, перечисление или просто однородные детали, которые можно поставить в ряд? Действуй. Не надо писать слова в столбик и тем более в строчку, если можно выделить их иконками. Это смотрится красиво и аккуратно, это всегда стильно, а главное – читается намного легче, чем в тексте. И так твой пользователь не упустит главное.
Непосредственно иконки – это отдельный вид искусства. Важно грамотно подобрать их под каждый пункт, чтобы символ отображал суть посыла даже без разъяснения. Ты можешь создать свой неповторимый сет иконок под конкретный проект – это будет очень круто. Или же взять готовые паки, благо, их сейчас достаточно много даже бесплатных.
Мы писали большой обзор на роль иконок в веб-дизайне и сервисы с бесплатными иконками ранее. Если кратко, то вот несколько таких ресурсов:
Если в проекте можно сделать несколько блоков с перечислениями, то сразу ищи большие сеты иконок. Они могут быть выполнены с отличиями – где-то более детализированные для крупной картинки, где-то лаконичные и мелкие. Но не стоит сильно отходить от стиля в рамках сайта, пользователь должен видеть ожидаемый контент, согласованный и стильный. Не забывай, что иконки будут также в стандартных местах – контактах, корзине, кнопках. Если уж берешь один пак, то используй его и там тоже.
9. Добавь иллюстрации
Даже самая скучная инструкция по применению продукта может стать увлекательным чтивом, если остроумно и небанально проиллюстрировать ее. Это могут быть как простые скетчи, так и полноценные рисунки с деталями. Главное, чтобы это было в тему текста, а не просто так. А если уместен юмор – то вообще прекрасно.
Подробно про иллюстрации и стоки с бесплатными рисунками смотри в отдельном материале.
10. Не переусердствуй и знай меру
Прежде чем химичить над текстами, необходимо запомнить несколько непреложных правил:
- веб-дизайн должен быть ясным и понятным – значит, лучше не использовать много стратегий на одной странице. Помни, что тебе нужно облегчить понимание текста, а не просто “сделать красиво”. Поэтому внедряй вышеперечисленные советы там, где это уместно и поможет сделать сайт проще для восприятия, а не наоборот.
- не заходи слишком далеко – иногда текст должен оставаться просто текстом. Не стоит усложнять картину там, где это не нужно. Это может касаться описаний, технических характеристик или юридически необходимых заметок в коммерции. Тут уже оставь все как есть.
- делай выбор – ты не можешь ставить акцент на каждом блоке. И визуальных эффектов бывает слишком много. Поэтому важно создать иерархию и определиться, какие детали ты выделяешь, а какие оставишь более скучными.
Короче говоря – надо вникать в тему, чтобы мастерски обыграть ее. И тут пригодятся все твои знания о типографике, UX/UI, психологии цвета, основах композиции и дизайн-мышлении. Если еще не шаришь, то мы научим. Открыт набор на новый поток онлайн-курса «UX/UI легенда» – там все это будет! Ждем.