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

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

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

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

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

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

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

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

Ворд

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

Гугль

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

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

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

Ворд

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

Гугль

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

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

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

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

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

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

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

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

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

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

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

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

Плохо

хорошо

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

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

плохо

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

хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

плохо

хорошо

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

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

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

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

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

плохо

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

хорошо

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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