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