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

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

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

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

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

Оглавление

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

Точеч­ные эле­менты лег­ко при­стра­и­ва­ют­ся к более важ­ным элементам:

Но точ­ка в вёрст­ке — пло­хой команд­ный игрок, каж­дая ста­ра­ет­ся пере­кри­чать другую:

Ворд

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

Гугль

Точечные элементы в интерфейсе

Точеч­ные эле­менты лег­ко при­стра­и­ва­ют­ся к более важ­ным элементам:

Но точ­ка в вёрст­ке — пло­хой команд­ный игрок, каж­дая ста­ра­ет­ся пере­кри­чать другую:

Ворд

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

Гугль

Точечные элементы в интерфейсе

Линей­ные элементы

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

Строч­ные эле­мен­ты уме­ют рас­тя­ги­вать­ся по гори­зон­та­ли в соот­вет­ствии с тек­сто­вым содержанием.

Даже если текст корот­кий, этим сто­ит поль­зо­вать­ся, чтобы упро­стить попа­да­ние мышью или пальцем:

Плохо

Хорошо

Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит

А вот уве­ли­чи­вать­ся по вер­ти­ка­ли для них неесте­ствен­но. Линей­ные эле­мен­ты эко­но­мич­ны и не выхо­дят за пре­де­лы сво­ей стро­ки. Из них отлич­но скла­ды­ва­ют­ся пане­ли инструментов.

Плохо

Поле ввода несоразмерно мелкой подписи, а введённый текст зажат внутри поля без гигиенических отступов

Хорошо

Кегль подписи и содержания совпадают

Разме­ры линей­ных эле­мен­тов и их содер­жи­мое долж­ны соот­вет­ство­вать окружению.

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

Линей­ные элементы

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

Строч­ные эле­мен­ты уме­ют рас­тя­ги­вать­ся по гори­зон­та­ли в соот­вет­ствии с тек­сто­вым содержанием.

Даже если текст корот­кий, этим сто­ит поль­зо­вать­ся, чтобы упро­стить попа­да­ние мышью или пальцем:

Плохо

хорошо

Кнопка без боковых полей игнорирует закон Фиттса и плохо выглядит

А вот уве­ли­чи­вать­ся по вер­ти­ка­ли для них неесте­ствен­но. Линей­ные эле­мен­ты эко­но­мич­ны и не выхо­дят за пре­де­лы сво­ей стро­ки. Из них отлич­но скла­ды­ва­ют­ся пане­ли инструментов.

плохо

Поле ввода несоразмерно мелкой подписи, а введённый текст зажат внутри поля без гигиенических отступов

хорошо

Кегль подписи и содержания совпадают

Разме­ры линей­ных эле­мен­тов и их содер­жи­мое долж­ны соот­вет­ство­вать окружению.

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

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

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

Пример типографических гайдлайнов для элементов управления

Пример типографических гайдлайнов для элементов управления

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

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

Пример типографических гайдлайнов для элементов управления

Пря­мо­уголь­ные эле­менты

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

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

Большой прямоугольный список в левой части задаёт структуру окна

Пря­мо­уголь­ные эле­менты

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

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

Большой прямоугольный список в левой части задаёт структуру окна

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

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

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

плохо

хорошо

Редизайн окна поиска пациентов «Проскан»

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

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

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

плохо

хорошо

Редизайн окна поиска пациентов «Проскан»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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