Пилю статейники в меру своих сил. Недорого рисую макеты для информационных сайтов.

✉️Почта  🛒Telegram  🗄️Мои работы скоро

Как должна быть оформлена статья на вашем информационном сайте: 11 обязательных элементов

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

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

1. Автор статьи

В последних обновлениях в Google упоминалась важность авторства у статей, поэтому обязательно добавляем этот блок. Указываем реальное имя копирайтера и ставим его фото. Добавляем ссылку на аккаунт G+ автора с атрибутом ?rel=author.

2. Счетчик просмотров и время на чтение статьи

Во-первых, большинство топовых медиа-изданий используют эти метрики, а наши статейники должны эволюционировать в такие медиа. Во-вторых, это удобно читателю. Сюда же добавляем кнопку «Нет времени читать?», при нажатии на которую выскакивает pop-up с полем для подписки.

3. Содержание в сайдбаре

«Сайдбар не нужен!» — кричит Вебнавоз, и я с ним от части согласен. Еще в 2015 году я заказывал у него дизайн и просил сделать мне внутреннюю страницу без сайдбара. Почему я согласен от части? Сайдбар не нужен в том виде, в котором он существует на 99,8% статейников, но он нужен для того, чтобы там разместить содержание и сноски к статье. Содержание делает Яндекс в своих Здоровье и Журнал, сноски делают в Т—Ж.

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

4. Плавающие кнопки шаринга

Не моветон, можно разместить в начале или в конце, но плавающий вариант кликабельней.

5. Картинки с описаниями, слайдеры

У картинок должно быть описание. Особенно, если это DIY тематика, где каждое действие надо объяснять.

6. Подсветка важных мыслей в тексте

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

7. Сноски

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

Сноски нужны и точка.

8. Блоки инфографики

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

9. Нумерация подзаголовков

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

10. Блок внимания с цветной подложкой

Каноничная вещь, которую используют все. И кроме нее ничего.

11. Цветная подложка под списки

Все списки нужно делать с цветной подложкой:

  1. Просто;
  2. Примите;
  3. Этот;
  4. Факт.

Такой список получился. Можете отправлять дизайнеру ссылку на статью в качестве ТЗ. Или (что еще проще) пишите мне на почту me@abuhassan.ru, нарисую вам макет с учетом всех требований.

Поделиться
Отправить
Запинить
15 сентября   Дизайн   Статейники
2 комментария
Александр

Опять встречаю дизайнера, который рассказывает как должна выглядеть статья на обычном экране компьютера. Но сейчас уже 60% трафика генерируют мобильники и планшеты, на одном из моих сайтов все 90%. Кто-нибудь расскажет как должна выглядеть статья и вообще экран при малых разрешениях?

Abu

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

Korben

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

Популярное