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

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

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

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

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
 
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между важными местами
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между
разворотами

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

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

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

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

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

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

Иллюстрация

Иллю­стра­ция — базо­вый эле­мент вёрстки.

Дети любят книж­ки с кар­тин­ка­ми. Смот­реть на стра­ни­цы без кар­ти­нок скуч­но. Такая книж­ка оста­вит ребён­ка рав­но­душ­ным или вызо­вет у него недоумение.

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

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

Иллюстрация

Иллю­стра­ция — базо­вый эле­мент вёрстки.

Дети любят книж­ки с кар­тин­ка­ми. Смот­реть на стра­ни­цы без кар­ти­нок скуч­но. Такая книж­ка оста­вит ребён­ка рав­но­душ­ным или вызо­вет у него недоумение.

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

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

Хорошая иллюстрация формирует эмоцию.
Фотография Таки Лау

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

Хоро­шая иллю­стра­ция дела­ет всё сразу.

Хорошая иллюстрация формирует эмоцию.
Фотография Таки Лау

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

Хоро­шая иллю­стра­ция дела­ет всё сразу.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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