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