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

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

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

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

 
между важными местами
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

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

Для начала попробуем простой способ — поставить иллюстрации рядом в общий прямоугольный блок:

Сойдёт

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

Гораздо реже попадается вёрстка иллюстраций друг под другом сбоку от текста:

Непривычно

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

Если довести идею до абсурда, «пирог» из узких иллюстраций превращается в интересную декорацию, как на сайте компании «Реатон»:

Сайт компании «Реатон»

А бутерброд из двух иллюстраций над текстом — неудачная идея:

Плохо

Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста

Для начала попро­буем про­стой спо­соб — поста­вить иллю­стра­ции рядом в общий пря­мо­уголь­ный блок:

сойдёт

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

Гораздо реже попа­да­ется вёрстка иллю­стра­ций друг под дру­гом сбоку от текста:

Непривычно

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

Если дове­сти идею до абсурда, «пирог» из узких иллю­стра­ций пре­вра­ща­ется в инте­рес­ную деко­ра­цию, как на сайте ком­па­нии «Реатон».

А бутер­брод из двух иллю­стра­ций над тек­стом — неудач­ная идея:

Плохо

Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста

Сайт компании «Реатон»

Обычно картинка располагается над текстом или сбоку от него — это два базовых дизайна модуля с иллюстрацией. Только что мы объединяли иллюстрации в прямоугольный блок и по очереди примеряли его сверху и сбоку, как будто это одна иллюстрация.

А теперь скомбинируем два базовых дизайна: поставим вспомогательную картинку сбоку от текста, а сверху накроем модуль доминирующей иллюстрацией:

Хорошо

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

А если радикально уменьшить вспомогательную фотографию в той же конструкции, получится удачный «юзерпик» в ленте какой‑нибудь социальной сети.

Хорошо

Майспейс

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

Хуже

Старый дизайн ленты Фейсбука

Обычно кар­тинка рас­по­ла­га­ется над тек­стом или сбоку от него — это два базо­вых дизайна модуля с иллю­стра­цией. Только что мы объ­еди­няли иллю­стра­ции в пря­мо­уголь­ный блок и по оче­реди при­ме­ряли его сверху и сбоку, как будто это одна иллюстрация.

А теперь ском­би­ни­руем два базо­вых дизайна: поста­вим вспо­мо­га­тель­ную кар­тинку сбоку от тек­ста, а сверху накроем модуль доми­ни­ру­ю­щей иллюстрацией:

Хорошо

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

А если ради­кально умень­шить вспо­мо­га­тель­ную фото­гра­фию в той же кон­струк­ции, полу­чится удач­ный «юзер­пик» в ленте какой‑ни­будь соци­аль­ной сети.

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

Хорошо

Майспейс

Хуже

Старый дизайн ленты Фейсбука

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

Хорошо

Плохо

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

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

Хорошо

Плохо

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

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

Хорошо

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

Хорошо

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

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

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

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

Хорошо

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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