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

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

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

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

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
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

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

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

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

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

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

Приемлемо

Лучше

Скучно

Приемлемо

Плохо

Без иллюстраций

По тра­ди­ции нач­нём с тек­ста без иллю­стра­ций. Про­стой спо­соб собрать стра­ни­цу — сде­лать «бутер­брод», то есть рас­по­ло­жить моду­ли сло­я­ми друг под другом.

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

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

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

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

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

Если пол­но­стью игно­ри­ро­вать сет­ку и устро­ить вак­ха­на­лию коло­нок, стра­ни­ца развалится.

Этим часто гре­шат про­мо­стра­ни­цы в интер­не­те — так и ата­ку­ют нас ряда­ми пре­иму­ществ и достоинств.

Без иллюстраций

По тра­ди­ции нач­нём с тек­ста без иллю­стра­ций. Про­стой спо­соб собрать стра­ни­цу — сде­лать «бутер­брод», то есть рас­по­ло­жить моду­ли сло­я­ми друг под другом.

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

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

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

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

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

Если пол­но­стью игно­ри­ро­вать сет­ку и устро­ить вак­ха­на­лию коло­нок, стра­ни­ца развалится.

Этим часто гре­шат про­мо­стра­ни­цы в интер­не­те — так и ата­ку­ют нас ряда­ми пре­иму­ществ и достоинств.

Приемлемо

Лучше

Скучно

Приемлемо

Плохо

Вве­дём новый при­ём — плаш­ку. Плашка помо­га­ет отде­лить модуль от сосед­не­го и объ­еди­нить его соб­ствен­ные части:

Плашка выде­ля­ет модуль на стра­ни­це. Поэто­му из сосед­них бло­ков нуж­но ста­вить на плаш­ку более важный.

Существу­ет мил­ли­он раз­но­вид­но­стей сти­лей пла­шек и рамок от плос­ких мини­ма­ли­стич­ных до объ­ём­ных с гра­ди­ен­та­ми и тенями.

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

Вве­дём новый при­ём — плаш­ку. Плашка помо­га­ет отде­лить модуль от сосед­не­го и объ­еди­нить его соб­ствен­ные части:

Плашка выде­ля­ет модуль на стра­ни­це. Поэто­му из сосед­них бло­ков нуж­но ста­вить на плаш­ку более важный.

Существу­ет мил­ли­он раз­но­вид­но­стей сти­лей пла­шек и рамок от плос­ких мини­ма­ли­стич­ных до объ­ём­ных с гра­ди­ен­та­ми и тенями.

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

Хоро­шая идея — одновре­мен­но сло­мать сет­ку важ­но­го моду­ля и поста­вить его на плаш­ку. Плашка и осо­бый ритм выде­лят блок сре­ди дру­гих, при этом плаш­ка «скле­ит» нестан­дарт­ный модуль.

Если бутер­брод выгля­дит сухо­ва­то, вер­ти­каль­ная колон­ка раз­ба­вит гори­зон­таль­ную монотонность.

Хоро­шая идея — одновре­мен­но сло­мать сет­ку важ­но­го моду­ля и поста­вить его на плаш­ку. Плашка и осо­бый ритм выде­лят блок сре­ди дру­гих, при этом плаш­ка «скле­ит» нестан­дарт­ный модуль.

Если бутер­брод выгля­дит сухо­ва­то, вер­ти­каль­ная колон­ка раз­ба­вит гори­зон­таль­ную монотонность.

С иллюстрациями

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

Страни­ца вырос­ла в раз­ме­рах, но не зря — с иллю­стра­ци­я­ми на неё при­хо­дит жизнь.

С иллюстрациями

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

Страни­ца вырос­ла в раз­ме­рах, но не зря — с иллю­стра­ци­я­ми на неё при­хо­дит жизнь.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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