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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В углу

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

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

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

В центре

В углу

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

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

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

В центре

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

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

Ворд

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

Гугль

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

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

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

Ворд

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

Гугль

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

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

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

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

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

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

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

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

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

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

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

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

Плохо

хорошо

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

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

плохо

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

хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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