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

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

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

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

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

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

Бессмысленные иллюстрации «для красоты»

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

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

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

Бессмысленные иллюстрации «для красоты»

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

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

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

Горизонтальная фотография Коворкафе

Иллюстрация — самый заметный якорный объект. Конструкция страницы часто подчиняется ключевой иллюстрации: её пропорциям, размеру и положению.

На восприятие иллюстрации влияют её пропорции. Благодаря двум глазам поле зрения человека вытянуто вширь. Поэтому горизонтальная иллюстрация выглядит естественно.

Вертикальный вид на «скайповую» в том же кафе

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

Горизонтальная фотография Коворкафе

Иллю­стра­ция — самый замет­ный якор­ный объ­ект. Кон­струк­ция стра­ницы часто под­чи­ня­ется клю­че­вой иллю­стра­ции: её про­пор­циям, раз­меру и положению.

На вос­при­я­тие иллю­стра­ции вли­яют её про­пор­ции. Бла­го­даря двум гла­зам поле зре­ния чело­века вытя­нуто вширь. Поэтому гори­зон­таль­ная иллю­стра­ция выгля­дит естественно.

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

Вертикальный вид на «скайповую» в том же кафе

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

Квадратные иллюстрации на странице
«Дизайн, кино и пуфики»

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

Квадратные иллюстрации на странице
«Дизайн, кино и пуфики»

Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

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

Карина Фомина смотрит на текст

Карина Фомина смотрит на текст

Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

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

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

При этом границы кадра не должны совпадать с границами объектов или явными линиями. Не следует обрезать конечности, если фигура целиком попадает в кадр.

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

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

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

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

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

При этом гра­ницы кадра не должны сов­па­дать с гра­ни­цами объ­ек­тов или явными лини­ями. Не сле­дует обре­зать конеч­но­сти, если фигура цели­ком попа­дает в кадр.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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