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

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

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

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

 
между важными местами
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

Скрыто 59 разворотов

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

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

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

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

плохо

хорошо

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

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

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

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

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

плохо

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

хорошо

Ссылка

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

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

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

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

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

Ссылка

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

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

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

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

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

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

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

плохо

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

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

плохо

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

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

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

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

хорошо

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

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

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

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

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

хорошо

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

плохо

хорошо

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

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

плохо

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

хорошо

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

Скрыто 107 разворотов

Гор­бу­нов Артём Сергеевич

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

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Горбунов Артём Сергеевич

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

  • Aвтор и арт‑директор Артём Горбунов

  • Дизайнер Александр Кан

  • Фотограф Владимир Колпаков

  • Каллиграф Анна Данилова

  • Метранпаж и соавтор тестов
    Сергей Фролов

  • Разработчики Рустам Кулматов,
    Василий Половнёв
    и Андрей Ерес

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось