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

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

Будет много полезных советов и идей с различными примерами.

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

Научу вас работать со шрифтами, абзацами и акцентами в тексте.

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

Дам несколько хороших идей по их использованию в записях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое удобный текст?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интервалы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нет!

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[spoiler title=»Примеры слов и фраз-связок» style=»default» collapse_link=»true»]

[/spoiler]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фотостоки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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