Типографика в вебе. Функциональные компоненты статьи

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

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

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

Канон Ван де Граафа, по которому строится книжная полоса
В традиционной типографике существуют свои правила для «интерфейса»
Функциональные компоненты статьи в вебе
1
Обложка
Первое, что человек видит на странице. Сообщает о чем материал и побуждает его прочесть.
Чем интереснее и оригинальнее вы оформите обложку, тем больше шансов, что материал прочитают. Обложка — тизер, эмоциональный заряд на прочтение материала.
Полноэкранные обложки
Занимают всю площадь экрана по ширине и по высоте. Такие обложки используются в спецпроектах или на страницах, которые должны вдохновить, продать что-то.
Обложка в половину экрана
По высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция: акцент смещается на информацию, которая следует за обложкой.
Обложка, вписанная в сетку сайта
В этом случае обложка занимает несколько колонок — шесть или восемь.
Обложка содержит:
Заголовок сообщает о чем материал. Часто встречается, когда к заголовку добавляют описание, которое расшифровывает заголовок. Заголовок и описание должны взаимодействовать друг с другом. Заголовок впечатляет, а описание дополняет и информирует.

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

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

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

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

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

Обложка может быть и без фотографии. Не переживайте, если не можете найти классную иллюстрацию, поставьте на фон цвет или градиент.
Главное правило обложки — должен читаться текст.
Если изображение конкурирует с текстом, его можно приглушать с помощью фильтра — сплошного или градиентного. Он затемнит, высветлит или окрасит фото или видео в какой-либо цвет, улучшив читаемость текста.
2
Заголовок
Заголовки задают структуру всему материалу. По функциональности они образуют иерархию: сначала идет заголовок всего материала, затем раздела (главы), потом подраздела.
Заголовок — это не просто «текст посередине», они содержат определенные функции. Заголовки задают структуру материала, поэтому нужно следить, чтобы заголовки имели четкую визуальную иерархию: заголовок подраздела не может быть крупнее заголовка раздела.

Чтобы читать дальше, купите курс

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

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