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

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

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

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

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

Оглавление

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

Доминирующие и вспомогательные иллюстрации

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

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

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

Так себе

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

Лучше

Домини­ру­ю­щая иллю­стра­ция одно­знач­но ука­зы­ва­ет: «Здесь нача­ло осмот­ра». Но осталь­ные ил­люстра­ции по‑преж­не­му без­успеш­но спо­рят друг с другом

Хорошо

Взгляд сво­бод­но и уве­рен­но сколь­зит по стра­ни­це с явной визу­аль­ной иерархией

Доминирующие и вспомогательные иллюстрации

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

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

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

Так себе

Лучше

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

Домини­ру­ю­щая иллю­стра­ция одно­знач­но ука­зы­ва­ет: «Здесь нача­ло осмот­ра». Но осталь­ные ил­люстра­ции по‑преж­не­му без­успеш­но спо­рят друг с другом

Хорошо

Взгляд сво­бод­но и уве­рен­но сколь­зит по стра­ни­це с явной визу­аль­ной иерархией

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

Сойдёт

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

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

Непривычно

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

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

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

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

Плохо

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

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

сойдёт

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

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

Непривычно

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

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

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

Плохо

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

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

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

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

Хорошо

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

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

Хорошо

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

Хуже

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

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

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

Хорошо

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

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

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

Хорошо

Хуже

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

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

Хорошо

Плохо

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

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

Хорошо

Плохо

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

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

Хорошо

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

Хорошо

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

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

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

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

Хорошо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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