7 советов как правильно оформить текстовый блок в шаблоне
В последнее время очень часто подмечаю, как часть подписчиков испытывает сложности при редактировании текста в шаблонах. Допускаются очень обидные ошибки, которые можно избежать, держа в голове ряд простых советов.
В связи с этим пришло время нам с Вами поговорить на тему оформления текста в шаблонах. Мы не будем касаться редактирования, тем более что соответствующий урок уже есть в группе. Речь пойдет об эстетической части, а именно: интервалы, отступы, расположение, иерархия и пр. Проще говоря, все то, что позволит сделать наш с Вами текст в шаблоне более четким, понятным и привлекательным.
Важно! В рамках данной статья я буду рассматривать лишь классические приемы форматирования текстовых блоков, которые обычно применяю в своих шаблонах.
Итак, поехали!
1. Хорошо обдумайте, что написать
Как бы это не звучало банально, самая большая и частая проблема, бросающаяся мне в глаза, это объем текста. Иногда складывается ощущение, что в шаблон постарались вместить вообще весь текст, который предназначался для поста. Причин этому масса – от благого намеренья дать пользователю всю необходимую информацию, до приказа начальства, которое, конечно же, знает как надо (не всегда).
Как правило, подобный прием приводит лишь к тому, что баннер выпадает из поля зрения пользователя, так как глаз не находит за что зацепиться в этом море текстовой каши. Помните, что баннер – это не журнал, его задача за считанные секунды задержать человека цепким, коротким и понятным посылом.
Так что же делать, если кажется, что написать то же самое короче невозможно? В первую очередь не паниковать раньше времени. Выпишите текст, который предназначен для баннера и методично вычеркните из него все не самое важное. Оставшийся кусок постарайтесь перефразировать так, чтобы смысл укладывался в еще более короткую конструкцию. Главное, держите под контролем Вашего внутреннего филолога, слова должны быть простыми и понятными превалирующей части целевой аудитории вашего ресурса.
2. Разделяйте текст на главный (цепляющий) и поясняющий. Иерархия
Благодаря предыдущему пункту мы подготовили текст, который отвечает всем необходимым запросам, а именно: он короткий, емкий и понятный, но этого все еще недостаточно. Теперь наша задача разделить его на главную (цепляющую) часть и поясняющую. Делается это с помощью разделения текста на заголовок и подзаголовок.
Для заголовка необходимо использовать бросающиеся в глаза шрифты, это либо жирные начертания классических шрифтов (Bold, ExtraBold, Black и т.д.), либо «дизайнерские» (под дизайнерскими понимаются любые нестандартные шрифты). С подзаголовком все проще. Как правило, это обычный шрифт, такой как Arial, Roboto, Lato или любой другой из стандартных с тонким начертанием (Regular, Light и иногда Medium).
Важно! Очень много ошибок совершается как раз на этом этапе, когда заголовок и подзаголовок делают одинаково жирным или тонким шрифтом/начертанием, тем самым делая текст нечитабельным.
3. Настройте межстрочные интервалы
После редактирования текста в шаблоне и изменения размера шрифта возникает новая проблема. Нарушаются межстрочные интервалы, которые ранее были настроены совершенно под другую компоновку текста. Конечно, это не самая страшная проблема, но с точки зрения эстетики огромный провал.
Данные интервалы настраиваются через окно «символ/character», чтобы открыть его, нажмите на вкладку «окно/window» и поставьте галочку напротив пункта «символ/character». В открывшемся окне необходимо отредактировать пункт (см. Рис. 1).
Важно! Прежде обязательно выделите редактируемый текст.
4. Обратите внимание на отступы
Очередная мелочь, которая способна утяжелить восприятие баннера, это несоблюдение отступов между текстом и прочими объектами на полотне (фото, декор, край баннера и т.д.) Тут особенно рассказывать нечего, достаточно стараться оставлять пространство с воздухом вокруг текста, и тогда все будет отлично!
5. Расположите текстовый блок правильно
К этому пункту у нас с Вами уже есть правильно сформированный текстовый блок. И тут в воздухе назревает резонный вопрос – «что еще с ним не так?». С текстом все ок! Теперь важно правильно его расположить. Часто встречаю, что текстовый блок уводят ниже или выше положенного, когда логичнее было бы его центрировать относительно отведенной зоны. Нельзя сказать, что это критичная ошибка, но мы же привыкли доводить дело до конца, поэтому все должно быть идеально.
Резонный вопрос №2 – «как понять, где эта самая отведенная зона?». И однозначного ответа здесь, к сожалению, нет. Чисто визуально, это зона, где Вы можете разместить текст на шаблоне. Советую обращать внимание на презентационные работы, в них я очень тщательно подхожу к размещению, поэтому это должно Вам помочь.
6. Выделяйте главное в главном
Еще один отличный прием подчеркнуть важную мысль в заголовке – это выделить ее цветом. Главное, не переборщить, в противном случае может получиться обратный эффект. И уж точно не стоит делать текст разноцветным, во-первых, это не дает нужного эффекта (текст не становится заметнее, а из-за примеси разных цветов воспринимается крайне сложно), во-вторых, эстетически такой текст будет сильно проигрывать.
Кстати, подчеркнуть цветом можно не только перекрашивая часть заголовка. В одной из своих работ я продемонстрировал, как можно выделить заголовок раскрасив подзаголовок в более приглушенный оттенок. (см. Рис.2)
7. Учитесь подбирать шрифты самостоятельно
Как Вы успели заметить, я давненько перестал публиковать шрифты, которые использую в работе. Сделано это осознанно, чтобы Вы самостоятельно занимались подбором конкретно под Ваши нужды. Бесплатные шрифты Вы можете найти и скачать здесь.
Самое большое заблуждение, с которым я сталкивался и сталкиваюсь, что шаблон разработан исключительно под определенный шрифт, и использовать любой другой крайне нежелательно, так вот, это полнейшая чушь. Любая другая шрифтовая пара не только способна преобразить общий вид шаблона, но и вдохнуть в него душу Вашего проекта, которой ранее не было заложено автором.
И тут как я люблю, сходу вопрос из зала – «а как же собственно подбирать эти пары?». Проще простого! Возвращаемся к пункту 2, если Вы вдруг его пропустили, и перечитываем второй абзац.
Важно! Шрифтовая пара может состоять как из двух разных шрифтов, так и из одного и того же, во втором случае будет меняться только начертание (Regular, Light, Bold, ExtraBold, Black) и размер.
На этом, пожалуй, закончим. Спасибо за внимание, дорогие друзья. Надеюсь, что представленный материал будет очень полезен, и Вы обязательно примените полученные знания на практике. Не забывайте делиться Вашими работами в комментариях к шаблонам, это позволяет не только поддержать сообщество активностью, но и помогает понять, какие темы требуют освещения, чтобы Ваши результаты становились только лучше и лучше.