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

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

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

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

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

Оглавление

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

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

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

Ошиб­кой было бы собрать все иллю­стра­ции в самом верху, дале­ко вни­зу или у одной из сторон.

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

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

Ошиб­кой было бы собрать все иллю­стра­ции в самом верху, дале­ко вни­зу или у одной из сторон.

Веб‑стра­ни­ца не огра­ни­че­на в длине. На одной стра­ни­це лег­ко поме­стит­ся содер­жа­ние бумаж­но­го ката­ло­га или реклам­но­го бук­ле­та. Чтобы чита­тель не утом­лял­ся от одно­об­ра­зия, дизай­не­ры чере­ду­ют на экран­ной стра­ни­це спо­кой­ные тек­сто­вые слои, насы­щен­ные иллю­стра­ции, вдум­чи­вые таб­ли­цы и цита­ты из отзы­вов. Это напо­ми­на­ет рабо­ту с дина­ми­кой мно­го­стра­нич­но­го бумаж­но­го изда­ния, как если бы стра­ни­цы не пере­ли­сты­ва­лись в книж­ке, а рас­по­ла­га­лись пря­мо друг под другом.

Веб‑стра­ни­ца не огра­ни­че­на в длине. На одной стра­ни­це лег­ко поме­стит­ся содер­жа­ние бумаж­но­го ката­ло­га или реклам­но­го бук­ле­та. Чтобы чита­тель не утом­лял­ся от одно­об­ра­зия, дизай­не­ры чере­ду­ют на экран­ной стра­ни­це спо­кой­ные тек­сто­вые слои, насы­щен­ные иллю­стра­ции, вдум­чи­вые таб­ли­цы и цита­ты из отзы­вов. Это напо­ми­на­ет рабо­ту с дина­ми­кой мно­го­стра­нич­но­го бумаж­но­го изда­ния, как если бы стра­ни­цы не пере­ли­сты­ва­лись в книж­ке, а рас­по­ла­га­лись пря­мо друг под другом.

Чем про­ще содер­жа­ние стра­ни­цы, тем мень­ше сло­ёв и тем они одно­об­раз­нее, чем слож­нее струк­ту­ра — тем боль­ше сло­ёв и разнообразия.

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

Чем про­ще содер­жа­ние стра­ни­цы, тем мень­ше сло­ёв и тем они одно­об­раз­нее, чем слож­нее струк­ту­ра — тем боль­ше сло­ёв и разнообразия.

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

Рассмот­рим отдель­но осо­бен­ный тип моду­ля с иллю­стра­ци­я­ми — «галерею»:

Плохо

Хорошо

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

Мы не под­дер­жи­ва­ем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­ри­цы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зи­ем раз­ме­ров и формы.

Рассмот­рим отдель­но осо­бен­ный тип моду­ля с иллю­стра­ци­я­ми — «галерею»:

Плохо

Хорошо

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

Мы не под­дер­жи­ва­ем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­ри­цы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зи­ем раз­ме­ров и формы.

Кирпично

Интересно

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

Скучно, душ­но и моно­тон­но. Такой модуль выгля­дит тяже­ло­вес­но и с тру­дом встра­и­ва­ет­ся в стра­ни­цу рядом с другими.

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

На при­ме­ре с гори­зон­таль­ной фото­гра­фией у моду­ля появи­лось два набо­ра полей — внеш­ний, вокруг боль­шой фото­гра­фии, и внут­рен­ний, вокруг вер­ти­каль­ной фото­гра­фии и подпи­си к ней.

Кирпично

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

Скучно, душ­но и моно­тон­но. Такой модуль выгля­дит тяже­ло­вес­но и с тру­дом встра­и­ва­ет­ся в стра­ни­цу рядом с другими.

Интересно

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

На при­ме­ре с гори­зон­таль­ной фото­гра­фией у моду­ля появи­лось два набо­ра полей — внеш­ний, вокруг боль­шой фото­гра­фии, и внут­рен­ний, вокруг вер­ти­каль­ной фото­гра­фии и подпи­си к ней.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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