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