Артём Гор­бу­нов

Типографика и вёрстка

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

Типографика и вёрстка

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типо­гра­фика и вёрстка» после­до­ва­тельно отве­чает на вопрос как. Автор вво­дит прин­ципы модуль­но­сти и якор­ных объ­ек­тов, пра­вило внут­рен­него и внеш­него. Затем шаг за шагом наглядно объ­яс­няет, как добиться акку­рат­ной и плот­ной вёрстки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

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

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

1
Основы
вёрстки

правило внутреннего и внешнего

модульность

правило якорных объектов

формат, поля и интерлиньяж

точка, линия и прямоугольник

от геометрии к типографике

Правило внутреннего и внешнего

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

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

1
Основы
вёрстки

пра­вило внут­рен­него и внешнего

модульность

пра­вило якор­ных объектов

фор­мат, поля и интерлиньяж

точка, линия и прямоугольник

от гео­мет­рии к типографике

Правило внутреннего и внешнего

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

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

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

Совре­мен­ный дизай­нер так и соби­рает зна­ния по кру­пи­цам — из книг, сове­тов кол­лег, заме­ча­ний арт‑директора.

Запом­нить даже пере­чис­лен­ные пра­вила довольно затруд­ни­тельно. Если дизай­нер и вызуб­рит соб­ствен­ный набор пра­вил, все­гда най­дутся такие, о кото­рых он не слы­шал, — копилка‑то бесконечна.

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

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

«Пра­вило внут­рен­него и внеш­него» — базо­вый прин­цип типо­гра­фики, рабо­та­ю­щий на всех уров­нях от буквы до разворота.

Пра­вило внут­рен­него и внеш­него — это част­ный слу­чай тео­рии бли­зо­сти. Типо­гра­фи­че­ский объ­ект любого уровня состоит из дру­гих объ­ек­тов: буквы из штри­хов, слова из букв, строки из слов, абзацы из строк.

И для того чтобы объ­ект имел само­сто­я­тель­ное зна­че­ние, то есть буква, слово, строка и абзац отде­ля­лись от сосед­них, его внут­рен­ние рас­сто­я­ния должны быть меньше внешних.

Современный дизайнер так и собирает знания по крупицам — из книг, советов коллег, замечаний арт‑директора.

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

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

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

«Правило внутреннего и внешнего» — базовый принцип типографики, работающий на всех уровнях от буквы до разворота.

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

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

Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа

Каждая буква обрела значение и независимость, а заголовок — архитектурную торжественность

Для каждого слова расстояние между буквами играет роль «внутреннего», а межсловный пробел — роль «внешнего»

Пробел остался неизменным, но теперь его достаточно, чтобы отделить слова

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

Надпись вернула себе имперское достоинство

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

Вместо увеличения интерлиньяжа заменим шрифт на узкий

При том же кегле и интерлиньяже слова лучше отделились

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

Отодвинем подзаголовок на расстояние не меньшее, чем просвет между первыми двумя строками

Надпись вступила в конфликт внутреннего и внешнего с собственной рамкой

Контраст внутреннего и внешнего на всех уровнях — от внутрибуквенных просветов до внешних полей надписи

Рассмотрим заголовок из прописных букв.

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

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

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

Сначала попробуем изменить соотношение внутреннего и внешнего, уменьшив «внутреннее» — разрядку между буквами, но так, чтобы она не стала меньше расстояния между собственными штрихами букв. Всегда держим в голове, что «внутреннее» на одном уровне служит «внешним» на другом.

Пробел остался неизменным, но теперь его достаточно, чтобы отделить слова.

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

Увеличим «внешнее» — интерлиньяж. Надпись вернула себе имперское достоинство.

А что если не увеличивать интерлиньяж, а изменить шрифт на более узкий?

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

Вернёмся к «имперской надписи» и добавим к ней подзаголовок. Подзаголовок «влез в интерлиньяж» заголовка — то есть оказался ближе к нему, чем его собственные строки друг к другу.

Нет проблем, увеличим «внешнее».

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

Придётся пройтись вниз по всем уровням и уменьшить внутренние расстояния, сохраняя контраст внутреннего и внешнего.


Заметим, что для одного и того же кегля мы получили разные приемлемые соотношения внутренних и внешних расстояний. Контраст важнее конкретного значения пропорции — это даёт гибкость верстальщику. Идеальное «серебро набора» — это лишь минимально возможный контраст внутреннего и внешнего всех элементов для нейтрального спокойного чтения. При увеличении контраста внутреннего и внешнего текст становится заметнее и выразительнее.

Базовое правило типографики:

внутреннее ≤ внешнее

Мос­ков­скийМет­ро­по­ли­тен
Мос­ков­ский
Мет­ро­по­ли­тен
Имени В. И. Ленина
Мос­ков­ский
Мет­ро­по­ли­тен

Рас­смот­рим заго­ло­вок из про­пис­ных букв.

Штрихи каж­дой буквы заклю­чают в себе её внут­рен­нее про­стран­ство. Пустота внутри буквы П в сере­дине слова больше, чем внеш­нее рас­сто­я­ние до сосед­них букв О слева и справа. Из‑за этого воз­ни­кает ощу­ще­ние, что сосед­ние буквы вторг­лись в лич­ное про­стран­ство друг друга, а вся над­пись — слиплась.

Уве­ли­чим рас­сто­я­ние между бук­вами, чтобы изме­нить соот­но­ше­ние внут­рен­него и внеш­него. Каж­дая буква обрела зна­че­ние и неза­ви­си­мость, а заго­ло­вок — архи­тек­тур­ную торжественность.

Доба­вим к заго­ловку слово. Слова отде­лены между собой про­бе­лом. Для каж­дого слова рас­сто­я­ние между бук­вами играет роль «внут­рен­него», а меж­с­лов­ный про­бел — роль «внеш­него». Из‑за того что про­бел лишь немно­гим больше меж­бук­вен­ного рас­сто­я­ния, слова слиплись.

Сна­чала попро­буем изме­нить соот­но­ше­ние внут­рен­него и внеш­него, умень­шив «внут­рен­нее» — раз­рядку между бук­вами, но так, чтобы она не стала меньше рас­сто­я­ния между соб­ствен­ными штри­хами букв. Все­гда дер­жим в голове, что «внут­рен­нее» на одном уровне слу­жит «внеш­ним» на другом.

Про­бел остался неиз­мен­ным, но теперь его доста­точно, чтобы отде­лить слова.

Теперь вме­сто умень­ше­ния раз­рядки попро­буем отде­лить слова иначе — пере­но­сом на сле­ду­ю­щую строку. Меж­строч­ный про­свет срав­ним с меж­бук­вен­ным рас­сто­я­нием. Из‑за этого буквы над­писи сли­ва­ются в рису­нок шах­мат­ной доски.

Уве­ли­чим «внеш­нее» — интер­ли­ньяж. Над­пись вер­нула себе импер­ское достоинство.

А что если не уве­ли­чи­вать интер­ли­ньяж, а изме­нить шрифт на более узкий?

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

Вер­нёмся к «импер­ской над­писи» и доба­вим к ней под­за­го­ло­вок. Под­за­го­ло­вок «влез в интер­ли­ньяж» заго­ловка — то есть ока­зался ближе к нему, чем его соб­ствен­ные строки друг к другу.

Нет про­блем, уве­ли­чим «внешнее».

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

При­дётся прой­тись вниз по всем уров­ням и умень­шить внут­рен­ние рас­сто­я­ния, сохра­няя кон­траст внут­рен­него и внешнего.


Заме­тим, что для одного и того же кегля мы полу­чили раз­ные при­ем­ле­мые соот­но­ше­ния внут­рен­них и внеш­них рас­сто­я­ний. Кон­траст важ­нее кон­крет­ного зна­че­ния про­пор­ции — это даёт гиб­кость вер­сталь­щику. Иде­аль­ное «серебро набора» — это лишь мини­мально воз­мож­ный кон­траст внут­рен­него и внеш­него всех эле­мен­тов для ней­траль­ного спо­кой­ного чте­ния. При уве­ли­че­нии кон­тра­ста внут­рен­него и внеш­него текст ста­но­вится замет­нее и выразительнее.

Базо­вое пра­вило типографики:

внут­рен­нее ≤ внеш­нее

Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа

Каждая буква обрела значение и независимость, а заголовок — архитектурную торжественность

Для каждого слова расстояние между буквами играет роль «внутреннего», а межсловный пробел — роль «внешнего»

Пробел остался неизменным, но теперь его достаточно, чтобы отделить слова

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

Надпись вернула себе имперское достоинство

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

Вместо увеличения интерлиньяжа заменим шрифт на узкий

При том же кегле и интерлиньяже слова лучше отделились

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

Отодвинем подзаголовок на расстояние не меньшее, чем просвет между первыми двумя строками

Надпись вступила в конфликт внутреннего и внешнего с собственной рамкой

Контраст внутреннего и внешнего на всех уровнях — от внутрибуквенных просветов до внешних полей надписи

Прямоугольник делится на другие прямоугольники — и в остатке прямоугольники

Модульность

Главное изобретение человека — не колесо, а прямоугольник. Круг не надо придумывать: посмотрел на небо — висит солнце, бросил камень в озеро — пошли круги. А прямоугольник в природе встречается редко. В самом человеке нет ничего прямоугольного.

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

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

Модульность

Глав­ное изоб­ре­те­ние чело­века — не колесо, а пря­мо­уголь­ник. Круг не надо при­ду­мы­вать: посмот­рел на небо — висит солнце, бро­сил камень в озеро — пошли круги. А пря­мо­уголь­ник в при­роде встре­ча­ется редко. В самом чело­веке нет ничего прямоугольного.

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

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

Прямоугольник делится на другие прямоугольники — и в остатке прямоугольники

Суще­ствуют осо­бые про­пор­ции и спо­собы деле­ния прямоугольников:

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

А пря­мо­уголь­ник c длин­ной сто­ро­ной, рав­ной диа­го­нали квад­рата с его корот­кой сто­ро­ной, вос­про­из­во­дится в мень­шем раз­мере при деле­нии попо­лам. Это свой­ство в основе линейки фор­ма­тов бумаги ДИН.

Существуют особые пропорции и способы деления прямоугольников:

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

А прямоугольник c длинной стороной, равной диагонали квадрата с его короткой стороной, воспроизводится в меньшем размере при делении пополам. Это свойство в основе линейки форматов бумаги ДИН.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева. Хайно Энгель. Параметры и конструкция японского дома

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

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

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

Повсеместное производство татами привело к стандартизации их размеров. А стандартизация татами привела к особой системе мер и пропорций всего японского дома. Это пример модульного дизайна в архитектуре.

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

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

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

Повсе­мест­ное про­из­вод­ство татами при­вело к стан­дар­ти­за­ции их раз­ме­ров. А стан­дар­ти­за­ция татами при­вела к осо­бой системе мер и про­пор­ций всего япон­ского дома. Это при­мер модуль­ного дизайна в архитектуре.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева.
Хайно Энгель. Параметры и конструкция японского дома

С изоб­ре­те­нием пись­мен­но­сти и бумаги пря­мо­уголь­ники при­шли в кни­го­из­да­ние. Книги, стра­ницы и текст прямоугольны:

Галилео Галилей. Звездный вестник. Венеция, 1610

Нема­те­ри­аль­ная инфор­ма­ция полу­чила физи­че­скую пря­мо­уголь­ную форму — «флет­ланд» в тер­ми­но­ло­гии Эдварда Тафти.

В 20 веке типо­графы при­ду­мали делить стра­ницу на неви­ди­мые пря­мо­уголь­ники — изоб­рели модуль­ную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

С изобретением письменности и бумаги прямоугольники пришли в книгоиздание. Книги, страницы и текст прямоугольны:

Галилео Галилей. Звездный вестник. Венеция, 1610

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

В 20 веке типографы придумали делить страницу на невидимые прямоугольники — изобрели модульную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

Новая компания. № 12, 1974

Типографический ежемесячник. № 1, 1964

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

Уни­фи­ци­ро­вали раз­меры не только иллю­стра­ций, но даже их частей.

Новая компания. № 12, 1974

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

Типографический ежемесячник. № 1, 1964

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

«Пря­мо­уголь­ни­ками» высту­пают не только эле­менты вёрстки, но и про­стран­ство между ними. Дизай­нер Сер­гей Серов пишет о швей­цар­ской типографике:


Как.ру

«Здесь мы эко­но­мим по буд­ням, гуляем по празд­ни­кам. Накап­ли­ваем серый тон в одном месте, соби­раем по пол­пунк­тика на каж­дой строчке — выстре­ли­ваем чёрно‑белым в дру­гом. Создаем спуск для руб­рики, выде­ляем спе­ци­аль­ное белое поле для заго­ловка, под­за­го­ловка, под­ри­сунка или какого‑либо дру­гого типо­гра­фи­че­ского эле­мента, и это авто­ма­ти­че­ски при­даёт такому эле­менту исклю­чи­тель­ную визу­аль­ную значимость».

Разворот газеты «Ди Цайт»

Разворот газеты «Ди Цайт»

«Прямоугольниками» выступают не только элементы вёрстки, но и пространство между ними. Дизайнер Сергей Серов пишет о швейцарской типографике:

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

Как.ру

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

Акку­ратно орга­ни­зо­вать инфор­ма­цию помо­гает гиб­кая модуль­ная вёрстка. Прин­цип: макет дол­жен быть «наре­зан» на акку­рат­ные непе­ре­се­ка­ю­щи­еся пря­мо­уголь­ные модули. Напри­мер, как на обложке элек­трон­ного жур­нала «Главбух».

Модули не должны пере­се­каться и нале­зать друг на друга. Они должны иметь пря­мо­уголь­ную форму, согла­со­вы­ваться друг с дру­гом по ширине и высоте и состав­лять вме­сте общий пря­мо­уголь­ник стра­ницы или экрана. Необя­за­тельно пол­но­стью запол­нять модули инфор­ма­цией — глав­ное, чтобы пря­мо­уголь­ники чита­лись. В вёрстке пол­но­правно участ­вует пустота, или контр­про­стран­ство, кото­рое также должно иметь про­стую пря­мо­уголь­ную форму. Эле­менты вёрстки в моду­лях должны сле­до­вать пра­вилу якор­ных объектов.

Модульная вёрстка — это деление
прямоугольников

Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки

Обложка электронного журнала «Главбух»

Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки

Обложка электронного журнала «Главбух»

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

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

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

Модульная вёрстка — это деление прямоугольников

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

Правило якорных объектов

Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Простой абзац наборного текста тоже выступает якорным объектом, если он окружён пустотой, или контрпространством.

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

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

Правило якорных объектов

Якор­ные объ­екты — это самые замет­ные объ­екты на стра­нице: иллю­стра­ции, заго­ловки, фак­то­иды, лого­типы и пик­то­граммы. Про­стой абзац набор­ного тек­ста тоже высту­пает якор­ным объ­ек­том, если он окру­жён пусто­той, или контрпространством.

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

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

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

Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника

Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма

Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки

Общая конструкция сохранится, если соблюдать принцип модульности

Макет развалился

Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами

Каждый из показанных здесь прямоугольников годится.

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

По моим наблюдениям, самая частая ошибка новичка — забыть «воздух».

У правого края флагового набора всегда должно быть дополнительное свободное пространство. Тогда «флаг» выглядит флагом — как положено.

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

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

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

Объект может неожиданно стать якорным, то есть более заметным, не только при увеличении размеров, но и при смене цвета.

Каж­дый из пока­зан­ных здесь пря­мо­уголь­ни­ков годится.

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

По моим наблю­де­ниям, самая частая ошибка новичка — забыть «воздух».

У пра­вого края фла­го­вого набора все­гда должно быть допол­ни­тель­ное сво­бод­ное про­стран­ство. Тогда «флаг» выгля­дит фла­гом — как положено.

В жизни редко при­хо­дится вер­стать стра­ницу из одного объ­екта. Вто­ро­сте­пен­ные объ­екты модуля при­стра­и­ва­ются к якор­ным и ино­гда даже слегка сдви­гают их из точек привязки.

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

Но якор­ные объ­екты все­гда выпры­ги­вают из вёрстки. Если у них не будет точки при­вязки, макет развалится.

Объ­ект может неожи­данно стать якор­ным, то есть более замет­ным, не только при уве­ли­че­нии раз­ме­ров, но и при смене цвета.

Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника

Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма

Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки

Общая конструкция сохранится, если соблюдать принцип модульности

Макет развалился

Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами

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

Такая при­вязка выгля­дит спокойно.

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

Такая привязка выглядит спокойно.

Хоро­шая вёрстка исполь­зует силу углов и сто­рон фор­мата. На обрат­ной сто­роне коро­бок кар­три­джей Т2 якор­ные объ­екты акти­ви­руют верх­ние углы и ниж­нюю сторону:

Т2

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

Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:

Т2

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

Афиша
Андрея
Коржица

Применение модульности и якорных объектов

В рубрику «советы» на сайте бюро обратился Андрей Коржиц с просьбой помочь улучшить афишу:

«Хотелось бы узнать ваши замечания по размещению текстовой информации. Использовалось три кегля (не считая официальной обязательной надписи внизу восьмым кеглем) и две гарнитуры».

Применение модульности и якорных объектов

В руб­рику «советы» на сайте бюро обра­тился Андрей Кор­жиц с прось­бой помочь улуч­шить афишу:

«Хоте­лось бы узнать ваши заме­ча­ния по раз­ме­ще­нию тек­сто­вой инфор­ма­ции. Исполь­зо­ва­лось три кегля (не счи­тая офи­ци­аль­ной обя­за­тель­ной над­писи внизу вось­мым кег­лем) и две гарнитуры».

Афиша
Андрея
Коржица

Подпись автора должна быть скромной, но без неё нельзя

Обложка журнала «Афиша‑Еда»

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

Макет устроен по принципу сендвича.

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

Но слоёв‑модулей слишком много — целых девять. Из‑за этого афиша выглядит дробной и сложной.

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

Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать.

Добавим иллюстрацию. Коричневую лужу сразу заменим на зелёную травку.

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

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

Добавим строки культурной программы. Один из элементов списка явно выбивается по длине.

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

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

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

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

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

Итак, мы собрали конструкцию — получилась традиционная афиша события с датой.

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

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

Поэтому мы остановимся на предыдущей компоновке и займёмся нюансами.

Постараемся согласовать элементы макета, сделав его более цельным.

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

Обратимся к заголовку. Отцепим слово «акция», избавимся от кавычек и наберём заголовок крупнее. Слово «акция» приклеим к началу заголовка.

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

Теперь смысловая текстовая часть. Развеселим по‑афишевски (т. е. в стиле журналов «Афиши») строки списка цветами и стилями. Одну из «фич» выделим зелёной травкой в стиле иллюстрации, чтобы дополнительно объединить части макета.

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

Логотип в подвале стоит уменьшить. Заодно приведём к общему знаменателю цветовой акцент в телефонах.

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

Макет устроен по прин­ципу сендвича.

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

Но слоёв‑моду­лей слиш­ком много — целых девять. Из‑за этого афиша выгля­дит дроб­ной и сложной.

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

Я реко­мен­дую начи­нать с самых круп­ных и важ­ных, якор­ных объ­ек­тов. В дан­ном слу­чае это заго­ло­вок акции. Якор­ные объ­екты должны нахо­диться либо у краёв сво­его пря­мо­уголь­ника, либо в визу­аль­ном цен­тре. Поскольку мы пред­по­ла­гаем, что моду­лей будет несколько, пока выбе­рем про­из­воль­ную высоту. Заго­ло­вок, под­за­го­ло­вок и начало тек­ста лучше не разрывать.

Доба­вим иллю­стра­цию. Корич­не­вую лужу сразу заме­ним на зелё­ную травку.

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

Поста­вив кар­тинку и заго­ло­вок, мы отве­тили на вопрос что. Отве­тим на вопросы когда и где, доба­вив этаж с датой и адре­сом. Обра­тите вни­ма­ние, что колонки нового модуля имеют оди­на­ко­вую высоту.

Доба­вим строки куль­тур­ной про­граммы. Один из эле­мен­тов списка явно выби­ва­ется по длине.

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

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

Пере­ста­вим и под­кра­сим фичи в боко­вой колонке, при­дав ей высоту модуля.

Назва­ния и адреса орга­ни­за­ций рас­ста­вим в под­вале в виде коло­но­чек оди­на­ко­вой высоты. Лого­тип тоже под­чи­ним модулю.

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

Итак, мы собрали кон­струк­цию — полу­чи­лась тра­ди­ци­он­ная афиша собы­тия с датой.

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

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

Поэтому мы оста­но­вимся на преды­ду­щей ком­по­новке и зай­мёмся нюансами.

Поста­ра­емся согла­со­вать эле­менты макета, сде­лав его более цельным.

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

Обра­тимся к заго­ловку. Отце­пим слово «акция», изба­вимся от кавы­чек и набе­рём заго­ло­вок круп­нее. Слово «акция» при­клеим к началу заголовка.

Назо­вём такую кон­струк­цию заго­ловка «бир­кой». Сове­тую её запом­нить: она удобна для выде­ле­ния руб­рик и клю­че­вых слов. Бирка делает заго­ло­вок закон­чен­ным, оде­тым и более доро­гим. Бирка для заго­ловка — то же, что засечка для буквы, кар­низ для зда­ния, под­пись для кар­тинки. Как пра­вило, бирка кон­тра­сти­рует с заго­лов­ком: жир­ный с нежир­ным, капи­тель со строчными.

Теперь смыс­ло­вая тек­сто­вая часть. Раз­ве­се­лим по‑афи­шев­ски (т. е. в стиле жур­на­лов «Афиши») строки списка цве­тами и сти­лями. Одну из «фич» выде­лим зелё­ной трав­кой в стиле иллю­стра­ции, чтобы допол­ни­тельно объ­еди­нить части макета.

Заодно систе­ма­ти­зи­руем вер­ти­каль­ные отступы и интер­ли­ньяжи по «пра­вилу внут­рен­него и внешнего».

Лого­тип в под­вале стоит умень­шить. Заодно при­ве­дём к общему зна­ме­на­телю цве­то­вой акцент в телефонах.

Подпись автора должна быть скромной, но без неё нельзя

Обложка журнала «Афиша‑Еда»

было

стало

Этажей меньше, кегль крупнее, конструкция проще и крепче

было

стало

Этажей мень­ше, кегль круп­нее, конст­рукция проще и крепче

Формат, поля и интерлиньяж

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

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

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

Формат, поля и интерлиньяж

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

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

Ниж­нее поле сде­лаем больше верх­него, чтобы под­со­зна­тельно ском­пен­си­ро­вать «вес» содержания.

Удвоим базовый формат,   перейдём к «бисистеме» — развороту:

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

Книжный канон Ван де Граафа

Удвоим базо­вый фор­мат, перейдём к «бисистеме» — развороту:

Книжный канон Ван де Граафа

Книж­ный раз­во­рот — это цель­ная система, как дву­стволка или двух­ко­лёс­ный вело­си­пед. Его поло­винки тра­ди­ци­онно согла­со­ваны — поля сим­мет­ричны, текст стре­мится к центру.

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

Нако­нец, модуль­ная вёрстка пред­по­ла­гает уже не физи­че­ское, а логи­че­ское деле­ние фор­мата на фор­маты мень­шего раз­мера — модули.

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

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

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

Витрина Музея северных стран. Дизайн — Сток­гольм­ская лаборатория дизайна

Пред­ла­гаю чита­телю само­сто­я­тельно про­ана­ли­зи­ро­вать соот­но­ше­ния на иллю­стра­ции. Внеш­ним фор­ма­том слу­жит окно.

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

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

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

Предлагаю читателю самостоятельно проанализировать соотношения на иллюстрации. Внешним форматом служит окно.

Витрина Музея северных стран. Дизайн — Сток­гольм­ская лаборатория дизайна

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

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

В «Советы» обратился Антон Куликов с вопросом об интерлиньяже и отступах: «Как работать с межстрочным расстоянием в блоках с разным размером текста? Как найти и соблюдать „вертикальный ритм“»? Здесь картинка, которую прислал Антон.

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

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

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

В левом варианте кегль настолько крупный, что строки короткие и прыгающие, а буквам тесно в блоке. Поэтому возьмём за основу правый пример.

В нём заголовок нарушает «правило внутреннего и внешнего». По логике он должен составлять с текстом единую конструкцию, а на деле болтается между текстом и картинкой.

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

Обратите внимание на розовый прямоугольник.

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

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

Я посоветовал бы «обинтеллигентить» толстенные рамки.

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

Чтобы «подружить» картинку с текстом, просто уменьшим интерлиньяж и поля, проверив и скорректировав соотношения внутреннего и внешнего.

В «Советы» обра­тился Антон Кули­ков с вопро­сом об интер­ли­ньяже и отсту­пах: «Как рабо­тать с меж­строч­ным рас­сто­я­нием в бло­ках с раз­ным раз­ме­ром тек­ста? Как найти и соблю­дать „вер­ти­каль­ный ритм“»? Справа кар­тинка, кото­рую при­слал Антон.

Для начала убе­рём сетку базо­вых линий. Пока не уста­ка­нены основ­ные соот­но­ше­ния, от неё только вред и лиш­ние ограничения.

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

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

В левом вари­анте кегль настолько круп­ный, что строки корот­кие и пры­га­ю­щие, а бук­вам тесно в блоке. Поэтому возь­мём за основу пра­вый пример.

В нём заго­ло­вок нару­шает «пра­вило внут­рен­него и внеш­него». По логике он дол­жен состав­лять с тек­стом еди­ную кон­струк­цию, а на деле бол­та­ется между тек­стом и картинкой.

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

Обра­тите вни­ма­ние на розо­вый прямоугольник.

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

Напомню логику рас­суж­де­ний: длина строки → интер­ли­ньяж → рас­сто­я­ние до заго­ловка → левое поле → верх­нее поле → повто­рить. То есть сна­чала нужно постро­ить тек­сто­вый пря­мо­уголь­ник, найти длину строки и интер­ли­ньяж, а затем акку­ратно поста­вить «в угол». И снова пере­про­ве­рить все соотношения.

Я посо­ве­то­вал бы «обин­тел­ли­ген­тить» тол­стен­ные рамки.

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

Чтобы «подру­жить» кар­тинку с тек­стом, про­сто умень­шим интер­ли­ньяж и поля, про­ве­рив и скор­рек­ти­ро­вав соот­но­ше­ния внут­рен­него и внешнего.

Точка, линия и прямоугольник

Точка, линия и пря­мо­уголь­ник — при­ми­тивы вёрстки, кото­рые состав­ляют гео­мет­рию любой страницы.

Точка

Иде­аль­ному точеч­ному объ­екту соот­вет­ствует круг — самая эго­и­стич­ная фигура на свете. Круг имеет соб­ствен­ный центр и мгно­венно при­вле­кает внимание:

Но круг не любит кон­ку­рен­ции, его стоит исполь­зо­вать огра­ни­ченно и с осторожностью.

Интерфейс Бейскемпа атакует кругами

Точка, линия и прямоугольник

Точка, линия и прямоугольник — примитивы вёрстки, которые составляют геометрию любой страницы.

Точка

Идеальному точечному объекту соответствует круг — самая эгоистичная фигура на свете. Круг имеет собственный центр и мгновенно привлекает внимание:

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

Интерфейс Бейскемпа атакует кругами

Номер страницы, кружок‑фактоид и фотография на белом фоне играют роль точек на полосе «Афиши‑Еды»

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

В вёрстке применимы любые точечные объекты: отдельные буквы и цифры, знаки, логотипы, пиктограммы. Они имеют разнообразную форму, но в отличие от линий и прямоугольников, «центростремительны». У точечного объекта один фокус внимания, он создаёт на странице акцент.

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

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


Заметность объекта‑точки зависит от его размера, плотности, контраста к фону, окружающего свободного пространства. И, конечно, всегда измеряется относительно соседних элементов.

Точечные объекты в вёрстке часто выступают в качестве якорных объектов, тяготеют к углам и краям своих модулей.

В вёрстке при­ме­нимы любые точеч­ные объ­екты: отдель­ные буквы и цифры, знаки, лого­типы, пик­то­граммы. Они имеют раз­но­об­раз­ную форму, но в отли­чие от линий и пря­мо­уголь­ни­ков, «цен­тро­стре­ми­тельны». У точеч­ного объ­екта один фокус вни­ма­ния, он создаёт на стра­нице акцент.

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

Но даже на пря­мо­уголь­ных фото­гра­фиях лица и дру­гие важ­ные объ­екты высту­пают само­сто­я­тель­ными сило­выми точ­ками. Обра­тите вни­ма­ние на лицо про­давца, курицу и знак на фото­гра­фии рынка — по сути, они пол­но­ценно участ­вуют в вёрстке.


Замет­ность объ­екта‑точки зави­сит от его раз­мера, плот­но­сти, кон­тра­ста к фону, окру­жа­ю­щего сво­бод­ного про­стран­ства. И, конечно, все­гда изме­ря­ется отно­си­тельно сосед­них элементов.

Точеч­ные объ­екты в вёрстке часто высту­пают в каче­стве якор­ных объ­ек­тов, тяго­теют к углам и краям своих модулей.

Номер страницы, кружок‑фактоид и фотография на белом фоне играют роль точек на полосе «Афиши‑Еды»

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

Адрес компании «Я расту» в две строки внизу бланка

Реклама на Гугле

Строка с результатами выборов мэра Москвы на Яндексе

Меню Гугль‑документа

Якори слева и справа

Якорь в центре

Этикетка на картридже Т2

Линия

В геометрии точки составляют прямую линию. Линия в типографике — это строка, второй важнейший примитив.

Строка — самый удобный, читабельный, лаконичный, скромный и спокойный элемент вёрстки. Большая удача, если объекты собираются в строку — ей всегда найдётся место в макете.

Адрес компании «Я расту» занял две строки внизу бланка и освободил всё место наверху для логотипа.

Строка — один из способов «впихнуть невпихуемое», например, срочное объявление, как реклама на Гугле, или временный блок на сайте, как результаты выборов мэра Москвы на Яндексе.

Отдельная строка поперёк макета из края в край обычно выглядит несуразно. Как якорный объект строка лучше всего чувствует себя прижатой к верху или низу модуля. Неслучайно шапка и подвал сайта часто имеют форму строк.

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

Неоднородная строка должна следовать правилу якорных объектов. Строка одномерна, поэтому якоря располагаются слева и справа. Или в центре, как в газетных колонтитулах и меню календаря в Айпаде.

Этикетка на картридже Т2 в строку с двумя якорями — логотипом слева и артикулом справа.

Линия — типичная форма уличных надписей и вывесок

Воз­можно, ошибка в рек­ви­зи­тах ООО «Тор­го­вая фирма „Герметик“»

Новая ком­па­ния ООО «Альфа»

Про­ве­рить и обно­вить...
Создать...

Адрес компании «Я расту» в две строки внизу бланка

Реклама на Гугле

Строка с результатами выборов мэра Москвы на Яндексе

Меню Гугль‑документа

Якори слева и справа

Якорь в центре

Этикетка на картридже Т2

Линия

В гео­мет­рии точки состав­ляют пря­мую линию. Линия в типо­гра­фике — это строка, вто­рой важ­ней­ший примитив.

Строка — самый удоб­ный, чита­бель­ный, лако­нич­ный, скром­ный и спо­кой­ный эле­мент вёрстки. Боль­шая удача, если объ­екты соби­ра­ются в строку — ей все­гда най­дётся место в макете.

Адрес ком­па­нии «Я расту» занял две строки внизу бланка и осво­бо­дил всё место наверху для логотипа.

Строка — один из спо­со­бов «впих­нуть нев­пиху­е­мое», напри­мер, сроч­ное объ­яв­ле­ние, как реклама на Гугле, или вре­мен­ный блок на сайте, как резуль­таты выбо­ров мэра Москвы на Яндексе.

Отдель­ная строка попе­рёк макета из края в край обычно выгля­дит несу­разно. Как якор­ный объ­ект строка лучше всего чув­ствует себя при­жа­той к верху или низу модуля. Неслу­чайно шапка и под­вал сайта часто имеют форму строк.

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

Неод­но­род­ная строка должна сле­до­вать пра­вилу якор­ных объ­ек­тов. Строка одно­мерна, поэтому якоря рас­по­ла­га­ются слева и справа. Или в цен­тре, как в газет­ных колон­ти­ту­лах и меню кален­даря в Айпаде.

Эти­кетка на кар­три­дже Т2 в строку с двумя яко­рями — лого­ти­пом слева и арти­ку­лом справа.

Линия — типичная форма уличных надписей и вывесок


Прямоугольник

Пря­мо­уголь­ник — тре­тий при­ми­тив вёрстки.

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

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

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

Модуль­ная вёрстка — это поиск наи­бо­лее удач­ной ком­по­новки пря­мо­уголь­ника. Про­дол­жим поиски в сле­ду­ю­щих главах.

Прямоугольные объекты на сайте «Свисс Тайпфейсес»

Прямоугольник

Прямоугольник — третий примитив вёрстки.

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

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

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

Модульная вёрстка — это поиск наиболее удачной компоновки прямоугольника. Продолжим поиски в следующих главах.

Прямоугольные объекты на сайте «Свисс Тайпфейсес»

От геометрии к типографике

В «советы» обра­тился Игорь Г. с прось­бой рас­ска­зать о вырав­ни­ва­нии строк по вертикали:

«Лет шесть назад один арт‑дирек­тор научил меня вырав­ни­вать строки в инпу­тах, табах, кноп­ках, любых кон­тро­лах и эле­мен­тах интер­фей­сов по вер­ти­кали таким обра­зом: необ­хо­димо цен­три­ро­вать строку отно­си­тельно строч­ных букв. Таким обра­зом по массе строка будет рас­по­ла­гаться в цен­тре объекта.

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

Строки в полях прибиты к низу

Строки в полях прибиты к низу

От геометрии к типографике

В «советы» обратился Игорь Г. с просьбой рассказать о выравнивании строк по вертикали:

«Лет шесть назад один арт‑директор научил меня выравнивать строки в инпутах, табах, кнопках, любых контролах и элементах интерфейсов по вертикали таким образом: необходимо центрировать строку относительно строчных букв. Таким образом по массе строка будет располагаться в центре объекта.

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

«Гори­зон­таль­ным стеб­лем» строки слу­жат строч­ные буквы, и при ком­по­новке отдель­ных тек­сто­вых эле­мен­тов, как пра­вило, можно пре­не­бречь рас­ту­щими вверх и вниз «листьями» — про­пис­ными бук­вами и вынос­ными эле­мен­тами. «Сте­бель» огра­ни­чен снизу базо­вой линией, сверху — высо­той строч­ных букв, не име­ю­щих вынос­ных эле­мен­тов, напри­мер х или п. Верх­нюю линию так и назы­вают — линия строч­ных или высота строч­ных, по‑английски — x‑height.

В зави­си­мо­сти от задачи «стебли» вырав­ни­ва­ются по верх­ней, сред­ней или ниж­ней линии.

Конечно, ни один из этих спо­со­бов нельзя счи­тать универсальным.

Пре­не­бре­гать про­пис­ными и вынос­ными эле­мен­тами не все­гда пра­вильно. Чем ближе мас­штаб к отдель­ным стро­кам и сло­вам, тем больше нюан­сов. Иде­аль­ные законы пере­стают дей­ство­вать, как в физике.

«Стебли» выравниваются по верхней, средней или нижней линии

Анатомия слов

«Стебли» выравниваются по верхней, средней или нижней линии

Анатомия слов

«Горизонтальным стеблем» строки служат строчные буквы, и при компоновке отдельных текстовых элементов, как правило, можно пренебречь растущими вверх и вниз «листьями» — прописными буквами и выносными элементами. «Стебель» ограничен снизу базовой линией, сверху — высотой строчных букв, не имеющих выносных элементов, например х или п. Верхнюю линию так и называют — линия строчных или высота строчных, по‑английски — x‑height.

В зависимости от задачи «стебли» выравниваются по верхней, средней или нижней линии.

Конечно, ни один из этих способов нельзя считать универсальным.

Пренебрегать прописными и выносными элементами не всегда правильно. Чем ближе масштаб к отдельным строкам и словам, тем больше нюансов. Идеальные законы перестают действовать, как в физике.

Если элемент вёрстки имеет масштаб слова, он должен принимать во внимание его анатомию. Обратите внимание, как автограф занимает отведённое ему место в прямоугольнике на заставке «Везер‑ченела».

Слова, выровненные по строчным без учёта прописных букв и выносных элементов, стоят высоковато. На вкус автора:

Поле ввода — однострочный элемент управления, то есть легко становится в строку‑стебель:

Если эле­мент вёрстки имеет мас­штаб слова, он дол­жен при­ни­мать во вни­ма­ние его ана­то­мию. Обра­тите вни­ма­ние, как авто­граф зани­мает отве­дён­ное ему место в пря­мо­уголь­нике на заставке «Везер‑ченела».

Слова, выров­нен­ные по строч­ным без учёта про­пис­ных букв и вынос­ных эле­мен­тов, стоят высо­ко­вато. На вкус автора:

Поле ввода — одно­строч­ный эле­мент управ­ле­ния, то есть легко ста­но­вится в строку‑стебель:

Тест по основам вёрстки

Что не так с вёрсткой списка на иллюстрации?

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

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

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

Заголовок «Робинзон Крузо» влезает в интерлиньяж текста
Заголовок «Побег Робинзона из родительского дома» влезает в интерлиньяж текста
Текст «Моим родителям...» влезает в интерлиньяж заголовка
Верхний край формата влезает в интерлиньяж заголовка «Робинзон Крузо»
Верхний край формата влезает в интерлиньяж заголовка «Побег Робинзона из родительского дома»
Раз параметры текста одинаковы, то и проблемы в блоках текста одинаковые

Сколько раз сложить вдвое прямоугольник с пропорциями «золотого сечения», чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

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

Любое нечётное количество раз
Любое чётное количество раз

Какой наиболее естественный порядок элементов для чтения?

Какие достижения невозможны без прямоугольников?

Письменность
Земледелие
Египетские пирамиды
Клавиатура компьютера
Искусство
Телевидение
Айпад
Школа редакторов Бюро Горбунова
Фильм Стэнли Кубрика «2001: Космическая Одиссея»
Книгопечатание
Детские пазлы
Рубашка в клетку
Деньги
Автомобиль «Тесла»
Губка Боб

Укажите на иллюстрациях варианты вёрстки, следующие правилу якорных объектов.

Каковы базовые геометрические примитивы вёрстки?

Шар
Луч
Параллелограмм
Линия
Прямоугольник
Отрезок
Треугольник
Точка

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

Перечислите элементы обложки журнала, выступающие в роли точки

Картинка кухонного комбайна
Крутилка на комбайне
Колонка текста Samstag

На этой же обложке перечислите элементы, функционирующие как линия

Надпись Braun+Design
Надпись Sammler‑Börse ’94/West

Найдите прямоугольники

Колонка с надписями Braun+Design и Sammler‑Börse ’94/West
Колонка текста Samstag

Журнал Браун+Дизайн

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест по основам вёрстки

Что не так с вёрсткой списка на иллюстрации?

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

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

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

Заголовок «Робинзон Крузо» влезает в интерлиньяж текста
Заголовок «Побег Робинзона из родительского дома» влезает в интерлиньяж текста
Текст «Моим родителям...» влезает в интерлиньяж заголовка
Верхний край формата влезает в интерлиньяж заголовка «Робинзон Крузо»
Верхний край формата влезает в интерлиньяж заголовка «Побег Робинзона из родительского дома»
Раз параметры текста одинаковы, то и проблемы в блоках текста одинаковые

Сколько раз сложить вдвое прямоугольник с пропорциями «золотого сечения», чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

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

Любое нечётное количество раз
Любое чётное количество раз

Какой наиболее естественный порядок элементов для чтения?

Какие достижения невозможны без прямоугольников?

Письменность
Земледелие
Египетские пирамиды
Клавиатура компьютера
Искусство
Телевидение
Айпад
Школа редакторов Бюро Горбунова
Фильм Стэнли Кубрика «2001: Космическая Одиссея»
Книгопечатание
Детские пазлы
Рубашка в клетку
Деньги
Автомобиль «Тесла»
Губка Боб

Укажите на иллюстрациях варианты вёрстки, следующие правилу якорных объектов.

Каковы базовые геометрические примитивы вёрстки?

Шар
Луч
Параллелограмм
Линия
Прямоугольник
Отрезок
Треугольник
Точка

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

Перечислите элементы обложки журнала, выступающие в роли точки

Картинка кухонного комбайна
Крутилка на комбайне
Колонка текста Samstag

На этой же обложке перечислите элементы, функционирующие как линия

Надпись Braun+Design
Надпись Sammler‑Börse ’94/West

Найдите прямоугольники

Колонка с надписями Braun+Design и Sammler‑Börse ’94/West
Колонка текста Samstag

Журнал Браун+Дизайн

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

2
Базовые
элементы

заголовок

текст

иллюстрация

эле­мент управления

ссылка

подпись

2
Базовые
элементы

заголовок

текст

иллюстрация

элемент управления

ссылка

подпись

Базовые элементы

Базовые элементы по функции:

  • заголовок — крупная надпись, называющая страницу или её блок;

  • текст — основное сообщение;

  • иллюстрация — картинка, сопровождающая сообщение;

  • элемент управления — функциональная часть пользовательского интерфейса, например поле ввода или кнопка;

  • подпись — пояснение к иллюстрации или элементу управления;

  • гиперссылка — цветная подчёркнутая надпись, ссылающаяся на другую страницу или элемент.

Задачи вёрстки сводятся к размещению этих элементов на странице.

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

Базовые элементы

Базо­вые эле­менты по функции:

  • заго­ло­вок — круп­ная над­пись, назы­ва­ю­щая стра­ницу или её блок;

  • текст — основ­ное сообщение;

  • иллю­стра­ция — кар­тинка, сопро­вож­да­ю­щая сообщение;

  • эле­мент управ­ле­ния — функ­ци­о­наль­ная часть поль­зо­ва­тель­ского интер­фейса, напри­мер поле ввода или кнопка;

  • под­пись — пояс­не­ние к иллю­стра­ции или эле­менту управления;

  • гиперс­сылка — цвет­ная под­чёрк­ну­тая над­пись, ссы­ла­ю­ща­яся на дру­гую стра­ницу или элемент.

Задачи вёрстки сво­дятся к раз­ме­ще­нию этих эле­мен­тов на странице.

Важно научиться видеть и раз­ли­чать их в вёрстке. Поэтому под иллю­стра­цией блока пока­зана его схема: базо­вые эле­менты акку­ратно отде­лены друг от друга и имеют свои места.

плохо

И это первое знание о базовых элементах: они не должны быть хаотично перемешаны на странице. В бюро называют это вёрсткой «с комками» — как в неудачной манной каше.

Хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

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

плохо

хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

И это пер­вое зна­ние о базо­вых эле­мен­тах: они не должны быть хао­тично пере­ме­шаны на стра­нице. В бюро назы­вают это вёрст­кой «с ком­ками» — как в неудач­ной ман­ной каше.

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

Заголовок

Заго­ло­вок — базо­вый эле­мент вёрстки.

Мы неслу­чайно рас­смат­ри­ваем заго­ловки сразу в трёх дис­ци­пли­нах Школы бюро: в «Типо­гра­фике и вёрстке», «Интер­фейсе и инфор­ма­ции» и, конечно, «Тек­сте и редак­туре». Заго­ло­вок задаёт кон­струк­цию стра­ницы, помо­гает вос­при­нять смысл и решает инфор­ма­ци­он­ные задачи автора.

Заго­ло­вок — не про­сто фор­маль­ное резюме тек­ста, иначе от него сто­ило бы изба­виться как от лиш­него повтора.

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

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

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

Заго­ло­вок слу­жит якор­ным объ­ек­том, орга­ни­зует стра­ницу и её отдель­ные части. Обо­зна­чает и даёт форму бло­кам тек­ста, направ­ляет чте­ние. Раз­меры заго­лов­ков пока­зы­вают срав­ни­тель­ную важ­ность или логи­че­скую вло­жен­ность текстов.

Заголовок

Заголовок — базовый элемент вёрстки.

Мы неслучайно рассматриваем заголовки сразу в трёх дисциплинах Школы бюро: в «Типографике и вёрстке», «Интерфейсе и информации» и, конечно, «Тексте и редактуре». Заголовок задаёт конструкцию страницы, помогает воспринять смысл и решает информационные задачи автора.

Заголовок — не просто формальное резюме текста, иначе от него стоило бы избавиться как от лишнего повтора.

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

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

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

Заголовок служит якорным объектом, организует страницу и её отдельные части. Обозначает и даёт форму блокам текста, направляет чтение. Размеры заголовков показывают сравнительную важность или логическую вложенность текстов.

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

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

плохо

хорошо

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

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

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

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

плохо

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

хорошо

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

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

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

Этот приём подходит в редких случаях вроде книжного титула или плаката. Даже «безобидное» выделение жирным части заголовка в декоративных целях часто выдаёт любительскую вёрстку:

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

Бирка

Подзаголовок

Двойной заголовок

Графика, маркер или знак

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

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

Этот приём под­хо­дит в ред­ких слу­чаях вроде книж­ного титула или пла­ката. Даже «без­обид­ное» выде­ле­ние жир­ным части заго­ловка в деко­ра­тив­ных целях часто выдаёт люби­тель­скую вёрстку:

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

Бирка

Подзаголовок

Двойной заголовок

Графика, маркер или знак

Это не зна­чит, что заго­ло­вок не может быть состав­ным. Допол­ни­тель­ные эле­менты заго­ловка помо­гают сде­лать его основ­ное тело короче и замет­нее, сори­ен­ти­ро­вать и заин­те­ре­со­вать читателя.

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

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

В таких случаях приходится дополнительно отделять модули, например линейками.

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

Если длины заго­ловка не хва­тает, чтобы накрыть модуль, сосед­ние модули по вер­ти­кали могут всту­пить в неза­пла­ни­ро­ван­ные связи и нару­шить поря­док чтения.

В таких слу­чаях при­хо­дится допол­ни­тельно отде­лять модули, напри­мер линейками.

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

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

плохо

хорошо

Спасают положение составные заголовки, выбор подходящего кегля и, конечно, редакционная политика.

О вертикальных расстояниях у заголовков:

  • О правиле внутреннего и внешнего 4

  • Формат, поля и интерлиньяж 21

плохо

хорошо

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

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

Спа­сают поло­же­ние состав­ные заго­ловки, выбор под­хо­дя­щего кегля и, конечно, редак­ци­он­ная политика.

О вертикальных расстояниях у заголовков:

  • О правиле внутреннего и внешнего 4

  • Формат, поля и интерлиньяж 21

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

Текст

Текст — базовый элемент вёрстки.

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

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

Текст

Текст — базо­вый эле­мент вёрстки.

Текст — несжи­ма­е­мая жид­кость, при­ни­ма­ю­щая форму сосуда. Вер­сталь­щик опре­де­ляет форму, про­пор­ции и объём кон­тей­нера, впус­кает в него воз­дух, раз­де­ляет на сооб­ща­ю­щи­еся сосуды. Один и тот же текст запол­няет ста­кан или рас­пол­за­ется лужей по плос­ко­сти страницы.

Ино­гда дизай­нер вли­яет на объём тек­ста, зада­вая редак­то­рам огра­ни­че­ния длины под­за­го­лов­ков, цитат, въез­дов и дру­гих осо­бых эле­мен­тов. Но чаще текст — это дан­ность, а вер­сталь­щик рабо­тает с его формой.

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

В «рези­но­вой» вёрстке дизай­нер задаёт не только форму кон­тей­нера для тек­ста, но и пра­вила, по кото­рым она меня­ется в зави­си­мо­сти от раз­ме­ров окна и экрана.

Кегль экран­ного тек­ста обычно лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля.

Кегль 16 п. / Интерлиньяж 20 п.

12 п. / 15 п.

14 п. / 20 п.

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

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

В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.

Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля.

Кегль 16 п. / Интерлиньяж 20 п.

12 п. / 15 п.

14 п. / 20 п.

11 п. / 12 п.

11 п. / 15 п.

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

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

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

11 п. / 12 п.

11 п. / 15 п.

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

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

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

Я правая колонка, и я отступаю от рваного правого края.

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

Колонки в экранной вёрстке чаще всего используются для отдельных смысловых абзацев

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

Кегль 16 п., интерлиньяж 20 п., между абзацами 10 п. Поля больше межстрочных просветов, содержат поправку на гравитацию и дополнительный воздух справа: сверху 30 п., снизу 60 п., слева 20 п., справа 40 п.

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

Колонки в экранной вёрстке чаще всего используются для отдельных смысловых абзацев

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

Кегль 16 п., интерлиньяж 20 п., между абзацами 10 п. Поля больше межстрочных просветов, содержат поправку на гравитацию и дополнительный воздух справа: сверху 30 п., снизу 60 п., слева 20 п., справа 40 п.

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

Иллюстрация

Иллю­стра­ция — базо­вый эле­мент вёрстки.

Дети любят книжки с кар­тин­ками. Смот­реть на стра­ницы без кар­ти­нок скучно. Такая книжка оста­вит ребёнка рав­но­душ­ным или вызо­вет у него недоумение.

Наивно думать, что со взрос­лыми дело обстоит иначе. Взрос­лые листают жур­налы, ищут иллю­стра­ции в книж­ках, смот­рят на банеры. Раз­гля­ды­вают фото­гра­фии, пере­сы­лают друг другу «котя­ток» и «демо­ти­ва­торы». Кар­тинки любят все.

Иллю­стра­ция при­вле­кает вни­ма­ние быст­рее заго­ловка: ребё­нок учится видеть мир раньше, чем читать. Как и заго­ло­вок, иллю­стра­ция цеп­ляет чита­теля, вызы­вает инте­рес к чте­нию, помо­гает выбрать между тек­стами или объ­яв­ле­ни­ями. Только всё это — быст­рее и эффективнее.

Иллюстрация

Иллюстрация — базовый элемент вёрстки.

Дети любят книжки с картинками. Смотреть на страницы без картинок скучно. Такая книжка оставит ребёнка равнодушным или вызовет у него недоумение.

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

Иллюстрация привлекает внимание быстрее заголовка: ребёнок учится видеть мир раньше, чем читать. Как и заголовок, иллюстрация цепляет читателя, вызывает интерес к чтению, помогает выбрать между текстами или объявлениями. Только всё это — быстрее и эффективнее.

Хорошая иллюстрация формирует эмоцию.
Фотография Таки Лау

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

Хорошая иллюстрация делает всё сразу.

Хорошая иллюстрация формирует эмоцию.
Фотография Таки Лау

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

Хоро­шая иллю­стра­ция делает всё сразу.

Бессмысленные иллюстрации «для красоты»

Фотографии на сайте «Магазина горящих путёвок»

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

Кар­тинка помо­гает найти поку­па­теля авто­мо­биля, сдать квар­тиру, про­дать путёвку, позна­ко­миться с девуш­кой. Визу­а­ли­за­ция доно­сит идею, объ­яс­няет прин­цип работы устрой­ства, осве­щает слож­ную тему, вос­ста­нав­ли­вает собы­тия, пере­даёт масштаб.

Бессмысленные иллюстрации «для красоты»

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

Фотографии на сайте «Магазина горящих путёвок»

Картинка помогает найти покупателя автомобиля, сдать квартиру, продать путёвку, познакомиться с девушкой. Визуализация доносит идею, объясняет принцип работы устройства, освещает сложную тему, восстанавливает события, передаёт масштаб.

Горизонтальная фотография Коворкафе

Иллюстрация — самый заметный якорный объект. Конструкция страницы часто подчиняется ключевой иллюстрации: её пропорциям, размеру и положению.

На восприятие иллюстрации влияют её пропорции. Благодаря двум глазам поле зрения человека вытянуто вширь. Поэтому горизонтальная иллюстрация выглядит естественно.

Вертикальный вид на «скайповую» в том же кафе

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

Горизонтальная фотография Коворкафе

Иллю­стра­ция — самый замет­ный якор­ный объ­ект. Кон­струк­ция стра­ницы часто под­чи­ня­ется клю­че­вой иллю­стра­ции: её про­пор­циям, раз­меру и положению.

На вос­при­я­тие иллю­стра­ции вли­яют её про­пор­ции. Бла­го­даря двум гла­зам поле зре­ния чело­века вытя­нуто вширь. Поэтому гори­зон­таль­ная иллю­стра­ция выгля­дит естественно.

Но высо­кие объ­екты тре­буют вер­ти­каль­ных про­пор­ций. Обычно вер­ти­каль­ная иллю­стра­ция выгля­дит дина­мич­нее, даже если на ней ничего не происходит.

Вертикальный вид на «скайповую» в том же кафе

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

Квадратные иллюстрации на странице
«Дизайн, кино и пуфики»

Квад­рат­ные иллю­стра­ции сами по себе смот­рятся без­зубо и скучно, но ино­гда помо­гают добиться инте­рес­ного модуль­ного эффекта на странице.

Квадратные иллюстрации на странице
«Дизайн, кино и пуфики»

Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

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

Карина Фомина смотрит на текст

Карина Фомина смотрит на текст

Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

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

Иллюстрация должна приносить максимальный эффект от занимаемой площади. Чтобы повысить информативность и усилить воздействие фотографии, нужно обрезать лишние объекты, фон и незначительные детали. Тим Харровер советует: «Обрезайте фотографию, пока она не закричит».

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

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

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

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

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

Иллю­стра­ция должна при­но­сить мак­си­маль­ный эффект от зани­ма­е­мой пло­щади. Чтобы повы­сить инфор­ма­тив­ность и уси­лить воз­дей­ствие фото­гра­фии, нужно обре­зать лиш­ние объ­екты, фон и незна­чи­тель­ные детали. Тим Хар­ро­вер сове­тует: «Обре­зайте фото­гра­фию, пока она не закричит».

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

Плохо

Небо сливается с белым фоном страницы

Хорошо

Лёгкая рамка
решает проблему

Фото­гра­фия должна быть чётко огра­ни­чена соб­ствен­ным фоном или тон­кой пря­мо­уголь­ной рам­кой. Облака, схо­дя­щие «на нет» — ошибка.

То же отно­сится к гра­ни­цам обтрав­лен­ных иллю­стра­ций: они должны быть чётко очерчены.

Плохо

Небо сливается с белым фоном страницы

Фотография должна быть чётко ограничена собственным фоном или тонкой прямоугольной рамкой. Облака, сходящие «на нет» — ошибка.

Хорошо

Лёгкая рамка решает проблему

То же относится к границам обтравленных иллюстраций: они должны быть чётко очерчены.

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

Плохо

Хорошо

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

При умень­ше­нии порт­рета важно, чтобы лицо оста­ва­лось узна­ва­е­мым. Это тоже при­чина под­ре­зать фотографию.

Плохо

Любовь Котова:
Отчет­ность за полу­го­дие в элек­трон­ном
виде сдают ком­па­нии, у кото­рых
за про­шлый год сред­не­спи­соч­ная
чис­лен­ность пре­вы­сила 50 человек

Хорошо

Любовь Котова:
Отчет­ность за полу­го­дие в элек­трон­ном
виде сдают ком­па­нии, у кото­рых
за про­шлый год сред­не­спи­соч­ная
чис­лен­ность пре­вы­сила 50 человек

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

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

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

Увеличение хорошей фотографии сделает её еще лучше. Фотография Андрея Горбунова

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

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

Увеличение хорошей фотографии сделает её еще лучше. Фотография Андрея Горбунова

Фотография искажена ничего не подозревающим прохожим

Разворот-катастрофа. Накладки: подборка Чарльза Эпла

Дизай­нер сле­дит, чтобы на выбран­ной им фото­гра­фии посто­рон­ние объ­екты слу­чайно не иска­жали форму объекта.

Даже от сосед­ства без­обид­ных иллю­стра­ций может слу­читься насто­я­щая катастрофа.

Фотография искажена ничего не подозревающим прохожим

Дизайнер следит, чтобы на выбранной им фотографии посторонние объекты случайно не искажали форму объекта.

Разворот-катастрофа. Накладки: подборка Чарльза Эпла

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

Элемент управления

Эле­мент управ­ле­ния — базо­вый эле­мент экран­ной вёрстки.

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

Поэтому совре­мен­ный дизай­нер исполь­зует не только зна­ния о поль­зо­ва­тель­ском интер­фейсе, при­выч­ках и эрго­но­мике, но и типо­гра­фи­че­ские свой­ства эле­мен­тов управ­ле­ния, чтобы стро­ить из них лёг­кие, проч­ные и чита­бель­ные кон­струк­ции. Здесь мы рас­смот­рим только эту «вер­сталь­ную» сто­рону медали.

Эле­менты управ­ле­ния по форме в вёрстке делятся на точеч­ные, линей­ные и прямоугольные.

Элемент управления

Элемент управления — базовый элемент экранной вёрстки.

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

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

Элементы управления по форме в вёрстке делятся на точечные, линейные и прямоугольные.

В углу

Точечные элементы

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

Точечные элементы удобны в вёрстке. Они выигрышно смотрятся, если выделить им особое «якорное» положение.

В центре

В углу

Точеч­ные элементы

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

Точеч­ные эле­менты удобны в вёрстке. Они выиг­рышно смот­рятся, если выде­лить им осо­бое «якор­ное» положение.

В центре

Точеч­ные эле­менты легко при­стра­и­ва­ются к более важ­ным элементам:

Но точка в вёрстке — пло­хой команд­ный игрок, каж­дая ста­ра­ется пере­кри­чать другую:

Ворд

Чтобы успо­ко­ить ряд пик­то­грамм на панели инстру­мен­тов, при­хо­дится при­бе­гать к ради­каль­ным мерам — строго уни­фи­ци­ро­вать раз­меры, выве­рять поря­док и ритм пятен и даже пол­но­стью отка­зы­ваться от цвета:

Гугль

Точечные элементы в интерфейсе

Точечные элементы легко пристраиваются к более важным элементам:

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

Ворд

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

Гугль

Точечные элементы в интерфейсе

Линейные элементы

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

Строчные элементы умеют растягиваться по горизонтали в соответствии с текстовым содержанием.

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

Плохо

Хорошо

Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит

А вот увеличиваться по вертикали для них неестественно. Линейные элементы экономичны и не выходят за пределы своей строки. Из них отлично складываются панели инструментов.

Плохо

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

Хорошо

Кегль подписи и содержания совпадают

Размеры линейных элементов и их содержимое должны соответствовать окружению.

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

Линей­ные элементы

Боль­шая часть эле­мен­тов интер­фейса — линей­ные, хорошо рабо­та­ю­щие в строке: пере­клю­ча­тель, кнопка, поле ввода, пол­зу­нок, звёз­дочки рейтинга:

Строч­ные эле­менты умеют рас­тя­ги­ваться по гори­зон­тали в соот­вет­ствии с тек­сто­вым содержанием.

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

Плохо

хорошо

Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит

А вот уве­ли­чи­ваться по вер­ти­кали для них неесте­ственно. Линей­ные эле­менты эко­но­мичны и не выхо­дят за пре­делы своей строки. Из них отлично скла­ды­ва­ются панели инструментов.

плохо

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

хорошо

Кегль подписи и содержания совпадают

Раз­меры линей­ных эле­мен­тов и их содер­жи­мое должны соот­вет­ство­вать окружению.

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

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

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

Пример типографических гайдлайнов для элементов управления

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

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

Пример типографических гайдлайнов для элементов управления

Прямоугольные элементы

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

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

Большой прямоугольный список в левой части задаёт структуру окна

Пря­мо­уголь­ные эле­менты

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

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

Большой прямоугольный список в левой части задаёт структуру окна

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

Фрагмент промостраницы страховой компании

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

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

плохо

хорошо

Редизайн окна поиска пациентов «Проскан»

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

Фрагмент промостраницы страховой компании

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

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

плохо

Редизайн окна поиска пациентов «Проскан»

хорошо

Ссылка

Гиперс­сылка — базо­вый эле­мент экран­ной вёрстки.

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

Ссылка должна быть опо­зна­ва­ема в тек­сте. Синюю под­чёрк­ну­тую ссылку легче всего отли­чить от дру­гих цвет­ных заго­лов­ков и подписей.

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

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

Ссылка

Гиперссылка — базовый элемент экранной вёрстки.

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

Ссылка должна быть опознаваема в тексте. Синюю подчёркнутую ссылку легче всего отличить от других цветных заголовков и подписей.

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

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

Ссылка — это вид тек­сто­вого выде­ле­ния, а автор при­дер­жи­ва­ется прин­ципа «выде­ле­ние скло­ня­ется». Пред­логи, союзы и дру­гие слова, кото­рые обычно при­кле­и­ва­ются нераз­рыв­ными про­бе­лами, вклю­ча­ются в ссылку (и выде­ля­ются) вме­сте со сло­вами, к кото­рым они отно­сятся. Напри­мер, ссылка будет сто­ять на всём сло­во­со­че­та­нии «в совете», а не только со слова «совет», как дик­тует логика программиста.

Ссылка с тру­дом тер­пит пере­носы. Мно­го­строч­ные ссылки плохо выгля­дят, как любые выде­лен­ные над­писи и заголовки.

плохо

Ссылка — это вид текстового выделения, а автор придерживается принципа «выделение склоняется». Предлоги, союзы и другие слова, которые обычно приклеиваются неразрывными пробелами, включаются в ссылку (и выделяются) вместе со словами, к которым они относятся. Например, ссылка будет стоять на всём словосочетании «в совете», а не только со слова «совет», как диктует логика программиста.

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

плохо

Как свёрстано

Как воспринимается

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

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

хорошо

Новости на Яндексе

Как свёрстано

Как воспринимается

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

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

хорошо

Новости на Яндексе

плохо

хорошо

Как ко всем дру­гим эле­мен­там, в отно­ше­нии ссы­лок дей­ствует реко­мен­да­ция «сме­шать комки».

Хорошо орга­ни­зо­ван­ная вёрстка состоит из одно­род­ных бло­ков подоб­ных элементов.

плохо

Как ко всем другим элементам, в отношении ссылок действует рекомендация «смешать комки».

хорошо

Хорошо организованная вёрстка состоит из однородных блоков подобных элементов.

Ссылки могут быть сгруппированы в строку — горизонтальное меню.

Минимально допустимое расстояние между соседними ссылками, как между элементами управления — примерно два пробела.

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

Ссылки могут быть сгруп­пи­ро­ваны в строку — гори­зон­таль­ное меню.

Мини­мально допу­сти­мое рас­сто­я­ние между сосед­ними ссыл­ками, как между эле­мен­тами управ­ле­ния — при­мерно два пробела.

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

Оксфорд‑тест по английскому языку

Подпись

Подпись — базовый элемент вёрстки.

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

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

Подпись

Под­пись — базо­вый эле­мент вёрстки.

Под­писи сопро­вож­дают дру­гие эле­менты вёрстки — иллю­стра­ции, эле­менты управ­ле­ния и даже гиперс­сылки. Под­писи объ­яс­няют их назна­че­ние и содер­жа­ние, слу­жат мости­ком к основ­ному тексту.

Иллю­стра­ция — самый замет­ный якор­ный объ­ект. Иллю­стра­ции с подпи­ся­ми можно изу­чать отдельно от тек­ста. Но если иллю­стра­ция заин­те­ре­со­вала чита­теля, то бла­го­даря подпи­си чита­тель «ныр­нёт» и в основ­ной текст.

Оксфорд‑тест по английскому языку

Угадайте, на что смотрят
Иидзаса и Бондарев,
и выиграйте бесплатное
занятие!

Подписи интригуют и развлекают читателя

Иллюстрации без подписи — бессмысленные декорации

Подпись необязательна, если иллюстрация понятна без объяснений, стоит рядом с заголовком или описанием в основном тексте.

Нумерованные иллюстрации и отдельные подписи неудобно искать.
Армин Хофманн. Руководство по графическому дизайну: принципы и практика, 2001

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

Угадайте, на что смотрят
Иидзаса и Бондарев,
и выиграйте бесплатное
занятие!

Подписи интригуют и развлекают читателя

Иллюстрации без подписи — бессмысленные декорации

Под­пись необя­за­тельна, если иллю­стра­ция понятна без объ­яс­не­ний, стоит рядом с заго­лов­ком или опи­са­нием в основ­ном тексте.

Нумерованные иллюстрации и отдельные подписи неудобно искать.
Армин Хофманн. Руководство по графическому дизайну: принципы и практика, 2001

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

Выносные линии должны быть тонкими: не более 20% чёрного на экране или 0,25 п. на бумаге

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

Выносные линии не должны втыкаться в указываемую деталь

Не должны совпадать или идти параллельно с ближайшими линиями самой иллюстрации

Выносные линии должны иметь достаточную длину, чтобы их было легко заметить

Хорошо, если подпись располагается рядом с иллюстрацией. Лучше, если подписаны отдельные детали.

Хорошо, если под­пись рас­по­ла­га­ется рядом с иллю­стра­цией. Лучше, если под­пи­саны отдель­ные детали.

Судья руководит, опрашивает стороны, выясняет обстоятельства и пишет судебные акты

Секретарь заседания ведёт протокол, проверяет явку, отправляет повестки, выдаёт решения и помогает судье

Секретарь заседания ведёт протокол, проверяет явку, отправляет повестки, выдаёт решения и помогает судье

Редкое чудо техники — монитор с информацией
о делах

Редкое чудо техники — монитор с информацией
о делах

Устраивайтесь там, где удобно. Если судья решит, что стороны сели «не так», он вас поправит

Свидетель отвечает на вопросы,
рассказывает об обстоятельствах

Чтобы что‑то сказать,
дайте это понять жестом.
Скорее всего, судья даст
вам слово

Чтобы что‑то сказать,
дайте это понять жестом.
Скорее всего, судья даст
вам слово

Если истец не докажет свои
требования — проиграет иск

Заранее выключите или обеззвучьте телефон

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

Вынос­ные линии должны быть тон­кими: не более 20% чёр­ного на экране или 0,25 п. на бумаге
Они не должны пере­се­каться между собой и должны как можно меньше пере­се­кать изоб­ра­же­ние
Вынос­ные линии не должны вты­каться в ука­зы­ва­е­мую деталь
Не должны сов­па­дать или идти парал­лельно с бли­жай­шими лини­ями самой иллю­стра­ции
Вынос­ные линии должны иметь доста­точ­ную длину, чтобы их было легко заме­тить

Чаще всего подписи располагаются снизу или сбоку от своих объектов

Однако поля ввода подписывают слева или сверху, чтобы их названия были видны заранее

Шрифт подпи­сей обычно отли­ча­ется от основ­ного тек­ста мень­шим кег­лем или начертанием.

В конце подпи­сей точка не ста­вится, двое­то­чия в под­пи­сях к полям ввода необязательны.

Чаще всего подписи располагаются снизу или сбоку от своих объектов

Шрифт подписей обычно отличается от основного текста меньшим кеглем или начертанием.

Однако поля ввода подписывают слева или сверху, чтобы их названия были видны заранее

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

Тест по базовым элементам

На иллюстрации простые заголовки текстовых блоков. Укажите заголовки с ошибками и моветоном в оформлении.

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

Как выглядит хорошо свёрстанный левым флагом текст?

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

Выберите варианты с правильным положением картины Жака‑Луи Давида относительно текста.

Перечислите недостатки «обтравленной» иллюстрации.

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

Перечислите визуальные недостатки формы заказа звонка.

У кнопки недостаточные боковые поля
Верхнее поле влезает в интерлиньяж подписи «Имя»
Надпись «Заказать звонок» визуально провалилась вниз
Нет графы «Фамилия»

Выберите предпочтительные варианты выделения ссылки в тексте.

Отметьте «бракованные» выносные линии на иллюстрации.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест по базовым элементам

На иллюстрации простые заголовки текстовых блоков. Укажите заголовки с ошибками и моветоном в оформлении.

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

Как выглядит хорошо свёрстанный левым флагом текст?

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

Выберите варианты с правильным положением картины Жака‑Луи Давида относительно текста.

Перечислите недостатки «обтравленной» иллюстрации.

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

Перечислите визуальные недостатки формы заказа звонка.

У кнопки недостаточные боковые поля
Верхнее поле влезает в интерлиньяж подписи «Имя»
Надпись «Заказать звонок» визуально провалилась вниз
Нет графы «Фамилия»

Выберите предпочтительные варианты выделения ссылки в тексте.

Отметьте «бракованные» выносные линии на иллюстрации.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

3
Модули

текст без иллюстраций

лента

текст с иллюстрациями

форма тек­ста и поря­док чтения

доми­ни­ру­ю­щие
и вспо­мо­га­тель­ные иллюстрации

вер­ти­каль­ные иллюстрации

Текст без иллюстраций

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

Модуль­ная стра­ница состоит из смыс­ло­вых бло­ков. Рас­смот­рим тек­сто­вые блоки без иллюстраций.

3
Модули

текст без иллюстраций

лента

текст с иллюстрациями

форма текста и порядок чтения

доминирующие
и вспомогательные иллюстрации

вертикальные иллюстрации

Текст без иллюстраций

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

Модульная страница состоит из смысловых блоков. Рассмотрим текстовые блоки без иллюстраций.

Эта­лон­ный модуль — это заго­ло­вок, кото­рый накры­вает текст.

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

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

Эталонный модуль — это заголовок, который накрывает текст.

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

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

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

Заголовок и главная ссылка могут быть объединены, если это не нарушит единообразие остальных блоков на странице.

Если в блоке нет текста, но есть несколько ссылок, у него есть шанс вытянуться в строку.

Или вовсе редуцироваться до отдельно стоящей ссылки.

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

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

Заго­ло­вок и глав­ная ссылка могут быть объ­еди­нены, если это не нару­шит еди­но­об­ра­зие осталь­ных бло­ков на странице.

Если в блоке нет тек­ста, но есть несколько ссы­лок, у него есть шанс вытя­нуться в строку.

Или вовсе реду­ци­ро­ваться до отдельно сто­я­щей ссылки.

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

лучше

Блоки приобрели форму, смысл текста восстановлен

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

так себе

Соседние элементы пестрят, текст отделён и непонятен

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

лучше

Блоки приобрели форму, смысл текста восстановлен

Направим мутации эталона в сторону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

Напра­вим мута­ции эта­лона в сто­рону усложнения:

Текст в модуле разбит подзаголовками по вертикали

Или по горизонтали — по колонкам

По колонкам становятся и неоднородные элементы.

Даже заголовок может свеситься в одной из колонок. В такой конфигурации текст ничем не отделён сверху от соседних блоков и рискует «слипнуться» с их текстом. Но на простой странице это смотрится эффектно и «по‑швейцарски».

Руководство по фирменному стилю НАСА, 1976

По колон­кам ста­но­вятся и неод­но­род­ные элементы.

Даже заго­ло­вок может све­ситься в одной из коло­нок. В такой кон­фи­гу­ра­ции текст ничем не отде­лён сверху от сосед­них бло­ков и рис­кует «слип­нуться» с их тек­стом. Но на про­стой стра­нице это смот­рится эффектно и «по‑швейцар­ски».

Руководство по фирменному стилю НАСА, 1976

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

Правило работает и в крупных блоках, и в малых формах

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

Правило работает и в крупных блоках, и в малых формах

Обычная лента из ссылок с подписями. Архив «Советов»

Журнал «Главбух»

Сайт «Бизнес‑обсервер»

Лента

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

Вместо подписей над ссылками могут стоять бирки. Или сразу и бирки, и подписи.

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

Лента

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

Вме­сто подпи­сей над ссыл­ками могут сто­ять бирки. Или сразу и бирки, и подписи.

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

Обычная лента из ссылок с подписями. Архив «Советов»

Журнал «Главбух»

Сайт «Бизнес‑обсервер»

хорошо


Известия

хорошо

Система Кадры

плохо

хорошо

приемлемо

Би‑би‑си

опасно

Нью‑Йорк Таймс

безопаснее

Лента на сайте «Би‑би‑си»

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

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

Иногда даже — дополнительными линейками.

Бирки могут «свешиваться» в отдельную колонку ленты.

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

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

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

Ино­гда даже — допол­ни­тель­ными линейками.

Бирки могут «све­ши­ваться» в отдель­ную колонку ленты.

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

хорошо

Известия

хорошо

Система Кадры

плохо

хорошо

приемлемо

Би‑би‑си

опасно

Нью‑Йорк Таймс

безопаснее

Лента на сайте «Би‑би‑си»

ИТАР‑ТАСС, Система Главбух и Ю‑Эс‑Эй Тудей

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

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

На сайте «Ю‑Эс‑Эй Тудей» такой дизайн оправ­дан тем, что ссылки сбоку играют роль гене­ра­то­ров спон­тан­ного инте­реса при чте­нии основ­ной колонки — дотош­ного изу­че­ния пра­вой части окна не пред­по­ла­га­ется. А для «Системы Глав­бух» в бюро пред­ло­жили более ком­пакт­ный дизайн, чем пока­зан здесь.

ИТАР‑ТАСС, Система Главбух и Ю‑Эс‑Эй Тудей

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

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

На сайте «Ю‑Эс‑Эй Тудей» такой дизайн оправдан тем, что ссылки сбоку играют роль генераторов спонтанного интереса при чтении основной колонки — дотошного изучения правой части окна не предполагается. А для «Системы Главбух» в бюро предложили более компактный дизайн, чем показан здесь.

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Ленте необязательно иметь вертикальную форму. Короткая лента может вытянуться в несколько колонок.

Или даже занять колонками горизонтальный «этаж» на странице.

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

В бумажных газетах со сверх­плотной модульной вёрсткой высота колонок идеально равна

Ленте необя­за­тельно иметь вер­ти­каль­ную форму. Корот­кая лента может вытя­нуться в несколько колонок.

Или даже занять колон­ками гори­зон­таль­ный «этаж» на странице.

В бумажных газетах со сверх­плотной модульной вёрсткой высота колонок идеально равна

Чтобы сохра­нять пря­мо­уголь­ную форму мно­го­ко­ло­ноч­ного модуля, его колонки должны иметь оди­на­ко­вую высоту. Точ­ное равен­ство коло­нок в вебе крайне сложно соб­лю­сти, но необ­хо­димо поза­бо­титься, чтобы каж­дая сле­ду­ю­щая колонка была не длин­нее преды­ду­щей. Для этого фик­си­руют коли­че­ство эле­мен­тов, вво­дят редак­тор­ские огра­ни­че­ния на длину заго­лов­ков и даже про­граммно вычис­ляют физи­че­скую высоту тек­ста по его объёму.

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Рубрикатор в «Системе Главбух»

Би‑би‑си

Новости банка «Траст»

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

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

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

Рубрикатор в «Системе Главбух»

Би‑би‑си

Новости банка «Траст»

По мере услож­не­ния струк­туры лента может быть раз­бита подзаголовками.

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

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

хорошо

хуже

сомнительно

Текст с иллюстрациями

Иллюстрация лучше всего чувствует себя наверху вертикального текстового блока.

Иллюстрация под заголовком отделяет текст от заголовка и прерывает чтение. При этом иллюстрация заметнее раньше текста, и читателю придётся прыгать от неё взглядом вверх‑вниз к заголовку и тексту.

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

Текст с иллюстрациями

Иллю­стра­ция лучше всего чув­ствует себя наверху вер­ти­каль­ного тек­сто­вого блока.

Иллю­стра­ция под заго­лов­ком отде­ляет текст от заго­ловка и пре­ры­вает чте­ние. При этом иллю­стра­ция замет­нее раньше тек­ста, и чита­телю при­дётся пры­гать от неё взгля­дом вверх‑вниз к заго­ловку и тексту.

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

хорошо

хуже

сомнительно

Иллюстрация

Заголовок

Текст

Cсылки

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

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

Иллюстрация

Заголовок

Текст

Cсылки

Я пред­ла­гаю дизай­не­рам запом­нить кано­ни­че­скую кон­струк­цию вер­ти­каль­ного тек­сто­вого модуля.

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

Если тек­сто­вый блок содер­жит одну ссылку, для ком­пакт­но­сти её стоит объ­еди­нить с заго­лов­ком. Тогда иллю­стра­ция тоже должна стать «кли­ка­бель­ной» и рабо­тать вме­сте с тек­сто­вой ссыл­кой. По закону Фиттса это сде­лает блок гораздо удоб­нее для нажатия.

Иде­ально, если ширина иллю­стра­ции равна ширине тек­ста. Это воз­можно при дизайне с фик­си­ро­ван­ной шири­ной моду­лей или если иллю­стра­ция «тянется» вме­сте с его тек­сто­вой частью.

Если текстовый блок содержит одну ссылку, для компактности её стоит объединить с заголовком. Тогда иллюстрация тоже должна стать «кликабельной» и работать вместе с текстовой ссылкой. По закону Фиттса это сделает блок гораздо удобнее для нажатия.

Идеально, если ширина иллюстрации равна ширине текста. Это возможно при дизайне с фиксированной шириной модулей или если иллюстрация «тянется» вместе с его текстовой частью.

Если иллюстрация не прямоугольная, а «обтравленная» на фоне страницы, то её размеры зависят от формы «обтравленного» предмета. Картинка в обтравке может выравниваться по левой границе или по центру блока. При выравнивании желательно на глаз компенсировать форму объекта и рваный правый край текста.

Если иллю­стра­ция не пря­мо­уголь­ная, а «обтрав­лен­ная» на фоне стра­ницы, то её раз­меры зави­сят от формы «обтрав­лен­ного» пред­мета. Кар­тинка в обтравке может вырав­ни­ваться по левой гра­нице или по цен­тру блока. При вырав­ни­ва­нии жела­тельно на глаз ком­пен­си­ро­вать форму объ­екта и рва­ный пра­вый край текста.

В гори­зон­таль­ном модуле иллю­стра­ция может рас­по­ла­гаться слева или справа от основ­ного текста:

В общем слу­чае оба вари­анта при­ем­лемы. Кон­крет­ный выбор зави­сит от окру­же­ния на стра­нице. Не стоит забы­вать и о ком­по­зи­ции фотографий.

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

В горизонтальном модуле иллюстрация может располагаться слева или справа от основного текста:

В общем случае оба варианта приемлемы. Конкретный выбор зависит от окружения на странице. Не стоит забывать и о композиции фотографий.

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

Гори­зон­таль­ные модули в экран­ном дизайне свя­заны с целым набо­ром опасностей.

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

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

С пер­вой про­бле­мой изоб­ре­та­тельно спра­ви­лись дизай­неры «Вкон­такте». Опуб­ли­ко­ван­ная в ленте ссылка акку­рат­нее и в два раза ком­пакт­нее ана­ло­гич­ной ссылки в «Фейсбуке».

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

Фейсбук

Вконтакте

Фейсбук

Вконтакте

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

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

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

С первой проблемой изобретательно справились дизайнеры «Вконтакте». Опубликованная в ленте ссылка аккуратнее и в два раза компактнее аналогичной ссылки в «Фейсбуке».

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

Проблемная иллюстрация «в подмышке» не отделяет заголовок от начала текста, если стоит справа:

Плохо

Левая подмышка

Иллюстрация отделяет заголовок от текста

Хорошо

Правая подмышка

Нью‑Йорк Таймс

Про­блем­ная иллю­стра­ция «в под­мышке» не отде­ляет заго­ло­вок от начала тек­ста, если стоит справа:

Плохо

Левая подмышка

Хорошо

Правая подмышка

Иллюстрация отделяет заголовок от текста

Нью‑Йорк Таймс

Би‑би‑си

Ю‑Эс‑Эй Тудей

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

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

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

Если несколько моду­лей с боко­вой иллю­стра­цией рас­по­ла­га­ются друг под дру­гом, иллю­стра­ции объ­еди­ня­ются друг с дру­гом в неде­ли­мую колонку лучше, чем с соб­ствен­ными модулями.

Тек­сто­вая колонка тоже рабо­тает неза­ви­симо от иллю­стра­ций и поря­док чте­ния ста­но­вится случайным.

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

Би‑би‑си

Ю‑Эс‑Эй Тудей

Плохо

Лучше

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

Текст неожиданно меняет левый край в случайном месте. С первого взгляда глаз выхватывает и воспринимает это место как начало текста. А при последовательном чтении сверху вниз — спотыкается в попытке найти начало съехавшей строки.

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

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

Текст неожи­данно меняет левый край в слу­чай­ном месте. С пер­вого взгляда глаз выхва­ты­вает и вос­при­ни­мает это место как начало тек­ста. А при после­до­ва­тель­ном чте­нии сверху вниз — спо­ты­ка­ется в попытке найти начало съе­хав­шей строки.

Как и в слу­чае с «под­мыш­кой», доста­точно пере­ста­вить кар­тинку вправо.

Плохо

Лучше

хорошо

Сайт «Зе Вилладж»

плохо

Сайт «Зе Вилладж»

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

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

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

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

Это пре­красно выгля­дит, если иллю­стра­ция согла­со­вана с текстом.

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

хорошо

Сайт «Зе Вилладж»

плохо

Сайт «Зе Вилладж»

Фрагмент интерфейса Бейскемпа

Поиск «Советов»

Твитер

Промостраница юридического сервиса «Договоры»

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

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

Другой способ — систематизировать размеры «превьюшек» и расположить прямоугольной матрицей.

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

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

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

Дру­гой спо­соб — систе­ма­ти­зи­ро­вать раз­меры «пре­вью­шек» и рас­по­ло­жить пря­мо­уголь­ной матрицей.

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

Фрагмент интерфейса Бейскемпа

Поиск «Советов»

Твитер

Промостраница юридического сервиса «Договоры»

Поиск по картинкам Гугля

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

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

Модуль с «фоторамой» может быть не только вертикальным, но и горизонтальным.

Горизонтальная фоторама на сайте «ИТАР‑ТАСС»

Вертикальная фоторама на «Майспейсе»

Поиск по картинкам Гугля

Модуль­ный под­ход: наре­зать общий пря­мо­уголь­ник на иллю­стра­ции раз­но­об­раз­ных раз­ме­ров и пропорций.

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

Модуль с «фото­ра­мой» может быть не только вер­ти­каль­ным, но и горизонтальным.

Горизонтальная фоторама на сайте «ИТАР‑ТАСС»

Вертикальная фоторама на «Майспейсе»

Тест

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

Как добавить важности отдельно стоящей ссылке?

Выберите самый приемлемый вариант вёрстки текстового модуля.

Выберите плохие варианты вёрстки ленты.

Какая компоновка соответствует эталонной последовательности?

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

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

Как добавить важности отдельно стоящей ссылке?

Выберите самый приемлемый вариант вёрстки текстового модуля.

Выберите плохие варианты вёрстки ленты.

Какая компоновка соответствует эталонной последовательности?

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

Форма текста и порядок чтения

Чело­век читает слева направо, сверху вниз.

Для про­стоты обо­зна­чим чте­ние по колонке вер­ти­каль­ной стрелкой.

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

Форма текста и порядок чтения

Человек читает слева направо, сверху вниз.

Для простоты обозначим чтение по колонке вертикальной стрелкой.

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

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

Направление чтения по колонкам изобразим горизонтальной стрелкой.

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

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

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

Направ­ле­ние чте­ния по колон­кам изоб­ра­зим гори­зон­таль­ной стрелкой.

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

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

В матрице из текстовых блоков направление чтения не так очевидно и предсказуемо.

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

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

Если «сломать» выравнивание, текст снова объединится в колонки.

В мат­рице из тек­сто­вых бло­ков направ­ле­ние чте­ния не так оче­видно и предсказуемо.

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

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

Если «сло­мать» вырав­ни­ва­ние, текст снова объ­еди­нится в колонки.

так себе

лучше

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

Такие списки лучше раз­бить на колонки и поста­вить друг под друга. Кстати, колонки будет гораздо легче выров­нять по высоте.

так себе

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

лучше

Такие списки лучше разбить на колонки и поставить друг под друга. Кстати, колонки будет гораздо легче выровнять по высоте.

Положение иллюстрации относительно текста тоже задаёт направление.

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

Так себе

«Траектория» взгляда должна описывать простую линию без непредсказуемых поворотов.

Лучше

Поло­же­ние иллю­стра­ции отно­си­тельно тек­ста тоже задаёт направление.

Так себе

Так себе

Лучше

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

«Тра­ек­то­рия» взгляда должна опи­сы­вать про­стую линию без непред­ска­зу­е­мых поворотов.

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

Верно и обратное: случайное выравнивание создаёт новый псевдомодуль.

Новостной блок имеет вид шахматной доски: статьи справа подозрительно связались с крупной фотографией Кудрина, а заголовок заметки о нём — с авторской колонкой Дениса Самсонова.

На макете плаката подпись к верхней иллюстрации с процентами — «В России совершается 49% абортов» — выровнена по верху изображения рекламируемого презерватива, а слоган — по низу. Эти две надписи и изображение упаковки образуют модуль, и фраза об абортах увязывается с товаром. Как будто это презервативы во всём виноваты.

В модуль­ной вёрстке свя­зан­ные эле­менты согла­со­ваны по ширине и высоте, и бла­го­даря этому визу­ально объ­еди­ня­ются в пря­мо­уголь­ный модуль.

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние создаёт новый псевдомодуль.

Новост­ной блок имеет вид шах­мат­ной доски: ста­тьи справа подо­зри­тельно свя­за­лись с круп­ной фото­гра­фией Куд­рина, а заго­ло­вок заметки о нём — с автор­ской колон­кой Дениса Самсонова.

На макете пла­ката под­пись к верх­ней иллю­стра­ции с про­цен­тами — «В Рос­сии совер­ша­ется 49% абор­тов» — выров­нена по верху изоб­ра­же­ния рекла­ми­ру­е­мого пре­зер­ва­тива, а сло­ган — по низу. Эти две над­писи и изоб­ра­же­ние упа­ковки обра­зуют модуль, и фраза об абор­тах увя­зы­ва­ется с това­ром. Как будто это пре­зер­ва­тивы во всём виноваты.

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

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

Обратите внимание, как блок кнопки «Получить доступ» выравнивается сверху с надписями «Айфон» и «Андроид», а снизу — со строкой меню в левой части. В итоге две не связанные строки объединились в псевдомодуль, который пересекается с блоком новостей слева сверху.

Красноватым показаны области пересечения.

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

Правила модульной вёрстки

  • Модуль имеет форму прямоугольника или формирует его антипространством.

  • Внутренние элементы модуля согласованы по направлению чтения.

  • Выравнивание ширины, высоты и положения элементов создаёт новый модуль (или псевдомодуль).

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

  • Соседние модули не должны вводить читателя в заблуждение.

Модуль­ная вёрстка — это деле­ние на пря­мо­уголь­ники. Модули не должны пере­се­каться, напол­зать и пере­кры­вать друг друга, если это не созна­тель­ный сти­ли­сти­че­ский ход.

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

Обра­тите вни­ма­ние, как блок кнопки «Полу­чить доступ» вырав­ни­ва­ется сверху с над­пи­сями «Айфон» и «Андроид», а снизу — со стро­кой меню в левой части. В итоге две не свя­зан­ные строки объ­еди­ни­лись в псев­до­мо­дуль, кото­рый пере­се­ка­ется с бло­ком ново­стей слева сверху.

Крас­но­ва­тым пока­заны обла­сти пересечения.

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

Пра­вила модуль­ной вёрстки

  • Модуль имеет форму пря­мо­уголь­ника или фор­ми­рует его антипространством.

  • Внут­рен­ние эле­менты модуля согла­со­ваны по направ­ле­нию чтения.

  • Вырав­ни­ва­ние ширины, высоты и поло­же­ния эле­мен­тов создаёт новый модуль (или псевдомодуль).

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

  • Сосед­ние модули не должны вво­дить чита­теля в заблуждение.

Доминирующие и вспомогательные иллюстрации

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

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

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

Так себе

Какая из иллюстраций важнее и интереснее? С чего начать? К сожалению, большинство сайтов похожи на интерфейс к безликой базе данных

Лучше

Доминирующая иллюстрация однозначно указывает: «Здесь начало осмотра». Но остальные иллюстрации по‑прежнему безуспешно спорят друг с другом

Хорошо

Взгляд свободно и уверенно скользит по странице с явной визуальной иерархией

Доминирующие и вспомогательные иллюстрации

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

Хоро­ший дизайн создаёт иерар­хию, выде­ляет глав­ное и под­чи­нён­ное, помо­гает поль­зо­ва­телю найти свой путь. Хоро­шая вёрстка помо­гает чита­телю сори­ен­ти­ро­ваться на странице.

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

Так себе

Лучше

Какая из иллюстраций важнее и интереснее? С чего начать? К сожалению, большинство сайтов похожи на интерфейс к безликой базе данных

Доминирующая иллюстрация однозначно указывает: «Здесь начало осмотра». Но остальные иллюстрации по‑прежнему безуспешно спорят друг с другом

Хорошо

Взгляд свободно и уверенно скользит по странице с явной визуальной иерархией

Для начала попробуем простой способ — поставить иллюстрации рядом в общий прямоугольный блок:

Сойдёт

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

Гораздо реже попадается вёрстка иллюстраций друг под другом сбоку от текста:

Непривычно

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

Если довести идею до абсурда, «пирог» из узких иллюстраций превращается в интересную декорацию, как на сайте компании «Реатон»:

Сайт компании «Реатон»

А бутерброд из двух иллюстраций над текстом — неудачная идея:

Плохо

Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста

Для начала попро­буем про­стой спо­соб — поста­вить иллю­стра­ции рядом в общий пря­мо­уголь­ный блок:

сойдёт

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

Гораздо реже попа­да­ется вёрстка иллю­стра­ций друг под дру­гом сбоку от текста:

Непривычно

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

Если дове­сти идею до абсурда, «пирог» из узких иллю­стра­ций пре­вра­ща­ется в инте­рес­ную деко­ра­цию, как на сайте ком­па­нии «Реатон».

А бутер­брод из двух иллю­стра­ций над тек­стом — неудач­ная идея:

Плохо

Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста

Сайт компании «Реатон»

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

А теперь скомбинируем два базовых дизайна: поставим вспомогательную картинку сбоку от текста, а сверху накроем модуль доминирующей иллюстрацией:

Хорошо

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

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

Хорошо

Майспейс

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

Хуже

Старый дизайн ленты Фейсбука

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

А теперь ском­би­ни­руем два базо­вых дизайна: поста­вим вспо­мо­га­тель­ную кар­тинку сбоку от тек­ста, а сверху накроем модуль доми­ни­ру­ю­щей иллюстрацией:

Хорошо

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

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

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

Хорошо

Майспейс

Хуже

Старый дизайн ленты Фейсбука

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

Хорошо

Плохо

Помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста

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

Хорошо

Плохо

Помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста

Вернёмся к комбинированному дизайну. Теперь поступим наоборот: поставим доминирующую иллюстрацию сбоку, а вспомогательную — над текстом:

Хорошо

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

Хорошо

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

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

Макет страницы «Магазина горящих путёвок»

Вер­нёмся к ком­би­ни­ро­ван­ному дизайну. Теперь посту­пим нао­бо­рот: поста­вим доми­ни­ру­ю­щую иллю­стра­цию сбоку, а вспо­мо­га­тель­ную — над текстом:

Хорошо

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

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

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

Макет страницы «Магазина горящих путёвок»

Вертикальные иллюстрации

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

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

«Насильно оквадраченные» вертикальные и горизонтальные фотографии в Фейсбуке и Твитере

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


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

Пора бы отдать должное вертикальным картинкам.

Вертикальные иллюстрации

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

В итоге экран­ные дизай­неры не любят вер­ти­каль­ные фото­гра­фии, избе­гают их, боятся как огня. Новост­ные сайты и интер­нет‑газеты обре­зают вер­ти­каль­ные фото­гра­фии до гори­зон­таль­ных (или, может быть, про­сто выбра­сы­вают?) А фото­при­ло­же­ния и соци­аль­ные сети чет­вер­туют всех пого­ловно — уро­дуя не только про­блем­ные вер­ти­каль­ные, но и невин­ные гори­зон­таль­ные фотографии.

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


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

Пора бы отдать долж­ное вер­ти­каль­ным картинкам.

«Насильно оквадраченные» вертикальные и горизонтальные фотографии в Фейсбуке и Твитере

Адаптируем приведённые выше варианты вёрстки к вертикальным иллюстрациям.

Хорошо

«Блочный» вариант над текстом — очевидный и естественный

Плохо

Вертикальный кирпич сбоку получится слишком увесистым и потребует слишком много текста для одного модуля

Хорошо

«Комбинированный» вариант с небольшой вертикальной фотографией сбоку отлично подойдёт, например, для сопроводительного портрета

Хорошо

А так вертикальная фотография доминирует

Плохо

Важно помнить о соотношении размеров фотографий. Второстепенная фотография не должна спорить с главной

Адап­ти­руем при­ве­дён­ные выше вари­анты вёрстки к вер­ти­каль­ным иллюстрациям.

Хорошо

«Блочный» вариант над текстом — очевидный и естественный

Плохо

Вертикальный кирпич сбоку получится слишком увесистым и потребует слишком много текста для одного модуля

Хорошо

«Комбинированный» вариант с небольшой вертикальной фотографией сбоку отлично подойдёт, например, для сопроводительного портрета

Хорошо

А так вертикальная фотография доминирует

Плохо

Важно помнить о соотношении размеров фотографий. Второстепенная фотография не должна спорить с главной

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

Хорошо

Вертикальная фотография занимает высоту двух горизонтальных и выделяется размером

Мы рас­смот­рели ком­по­новку доми­ни­ру­ю­щих и вспо­мо­га­тель­ных иллю­стра­ций вер­ти­каль­ных и гори­зон­таль­ных про­пор­ций. Все при­меры под­хо­дят и для квад­рат­ных картинок.

Назад к вертикалям. Лента «Майспейса»

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

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

Хорошо

Вертикальная фотография занимает высоту двух горизонтальных и выделяется размером

Мы рассмотрели компоновку доминирующих и вспомогательных иллюстраций вертикальных и горизонтальных пропорций. Все примеры подходят и для квадратных картинок.

Назад к вертикалям. Лента «Майспейса»

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

Тест

Какой форме текста соответствует схема направления чтения?

Одноколоночной
Двухколоночной
Трёхколоночной
Многоколоночной
Любой

На иллюстрации скриншот сайта «Известий». Какие проблемы вёрстки вы видите?

Нарушен принцип модульности
Ссылки и подписи соседних новостей в ленте стоят слишком близко друг к другу
«Левая подмышка» в ленте: иллюстрация отделяет заголовок от начала текста
Обтекание иллюстрации текстом справа в ленте

На иллюстрации скриншот «Коммерсанта». Какие проблемы вёрстки вы видите?

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

Какие варианты компоновки вам кажутся более удачными?

Выберите приемлемые варианты компоновки доминирующей и вспомогательной иллюстраций.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Какой форме текста соответствует схема направления чтения?

Одноколоночной
Двухколоночной
Трёхколоночной
Многоколоночной
Любой

На иллюстрации скриншот сайта «Известий». Какие проблемы вёрстки вы видите?

Нарушен принцип модульности
Ссылки и подписи соседних новостей в ленте стоят слишком близко друг к другу
«Левая подмышка» в ленте: иллюстрация отделяет заголовок от начала текста
Обтекание иллюстрации текстом справа в ленте

На иллюстрации скриншот «Коммерсанта». Какие проблемы вёрстки вы видите?

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

Какие варианты компоновки вам кажутся более удачными?

Выберите приемлемые варианты компоновки доминирующей и вспомогательной иллюстраций.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

4
Страницы

С модуль­ной сеткой

Без иллюстраций

С иллюстрациями

Тек­сто­вая страница

Глав­ная страница

Ушки, цитаты, фак­то­иды, врезки

4
Страницы

С модульной сеткой

Без иллюстраций

С иллюстрациями

Текстовая страница

Главная страница

Ушки, цитаты, фактоиды, врезки

С модульной сеткой

Части стра­ницы могут дро­биться каж­дая по‑сво­ему, и при этом соблю­дать прин­цип модуль­но­сти, удачно рас­по­ла­гать якор­ные объ­екты и гра­мотно чере­до­вать ритм. Стра­ница без сетки может выгля­деть вполне прилично.

Без сетки

С модульной сеткой

Части страницы могут дробиться каждая по‑своему, и при этом соблюдать принцип модульности, удачно располагать якорные объекты и грамотно чередовать ритм. Страница без сетки может выглядеть вполне прилично.

Без сетки

Но стра­ница, для кото­рой преду­смот­рена сетка, как пра­вило, выгля­дит более цельной:

Сетка
с четырьмя колонками

Модуль­ная стра­ни­ца с четы­рёх­ко­ло­ноч­ной сеткой

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

Сетка с четырьмя колонками

Модуль­ная стра­ни­ца с четы­рёх­ко­ло­ноч­ной сеткой

Благодаря сетке разные страницы одного сайта или электронного издания выглядят единообразно.

Сетка с четырьмя колонками

Страницы сайта с четырёхколоночной сеткой

Страницы сайта с четырёхколоночной сеткой

Страницы сайта с четырёхколоночной сеткой

Бла­го­даря сетке раз­ные стра­ницы одного сайта или элек­трон­ного изда­ния выгля­дят единообразно:

Сетка
с четырьмя колонками

Страницы сайта с четырёхколоночной сеткой

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

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

Дизай­нер исполь­зует сетку и её нестан­дарт­ные воз­мож­но­сти, чтобы внед­рять на стра­ницу узна­ва­е­мые фир­мен­ные эле­менты, напри­мер «фак­то­иды» или цитаты на поло­вину колонки.

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

Приемлемо

Лучше

Скучно

Приемлемо

Плохо

Без иллюстраций

По традиции начнём с текста без иллюстраций. Простой способ собрать страницу — сделать «бутерброд», то есть расположить модули слоями друг под другом.

«Бутерброд» прекрасно подходит для шаблонов сайтов, сервисов и приложений, потому что страницы хорошо выглядят независимо от набора «слоёв» и их наполнения. Если данных будет слишком мало или слишком много, бутерброд укоротится или вырастет по вертикали без неуклюжих дыр и просветов.

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

Но однородная страница без иллюстраций не цепляет глаз. Введём ритм и расположим модули по колонкам. Доминирующий блок стал лучше выделен.

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

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

Если полностью игнорировать сетку и устроить вакханалию колонок, страница развалится.

Этим часто грешат промостраницы в интернете — так и атакуют нас рядами преимуществ и достоинств.

Без иллюстраций

По тра­ди­ции нач­нём с тек­ста без иллю­стра­ций. Про­стой спо­соб собрать стра­ницу — сде­лать «бутер­брод», то есть рас­по­ло­жить модули сло­ями друг под другом.

«Бутер­брод» пре­красно под­хо­дит для шаб­ло­нов сай­тов, сер­ви­сов и при­ло­же­ний, потому что стра­ницы хорошо выгля­дят неза­ви­симо от набора «слоёв» и их напол­не­ния. Если дан­ных будет слиш­ком мало или слиш­ком много, бутер­брод уко­ро­тится или вырас­тет по вер­ти­кали без неук­лю­жих дыр и просветов.

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

Но одно­род­ная стра­ница без иллю­стра­ций не цеп­ляет глаз. Вве­дём ритм и рас­по­ло­жим модули по колон­кам. Доми­ни­ру­ю­щий блок стал лучше выделен.

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

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

Если пол­но­стью игно­ри­ро­вать сетку и устро­ить вак­ха­на­лию коло­нок, стра­ница развалится.

Этим часто гре­шат про­мо­стра­ницы в интер­нете — так и ата­куют нас рядами пре­иму­ществ и достоинств.

Приемлемо

Лучше

Скучно

Приемлемо

Плохо

Вве­дём новый приём — плашку. Плашка помо­гает отде­лить модуль от сосед­него и объ­еди­нить его соб­ствен­ные части:

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

Суще­ствует мил­лион раз­но­вид­но­стей сти­лей пла­шек и рамок от плос­ких мини­ма­ли­стич­ных до объ­ём­ных с гра­ди­ен­тами и тенями.

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

Введём новый приём — плашку. Плашка помогает отделить модуль от соседнего и объединить его собственные части:

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

Существует миллион разновидностей стилей плашек и рамок от плоских минималистичных до объёмных с градиентами и тенями.

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

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

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

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

Если бутер­брод выгля­дит сухо­вато, вер­ти­каль­ная колонка раз­ба­вит гори­зон­таль­ную монотонность.

С иллюстрациями

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

Стра­ница выросла в раз­ме­рах, но не зря — с иллю­стра­ци­ями на неё при­хо­дит жизнь.

С иллюстрациями

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

Страница выросла в размерах, но не зря — с иллюстрациями на неё приходит жизнь.

Плохо

Плохо

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

Хорошо

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

Плохо

Плохо

Хорошо

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

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

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

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

Ошибкой было бы собрать все иллюстрации в самом верху, далеко внизу или у одной из сторон.

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

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

Ошиб­кой было бы собрать все иллю­стра­ции в самом верху, далеко внизу или у одной из сторон.

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

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

Чем проще содер­жа­ние стра­ницы, тем меньше слоёв и тем они одно­об­раз­нее, чем слож­нее струк­тура — тем больше слоёв и разнообразия.

Слои чере­ду­ются по визу­аль­ной ярко­сти, дина­мике, эмо­ци­о­наль­ному тону, пре­об­ла­да­нию иллю­стра­ций или тек­ста, раз­меру иллю­стра­ций, длине тек­ста и обя­за­тельно по ритму.

Чем проще содержание страницы, тем меньше слоёв и тем они однообразнее, чем сложнее структура — тем больше слоёв и разнообразия.

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

Рас­смот­рим отдельно осо­бен­ный тип модуля с иллю­стра­ци­ями — «галерею»:

Плохо

Хорошо

Сайт «Мэри Трюфель»

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

Мы не под­дер­жи­ваем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­рицы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зием раз­ме­ров и формы.

Рассмотрим отдельно особенный тип модуля с иллюстрациями — «галерею»:

Плохо

Хорошо

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

Сайт «Мэри Трюфель»

Мы не поддерживаем путь ленивых веб‑дизайнеров — мёртвые однообразные матрицы из фотографий. Жизнь приходит с разнообразием размеров и формы.

Кирпично

Интересно

К гале­реям при­ме­нимо пра­вило модуль­но­сти — блоки из фото­гра­фий должны стре­миться к пря­мо­уголь­ной форме. Но «кир­пич» из иллю­стра­ций выгля­дит как… кирпич.

Скучно, душно и моно­тонно. Такой модуль выгля­дит тяже­ло­весно и с тру­дом встра­и­ва­ется в стра­ницу рядом с другими.

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

На при­мере с гори­зон­таль­ной фото­гра­фией у модуля появи­лось два набора полей — внеш­ний, вокруг боль­шой фото­гра­фии, и внут­рен­ний, вокруг вер­ти­каль­ной фото­гра­фии и подпи­си к ней.

Кирпично

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

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

Интересно

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

На примере с горизонтальной фотографией у модуля появилось два набора полей — внешний, вокруг большой фотографии, и внутренний, вокруг вертикальной фотографии и подписи к ней.

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

Текстовая страница

Приведём рекомендации по вёрстке экранной текстовой страницы со статьёй, заметкой, книжной главой или текстом о компании.

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

Модульная

Текстовая

Основной текст

Колонка основного текста занимает 60⁠—70% ширины окна компьютера или планшета. В «резиновой» вёрстке ширина текстовой полосы уменьшается или увеличивается с изменением размера окна или экрана. Но разрешение экранов постоянно растёт, поэтому имеет смысл ограничивать максимальную ширину колонки текста, чтобы строки не становились чрезмерно длинными, а страница — трудной для чтения.

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

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

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

Текстовая страница

При­ве­дём реко­мен­да­ции по вёрстке экран­ной тек­сто­вой стра­ницы со ста­тьёй, замет­кой, книж­ной гла­вой или тек­стом о компании.

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

Модульная страница

Текстовая страница

Основной текст

Колонка основ­ного тек­ста зани­мает 60⁠—70% ширины окна ком­пью­тера или план­шета. В «рези­но­вой» вёрстке ширина тек­сто­вой полосы умень­ша­ется или уве­ли­чи­ва­ется с изме­не­нием раз­мера окна или экрана. Но раз­ре­ше­ние экра­нов посто­янно рас­тёт, поэтому имеет смысл огра­ни­чи­вать мак­си­маль­ную ширину колонки тек­ста, чтобы строки не ста­но­ви­лись чрез­мерно длин­ными, а стра­ница — труд­ной для чтения.

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

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

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

Подзаголовки

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

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

Заголовки третьего уровня

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

Подзаголовок в подбор к основному тексту. Ещё один способ избежать лишних отступов на странице.

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

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

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

Брендбук Скайсканера

Брендбук Скайсканера

Подзаголовки

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

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

Заголовки третьего уровня

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

Подзаголовок в подбор к основному тексту. Ещё один способ избежать лишних отступов на странице.

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

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

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

Для успешной работы дизайнеру необходимо:

  1. Понимать принципы дизайна.

  2. Разбираться в типографике и вёрстке.

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

  4. Уметь управлять задачами и проектами.

  5. Освоить инфостиль и основы редактуры.

  6. Быть готовым к переговорам и работе с ожиданиями клиента.

Особенности Школы бюро:

  • 1) дистанционное обучение;

  • 2) беспощадная система отбора и отсева на всех ступенях;

  • 3) бесплатные места для лучших студентов;

  • 4) гарантия трудоустройства;

  • 5) чистая радость познания.

Обратить внимание:

  • а) на правильность,

  • б) однородность,

  • в) целесообразность.

— Элементы списков обозначаются:

  • — арабскими цифрами с точкой;

  • — арабскими цифрами или русскими буквами со скобкой;

  • — графическими маркерами;

  • — втяжкой.

— Элементы списков обозначаются:

  • арабскими цифрами с точкой;

  • арабскими цифрами или русскими буквами со скобкой;

  • графическими маркерами;

  • втяжкой.

— Обратить внимание:

  • на правильность,

  • однородность,

  • целесообразность.

Списки

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

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

В «Справочнике издателя и автора» Аркадия Мильчина приведены подробные рекомендации по оформлению разных видов списков. Ниже — самые употребительные варианты.

Нумерованные и упорядоченные

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

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

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

Ненумерованные списки

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

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

Списки

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

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

В «Спра­воч­нике изда­теля и автора» Арка­дия Миль­чина при­ве­дены подроб­ные реко­мен­да­ции по оформ­ле­нию раз­ных видов спис­ков. Ниже — самые упо­тре­би­тель­ные варианты.

Нумерованные и упорядоченные

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

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

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

Ненумерованные списки

Вме­сто цифр и букв в нену­ме­ро­ван­ных спис­ках эле­менты часто обо­зна­ча­ются гра­фи­че­скими мар­ке­рами или символами.

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

Для успеш­ной работы дизай­неру необходимо:

  1. Пони­мать прин­ципы рабо­то­спо­соб­ного дизайна.

  2. Раз­би­раться в типо­гра­фике и иметь навыки вёрстки.

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

  4. Уметь управ­лять зада­чами, про­ек­тами, испол­ни­те­лями и соб­ствен­ным временем.

  5. Осво­ить инфор­ма­ци­он­ный стиль и основы редактуры.

  6. Пони­мать юри­ди­че­скую сто­рону дизайна.

  7. Быть гото­вым к пере­го­во­рам и работе с ожи­да­ни­ями клиента.

Осо­бен­но­сти Школы бюро:

  • 1) дистан­ци­он­ное обучение;

  • 2) бес­по­щад­ная система отбора и отсева на всех ступенях;

  • 3) бес­плат­ные места для луч­ших студентов;

  • 4) гаран­тия трудоустройства;

  • 5) чистая радость познания.

Обра­тить внимание:

  • а) на правильность,

  • б) однородность,

  • в) целесообразность.

Эле­менты спис­ков обозначаются:

  • — араб­скими циф­рами с точкой;

  • — араб­скими циф­рами или рус­скими строч­ными буквами;

  • — с закры­ва­ю­щей скобкой;

  • — гра­фи­че­скими мар­ке­рами или набор­ными знаками;

  • — втяжкой.

Эле­менты спис­ков обозначаются:

  • араб­скими циф­рами с точкой;

  • араб­скими циф­рами или рус­скими строч­ными буквами;

  • с закры­ва­ю­щей скобкой;

  • гра­фи­че­скими мар­ке­рами или набор­ными знаками;

  • втяжкой.


Обра­тить внимание:

  • на правильность,

  • однородность,

  • целесообразность.

Таблицы

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

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

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

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

На при­мере оформ­ле­ние таб­лицы с заго­лов­ком и пояс­ня­ю­щим текстом.

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Пока­зано коли­че­ство выпи­тых чашек без учёта кофе‑брей­ков на кур­сах бюро. Дан­ных за ноябрь пока нет.

Эспрессо Капучино Лате Американо Всего
2013
Сентябрь 61 20 70 61 212
Октябрь 68 29 56 60 213
Ноябрь 70 21 13 17 121
2014
Сентябрь 54 65 28 35 182
Октябрь 59 77 51 53 240

Таблицы

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

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

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

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

На примере оформление таблицы с заголовком и поясняющим текстом.

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Показано количество выпитых чашек без учёта кофе‑брейков на курсах бюро. Данных за ноябрь пока нет.

2013
Сен
Эсп.61
Капуч.20
Лате70
Америк.61
Всего142
Окт
Эсп.68
Капуч.29
Лате56
Америк.60
Всего157
Ноя
Эсп.70
Капуч.21
Лате13
Америк.17
Всего108
2014
Сен
Эсп.54
Капуч.65
Лате28
Америк.35
Всего154
Окт
Эсп.59
Капуч.77
Лате51
Америк.53
Всего189

Особые элементы текста

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

Ссылки на файлы оформ­ля­ются как обыч­ные ссылки. Текст внутри ссылки и рядом с ней дол­жен сооб­щать, что именно содер­жится в файле, какого он типа и раз­мера. Раз­мер дол­жен ука­зы­ваться по‑рус­ски (МБ, КБ). Назва­ние файла допу­стимо, но необязательно.

Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru

Особые элементы текста

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

Ссылки на файлы оформляются как обычные ссылки. Текст внутри ссылки и рядом с ней должен сообщать, что именно содержится в файле, какого он типа и размера. Размер должен указываться по‑русски (МБ, КБ). Название файла допустимо, но необязательно.

Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru

Иллюстрации

Отдельные внутритекстовые иллюстрации завёрстываются по левому краю или центру полосы набора.

После иллюстрации (с подписью или без) оставляют увеличенное вертикальное расстояние.

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

Подписи выводятся шрифтом уменьшенного кегля. Точка в конце подписи не ставится

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

Иллюстрации

Отдель­ные внут­ри­тек­сто­вые иллю­стра­ции завёр­сты­ва­ются по левому краю или цен­тру полосы набора.

После иллю­стра­ции (с под­пи­сью или без) остав­ляют уве­ли­чен­ное вер­ти­каль­ное расстояние.

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

Подписи выводятся шрифтом уменьшенного кегля.
Точка в конце подписи не ставится

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

Главная страница

Глав­ная стра­ница сайта — это его лицо, обложка, фир­мен­ный стиль, одёжка и квинт­эс­сен­ция. Глав­ная стра­ница объ­яс­няет суть, зна­ко­мит с воз­мож­но­стями, опре­де­ляет сце­на­рий и задаёт тон. Глав­ная стра­ница — не про­сто функ­ци­о­наль­ная точка входа. У глав­ной стра­ницы есть — должно быть — своё осо­бое ощущение.

Вме­сте с тем, дизайн глав­ной стра­ницы под­чи­ня­ется общим прин­ци­пам сборки стра­ниц, что мы рас­смот­рели ранее.

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

Главная страница

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

Вместе с тем, дизайн главной страницы подчиняется общим принципам сборки страниц, что мы рассмотрели ранее.

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

Лента

Лента состоит из типо­вых моду­лей — ссы­лок, сооб­ще­ний или ново­стей. Эти модули обра­зуют поток инфор­ма­ции, чаще всего в хро­но­ло­ги­че­ском порядке, где новое сверху.

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

Лента

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

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

В самом интер­нете ленты при­жи­лись не только на новост­ных сай­тах, но и в соци­аль­ных сетях:

Фейсбук

Твитер

Общий прин­цип устрой­ства их глав­ных стра­ниц — бес­ко­неч­ная сред­няя часть.

По прин­ципу ленты устро­ены мно­гие авто­ма­ти­че­ски обнов­ля­е­мые сайты, напри­мер «Советы» и Стековерфлоу.

В самом интернете ленты прижились не только на новостных сайтах, но и в социальных сетях:

Фейсбук

Общий принцип устройства их главных страниц — бесконечная средняя часть.

Твитер

По принципу ленты устроены многие автоматически обновляемые сайты, например «Советы» и Стековерфлоу.

Плитка

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

Плитка

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

Метрикдизайн

Пинтерес

Если модули плитки выров­нены по высоте, глаз уве­ренно счи­ты­вает линей­ную после­до­ва­тель­ность в при­выч­ном направлении.

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

Метрикдизайн

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

Пинтерес

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

Плитка с вырав­ни­ва­нием по высоте или ширине уже при­вычна, но встре­ча­ются инте­рес­ные эксперименты:

Сайт Евгения Арутюнова

Лук эт ми

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

На сайте «Лук эт ми» модули плитки не моно­литны, а состоят из несколь­ких ново­стей с иллю­стра­ци­ями и без.

Плитка с выравниванием по высоте или ширине уже привычна, но встречаются интересные эксперименты:

Сайт Евгения Арутюнова

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

Лук эт ми

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

Фоторама

Доми­ни­ру­ю­щая фото­гра­фия в «фото­раме» зани­мает всю глав­ную стра­ницу или её важ­ную часть.

Фоторама

Доминирующая фотография в «фотораме» занимает всю главную страницу или её важную часть.

Орион‑арт

Ролекс

Листалка «фото­рамы» должна быть инфор­ма­тив­ной — с подпи­ся­ми или мини­а­тюр­ными картинками.

Кно­пок‑стре­лок или безы­мян­ных круг­лых точек, пред­став­ля­ю­щих дру­гие иллю­стра­ции, недо­ста­точно. Исклю­че­ние состав­ляют одно­род­ные циклы кар­ти­нок на задан­ную тему — тогда точки полу­чают индульгенцию.

Орион‑арт

Листалка «фоторамы» должна быть информативной — с подписями или миниатюрными картинками.

Ролекс

Кнопок‑стрелок или безымянных круглых точек, представляющих другие иллюстрации, недостаточно. Исключение составляют однородные циклы картинок на заданную тему — тогда точки получают индульгенцию.

Рубрикатор

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

Боль­шин­ство глав­ных стра­ниц сай­тов пред­став­ляют собой рубрикатор.

Как пра­вило, содер­жа­ние моду­лей руб­ри­ка­тора опре­де­ля­ется авто­ма­ти­че­ски, но их состав и поря­док на стра­нице про­ду­ман дизай­не­ром зара­нее. Дизай­нер полу­чает мак­си­маль­ный кон­троль — что глав­ное, что вто­ро­сте­пен­ное, и как подаётся.

Рубрикатор

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

Большинство главных страниц сайтов представляют собой рубрикатор.

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

Би‑би‑си

Сайт бюро

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

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

Би‑би‑си

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

Сайт бюро

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

Ушки, цитаты, фактоиды, врезки

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

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

Добавим цитату и фактоид.

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

Ушки, цитаты, фактоиды, врезки

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

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

Доба­вим цитату и фактоид.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статья в «Телеграфе»

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

Заметка в «Лук эт ми»

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

Индепендент

Индепендент

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

Статья в «Телеграфе»

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

Заметка в «Лук эт ми»

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

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

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

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

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

Адвик

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

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

Эпл

Альфа‑банк

Эпл

Альфа‑банк

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

Адвик

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

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

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

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

Во‑вторых, эти элементы задают стиль сайту или электронному изданию.

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

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

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

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

Во‑вто­рых, эти эле­менты задают стиль сайту или элек­трон­ному изданию.

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

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

Тест

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

Три
Четыре
Пять
Семь
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Девять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять
Тринадцать

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Семь
Восемь

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Выберите приемлемые варианты компоновки страницы без иллюстраций.

Выберите приемлемые варианты компоновки страницы c иллюстрациями.

Выберите виды структуры главной страницы.

Стена
Фоторама
Мозаика
Плитка
Рубрикатор
Классификатор
Лента
Фотолента

На иллюстрации скриншот страницы «Вашингтон Пост». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Классификатор

На иллюстрации скриншот главной страницы «Вольво». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея

Как вы оцениваете информативность листалки на этой же странице?

Высокая
Низкая

На иллюстрации скриншот страницы «Мир» на сайте Ильи Бирмана. Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея
Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

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

Три
Четыре
Пять
Семь
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Девять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять
Тринадцать

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Семь
Восемь

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Выберите приемлемые варианты компоновки страницы без иллюстраций.

Выберите приемлемые варианты компоновки страницы c иллюстрациями.

Выберите виды структуры главной страницы.

Стена
Фоторама
Мозаика
Плитка
Рубрикатор
Классификатор
Лента
Фотолента

На иллюстрации скриншот страницы «Вашингтон Пост». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Классификатор

На иллюстрации скриншот главной страницы «Вольво». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея

Как вы оцениваете информативность листалки на этой же странице?

Высокая
Низкая

На иллюстрации скриншот страницы «Мир» на сайте Ильи Бирмана. Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея
Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

5
Заключение

Выход из прямоугольника

Куль­тур­ные традиции

Выход из прямоугольника

Преды­ду­щие главы посвя­щены модуль­ной вёрстке. Это была песнь во хвалу пря­мо­уголь­ни­кам — бла­го­даря им мы орга­ни­зуем, ком­по­нуем, пере­даём, рас­про­стра­няем, доно­сим, вос­при­ни­маем, упо­треб­ляем и пере­ва­ри­ваем информацию.

Но пря­мо­уголь­ник — изоб­ре­те­ние чело­века. Инфор­ма­ция о мире, кото­рую мы пере­даём с помо­щью плос­ких пря­мо­уголь­ни­ков, объ­ёмна и многомерна.

5
Заключение

Выход из прямоугольника

Культурные традиции

Выход из прямоугольника

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

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

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

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

Карта Германии. Адольф Стилер. Атлас всех частей света.
Гота: Юстус Пертес, 1875

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

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

Карта Германии. Адольф Стилер. Атлас всех частей света.
Гота: Юстус Пертес, 1875

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

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

Карта опи­сы­вает рельеф с помо­щью цвета и изо­ли­ний на плос­ко­сти. Но она также выхо­дит в тре­тье изме­ре­ние бла­го­даря допол­ни­тель­ным высот­ным про­ек­циям по краям карты.

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

Абстракт­ное мыш­ле­ние не пред­по­ла­гает бук­валь­ное изоб­ра­же­ние при­роды и пред­ме­тов. Но абстракт­ные объ­екты тоже мно­го­мерны и тре­буют пред­став­ле­ния на плоскости.

Математика выходит из прямоугольника. Из рукописей Исаака Ньютона.
Архив Кембриджского университета

Абстрактное мышление не предполагает буквальное изображение природы и предметов. Но абстрактные объекты тоже многомерны и требуют представления на плоскости.

Математика выходит из прямоугольника. Из рукописей Исаака Ньютона.
Архив Кембриджского университета

Игра охотника. Джузеппе Мария Мителли, 1699.
Коллекция Британского музея

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

Поле настоль­ной игры пред­на­зна­чено для бро­са­ния костей и поде­лено на сцены охоты на птиц.

Игра охотника. Джузеппе Мария Мителли, 1699.
Коллекция Британского музея

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

Поле настольной игры предназначено для бросания костей и поделено на сцены охоты на птиц.

Кентавр. Библиотека Британии

Рисунок Леонардо да Винчи

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

Плакат Йозефа Мюллера‑Брокманна

Плакат Вима Кроувела

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

Кентавр. Библиотека Британии

Рисунок Леонардо да Винчи

Плакат Йозефа Мюллера‑Брокманна

Плакат Вима Кроувела

Воз­рож­де­ние — время обоб­ще­ния. Учё­ный полу­чал зна­ния из раз­ных дис­ци­плин, а книга объ­еди­няла набор­ный текст с гра­вю­рами и руч­ной иллю­стра­цией. Неслу­чайно в эту эпоху создано много «непря­мо­уголь­ных» визуализаций.

Два­дца­тый век — век спе­ци­а­ли­за­ции, инду­стри­а­лизма, мас­со­вого про­из­вод­ства и квад­ратно‑гнез­до­вых мето­дов. По узким спе­ци­аль­но­стям раз­де­ли­лись не только рабо­чие и клерки, но и учё­ные. Два­дца­тый век раз­ло­жил типо­гра­фику по пря­мо­уголь­ни­кам, модуль­ная вёрстка — его продукт.

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

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

Словарная история.
Сэм Винстон

Словарная история.
Сэм Винстон

Словарная история.
Сэм Винстон

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

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

Работы Сэма Вин­стона — искус­ство, но прак­ти­че­ская вёрстка тоже выхо­дит из прямоугольников:

Каталог «Арк анбаунд». Дизайнер Этель Стругалла

Работы Сэма Винстона — искусство, но практическая вёрстка тоже выходит из прямоугольников:

Каталог «Арк анбаунд». Дизайнер Этель Стругалла

Ушки над шапкой «Гардиана» хулиганят и флиртуют со строгими прямоугольниками ниже шапки.

Гардиан

Подписи к фотографиям еды «Фудпорно» огибают её контуры в традициях и духе географических карт.

Фудпорн дейли

Время выходить из прямоугольника.

Гайдлайны Андроида. Эксей Пантелеев

Ушки над шап­кой «Гар­ди­ана» хули­га­нят и флир­туют со стро­гими пря­мо­уголь­ни­ками ниже шапки.

Под­писи к фото­гра­фиям еды «Фуд­порно» оги­бают её кон­туры в тра­ди­циях и духе гео­гра­фи­че­ских карт.

Время выхо­дить из прямоугольника.

Гардиан

Фудпорн дейли

Гайдлайны Андроида. Эксей Пантелеев

Культурные традиции

Дизай­нер, осво­ив­ший прин­ципы и нюансы вёрстки, при­сту­пает к реаль­ной работе и создаёт про­дукт: стра­ницу, пла­кат, упа­ковку, сайт.

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

Вслед за Полом Рэн­дом про­ци­ти­рую Людвига Миса ван дер Роэ: «Форма — это не цель, это резуль­тат нашей работы».

Если дизай­нер налов­чился вер­стать, он рис­кует пре­вра­титься в робота — гене­ра­тора иде­аль­ных скуч­ных маке­тов. Рано или поздно он заду­мы­ва­ется об эсте­тике, визу­аль­ной куль­туре и стиле. И здесь он пере­хо­дит из обла­сти гео­мет­рии в область куль­ту­ро­ло­гии, искус­ства и гума­ни­тар­ных наук.

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

Мода облег­чает ответы на такие вопросы. Два года назад дизай­неры рисо­вали фоны из дерева и замши, год назад — гра­ди­енты от лило­вого к жёл­тому, сегодня обра­ти­лись к мато­вым полу­про­зрач­но­стям. Но если сле­до­вать за ребя­тами на Бехансе и Дри­бле, полу­чится тре­тье­сорт­ный резуль­тат. Ребята на Бехансе и на Дри­бле сле­дуют за тренд­сет­те­рами — круп­ней­шими дизай­не­рами и рекла­ми­стами, и выдают вто­рич­ный резуль­тат. А хочется думать самому и отли­чать хоро­шее от плохого.

На что опе­реться рус­скому дизайнеру?

Культурные традиции

Дизайнер, освоивший принципы и нюансы вёрстки, приступает к реальной работе и создаёт продукт: страницу, плакат, упаковку, сайт.

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

Вслед за Полом Рэндом процитирую Людвига Миса ван дер Роэ: «Форма — это не цель, это результат нашей работы».

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

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

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

На что опереться русскому дизайнеру?

Супрасльская рукопись 11 века

Славянская кириллическая традиция красива, интересна для изучения и бесспорно наша.

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

Про‑медия рекламирует кагор

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

Супрасльская рукопись 11 века

Сла­вян­ская кирил­ли­че­ская тра­ди­ция кра­сива, инте­ресна для изу­че­ния и бес­спорно наша.

Но при­дётся цинично при­знать, что толку от устава, полу­устава и вязи для еже­днев­ной ком­мер­че­ской работы ника­кого. Корни забыты, тра­ди­ции уте­ряны, а глав­ное — не имели раз­ви­тия в два­дца­том веке.

Про‑медия рекламирует кагор

В луч­шем слу­чае сегодня это выгля­дит так. Прямо ска­жем, узкоспециализированно.

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

Американский сайт Макдональдса

Весело и вкусно, но обра­тите вни­ма­ние на типо­гра­фику: про­пис­ные буквы и «кир­пич­ное» вырав­ни­ва­ние тек­сто­вых строк:

Реклама британская, а бренд и типографика — американские

Бри­тан­ский Мак­до­нальдс тоже устроен по аме­ри­кан­ским принципам.

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

Этикетка виски «Джек Дэниелс»

Этикетка виски «Джек Дэниелс»

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

Американский сайт Макдональдса

Весело и вкусно, но обратите внимание на типографику: прописные буквы и «кирпичное» выравнивание текстовых строк:

Реклама британская, а бренд и типографика — американские

Британский Макдональдс тоже устроен по американским принципам.

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

Пере­до­вой аме­ри­кан­ский про­дукт выгля­дит смело и уверенно:

Дрель «Блек энд Декер»

Рядо­вая аме­ри­кан­ская реклама выгля­дит топорно и прямолинейно:

Реклама «Шонис»

А на рус­ской почве всхо­дит такое.

Передовой американский продукт выглядит смело и уверенно:

Дрель «Блек энд Декер»

Рядовая американская реклама выглядит топорно и прямолинейно:

Реклама «Шонис»

А на русской почве всходит такое.

Студенческая работа

Противопожарная наклейка в Коворкафе

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

Но зачем? Вклад Аме­рики в дело капи­та­лизма неоце­ним, но в типо­гра­фике логич­нее опе­реться на евро­пей­скую культуру.

Студенческая работа

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

Противопожарная наклейка в Коворкафе

Но зачем? Вклад Америки в дело капитализма неоценим, но в типографике логичнее опереться на европейскую культуру.

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

Подписи к иллюстрациям на иврите, греческом и латыни напоминают и о собственной культурной истории Европы.
Франческо Колонна. Сон Полифила. Альд Мануций, 1499

Эдвард Тафти. Наглядное объяснение. Графикс пресс, 1997. Иллюстрации Бонни Скрентон

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

В этом беспроигрышном жанре сделаны книги Эдварда Тафти,

Глав­ные идеи Воз­рож­де­ния, с кото­рыми сложно не согла­ситься, — внут­рен­няя и внеш­няя кра­сота чело­века, уни­вер­саль­ное обра­зо­ва­ние, совер­шен­ство­ва­ние зна­ний и уме­ний, обра­ще­ние к классике.

Подписи к иллюстрациям на иврите, греческом и латыни напоминают и о собственной культурной истории Европы.
Франческо Колонна. Сон Полифила. Альд Мануций, 1499

Эдвард Тафти. Наглядное объяснение. Графикс пресс, 1997. Иллюстрации Бонни Скрентон

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

В этом бес­про­иг­рыш­ном жанре сде­ланы книги Эдварда Тафти,

Подписи к иллюстрациям на иврите, греческом и латыни напоминают и о собственной культурной истории Европы.
Франческо Колонна. Сон Полифила. Альд Мануций, 1499

Эдвард Тафти. Наглядное объяснение. Графикс пресс, 1997. Иллюстрации Бонни Скрентон

...свёр­стан про­мо­сайт Эпла и стра­ница Коворкафе.

Маку — 30 лет

Страница «Коворкафе»

...свёрстан промосайт Эпла и страница Коворкафе.

Маку — 30 лет

Страница «Коворкафе»

Итак, одной ногой наш дизай­нер стоит на тра­ди­циях Воз­рож­де­ния. На что поста­вить другую?

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

Пат­ри­оты могут быть спо­койны, потому что швей­цар­ская типо­гра­фика выросла из Бауха­уса, а Баухаус заим­ство­вал у группы «Стиль». На всё это прямо или кос­венно повли­яли наши сооте­че­ствен­ники: Лисиц­кий, Кан­дин­ский, Род­ченко, Мая­ков­ский, Мале­вич. К сожа­ле­нию, потом опу­стился желез­ный зана­вес, и миро­вой дизайн в два­дца­том веке раз­ви­вался уже без нас.

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

Коробочка с чем‑то икеевским.
Стокгольмская дизайнерская лаборатория

Итак, одной ногой наш дизайнер стоит на традициях Возрождения. На что поставить другую?

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

Патриоты могут быть спокойны, потому что швейцарская типографика выросла из Баухауса, а Баухаус заимствовал у группы «Стиль». На всё это прямо или косвенно повлияли наши соотечественники: Лисицкий, Кандинский, Родченко, Маяковский, Малевич. К сожалению, потом опустился железный занавес, и мировой дизайн в двадцатом веке развивался уже без нас.

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

Коробочка с чем‑то икеевским.
Стокгольмская дизайнерская лаборатория

Евродизайн прекрасно работает в интерфейсах,

Айфон

на картриджах для принтера...

Наклейки на картриджи Т2

Айфон

Наклейки
на картриджи Т2

Евро­ди­зайн пре­красно рабо­тает в интерфейсах,

на кар­три­джах для принтера...

В фир­мен­ных сти­лях банков...

и в веб‑сервисах.

Ляндсипотек банк. Стокгольмская дизайнерская лаборатория

Правовая база «Системы Юрист»

В фирменных стилях банков...

Ляндсипотек банк. Стокгольмская дизайнерская лаборатория

и в веб‑сервисах.

Правовая база «Системы Юрист»

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


У нашего героя — рус­ского дизай­нера — оста­лись сво­бодны руки, глаза и голова. Их стоит упо­тре­бить на изу­че­ние исто­рии искусств, про­мыш­лен­но­сти, архи­тек­туры, типо­гра­фики, отдель­ных худож­ни­ков, сти­лей в иллю­стра­ции и рекламе. Дизай­нер дол­жен кол­лек­ци­о­ни­ро­вать наблю­де­ния, пред­меты, явле­ния и фор­маты. Всё что про­изо­шло до и после Воз­рож­де­ния, до и после швей­цар­ского стиля, до и после Петра I — бес­ко­неч­ный источ­ник под­ска­зок, реше­ний и вдохновения.

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


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

Приложение
Указатель шаблонов вёрстки

Элементы без иллюстраций
Элементы c иллюстрациями
Модули без иллюстраций
Модули с иллюстрациями
Страницы без иллюстраций

Лента

Страницы с иллюстрациями

Модульная

Текстовая

Фоторама

Плитка

Рубрикатор

Приложение: указатель шаблонов вёрстки

Без иллю­стра­ций
С иллю­стра­ци­ями
Элементы
Модули
Страницы

Модульная

Текстовая

Лента

Фоторама

Плитка

Рубрикатор

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Горбунов Артём Сергеевич

Типографика и вёрстка

  • Aвтор и арт‑директор Артём Горбунов

  • Дизайнер Александр Кан

  • Фотограф Владимир Колпаков

  • Каллиграф Анна Данилова

  • Метранпаж и соавтор тестов
    Сергей Фролов

  • Разработчики Рустам Кулматов,
    Василий Половнёв
    и Андрей Ерес

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось