Разработка сайтов

Как оформить статью для сайта? 10 важных дизайн элементов в тексте

Быть посещаемым и читаемым – задача каждого интернет-ресурса. Будь то портал, блог или даже интернет-магазин (у которого есть свой журнал). Добиться этого сложно, но можно. Важным помощником в этом деле является дизайн, вернее красивое и правильное оформление текстов на сайте. Как этого добиться? Какие инструменты и техники применять? Знакомим вас с 10 важными дизайн элементами текста. Запоминаем, понимаем, используем.
Автор: Юлия Гончарова
Опубликовано: 07.06.2018

        Дизайн и красивое оформление текста на сайте

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

        Помните, что красота элементов сама по себе бессмысленна.

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

        Вот список 10 элементов для оформления, рекомендуемые для всех клиентов WEBAPEX:

        • Заголовок и подзагловок
        • Оформление лида (вступления в статье)
        • Оформление подпунктов/подразделов в материале
        • Маркировка (2-3 вида)
        • Оформление цитаты
        • Оформление примера/факта
        • Оформление анонса (ссылка на другой материал)
        • Разделители
        • Постскриптум или выводы
        • Таблица

        ЭЛЕМЕНТ 1: Заголовок и подзаголовок

        Как подобрать заголовок к тексту/статье?

        Прежде всего заинтересуйте читателя! Заголовок должен быть звучным, чтобы в нем был какой-то ритм. Не забывайте про логику и смысл. Помните и про ключевые слова (по теме материала), куда же без них. Заголовок лаконичен. Длина его не должна превышать 8-10 слов. 
         
        Лучше всего читаются заголовки из 3-4 слов. Но такие подобрать сложно. Поэтому внимательно следите за тем, чтобы не терялся смысл. Если втиснуть нужно много, а объем ограничен лучше используйте два заголовка. Главный и его разъясняющий второй. Это хорошо работает как в печатном глянце, так и в интернет-изданиях и блогах.

        Как оформить заголовок?

        Крупность и контраст наше все. Заголовок должен выделяться на общем фоне текста. В первую очередь акцентируем за счет более крупного шрифта. Тут можно разгуляться и до 30 кегля и даже больше.
         
        Кегль (редко ке́гель, ке́гля, от нем. Kegel)[1][2] — размер буквы или знака по вертикали, включающий её нижние и верхние выносные элементы. (Из Википедии)
         
        Можно использовать при написание только заглавные буквы. Не забывайте про жирность. Ее тоже можно и нужно применять.
        Если хотите больше… предусмотрите в дизайне фон под заголовок или отделите его за счет стилистических разделительных линий.

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

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

        ЭЛЕМЕНТ 2: Оформление лида

        Для начала разберемся, что же такое лид? 
         
        Лид – это вступление, своеобразная затравка к статье. Она должна интриговать, заинтересовывать и, конечно, обозначать аспекты, которые будут раскрыты в материале.
         
        Мастерство написания лида заключается в том, чтобы завлечь читателя смыслом, возможно, интригой или фактами.

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

        Главная задача - поймать взгляд читателя, а текст уже должен его задержать. Хороший лид – залог прочтения вашего текста до конца.

        Пример оформления лида

        Как оформить лид в статье?

        оформление статьи: лид

        ЭЛЕМЕНТ 3: Оформление подпунктов/подразделов в материале

        Что же такое подпункты? Чтобы не путаться в определениях, приведем пример.
        Ваша статья называется: 5 золотых советов по уходу за волосами.  Дальше для удобства прочтения текст делиться на логические части. И каждая часть имеет свое название. Это и будет подзаголовок.
         
        Следуя нашему примеру это будут:
        Совет № 1: подбирайте средства по уходу с умом
        Совет № 2: питайтесь сбалансировано
        Совет № 3: поддерживайте водный баланс
        Совет № 4: делайте воду необходимой температуры
        Совет № 5: сушите и расчесывайте правильно
        Все эти подзаголовки необходимо выделить, дабы текст не напоминал непрерывную буквенную кашу. Во-первых, используйте пространство - делайте абзацы. Во-вторых, выделяйте цветом или жирностью. Можно делать все это сразу.
         
        Кроме возможностей классического редактора текста, в котором вы работаете, можно применить и другие визуальные детали. Попросите дизайнера сделать или опять же предусмотрите заранее в проекте создание специальных элементов: разделительной линии, цветового фона, декоративного объекта (иконка, тематический клипарт).
         
        Главное, чтобы по итогу это выглядело лаконично, четко, без перегруза.

        Пример оформления подпунктов

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

        Дизайн текста: как выделить подпункт

        ЭЛЕМЕНТ 4: Маркировка и ее оформление

        Маркировка - необходима для выделения списков. Самый привычный для нас вариант - это дефисы или жирные точки у начала каждой строки списка. Но кто сказал, что это непреложное правило.
         
        Для маркировки списка можно использовать любой знак или иконку. Хорошо, если она четкая, понятная и логично вплетается в дизайн вашего сайта.
         
        Например: для маркировки списков сайта юридических услуг наш дизайнер использовал шахматную фигуру коня. И это не спроста. Конь присутствовал в логотипе компании. А для бюро переводов была выбрана маркировка c иконкой перьевой ручки.Такой выбор наталкивает на определенные ассоциации и создает нужный образ.
         
        Тонкая работа с деталями и создает айдентику, ваш личный фирменный стиль.

        Пример оформления маркировки

        Дизайн текстов: как использовать маркировку

        Маркировка в тексте: как оформить красиво

        Маркировка в тексте и дизайн ее элементов

        ЭЛЕМЕНТ 5: Оформление цитаты

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

        Как оформить цитату? Это уже вопрос творчества.

        Можно не выдумывать и дать тексту цитаты контрастный фон или фигурные скобки, кавычки. А можно и создать целый арт объект.

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

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

        Пример оформления цитаты

        Как оформить цитату на сайте?

        Дизайн текста: как оформить цитату

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

        ЭЛЕМЕНТ 6: Оформление примера/факта

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

        Пример оформления факта

        Как оформить факт в тексте: дизайн статьи

        Дизайн статьи: как оформить факты в тексте

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

        ЭЛЕМЕНТ 7: Оформление анонса (ссылка на другой материал)

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

        Оформить анонс другой статьи можно по-разному.

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

        Главное - не забудьте дать ссылку на саму статью. А то пользы от такого анонса не будет.

        Пример оформления анонса на другой материал

        Как оформить анонс на статью

        ЭЛЕМЕНТ 8: Разделители

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

        Это могут быть всевозможные линии: двойные, жирные, пунктирные, монохромные или цветные.

        Пример оформления: разделители

        Разделители в дизайне статьи

        Как использовать разделители в статье

        ЭЛЕМЕНТ 9: Постскриптум или выводы

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

        Хорошее впечатление оставляет статья, в которой читатель может получить дополнительное разъяснение по теме статьи в финале или прочесть важную заключительную мысль. Выделите ее (эту мысль) скобками или неброской тонкой рамкой.

        Важно, чтобы читателю было понятно и приятно это читать.

        Пример оформления вывода

        Как оформить выводы в статье: дизайн текстов

        Дизайн и красивое оформление статьи: выводы

        ЭЛЕМЕНТ 10: Таблица

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

        Давайте обсудим?

        Есть светлые мысли по теме? Пишите в комментариях, задавайте вопросы!

        закрыть

        Ваш комментарий успешно отправлен.