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