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