0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

Distinctio rem commodi sit deserunt. Illum nam occaecati et eveniet suscipit aliquam. Iure voluptas ullam explicabo voluptas laborum. Totam perferendis expedita ea sed deserunt quibusdam ad et.

Blanditiis consequatur deserunt est nostrum. Voluptatum odio ipsa nihil ratione adipisci.

Ducimus illo debitis et. Quod odit ut veniam debitis consequuntur doloribus voluptate quia. Ad consectetur aut distinctio aliquam. Quia molestiae voluptas quia aperiam. Tenetur autem a omnis qui aut. Aut consectetur quae quaerat ut sint. Quia asperiores magni voluptatem distinctio. Laborum minus dolor libero provident veritatis facere. Aut iusto nemo quia non odit esse. Fuga rerum autem voluptatibus est.

Quidem doloremque odit consequatur quos aut odit sit. Sint corporis minima voluptate.

Aut enim eos quisquam minima optio ut. Voluptates quos doloremque facere est perspiciatis deserunt fugiat quibusdam. Qui quod velit eum recusandae iste laudantium ducimus sapiente. Est praesentium unde numquam autem est rerum autem. Ullam eaque accusantium est laboriosam. Illo nulla aut placeat et et cumque quis. Maiores quia odit laudantium fugiat repellat illum. At asperiores qui natus fugit consequuntur. Harum magnam cumque illo fuga et.

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

Начнем статью с азов:

Создавайте структурированные публикации
Разбивайте монолитный текст на информационные блоки.

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

Отделяйте информационные блоки
Фоном, иллюстрациями(фотографиями), свободным пространством.

Свободное пространство
Это воздух для содержания страницы.

Веб-шрифты: как их правильно использовать на сайте?

Веб-шрифты создают эстетику при оформлении сайта и правильно подобранное начертание сделает сайт привлекательность и читабельность. Откройте для себя разнообразие профессиональных веб-шрифтов. Много бесплатных шрифтов, в том числе кириллических найдете и скачаете на сайте — http://www.fonts-online.ru.

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

При оформлении содержания (контента) шрифты разделяются на.

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

Выбираем правильное начертание

Используйте на сайте до 3-х шрифтов — гармонично и облегчает восприятие информации.

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

Используйте шрифты одной группы — только с засечками или только рубленые, пример — группа Time News Roman или Arial. Для публикаций в интернете предпочтение отдается рубленым шрифтам (без засечек).

Размер шрифта

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

Размер шрифта для строчного текста — минимум 14px. Для заголовков и подзаголовков —
от 25px (в здравых пределах).

Цвет шрифта на сайте

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

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

Эстетический баланс

Хороший шрифт должен выдерживать принципы эстетического баланса:

не слишком тонкий или ажурный;

не слишком тяжелый или кричащий;

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

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

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

Смотрим скрины и повторяем за мной. В качестве примера возьмем первый попавшийся сайт c ажурными шрифтами — http://beautiful.dtbaker.net.

Из всех браузеров наиболее привычно стало семейство Chrome. Пример рассматривается в браузере Vivaldi.

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

Наводим на шрифт и нажимаем правую кнопку мыши. Включилось контекстное меню. Выбираем пункт «Просмотреть код».

Смотрим слева направо. В верхнем боковом экране HTML-код сайта. Правее карта таблицы стилей CSS. Название шрифта прописывается в CSS. На примере мы определяем оформление для заголовка страницы. В блоке который отмечен видна таблица стилей этого загоовка. Обратите внимание на выделенную строку font-family — это и есть название шрифта. Грамотные разработчики оставляют исходное название шрифтов и потому всегда можно узнать их наименование.

Indie Flower — искомое название шрифта. Понравился? Как теперь его скачать? Перед тем, как перейти к методике по скачиванию шрифта учитывайте, что не все шрифты представлены кириллицей.

Пройдем еще ряд шагов и шрифт будет скачан:

Оставляем открытым окно просмотра кода;

Код сайта просматривали во вкладке «Elements», переходим к «Resources» — к ресурсам страницы;

Раскрываем вкладки в левой части окна просмотра кода;

Ищем вкладку «Fonts» — это и есть список заветных шрифтов;

Находим шрифт «Indie Flower» сверяясь с начертанием в правом окне. Название в этих вкладках могут быть и такими, — бессмысленными;

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

Вставляете шрифт на свой сайт.

Текст: как красиво и грамотно оформить?

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

В русском языке кавычки используются в виде «ёлочки», а в иностранном — “лапки”.

Одна строка должна быть заполнена текстом минимум на треть;

Используйте отступы между абзацами и сделайте их одинаковыми по всему сайту;

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

Выделяем слова и словосочетания грамотно

Выделения в тексте помогают читателю выхватить ключевые мысли. Грамотно расставленные выделения сосредотачивают внимание читателя и увеличивают вероятность прочтения текста до конца или его фрагмента.

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

Цель этого раздела — научиться грамотному использованию выделений.

Выделение №1 — курсив

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

Читать еще:  Как очистить утюг от нагара

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

Выделение №3 — подчеркивание

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

Выделение №4 — зачеркнутый текст

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

Выделение №5 — заливка

Выделение №7 — другой цвет

Выделение №8 — более крупный размер шрифта

Выделение №9 — другой шрифт — шрифтовое выделение

Выделение №10 — прописные (заглавные) буквы

Выделение №11 — рамка

Выделение №12 — разрядка

Разрядка — увеличение промежутков между буквами выделяемого слова.

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

Выделение №13 — боковой отступ (втяжка)

Боковой отступ или втяжка — еще одно нешрифтовое выделение, которое используется для выделения абзаца или раздела статьи. Отступ делается односторонним или двусторонним — на усмотрение автора.

Выделение №14 — боковая линейка

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

Выделение №15 — маркер + курсив

Отличный вариант выделения для уточняющих фраз. Любому взрослому известен символ * (звездочка), который приводит к уточнению расположенному в конце текста. Предлагаю пойти дальше и расширить набор маркеров. В качестве авторской «фишки» можно воспользоваться другими символами — @ (собака), # (решетка), — (тире).

Пример использования выделения «маркер + курсив»:

Выделение №15 — комбинированное

Прописные (заглавные) и строчные истины буквы

НЕ ПИШИТЕ МНОГО ПРОПИСНЫМИ (ЗАГЛАВНЫМИ) БУКВАМИ. И уже тем более НИКОГДА «прыгающим стилем» — ЭтО ПрИмЕр ПрыгАющЕГо ТексТа.

Как об авторе сайта такое написание текста скажет прежде всего о пренебрежении к читателю.

Выравнивание

Выравнивайте текст по левому краю и не переусердствуйте с центрированием объемных абзацев;

Никогда не используйте выравнивание по ширине — CSS: text-align: justify;

Межбуквенные и межстрочные интервалы

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

Буквица

Бу́квица — крупная, отличная от прочих, первая буква главы или раздела.

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

Сегодня мы разберем подробно вопрос о текстах на сайте и их оформлении: чем нужно руководствоваться при форматировании и оформлении текста на сайте, если хотите выгодно выделить проект из массы одинаковых и похожих друг на друга веб-сайтов?

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

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

Правило 1. Привлекательные заголовки и подзаголовки

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

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

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

Правило 2. Одна мысль — один абзац

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

Придерживаемся правила: «одна мысль — один абзац». Фишка в том, что вы не должны спугнуть читателя. Ведь мелкие шрифты, монотонные сплошные формы, большие абзацы (а тем более сплошной текст без абзацев вообще) лишь отпугивают читателей.

Правило 3. Маркированные списки, перечни, нумерация

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

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

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

Правило 4. Обязательный визуальный контент

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

Правило 5. Используйте курсив и жирный шрифт

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

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

Читать еще:  Керамическая электроплита или индукционная плита что выбрать

Правило 6. Оптимизируйте тексты для SEO продвижения

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

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

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

Правило 7. Источник информации

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

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

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

Дизайн статей на сайте: принципы оформления статей на сайте, как привлечь внимание пользователя

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

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

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

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

Статьи обычно размещаются в отдельном разделе на сайте, как правило, этот раздел называется «Блог». Мы писали об особенностях дизайна блогов в этой статье. Также бывают специальные информационные сайты, где статьи — главный контент для пользователей. Это могут быть новостные порталы, экспертные сайты или просто ресурсы с развлекательным контентом.

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

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

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

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

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

Понятная структура

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

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

  • заголовки и подзаголовки;
  • интервалы между абзацами;
  • выделение информации другим начертанием — полужирным или курсивом;
  • списки — маркированные, нумерованные и прочее.

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

Использование иллюстраций

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

Например, в наших статьях мы используем не только скриншоты с различных сайтов, статичные иллюстрации, но и анимационные картинки:

Какие иллюстрации лучше использовать при оформлении статей:

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

Больше о визуальном контенте на сайте мы писали в этой статье.

Также нужно сказать о фоне для статей. Желательно не использовать большие изображения в качестве фона (примеры таких приемов можно посмотреть здесь), так как это затрудняет чтение и раздражает пользователей. Самый часто используемый подход — белый фон и черный (или серый) текст. Иногда используют другие цветовые сочетания, но обязательно однотонные, как, например, в некоторых статьях «Тинькофф-журнала»:

Типографика

Еще один пункт, на который стоит обратить особое внимание — типографика. Что важно помнить при подборе типографике для статей:

  • использовать читабельные шрифты. Например, для статьи не подойдут рукописные шрифты или типографика в стиле леттеринг (подробнее о данном направлении можно прочитать здесь). В этом случае пользователю сложно разобраться в тексте, так как витиеватые засечки не только украшают буквы, но и усложняют чтение;
  • делать абзацы и отступы. Разделы текста не должны «прилипать» друг к другу, взгляд читателя должен будто скользить по тексту. Также нужно соблюдать комфортный для чтения межстрочный интервал, чтобы строчки не наезжали друг на друга;
  • использовать различные начертания для информации. Например, выделять полужирным главную мысль или акцентировать внимание на фразе с помощью курсива.

Больше о типографике для сайта мы писали в этой статье.

Элементы навигации

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

Читать еще:  Что будет если мужчина выпьет противозачаточные таблетки

Такие блоки можно вставлять не только в конце, но и в контентной части:

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

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

Ссылки в блоге мы отмечаем красным цветом и подчеркиванием.

Также мы предлагаем пользователям оставлять комментарии к понравившимся статьям:

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

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

Фишки

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

Также можно показать сколько человек уже прочитало статью и количество комментариев:

Еще один прием, который могут использовать информационные сайты — «прямой эфир». Это отдельная часть сайдбара, в которой публикуются актуальные комментарии к статьям. Например, данный подход используется на сайте vc.ru:

Такое оформление является как дополнительным элементом навигации, так и деталью декора.

Превью

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

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

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

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

Адаптивность

Примерно половина пользователей посещают сайты с мобильных устройств. Поэтому дизайнерам нужно позаботиться об адаптивности. Например, «Тинькофф-журнал» делает это следующим образом:

На что нужно обратить внимание в первую очередь:

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

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

Контент и содержание

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

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

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

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

Отдельные блоки

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

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

Шрифт

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

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

Яркие акценты, баннеры

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

Также не стоит забывать об иконках, которые не только облегчают восприятие текстового контента, но и привлекают внимание к информации. Например, символ «кавычки» — традиционное обозначение цитаты:

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

Управление вниманием

По результатам различных исследований, было выявлено, что пользователи на сайтах читают статьи по F-образному шаблону восприятия:

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

Студия дизайна IDBI разрабатывает дизайн сайтов различных направлений, в том числе дизайн новостных порталов, блогов на сайтах и прочее. Мы стараемся использовать вышеперечисленные принципы и создавать оформление статей максимально удобным для чтения. С примерами наших работ можно ознакомиться в разделе «Портфолио». Также в нашем блоге есть статьи о веб-дизайне, которые будут полезны не только дизайнерам и разработчикам, но и владельцам сайтов. Заказать оформление ресурса можно с помощью специальной формы на сайте, или позвонив менеджерам нашей компании.

Источники:

http://contentim.ru/oformlenie-contenta
http://albakoff.ru/articles/oformlenie-teksta-krasivo/
http://idbi.ru/blogs/blog/dizayn-statey-na-sayte

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector
×
×