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