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