Красивое оформление текста и постов для сайта: требования

Контент-маркетинг

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

Обязательно обсудим важные правила оформления. Также покажу, как нужно работать с заголовками и подзаголовками. Научу вас работать со шрифтами, абзацами и акцентами в тексте.

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

Красивое и правильное оформление текста и статьи в онлайн

Почему важно использовать правильное оформление текста

Потому что, несмотря на смысл текста, люди на него сначала смотрят, а только потом начинают читать.

Чем полезно правильное оформление текста для сайтов и блогов

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

Если там что-то раздражает, то мы все равно закроем такой сайт. И даже самый полезный контент в этом деле нас не удержит.

Понятно, что только одно оформление текста не гарантирует, что контент будет прочитан. Нужно понимать, что оформление идет рука об руку со смыслом.

Можно написать классный текст и никак его не оформить. В таком случае, этот материал прочтут только преданные читатели.

А если текст оформлен классно, но со смыслом проблема, то можно потерять репутацию. Поэтому одно оформление вас точно не спасет.

Все идет в тандеме!

Одна сторона, это смысл, а другая — оформление. Когда все накладывается друг на друга, то получается хороший текст.

Есть еще и третья сторона!

Это SEO и SMM продвижение. Будет недостаточно просто опубликовать материал на сайте. Еще важно чтобы люди смогли легко найти этот контент в интернете.

Иначе толку не будет!

Как видите, сторон много. Однако здесь мы будем рассматривать именно оформление текста онлайн. Ниже можно увидеть текст для лэндинга.

Пример оформления продающего текста для лендинга

Это не готовая верстка. Это просто оформленный текст в документе. Копирайтер сдает его в таком формате оформления.

А теперь представьте, что, если бы это написано сплошным полотном текста. В таком случае, такой контент не передаст читателю нужные эмоции.

4 главных стандарта любого текста

В основе оформления текстов лежат четыре стандарта.

Удобство

  • притягательный заголовок
  • хорошее форматирование
  • подзаголовки и яркий финал

Информативность

  • полезные факты и инструкции
  • минимум воды
  • работать не за знаки, а на совесть

Гармония

  • аккуратность с акцентами
  • схемы и иллюстрации
  • осторожность с цветом и шрифтами

Решение поставленной задачи

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

Что такое удобный текст? Это значит, что его комфортно визуально воспринимать. Посмотрите на пример ниже.

Пример плохого текста для сайта

Согласитесь, что такой текст не хочется читать. Его хочется быстрей закрыть.

Текст еще должен быть гармоничным.

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

Пример негармоничного текста статьи на сайте
Все написано курсивом и в разном цвете

Как видите, это уже не гармония.

Возможно, что это стало немного удобно, когда массив текста разбили на абзацы. Однако проще воспринимать контент не стало.

Более того, стало еще хуже!

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

Вот еще один плохой пример. Здесь на черном фоне очень много текста.

Пример отображения текста на черном фоне онлайн страницы сайта

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

Но это работает, если основной фон белый, а шрифт темно-серый. Однако если весь сайт идет в данном формате, то такой текст читать очень трудно.

Красивое и правильное оформление текста постов для сайта

Теперь переходим к пошаговой инструкции. Она поможет вам сделать красивое и при этом правильное оформление текста в онлайн. Причем делать удобно и гармонично.

Красивое оформление текста для сайта онлайн

Эти советы можно использовать в статьях для сайтов и блогов. Также хорошо работает и для социальных сетей. Например, оформление постов в Инстаграм, ВК, Facebook или Телеграмм.

Для этого нужно пройти пять основных шагов. Ниже мы их рассмотрим более подробно.

Шаг 1. Облегчаем основной текст статьи на сайте и блоге

В этом шаге будем делать все, что сможет облегчить текст.

Подбираем подходящий шрифт

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

Для текстов в интернете используют шрифты без засечек. К примеру, Arial или Verdana.

Шрифт, который часто стоит в документах по умолчанию, это Times New Roman. Однако для интернета он не подходит!

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

В онлайн такие засечки раздражают!

В Times New Roman засечки выполнены в виде дополнительных палочек на буквах. Они как бы впечатывают букву в лист. Поэтому такой шрифт хорошо подходит в печати.

А в онлайн за счет этих засечек меняется толщина букв. Также сами засечки очень тонкие. В результате, глаза за монитором устают намного быстрее.

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

Однако шрифт с засечками в онлайн можно использовать посредственно. Например, для заголовков и подзаголовков. Так можно четко обозначить определенные элементы в тексте.

Не используем красную строку для электронных текстов

Красная строка — это когда делаем отбивку абзаца. Но это только хорошо для оффлайн. Для онлайн такое начертание не подходит.

Чем плоха красная строка для онлайн текста

Получается, что мало воздуха!

Становится слишком плотно и тяжело для восприятия. В результате, сильно устают глаза.

Поэтому в онлайн отбиваем новую строку отступом между абзацами, а не первой строки. То есть все строчки начинают в одном месте.

Как правильно отделять абзацы в тексте

Сами абзацы можно отделять по-разному. Например, разделять пустой строкой. То есть написали абзац, спустили на новую строку и еще раз спустили. В итоге, сделали отбивку одной строкой.

Отделение абзацев в тексте с помощью пустой строки
Пустая строка

Есть еще отделение интервалами.

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

Зачем отделять абзацы?

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

Что использовать — пустую строку или отступ интервалов?

Все зависит от того, куда пишите. Для начала нужно узнать, какая будет верстка у сайта.

Допустим, мы пишем в социальные сети. Там поставили интервал между абзацами. То есть в настройках сделали только отступ вначале.

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

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

Однако если пишем для сайта с определенной версткой, то может быть совсем иначе.

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

Поэтому рекомендую делать пустую строку.

Но все же нужно разговаривать с клиентом сайта. Потому что иногда актуально поставить именно отступ между абзацами.

Интервалы

Интервал — это отступ между строками. Если поставите полуторный интервал, то между всеми строчками будет одинаковый размер.

Но нам нужно, чтобы строки были вместе, а между абзацами был отступ. Отступ ставится перед абзацем.

Если абзацев и интервалов нет, то это плохо!

Такой текст тяжело читать. Если текст сделать сплошным куском, то его будет тяжело воспринимать.

Пример маркированного списка без абзацев и интервалов
Без абзацев и интервалов

А вот еще плохой пример с полуторным интервалом.

Пример разделения абзацев текста с полуторным интервалом
Полуторный интервал

Здесь расстояние между строчками одинаково. Это тоже плохо потому что не отделяет абзацы друг от друга.

Причем полуторный интервал, это довольно много. Иногда люди не любят одинарный интервал и ставят 1.2 или 1.3.

Но это уже нюансы верстки страницы сайта. Главное, что вы должны отбить абзацы.

Если есть отступ перед абзацем, то это хорошо.

Пример оформления текста с отступом перед абзацем
Есть отступ перед абзацем

Посмотрите, здесь есть небольшой отступ перед абзацем.

Его даже можно сделать немного больше. Видно, что эти строчки идут плотнее, а перед ними имеется небольшой промежуток.

А вот хороший пример. Здесь идет отбивка пустой строкой. Как видно, она визуально понятнее.

Пример отбивки абзацев текста с помощью пустой строки
Отбивка пустой строкой

Здесь четко видны разные группы мысли. Такой текст удобно читать.

Почему текст нельзя выравнивать по ширине

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

Пример выравнивания онлайн текста по ширине и по левому краю
Выравнивание текста по ширине и по левому краю

В печатном деле переносы используются.

Однако в онлайн от них отказались. Потому что теряется динамика и ритмичность текста. Если наберутся длинные слова, то между ними получатся очень длинные промежутки.

В итоге, теряется мысль и быстро устают глаза.

Если мы делаем выравнивание по левому краю, то разница между словами будет везде одинаковой.

А вот если бы в online делали переносы, то можно было использовать выравнивание по ширине. Однако тут переносы не делаем потому что это лишние знаки препинания. А ведь любой такой знак тормозит и создает паузу.

Не говорю, что нужно совсем избавляться от таких знаков. Просто в некоторых случаях есть свои исключения. Переносы, как раз к ним и относятся.

Используем небольшие абзацы

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

А так небольшие абзацы легче проглатываются. Многие классики писали большими абзацами. Но не забываем, что мы пишем в online. Поэтому тут абзац на весь экран воспринимается тяжело.

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

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

Шаблон использования небольших абзацев в тексте

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

В итоге, пользователь постепенно начинает втягиваться в текст. А когда перед ним сразу пять огромных абзацев по 10 строк, то он подумает — читать их или нет.

Также маленькие абзацы не так отдают на глаза. Поэтому они легко воспринимаются.

Еще разумно чередовать большие и маленькие абзацы. Избегайте монотонности. На примере ниже абзацы монотонно одинаковые.

Пример использования больших и монотонных абзацев в тексте
Большие и монотонные абзацы

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

Пример текста с сочетанием больших и маленьких абзацев

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

Допустим, получается так, что идут три абзаца подряд по пять строк. Тогда сделайте до и после них короткие предложения.

Это будут слова-связки.

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

Облегчаем предложения в тексте статьи

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

Что значит облегчить предложение?

Если можно сложносочиненное предложение разбить на две части, то сделайте это. Такую разбивку можно сделать в 90% случаях.

Еще можете использовать деепричастные обороты. Но с причастными оборотами нужно быть аккуратнее. Их лучше не использовать. Если и использовать, то в малом количестве.

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

Нет!

Длинные предложения тоже имеют право на существование. Но вы можете писать коротко. Или можно делать предложения подлиннее, добавляя какие-то нюансы.

А иногда можете писать длинные предложения.

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

В общем, можно использовать как короткие, так средние и длинные предложения. Все это имеет место быть, когда идет чередование.

И постарайтесь не использовать страдательный залог. Например, «газета была напечатана». Нужно говорить в активном залоге. Например, «мы печатаем газету».

Страдательный залог тяжело воспринимается. Даже в книгах его стараются мало использовать
.

Нужно облегчать предложения. Так читать намного проще и интереснее.

А еще это добавляет удивительную динамику в текст. Когда берем короткие слова и из них делаем предложения, то это иначе читается. Человек проявляет интерес и ему хочется читать дальше.

И хотя знаков препинания в тексте должно быть поменьше, но тем не менее. Это как раз тот нюанс, когда отдельные предложения добавляют динамику.

Ниже можно увидеть пример неправильного формата.

Пример слишком длинного предложения в статье сайта
Это все одно предложение

Такой текст не подойдет!

Его трудно понять. Пока прочитаешь предложение до конца, забудешь, что было вначале.

Ниже можно увидеть правильный пример.

Пример гармоничного текста с небольшими предложениями

Тут видно, что предложения небольшие.

Для простоты еще можно использовать дополнительные знаки препинания. Например, тире. Оно добавляет воздух и продолжает мысль.

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

Пример использования стрелочек в тексте статьи на сайте
Стрелочки в тексте

Шаг 2. Правила оформления заголовков и подзаголовков к тексту

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

Как правильно оформлять заголовки и подзаголовки в тексте для сайтов и блогов

Как нужно оформлять заголовок первого уровня

У любого текста должен быть заголовок. Даже если это будет простое письмо. Если говорить про верстку, то это заголовки 1 — 6 уровня.

Уровни заголовков в тексте на сайте

h1 (заголовок 1) — это главный и единственный заголовок текста. Всех остальных подзаголовков в тексте может быть несколько.

Из подзаголовков обычно встречаются второго и третьего уровня. Реже 4 — 6 уровней.

Заголовок первого уровня информирует о содержании текста. Стоит сказать, что заголовок — это не тема, а отражение темы.

Допустим, нужно написать про то, как провести отпуск на Кипре с ребенком.

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

Если это отзыв, то будет: «Как я отдыхал с детьми на Кипре».

Это также может быть инструкция. Тогда будет: «Как организовать отдых с ребенком на Кипре — Пошаговая инструкция».

В общем, одна тема может выйти в несколько разных текстов с разными заголовками и содержанием.

Заголовок вовлекает в чтение. Потому что он обычно цепляет какой-то важный момент в жизни читателя.

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

Я мог даже и не думать про Кипр. Но сам факт, что я путешествую и у меня есть ребенок, может побудить меня прочитать статью.

Хорошо сформированный заголовок в разы повышает прочитываемость. Если цепляется что-то в эмоциях человека, то такой элемент хорошо вовлекает в чтение.

Итак, заголовок первого уровня должен присутствовать всегда и только в единственном виде.

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

Ниже можно увидеть размеры заголовков. Первый уровень должен быть всегда крупным. Это самая крупная часть текста.

Пример заголовков в тексте с разным размером

На примере выше обратите внимание на разницу в размерах текста. Она существенная. Основной текст ниже 14 кегля делать нельзя. Иначе его невозможно прочитать.

Центральный заголовок при желании можно выделять жирным начертанием. Но все зависит от верстки сайта.

Оформляем подзаголовки более низкого уровня в тексте

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

Есть основной шрифт размером 16. Заголовок следующего уровня (третьего) будет над ним. Его нужно сделать на два размера больше. Делаем 20. Или можно сделать 18, но с жирным начертанием.

Следующий подзаголовок второго уровня должен быть еще больше.

Поэтому не может быть весь текст написан 16 уровнем. Так читатель никогда в жизни не догадается, где заголовки и подзаголовки.

Почему мы делаем разными размерами?

Тут дело не только в удобстве. Ниже в примере показан заголовок третьего уровня. Это кусок текста в середине.

Заголовок и подзаголовки второго и третьего уровня в тексте статьи

В самом верху показан заголовок второго уровня. А ниже уже идут третьего уровня. Последние еще меньше по размеру, чем второй уровень.

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

Их нужно вставлять гармонично!

Вы не можете весь текст сделать крючками. Поэтому делаем какие-то основные мысли чтобы человек смог что-то выделить для себя. Он должен за что-то зацепиться и продолжить читать.

Даже если человек будет читать с середины текста — неважно! Главное, чтобы он читал. Если его зацепит середина, то он все-равно, вернется к началу материала.

Сколько должно быть подзаголовков в тексте статьи онлайн

Подзаголовки тоже показывают структуру статьи. Поэтому они активно используются читателями. В массиве текста могут быть подзаголовки третьего и четвертого уровня.

Но как минимум, рекомендую делать один подзаголовок на каждые 800 — 1000 знаков текста с пробелами. Иначе будет слишком крупно.

В примере ниже тяжело читать статью.

Пример плохого и неудобного текста без использования подзаголовков
Текст без подзаголовков

Тут не за что зацепиться!

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

А вот ниже правильный пример.

Пример правильного и удобного текста с подзаголовками на сайте
Текст с подзаголовками

По сути, это те же предложения. Мы их просто выделили, усилили и сделали из них подзаголовки. Как видите, текст сразу воспринимается иначе.

Точки в конце заголовков не ставим

Ниже примеры заголовков.

Примеры заголовков с разными знаками препинания

Обратите внимание, что в первой части заголовка можно ставить точку. Также может присутствовать запятая. Однако в конце точки нет.

Подзаголовки можно получить из текста статьи или поста

Таким способом можно выделить важные мысли.

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

Пусть это будет подзаголовком.

Должны присутствовать опорные моменты

Важно, чтобы подзаголовки отражали опорные моменты статьи или основные мысли.

Если это продающий текст, то в подзаголовках должны присутствовать главные вопросы и возражения клиентов.

Заголовки для мастер-класса:

  • Что будет на мастер-классе
  • Кто автор
  • Какие результаты вы получите
  • Варианты оплаты
  • Ваши вопросы
  • Что делать дальше
  • Формат участия.

В общем, тут идут названия основных возражений клиентов в продающем тексте.

Со статьями немного сложнее.

Тут нужно повозиться с заголовками. Хорошо если это будет пошаговая инструкция или советы. Тогда у каждого заголовка будет название совета.

Шаг 3. Используем связки и акценты при оформлении текста

Теперь начинаем добавлять связки и акценты. Ниже, расскажу, что это такое и почему полезно использовать в тексте.

Что такое слова связки и зачем они нужны в тексте

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

Отличие текста, который легко читается от обычного резюме, это то, что материал должен легко читаться. Он должен перетекать.

Это не значит, что мы в него наливаем воды по смыслу. Смысл здесь есть. Ниже можно увидеть примеры.

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

Это те слова, которые главред советует убирать. Однако в SEO они должны использоваться. Потому что это показатель того, что говорит живой человек. Это делает речь живой.

Зачем нужны слова-связки?

Они помогают устранить провалы в логике. Вообще, тексты нужно читать вслух. Так можно услышать повторы и затем убрать ненужные слова.

К примеру, люди часто пишут много дополнительных слов. Например, «ваши тексты», «мои мысли» и так далее. Получается много мусорных местоимений.

А когда перечитываете текст, то видите, где можно убрать эти «ваши», «мои» и «свои», когда и так понятно, про чьи.

Когда читаете, то можете услышать, что текст на каком-то моменте стопорится. То есть не имеет перехода.

Тогда открыли список фраз-связок, взяли что-то, добавили и текст зазвучал. Он зажурчал и потек дальше.

Таким образом, текст получается более цельным, плавным и свободным. Читается легко потому что предложения перетекают из одного в другое. А перетекают не только словами и фразами, но и знаками.

Стрелочка заставляет двигаться дальше. Тире заставляет скользить по мысли. Точка, запятая и точка с запятой останавливают.

В примере ниже красным подчеркнуты слова-связки.

Пример использования слов-связок в тексте статьи на сайте

Используйте их в большом количестве. Это задает стиль и заставляет тексты читать.

Такой контент легко заходит!

Некоторые пишут короткими фразами, но они звучат рублено. Однако если подключить связки, то эти рубленные фразы звучат плавно.

Запомните!
Вода в тексте относится не к словам связкам, а к тому, какую информацию вы там даете. Насколько она соответствует теме. Насколько даете фактов.

Факты и цифры нужно давать, используя слова связки. Так они будут легко прочитаны.

Зачем использовать стили оформления текста: акцент шрифтом

В тексте тоже нужно использовать много акцентов.

Почему полезно использовать различные стили оформления текста

Курсив нужен для создания интонации.

Например, — «А именно сейчас мы с вами обратим внимание.» Здесь слово «сейчас» выделяем курсивом. Это значит, что идет как бы ударение на это слово.

Жирное начертание необходимо для выделения чего-то важного. Это могут быть подзаголовки или какие-то мысли.

Или это может быть ключевая мысль. Нужно чтобы человек обратил внимание и прочитал все, что окружает эти несколько слов.

Жирным начертанием не злоупотребляем при оформлении шрифта текста. Максимум, несколько слов. А жирный курсив вообще, только для очень важных слов.

ЗАГЛАВНЫЕ БУКВЫ подойдут для точечного воздействия. Используются редко. В соцсетях их можно использовать в виде подзаголовков.

Ниже плохой пример.

Пример текста с серым и невидимым на первый взгляд подзаголовком
Невидимый подзаголовок

Тут текст разделен на абзацы. Есть подзаголовок, но он серый. Поэтому здесь не за что зацепиться.

Также неправильно, когда весь текст сделан курсивом.

Пример неправильного использования курсива в тексте статьи

Вообще, курсив читать сложно!

Это рукописный текст. А если добавить красивые завитушки для оформления текста, то такой пост будет еще сложнее читать.

Будет правильно, когда используете некоторые идеи, выделенным жирным.

Пример использования акцентов шрифтом в тексте статьи на сайте

Лучше выделить отдельное какое-то слово, которое несет нужную нагрузку, чем всю фразу. Это важно для эстетичного оформления текста.

Обратите внимание!
Тут еще один акцент сделан в виде заглавных букв. Это — «Никогда не возвращаются в офис.»

Его можно было сделать жирным. Но в данном примере жирного и так достаточно. Поэтому использовали другой акцент.

А почему нельзя использовать большие буквы в огромном количестве?

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

При работе с акцентами, главное, не перестараться!

Когда люди начинают работать с акцентами, то получается, как на примере ниже.

Плохой пример продающего текста с большим количеством акцентов
Много акцентов в тексте

Получается, что тут все важно!

Поэтому автор решил делать акцент чуть ли не в каждом предложении. Еще и текст по центру сделал, потому что это важно.

В итоге, получилось такое безобразие! Читать текст не хочется, потому что тут слишком много на что стоит обратить внимание.

Делаем акценты цветом в тексте поста

Основной цвет текста — темно-серый. А почему не черный?

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

Однако ни в коем случае не делайте его светло-серым!

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

Почему?

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

Получится разноцветная петрушка.

Ниже на правильном примере есть основной цвет шрифта — темно-серый.

Примеры использования акцентов шрифтом и цветом в тексте

Есть акценты в тексте. Жирное начертание смотрится ярко. Есть подзаголовок с отдельным цветом.

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

Как видим, тут еще используется дополнительный цвет для акцента. Этого достаточно!

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

А вот неправильный пример. Тут видно, что автор перестарался с оформлением текста.

Пример очень плохого оформления текста на сайте

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

Красивые линии и акценты версткой для оформления текста

Есть еще дополнительные акценты, которые рекомендую использовать в тексте. Главные мысли можно взять в красивые рамки для оформления текста. Или просто сделать на другом фоне.

Также можно отделять линиями.

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

Оформление статьи с применением фоновой картинки с белым текстом в виде акцента

Еще можно отделять текст специальными линиями. Так тоже можно оформлять главную мысль.

Пример использования красивых красных линий для оформления текста онлайн
Красивые линии для оформления текста

Цвет линий можно делать в тон подзаголовков. И не обязательно на всю ширину контента. Можно делать и короткие линии.

Вот еще один пример интересного оформления текста. Посмотрите, как красиво выполнено в рамке и на сером фоне.

Пример интересного оформления текста в ненавязчивой рамке

Правильное оформление цитаты в тексте статьи — примеры

Цитаты тоже используем и акцентируем в тексте. Их должно быть видно. Они добавляют живости. Также используем их для убеждения.

Цитаты иллюстрирую и разбавляют текст.

Их можно оформлять в простой рамке. Еще можно делать горизонтальными и вертикальными полосками.

Пример красивого оформления цитаты в тексте статьи
Оформление цитаты в тексте

А вот так можно оформить цитату в виде отзыва. Слева фото человека, а справа сам отзыв.

Пример красивого оформления цитаты в виде отзыва с аватаркой
Отзыв

Обратите внимание в оформлении цитаты, если это отзыв.

Для каждого отзыва делаем свой уникальный заголовок. В тексте выделяем ключевую мысль и берем ее в заголовок.

Как собирать продающие отзывы

Эти советы помогут вам с легкостью собирать большое количество продающих отзывов от покупателей и клиентов.

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

А вот неправильный пример. Не нужно оформлять цитаты курсивом. Потому что читать это довольно сложно.

Плохой пример оформления цитаты курсивом в тексте

Оформление текстов курсивом допускается только тогда, когда присутствует небольшая цитата в одну или две строчки.

Шаг 4. Правильное оформление списков, схем и таблиц в тексте

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

Как нужно правильно оформлять списки с таблицами и схемами в тексте

Такой элемент хорошо переключает внимание.

Правила оформления списков в тексте на сайте

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

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

Потому, что они:

  • переключают внимание
  • повышают читабельность
  • визуально украшают текст
  • акцентируют выгоды в продающих текстах.

Как видите, списком текст смотрится довольно удобно и наглядно.

Но есть нюанс!

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

Единственное, в самом конце нужно ставить точку, потому что это конец предложения.

Точки (маркеры) в списке — это буллиты. Они могут быть в виде точек, квадратов или галочек.

Ниже идет оформление буллитного списка без всяких заморочек. Маркеры идут в виде точек.

Простое оформление буллитного списка с маркерами в виде точек

А вот список из продающего текста.

Оформление маркированного списка текста в виде хороших и плохих эмоций
Маркированный список с плюсами и минусами

Это маркированный список, который несет эмоцию. Он показывает, что в левой части негатив, а в правой позитив.

Еще один интересный пример крутого оформления текста. Здесь идет список с иконками.

Оформление маркированного списка текста в виде иконок

Тут показаны выгоды.

Обратите внимание, что первое слово выполнено большим жирным начертанием. Далее идет описание. Однако все это сделано не отдельно, а единым предложением. В конце ставится точка.

Вот пример списка.

Буллитный список с разными маркерами

Обратите внимание, что идут одни буллиты, а в последнем выглядит маркер по-другому. Потому что предыдущие были основные пункты по содержанию. А последний выполнен отдельно в виде итога или дополнительного преимущества.

Поэтому даже разными буллитами можно делать акценты и давать дополнительный смысл.

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

Вот еще пример оформления списком. Сверху идет основная идея буллита, а ниже описание.

Оформление нумерованного списка разными выделениями

Ниже нумерованный список, который оформили в колонках. Его тоже удобно читать.

Оформление нумерованного списка в виде трех колонок

Вот еще один пример. Здесь первые слова идут жирным, а дальше пояснение обычным шрифтом.

Маркированный список с выделенными жирным идеями

Тоже рекомендую так делать. Так можно выделить основные идеи, которые не дадут человеку запутаться.

Вот еще интересный список, который оформлен в колоночном варианте оформления текста. Смотрится необычно и хорошо привлекает внимание.

Красивый пошаговый список в колоночном виде со стрелочками

Вот плохой пример списка с избытком.

Плохой пример маркированного списка с иконками и жирной заливкой текста

Лишняя заливка тут не уместна.

Таблицы

Бывает так, что когда идет много списков, то это начинает напрягать.

Тогда некоторые списки нужно трансформировать в таблицы. Они тоже хороши для понимания. Показывают структуру и помогают с выбором.

В примере ниже ранее был список. Однако потом его оформили таблицей.

Красивое оформление таблицы с преимуществами и резальтатами

Оформлено красиво, понятно и структурно.

Еще один образец оформления статьи. Тут тоже списки.

Оформление таблицы с иконками и цветным выделением блоками

Все эти списки, которые могли бы просто идти друг за другом, были собраны в таблицу. Добавили форматирование и цветовых акцентов.

В итоге, появился тот элемент, на который хочется обратить внимание.

Схемы и графики с примерами

Некоторые списки можно легко трансформировать в схемы и графики. Схемы показывают уровень профессионализма. Это большой плюс в оформлении статей.

Пример компактного оформления текста в виде схемы в информационной статье сайта

Видно, что схема на примере заменяет сразу три списка подряд. Все компактно стало вокруг одного главного слова.

Также никто вам не запрещает преобразовать список в виде майнд карты. Сделать этом можно в различных программах и сервисах.

Пример оформления текста в виде майнд-карты

Вот еще один хороший шаблон для оформления текста.

Оформление текста в виде схемы с нужными и ненужными моментами

Тут схема. В ней перечислены, какие задачи подходят, а какие нет.

А вот плохой пример, когда дизайнер старался сделать очень красиво.

Красивое и неудобное оформление текста на сайте

Тут много курсива. Белый шрифт не очень хорошо сочетается. Также очень много жирного начертания. И к тому же все по центру.

В общем, дизайнер сделал так, как ему удобною.

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

Шаг 5. Берем иллюстрации и картинки для оформления текста

Изображения создают настроение и разбавляют текст. Также они облегчают восприятие и хорошо сочетаются с другими элементами контента.

Как правильно использовать иллюстрации и картинки для оформления текста на сайте

Иллюстрации — это не просто фотография. Это может быть какая-то схема или зарисовки.

Где брать картинки?

Можно найти и купить на специальных фотостоках. Есть как платные, так и бесплатные.

Можно еще сделать самому.

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

Еще можно вытащить из поиска. Но тут нужно быть внимательным! Хоть это и открытые источники, не факт, что все картинки разрешены для использования.

Поэтому, когда будете искать картинку в поиске, обращайте внимание на количество результатов по ней. Смотрите, насколько часто эта картинка распространена на сайтах.

Чем больше, тем лучше!

Если картинка распространена повсеместно, то скорее всего никаких проблем с этим изображением не будет.

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

Еще можно нарисовать от руки.

Некоторые люди рисуют иллюстрации сами. Также существуют специальные сервисы для рисования. Или можно заказать эту работу иллюстратору.

Еще можно делать скриншоты.

Бывают такие статьи, которые не требуют каких-либо иллюстраций. Например, материалы про то, как работать в том или ином сервисе. Понятно, что основная масса картинок — это скриншоты по работе с сайтом.

Еще можно использовать общественное достояние.

Это все то, на что защита авторского права уже не действует. Оно принадлежит народу. Однако тут нужно четко понимать, что это общественное достояние.

Например, картина Джоконда — это общественное достояние. Поэтому ее можно использовать для иллюстрации статьи.

Будьте аккуратнее с фильмами!

Говорят, если брать кадр и вносить в него изменение (например, подписи), то тогда можно использовать. Если с кадром ничего не делать, то использовать его нельзя.

Фотостоки

Составьте список любимых фотостоков. Есть как платные, так и бесплатные.

Бесплатные:

  • pixabay.com
  • stockvault.net
  • freeimages.com

Платные:

  • shutterstock.com/ru
  • ru.depositphotos.com
  • ru.dreamstime.com

Старайтесь подбирать не заезженные картинки

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

Раньше было модно использовать таких человечков.

Отображение банальных человечков на фото

Но сейчас это прошлый век и смотрится довольно банально. Люди давно устали от них. Поэтому воспринимать их не будут.

Вот слева хороший, а справа плохой пример.

Интересный и банальный пример оформления текста с помощью картинок

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

Также работайте с ассоциациями. И хоть это не в тему, но когда работаешь, то видишь интересные варианты картинок.

Используйте подписи к картинкам

При оформлении текста следует не забывать и про подписи к картинкам. Особенно, когда картинка не однозначная. В таком случае, подпись дает понимание.

Подпись к картинке с молодой девушкой в очках

Любая фраза, и вот уже картинка обретает свой индивидуальный смысл, который подходит к тексту.

Сама картинка может не имеет никакого отношения к теме. Однако дополнительная подпись задает нужную мысль изображению.

Объединяйте иллюстрации общей идеей

Некоторые статьи вы можете объединять общей идеей. Можно основные идеи выносить в картинки. И всю публикацию делать такими картинками.

Использование общей идеи в картинках

Это не весь текст подряд с картинкой за картинкой. Просто это сочетается все с основным текстом.

Сами картинки к теме никакого отношения не имеют. Но благодаря подписям они передают настроение.

Они подобраны в стиле. Выбрана идея, которая потом трансформировалась под статью. Просто нужный кусок текста накладываем на нужную картинку.

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

Сказать спасибо кнопками ниже:
Сергей

Увлекаюсь созданием и продвижением сайтов в интернете. Интересует SEO оптимизация и контент-маркетинг. Немного занимаюсь SMM и Email рассылкой. Также люблю читать интересные материалы по веб-аналитике и заработку в интернете.

Оцените автора
( 11 оценок, среднее 5 из 5 )

Красивое и правильное оформление постов на сайте - идеи

Adblock
detector