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