Артём Гор­бу­нов

Типографика и вёрстка

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

Типографика и вёрстка

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

К сожа­ле­нию, из мно­го­чис­лен­ных книг о типо­гра­фике и модуль­ных сет­ках оста­ётся непо­нятно, как именно собрать выра­зи­тель­ный макет с проч­ной кон­струк­цией. В луч­шем слу­чае дизай­неру оста­ётся выужи­вать кру­пицы смысла и копи­ро­вать удач­ные примеры.

«Типо­гра­фика и вёрстка» после­до­ва­тельно отве­чает на вопрос как. Автор вво­дит прин­ципы модуль­но­сти и якор­ных объ­ек­тов, пра­вило внут­рен­него и внеш­него. Затем шаг за шагом наглядно объ­яс­няет, как добиться акку­рат­ной и плот­ной вёрстки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

Скрыто 105 разворотов

Вспо­мо­га­тель­ная иллю­стра­ция неплохо чув­ствует себя и «в под­мышке» у заго­ловка, да и заго­ло­вок на всю ширину выгля­дит убедительно:

Хорошо

Плохо

Помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста

Вспомогательная иллюстрация неплохо чувствует себя и «в подмышке» у заголовка, да и заголовок на всю ширину выглядит убедительно:

Хорошо

Плохо

Помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста

Вернёмся к комбинированному дизайну. Теперь поступим наоборот: поставим доминирующую иллюстрацию сбоку, а вспомогательную — над текстом:

Хорошо

Это тоже простой читабельный вариант с явно доминирующей иллюстрацией. Текстовая часть должна быть очень короткой

Хорошо

Если в той же конструкции текст заменить на третью иллюстрацию, получится неплохой макет новостной рубрики со ссылками

Текстовая часть должна быть очень короткой, если, конечно, не отдать главной картинке всю высоту окна, как на макете страницы «Магазина горящих путёвок».

Макет страницы «Магазина горящих путёвок»

Вер­нёмся к ком­би­ни­ро­ван­ному дизайну. Теперь посту­пим нао­бо­рот: поста­вим доми­ни­ру­ю­щую иллю­стра­цию сбоку, а вспо­мо­га­тель­ную — над текстом:

Хорошо

Это тоже простой читабельный вариант с явно доминирующей иллюстрацией. Текстовая часть должна быть очень короткой

Если в той же конструкции текст заменить на третью иллюстрацию, получится неплохой макет новостной рубрики со ссылками

Тек­сто­вая часть должна быть очень корот­кой, если, конечно, не отдать глав­ной кар­тинке всю высоту окна, как на макете стра­ницы «Мага­зина горя­щих путёвок».

Макет страницы «Магазина горящих путёвок»

Вертикальные иллюстрации

Фотографии горизонтальных пропорций естественнее для человеческого поля зрения и, безусловно, удобнее для вёрстки на горизонтальных экранах. Вертикальные фотографии требуют отдельного дизайнерского внимания и «ломают» стандартные макеты. Сайты подключены к базам данных и отображают информацию по заранее определённым шаблонам — у сайтов не бывает редакционной вёрстки номера, как у бумажных изданий, когда каждая статья компонуется отдельно.

В итоге экранные дизайнеры не любят вертикальные фотографии, избегают их, боятся как огня. Новостные сайты и интернет‑газеты обрезают вертикальные фотографии до горизонтальных (или, может быть, просто выбрасывают?) А фотоприложения и социальные сети четвертуют всех поголовно — уродуя не только проблемные вертикальные, но и невинные горизонтальные фотографии.

«Насильно оквадраченные» вертикальные и горизонтальные фотографии в Фейсбуке и Твитере

К несчастью, единственный уцелевший вид вертикальных иллюстраций на сегодняшних сайтах — анимированный рекламный банер. Правда, эта живность нескоро переведётся.


Большая часть фотографий и видеороликов в мире снимается на телефоны. Большую часть фотографий и видеороликов на телефонах снимают вертикально. Не стоит забывать, что вертикальные фотографии хоть и менее естественны для восприятия, но часто более выразительны и динамичны. Некоторые объекты вообще нельзя показать в горизонтальном формате, например человеческую фигуру и одежду.

Пора бы отдать должное вертикальным картинкам.

Вертикальные иллюстрации

Фото­гра­фии гори­зон­таль­ных про­пор­ций есте­ствен­нее для чело­ве­че­ского поля зре­ния и, без­условно, удоб­нее для вёрстки на гори­зон­таль­ных экра­нах. Вер­ти­каль­ные фото­гра­фии тре­буют отдель­ного дизай­нер­ского вни­ма­ния и «ломают» стан­дарт­ные макеты. Сайты под­клю­чены к базам дан­ных и отоб­ра­жают инфор­ма­цию по зара­нее опре­де­лён­ным шаб­ло­нам — у сай­тов не бывает редак­ци­он­ной вёрстки номера, как у бумаж­ных изда­ний, когда каж­дая ста­тья ком­по­ну­ется отдельно.

В итоге экран­ные дизай­неры не любят вер­ти­каль­ные фото­гра­фии, избе­гают их, боятся как огня. Новост­ные сайты и интер­нет‑газеты обре­зают вер­ти­каль­ные фото­гра­фии до гори­зон­таль­ных (или, может быть, про­сто выбра­сы­вают?) А фото­при­ло­же­ния и соци­аль­ные сети чет­вер­туют всех пого­ловно — уро­дуя не только про­блем­ные вер­ти­каль­ные, но и невин­ные гори­зон­таль­ные фотографии.

К несча­стью, един­ствен­ный уце­лев­ший вид вер­ти­каль­ных иллю­стра­ций на сего­дняш­них сай­тах — ани­ми­ро­ван­ный реклам­ный банер. Правда, эта жив­ность нескоро переведётся.


Боль­шая часть фото­гра­фий и видео­ро­ли­ков в мире сни­ма­ется на теле­фоны. Боль­шую часть фото­гра­фий и видео­ро­ли­ков на теле­фо­нах сни­мают вер­ти­кально. Не стоит забы­вать, что вер­ти­каль­ные фото­гра­фии хоть и менее есте­ственны для вос­при­я­тия, но часто более выра­зи­тельны и дина­мичны. Неко­то­рые объ­екты вообще нельзя пока­зать в гори­зон­таль­ном фор­мате, напри­мер чело­ве­че­скую фигуру и одежду.

Пора бы отдать долж­ное вер­ти­каль­ным картинкам.

«Насильно оквадраченные» вертикальные и горизонтальные фотографии в Фейсбуке и Твитере

Адаптируем приведённые выше варианты вёрстки к вертикальным иллюстрациям.

Хорошо

«Блочный» вариант над текстом — очевидный и естественный

Плохо

Вертикальный кирпич сбоку получится слишком увесистым и потребует слишком много текста для одного модуля

Хорошо

«Комбинированный» вариант с небольшой вертикальной фотографией сбоку отлично подойдёт, например, для сопроводительного портрета

Хорошо

А так вертикальная фотография доминирует

Плохо

Важно помнить о соотношении размеров фотографий. Второстепенная фотография не должна спорить с главной

Адап­ти­руем при­ве­дён­ные выше вари­анты вёрстки к вер­ти­каль­ным иллюстрациям.

Хорошо

«Блочный» вариант над текстом — очевидный и естественный

Плохо

Вертикальный кирпич сбоку получится слишком увесистым и потребует слишком много текста для одного модуля

Хорошо

«Комбинированный» вариант с небольшой вертикальной фотографией сбоку отлично подойдёт, например, для сопроводительного портрета

Хорошо

А так вертикальная фотография доминирует

Плохо

Важно помнить о соотношении размеров фотографий. Второстепенная фотография не должна спорить с главной

Хоро­шая вер­ти­каль­ная фото­гра­фия — ред­кая птица, заслу­жи­ва­ю­щая вни­ма­ния. Поэтому осо­бенно удачна адап­та­ция вари­анта «новост­ной рубрики»:

Хорошо

Вертикальная фотография занимает высоту двух горизонтальных и выделяется размером

Мы рас­смот­рели ком­по­новку доми­ни­ру­ю­щих и вспо­мо­га­тель­ных иллю­стра­ций вер­ти­каль­ных и гори­зон­таль­ных про­пор­ций. Все при­меры под­хо­дят и для квад­рат­ных картинок.

Назад к вертикалям. Лента «Майспейса»

Кроме того, на месте вспо­мо­га­тель­ных иллю­стра­ций может нахо­диться любой пря­мо­уголь­ный объ­ект: форма ввода, цвет­ная плашка с кноп­кой покупки, схема, гра­фик или гео­гра­фи­че­ская карта.

Хорошая вертикальная фотография — редкая птица, заслуживающая внимания. Поэтому особенно удачна адаптация варианта «новостной рубрики»:

Хорошо

Вертикальная фотография занимает высоту двух горизонтальных и выделяется размером

Мы рассмотрели компоновку доминирующих и вспомогательных иллюстраций вертикальных и горизонтальных пропорций. Все примеры подходят и для квадратных картинок.

Назад к вертикалям. Лента «Майспейса»

Кроме того, на месте вспомогательных иллюстраций может находиться любой прямоугольный объект: форма ввода, цветная плашка с кнопкой покупки, схема, график или географическая карта.

Скрыт 61 разворот

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Горбунов Артём Сергеевич

Типографика и вёрстка

  • Aвтор и арт‑директор Артём Горбунов

  • Дизайнер Александр Кан

  • Фотограф Владимир Колпаков

  • Каллиграф Анна Данилова

  • Метранпаж и соавтор тестов
    Сергей Фролов

  • Разработчики Рустам Кулматов,
    Василий Половнёв
    и Андрей Ерес

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось