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

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

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

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

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

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

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

Изда­тель­ство Бюро Гор­бу­нова
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

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

Я рекомендую начинающим дизайнерам рисовать ценники в качестве упражнения по вёрстке

Во‑первых, из‑за лаконичности формата такой «факт» действительно часто подаётся без ссылки на источник, во‑вторых его главная цель — привлечь и заинтересовать читателя. Конечно, использование фактоидов как элемента вёрстки не означает низкого качества самой информации — проверка и подтверждение фактов в основном тексте всегда остаётся на совести редакции.

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

Я рекомендую начинающим дизайнерам рисовать ценники в качестве упражнения по вёрстке

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

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

Цитата, фак­тоид и цен­ник — при­меры мини­фор­ма­тов. К мини­фор­ма­там отно­сятся и врезки с име­нем автора:

Статья в «Телеграфе»

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

Заметка в «Лук эт ми»

Веб‑дизай­не­рам есть чему поучиться у газет­чи­ков. Полоса англий­ского «Инде­пен­дента» укра­шена врез­ками с порт­ре­том автора и цитатой.

Индепендент

Индепендент

Цитата, фактоид и ценник — примеры миниформатов. К миниформатам относятся и врезки с именем автора:

Статья в «Телеграфе»

В авторской врезке часто находится место маленьким украшениям — если не фотографии автора, то пиктограммам или кнопкам социальных сетей:

Заметка в «Лук эт ми»

Веб‑дизайнерам есть чему поучиться у газетчиков. Полоса английского «Индепендента» украшена врезками с портретом автора и цитатой.

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

Вытянутый в строчку опрос на краю страницы гарантированно привлечёт внимание, как на Яндексе во время выборов мэра Москвы.

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

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

Адвик

Ещё один мини­фор­мат, при­шед­ший в интер­нет из прессы — «ушки». Так назы­вают корот­кие иллю­стри­ро­ван­ные анонсы ста­тей на пере­до­вице или пер­вой стра­нице раз­дела. Ушки часто стоят в ряд над шап­кой стра­ницы, и тор­чат из неё как насто­я­щие уши.

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

Эпл

Альфа‑банк

Эпл

Альфа‑банк

Ещё один миниформат, пришедший в интернет из прессы — «ушки». Так называют короткие иллюстрированные анонсы статей на передовице или первой странице раздела. Ушки часто стоят в ряд над шапкой страницы, и торчат из неё как настоящие уши.

Адвик

Ушки могут стоять и внизу главной страницы, и в её середине.

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

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

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

Во‑вторых, эти элементы задают стиль сайту или электронному изданию.

Красиво организовать пространство миниформатов помогает правило якорных объектов.

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

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

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

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

Кра­сиво орга­ни­зо­вать про­стран­ство мини­фор­ма­тов помо­гает пра­вило якор­ных объектов.

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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