Верстка и оформление статей на сайте

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

Навигация по статье

1. Оформление текста статей на сайте
2. Повышаем ценность статьи
3. Дополнительное оформление
4. Вывод

Оформление текста статей на сайте

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

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

важно

Цвет текста должен быть контрастен к фону. Для удобного чтения соотношение цветов должно быть 5:1 и более. При этом чем выше показатель, тем проще читать объемные статьи. Лучше всего выбирать черный цвет текста и белый фон.

Как красиво оформить статью на сайте?

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

Читайте также: Как составить мета-теги

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

Для наглядного примера возьмем фрагмент текста из правовых документов Яндекса в разном оформлении.

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

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

Читайте также: Поиск ниши для сайта

важно

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

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

важно

Делайте так, чтобы можно было визуально легко отделить один абзац от другого. Используйте теги <p> или <br>.

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

Присоединяй­тесь к

Rush-Analytics уже сегодня

7-ми дневный бесплатный доступ к полному функционалу. Без привязки карты.

Попробовать бесплатно

Повышаем ценность статьи

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

Кроме того, рекомендуется использовать дополнительные элементы, которые позволят улучшить восприятие информации:

• калькулятор;
• опросы;
• тесты;
• статистика;
• инфографика;
• фотогалерея;
• таблицы;
• рейтинг записи;
• документы и файлы.

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

важно

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

Дополнительное оформление

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

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

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

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

Вывод

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

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

Евгения Черешкова, автор, редактор, SEO-копирайтер

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

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

В этой статье рассказываем:

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

Блоки: сохраняйте порядок на странице

Любую страницу сайта можно воспринимать как серию блоков. Иллюстрация — это блок. Абзац — тоже блок. Заголовок, перечень ссылок, цитаты, выноски на полях — блоки. Они могут стоять друг под другом или рядом, создавать монолитную стену или привлекать внимание как акцент.

Представьте, будто вы строите аккуратный домик. Если какой-то блок «выпирает» или рядом стоит слишком много акцентов — архитектура развалится.

Чтобы страница сайта в целом выглядела приятно, нужно соблюдать общие принципы.

Модульность

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

Главная страница сайта дизайн-студии RoyDavid Architecture разделена на четкие блоки. Внутри каждого блока заложен свой ритм — где-то три колонки, где две. Страница смотрится аккуратно и динамично одновременно

Модули необязательно должны быть горизонтальными. Узкие колонки со ссылками характерны для новостных сайтов. На скриншоте пример главной страницы журнала Dezeen

Модули смотрятся аккуратно, если они не пересекаются друг с другом.

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

Принцип близости

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

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

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

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

Контраст

В композиции картины, интерьера, книжной страницы отлично работает контраст. Используйте контраст и на web-странице:

• чередуйте «плотный» текст абзацев с выноской на полях. Окружите выноску белым полем, и она станет акцентом;




• разделите страницу на «этажи»: текст чередуйте с иллюстрацией. «Этаж» можно также создать за счет цветных блоков.
  

  Простое, но четкое деление на «этажи» на сайте студии BOOONT. Блоки четко читаются, не мешают друг другу. За счет единой цветовой палитры не спорят и гармонично смотрятся как единое целое

«Этаж» также создается за счет смены ритма.




Здесь этажи четко читаются за счет смены ритма: одинаковые по ширине блоки делятся то на три, то на две равные, то на две неодинаковые по ширине колонки

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

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

Акценты со смыслом

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

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

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

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

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

Иллюстрации

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

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

Выноска на полях сочетается по смыслу с заголовком: она отвечает на вопрос «Как можно больше — это сколько?». Читатель быстро получает полезную информацию

Бывает, что в портфолио не нашлось подходящего фото или для выбранной темы в принципе сложно найти фотографию. Пользоваться фотографиями с фотостоков советуем в самую последнюю очередь. 99% таких фото выглядят фальшиво. Многие уже куплены сотни раз и приелись читателям — доверие к статье со сточными фотографиями резко падает.

Альтернатива – качественные иллюстрации, схемы.

Пример иллюстрации из статьи о выборе строительной бригады: как оценить качество ремонта на объекте

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

Заголовки

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

Редакция «Ревдинского рабочего» знает толк в заголовках. Их не убивает даже визуально массивный блок с рекламой

Чтобы заголовок стал акцентом:

— он должен быть контрастным по отношению к основному тексту и другим элементам на странице;

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

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

Следите, чтобы заголовок «накрывал» все колонки. Иначе создается впечатление, что озаглавлена только первая колонка, а вторая остается не у дел;

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

Абзац

Абзац — это текстовый блок. Статья состоит из абзацев, это ее основа и визуальный фон. Важно не забывать про композицию, которую они создают.

Чтобы статью было приятно читать, следуйте правилам:

• Делите текст на абзацы: не делайте их слишком длинными или слишком короткими. Золотое правило: 1 абзац = 1 мысль.
  

  Легко читаются абзацы не больше 5-6 строк.

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

  Сравните:

  
  

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

• Выделения внутри абзаца полужирным и курсивом должны быть по делу. Использовать выделения нужно в крайних случаях.
  
  
• Выравнивание по центру должно быть оправдано. Помните о ровном левом крае. Длинный блок текста, выровненный по центру, смотрится неаккуратно и нарушает модульность.
• Строки не должны быть слишком длинными или короткими. Тяжело читать строки свыше 90 символов: нельзя быстро найти начало следующей строки. Также сложно воспринимать смысл в длинных узких колонках.
  

  Cтроки состоят из 98-105 символов. Легко потеряться

  
  

  Строки слишком короткие. Глазам приходится быстро перемещаться от строки к строке, от колонки к колонке. Ничего кроме невроза такая верстка не вызывает

  
  

  65-75 символов в строке — читать легко

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

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

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

Оптимально

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

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

Гиперссылки

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

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

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

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

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

Формы

На сайтах дизайн-студий пользователей часто просят заполнить формы обратной связи или брифы. Форма — это тоже модульный блок. И в дизайне формы должны соблюдаться те же принципы, что и в любом блоке:

• элементы смотрятся вместе как единое целое;
• подпись элемента находится ближе к своей строке ввода, чем к другим элементам.

Хорошо, если пользователь понимает, зачем он оставляет те или иные данные. Не стоит помечать все поля как обязательные. Понятно, зачем в форме обратной связи нужен телефон: чтобы пользователю позвонили. Но сложно понять, зачем обязательно нужно оставлять имя, а иногда еще и email. Доверие к компании сразу падает.

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

Дополнительные элементы, привлекающие внимание

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

Выноски на полях

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

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

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

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

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

Так цитаты оформляет AD Magazine

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

Случайные блоки

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

Не ставьте на страницу больше одного такого элемента.

На сайте Карима Рашида заголовки нарушают принцип модульности. Но только заголовки

Проверяйте элементы перед выпуском статьи

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

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

Если вы самостоятельно разрабатываете сайт, например, с помощью конструктора, следите за принципами верстки:

1. Блоки смотрятся как прямоугольники, не наезжающие друг на друга.
2. Элементы одного блока стоят ближе друг к другу, чем к элементам других блоков.
3. Динамика статьи создается за счет контрастов.
4. Заголовок, иллюстрация, цитата, выноски на полях, гиперссылки — это акценты. Они контрастируют с основным текстом.
5. Акцент подчиняется теме статьи. Пробежав взглядом по акцентам, становится понятно, о чем идет речь.
6. Иллюстрации хорошего качества. Исключения, но не оправдания — статьи-репортажи с проекта.
7. Каждая картинка несет информацию. Нет «мертвым» фотографиям Shutterstock.
8. Если нет подходящего фото, его заменяет схема, картинка.
9. Левый край ровный. Заголовки, иллюстрации не выровнены по центру.
10. Текст разбит на абзацы.
11. 1 абзац = 1 мысль.
12. Длина абзаца — не больше 5 строк.
13. Длина строки 55—75 символов.
14. Чем короче строка, тем меньше межстрочный интервал.
15. Строки не слипаются и не отрываются друг от друга. Абзац смотрится как красивый монолит.
16. Шрифт легко читается.
17. Шрифт соответствует настроению статьи.
18. Статья не перегружена разнообразием шрифтов и начертаний. Есть основной шрифт и акцентный.
19. Заголовки подчиняются иерархии. Заголовок более высокого уровня смотрится массивнее, чем подзаголовки. Подзаголовки смотрятся значимее, чем основной текст.
20. Колонки отделены друг от друга так, что не возникает сомнений, в какой очередности их читать.
21. Гиперссылки выделены синим.
22. При наведении на гиперссылку курсор превращается в «руку».
23. Множество гиперссылок объединены в блок. Они не разбросаны по абзацу.
24. Форма — это блок. Она смотрится единым целым.
25. Пользователь понимает, зачем он отвечает на вопросы формы.

———————-

Смотрите также по теме:

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

Как сделать сайт на Tilda. Подборка обучающих материалов

Как сделать сайт удобным: элементы навигации

Тексты на сайте дизайн-студии: как писать, чтобы читали

Как зарегистрировать адрес своего сайта

————————————————————————

Евгения Черешкова,

редактор, автор, SEO-копирайтер

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

Сайт textforbusiness.ru

Telegram, WhatsApp: +7(903)000-47-04

Skype, email: homanova@yandex. ru

Оформление страниц статей, темы, шаблоны и загружаемые графические элементы на Dribbble

1. View Blog Spot — пользовательский интерфейс целевой страницы

   Blog Spot — пользовательский интерфейс целевой страницы

2. Посмотреть сегодняшние новости — Landing Page Новости портала

   Todaynews — Лендинг Новостей Портала

3. Просмотр блога — Персональный сайт

   Блог — Персональный сайт

4. Посмотреть макет блога

   Макет блога

5. Просмотр #Exploration — Страница статьи

   # Исследование — Страница статьи

6. View Wancana — Дизайн сайта платформы блогов

   Wancana — Дизайн веб-сайта платформы блогов

7. Просмотр блога и веб-сайта журнала

   Сайт блогов и журналов

8. Посмотреть блог Финтори

   Блог Финтори

9. Посмотреть блог SmartUV

   Блог SmartUV

10. Посмотреть концепцию блога компании

    Концепция блога компании

11. Просмотр сегмента — Блог

    Сегмент — Блог

12. Посмотреть страницу статьи журнала Physica

    Страница статьи журнала Physica

13. Просмотр #Exploration — Раздел героев спортивных новостей

    #Исследование — Раздел героев спортивных новостей

14. Посмотреть NEW YORK GAL — Концепция веб-сайта журнала

    NEW YORK GAL — Концепция веб-сайта журнала

15. Просмотр разделов блога — dwinawan. com/blog

    Разделы блога — dwinawan.com/blog

16. Просмотр концепции веб-сайта блога — Домашняя страница

    Концепция веб-сайта блога — главная страница

17. Просмотр макета страницы статьи

    Макет страницы статьи

18. Просмотр #Exploration — Страница статьи

    # Исследование — Страница статьи

19. Просмотр #Исследование — Редакционный дизайн — 02

    #Исследование — Редакционный дизайн — 02

20. Посмотреть целевую страницу блога Taara

    Целевая страница блога Taara

21. Макет типа просмотра

    Типовая компоновка

22. Просмотр #Exploration — Редакционный дизайн

    #Исследование — Редакционный дизайн

23. Просмотр Пусть герой будет героем.

    This entry was posted in Популярное