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

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

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

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

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

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

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

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

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

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

Чтобы читать дальше, оплатите годовую подписку на Тильду и получите курс в подарок!

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

Предыдущая
Следующая
Оглавление