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