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

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

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

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

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
 
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между важными местами
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между
разворотами

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

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

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

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

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

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

В углу

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

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

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

В центре

В углу

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

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

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

В центре

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

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

Ворд

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

Гугль

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

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

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

Ворд

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

Гугль

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

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

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

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

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

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

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

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

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

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

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

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

Плохо

хорошо

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

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

плохо

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

хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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