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

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

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

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

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

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

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

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

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

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

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

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

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

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

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

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

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

Плохо

хорошо

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

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

плохо

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

хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

плохо

хорошо

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

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

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

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

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

плохо

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

хорошо

Ссылка

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

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

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

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

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

Ссылка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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