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