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