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

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

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

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

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

Оглавление

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

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

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

Увеличение хорошей фотографии сделает её еще лучше. Фотография Андрея Горбунова

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

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

Увеличение хорошей фотографии сделает её еще лучше. Фотография Андрея Горбунова

Фотография искажена ничего не подоз­ре­вающим прохожим

Разворот-катастрофа. Накладки: подборка Чарльза Эпла

Дизай­нер сле­дит, чтобы на выбран­ной им фото­гра­фии посто­рон­ние объ­ек­ты слу­чай­но не иска­жа­ли фор­му объекта.

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

Фотография искажена ничего не подоз­ре­вающим прохожим

Дизай­нер сле­дит, чтобы на выбран­ной им фото­гра­фии посто­рон­ние объ­ек­ты слу­чай­но не иска­жа­ли фор­му объекта.

Разворот-катастрофа. Накладки: подборка Чарльза Эпла

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

Элемент управления

Эле­мент управ­ле­ния — базо­вый эле­мент экран­ной вёрстки.

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

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

Элемен­ты управ­ле­ния по фор­ме в вёрст­ке делят­ся на точеч­ные, линей­ные и прямоугольные.

Элемент управления

Эле­мент управ­ле­ния — базо­вый эле­мент экран­ной вёрстки.

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

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

Элемен­ты управ­ле­ния по фор­ме в вёрст­ке делят­ся на точеч­ные, линей­ные и прямоугольные.

В углу

Точеч­ные элементы

Компакт­ные эле­мен­ты интер­фей­са с выра­жен­ным цен­тром вни­ма­ния — пик­то­грам­ма, асин­хрон­ный инди­ка­тор про­грес­са, чекбокс.

Точеч­ные эле­мен­ты удоб­ны в вёрст­ке. Они выиг­рыш­но смот­рят­ся, если выде­лить им осо­бое «якор­ное» положение.

В центре

В углу

Точеч­ные элементы

Компакт­ные эле­мен­ты интер­фей­са с выра­жен­ным цен­тром вни­ма­ния — пик­то­грам­ма, асин­хрон­ный инди­ка­тор про­грес­са, чекбокс.

Точеч­ные эле­мен­ты удоб­ны в вёрст­ке. Они выиг­рыш­но смот­рят­ся, если выде­лить им осо­бое «якор­ное» положение.

В центре

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

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

Ворд

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

Гугль

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

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

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

Ворд

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

Гугль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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