🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Элемент управления — базовый элемент экранной вёрстки.
Современные элементы интерфейса перешли на экран из бумажных анкет — прообраза интерактива с пользователем. Но если бланки и формы на бумаге — особый случай вёрстки, то пользовательский интерфейс на экране — основной жанр. Элементы управления участвуют в макетах наравне с заголовками, текстом, иллюстрациями и подписями.
Поэтому современный дизайнер использует не только знания о пользовательском интерфейсе, привычках и эргономике, но и типографические свойства элементов управления, чтобы строить из них лёгкие, прочные и читабельные конструкции. Здесь мы рассмотрим только эту «верстальную» сторону медали.
Элементы управления по форме в вёрстке делятся на точечные, линейные и прямоугольные.
Элемент управления — базовый элемент экранной вёрстки.
Современные элементы интерфейса перешли на экран из бумажных анкет — прообраза интерактива с пользователем. Но если бланки и формы на бумаге — особый случай вёрстки, то пользовательский интерфейс на экране — основной жанр. Элементы управления участвуют в макетах наравне с заголовками, текстом, иллюстрациями и подписями.
Поэтому современный дизайнер использует не только знания о пользовательском интерфейсе, привычках и эргономике, но и типографические свойства элементов управления, чтобы строить из них лёгкие, прочные и читабельные конструкции. Здесь мы рассмотрим только эту «верстальную» сторону медали.
Элементы управления по форме в вёрстке делятся на точечные, линейные и прямоугольные.
В углу
Точечные элементы
Компактные элементы интерфейса с выраженным центром внимания — пиктограмма, асинхронный индикатор прогресса, чекбокс.
Точечные элементы удобны в вёрстке. Они выигрышно смотрятся, если выделить им особое «якорное» положение.
В центре
В углу
Точечные элементы
Компактные элементы интерфейса с выраженным центром внимания — пиктограмма, асинхронный индикатор прогресса, чекбокс.
Точечные элементы удобны в вёрстке. Они выигрышно смотрятся, если выделить им особое «якорное» положение.
В центре
Точечные элементы легко пристраиваются к более важным элементам:
Но точка в вёрстке — плохой командный игрок, каждая старается перекричать другую:
Чтобы успокоить ряд пиктограмм на панели инструментов, приходится прибегать к радикальным мерам — строго унифицировать размеры, выверять порядок и ритм пятен и даже полностью отказываться от цвета:
Гугль
Точечные элементы в интерфейсе
Точечные элементы легко пристраиваются к более важным элементам:
Но точка в вёрстке — плохой командный игрок, каждая старается перекричать другую:
Ворд
Чтобы успокоить ряд пиктограмм на панели инструментов, приходится прибегать к радикальным мерам — строго унифицировать размеры, выверять порядок и ритм пятен и даже полностью отказываться от цвета:
Гугль
Точечные элементы в интерфейсе
Линейные элементы
Большая часть элементов интерфейса — линейные, хорошо работающие в строке: переключатель, кнопка, поле ввода, ползунок, звёздочки рейтинга:
Строчные элементы умеют растягиваться по горизонтали в соответствии с текстовым содержанием.
Даже если текст короткий, этим стоит пользоваться, чтобы упростить попадание мышью или пальцем:
Плохо
Хорошо
Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит
А вот увеличиваться по вертикали для них неестественно. Линейные элементы экономичны и не выходят за пределы своей строки. Из них отлично складываются панели инструментов.
Плохо
Поле ввода несоразмерно мелкой подписи, а введённый текст зажат внутри поля без гигиенических отступов
Хорошо
Кегль подписи и содержания совпадают
Размеры линейных элементов и их содержимое должны соответствовать окружению.
Обратите внимание, как на хорошем примере подпись, вводимый текст и рамка поля ввода сохраняют соотношения внутреннего и внешнего. Вокруг содержимого достаточный отступ, рамка поля «не влезает в интерлиньяж» строки. Но при этом расстояние от подписи «имя» до рамки поля больше этих внутренних полей.
Линейные элементы
Большая часть элементов интерфейса — линейные, хорошо работающие в строке: переключатель, кнопка, поле ввода, ползунок, звёздочки рейтинга:
Строчные элементы умеют растягиваться по горизонтали в соответствии с текстовым содержанием.
Даже если текст короткий, этим стоит пользоваться, чтобы упростить попадание мышью или пальцем:
Плохо
хорошо
Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит
А вот увеличиваться по вертикали для них неестественно. Линейные элементы экономичны и не выходят за пределы своей строки. Из них отлично складываются панели инструментов.
плохо
Поле ввода несоразмерно мелкой подписи, а введённый текст зажат внутри поля без гигиенических отступов
хорошо
Кегль подписи и содержания совпадают
Размеры линейных элементов и их содержимое должны соответствовать окружению.
Обратите внимание, как на хорошем примере подпись, вводимый текст и рамка поля ввода сохраняют соотношения внутреннего и внешнего. Вокруг содержимого достаточный отступ, рамка поля «не влезает в интерлиньяж» строки. Но при этом расстояние от подписи «имя» до рамки поля больше этих внутренних полей.
Элементы управления должны находиться на достаточном удалении друг от друга, чтобы избегать ошибочных нажатий. Минимально допустимое расстояние между соседними элементами управления — примерно два пробела, между элементом и текстовой подписью — пробел:
При соседстве по вертикали действуют примерно такие же соотношения. Это, кстати, означает, что строчные контролы плохо встраиваются в сплошной наборный текст — они либо налезут друг на друга, либо раздвинут интерлиньяж текста.
Пример типографических гайдлайнов для элементов управления
Пример типографических гайдлайнов для элементов управления
Элементы управления должны находиться на достаточном удалении друг от друга, чтобы избегать ошибочных нажатий. Минимально допустимое расстояние между соседними элементами управления — примерно два пробела, между элементом и текстовой подписью — пробел:
При соседстве по вертикали действуют примерно такие же соотношения. Это, кстати, означает, что строчные контролы плохо встраиваются в сплошной наборный текст — они либо налезут друг на друга, либо раздвинут интерлиньяж текста.
Пример типографических гайдлайнов для элементов управления
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015