x
 
Артём
17 ноября 2014

Расскажите об ушках, цитатах и фактоидах.



Представим себе «бутерброд» из двух модулей:

Жизнь и удивительные приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов. Структура просветляет диалогический контекст, и это придает ему свое звучание. Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

Жизнь и удивительные приключения Робинзона Крузо

Структура просветляет диалогический контекст, и это придает ему свое звучание. Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов. Структура просветляет диалогический контекст, и это придает ему свое звучание.



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

«

Дям-дям пимпенька. Исчё пимпенька! (Печеньку. Ещё одну!)

»

Жизнь и удивительные приключения Робинзона Крузо

Генеративная поэтика основывается на совмещении взаимоисключающих принципов. Структура просветляет диалогический контекст, и это придает ему свое звучание. Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

26
бакинских комиссаров стали исторической мистификацией

Жизнь и удивительные приключения Робинзона Крузо

Структура просветляет диалогический контекст, и это придает ему свое звучание. Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов. Структура просветляет диалогический контекст, и это придает ему свое звучание.



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

Фактоид (имеющий вид факта, «фактообразный») — утверждение, представляемое в прессе как факт, но без источника и подтверждения, то есть вообще-то газетная утка. Но в вёрстке мы цинично назовём фактоидом любую крупную цифру с подписью или краткий вынос в духе «А знаете ли вы, что». Во-первых, из-за лаконичности формата такой «факт» действительно часто подаётся без ссылки на источник, во-вторых его главная цель — привлечь и заинтересовать читателя. Конечно, использование фактоидов как элемента вёрстки не означает низкого качества самой информации — проверка и подтверждение фактов в основном тексте всегда остаётся на совести редакции.

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

Я рекомендую начинающим дизайнерам рисовать ценники в качестве упражнения по вёрстке.

Из коллекций Артёма Горбунова, Ильи Бирмана, Андрея Шапиро, Александра Кана и Антона Шеина

Цитата, фактоид и ценник — примеры миниформатов. К миниформатам относятся и врезки с именем автора:

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

Веб-дизайнерам есть чему поучиться у газетчиков. Полоса английского «Индепендента» украшена врезками с портретом автора и цитатой:


Классика жанра — график с результатами социологического опроса в качестве «цепляющей» врезки:

Жизнь и удивительные приключения Робинзона Крузо

51%

27%

22%

Структура просветляет диалогический контекст, и это придает ему свое звучание. Генеративная поэтика основывается на совмещении взаимоисключающих принципов.

Генеративная поэтика основывается на совмещении взаимоисключающих принципов. Структура просветляет диалогический контекст, и это придает ему свое звучание.



Вытянутый в строчку опрос на краю страницы гарантированно привлечёт внимание, как на Яндексе во время выборов мэра Москвы:

Ещё один миниформат, пришедший в интернет из прессы — «ушки». Так называют короткие иллюстрированные анонсы статей на передовице или первой странице раздела. Ушки часто стоят в ряд над шапкой страницы, и торчат из неё как настоящие уши:

Ушки могут стоять и внизу главной страницы, и в её середине:

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

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

Красиво организовать пространство миниформатов помогает правило якорных объектов.

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

P. S.
Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.

Поделиться
Отправить

Комментарии

Ирина Салаватова
26 ноября 2015

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

1 2




Недавно всплыло

В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Это какие‑то другие пиксели? Как они соотносятся? 2 1 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3