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

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

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

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

 
между важными местами
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

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

Оксфорд‑тест по английскому языку

Подпись

Подпись — базовый элемент вёрстки.

Подписи сопровождают другие элементы вёрстки — иллюстрации, элементы управления и даже гиперссылки. Подписи объясняют их назначение и содержание, служат мостиком к основному тексту.

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

Подпись

Под­пись — базо­вый эле­мент вёрстки.

Под­писи сопро­вож­дают дру­гие эле­менты вёрстки — иллю­стра­ции, эле­менты управ­ле­ния и даже гиперс­сылки. Под­писи объ­яс­няют их назна­че­ние и содер­жа­ние, слу­жат мости­ком к основ­ному тексту.

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

Оксфорд‑тест по английскому языку

Угадайте, на что смотрят
Иидзаса и Бондарев,
и выиграйте бесплатное
занятие!

Подписи интригуют и развлекают читателя

Иллюстрации без подписи — бессмысленные декорации

Подпись необязательна, если иллюстрация понятна без объяснений, стоит рядом с заголовком или описанием в основном тексте.

Нумерованные иллюстрации и отдельные подписи неудобно искать.
Армин Хофманн. Руководство по графическому дизайну: принципы и практика, 2001

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

Угадайте, на что смотрят
Иидзаса и Бондарев,
и выиграйте бесплатное
занятие!

Подписи интригуют и развлекают читателя

Иллюстрации без подписи — бессмысленные декорации

Под­пись необя­за­тельна, если иллю­стра­ция понятна без объ­яс­не­ний, стоит рядом с заго­лов­ком или опи­са­нием в основ­ном тексте.

Нумерованные иллюстрации и отдельные подписи неудобно искать.
Армин Хофманн. Руководство по графическому дизайну: принципы и практика, 2001

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

Выносные линии должны быть тонкими: не более 20% чёрного на экране или 0,25 п. на бумаге

Они не должны пересекаться между собой и должны как можно меньше пересекать изображение

Выносные линии не должны втыкаться в указываемую деталь

Не должны совпадать или идти параллельно с ближайшими линиями самой иллюстрации

Выносные линии должны иметь достаточную длину, чтобы их было легко заметить

Хорошо, если подпись располагается рядом с иллюстрацией. Лучше, если подписаны отдельные детали.

Хорошо, если под­пись рас­по­ла­га­ется рядом с иллю­стра­цией. Лучше, если под­пи­саны отдель­ные детали.

Судья руководит, опрашивает стороны, выясняет обстоятельства и пишет судебные акты

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

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

Редкое чудо техники — монитор с информацией
о делах

Редкое чудо техники — монитор с информацией
о делах

Устраивайтесь там, где удобно. Если судья решит, что стороны сели «не так», он вас поправит

Свидетель отвечает на вопросы,
рассказывает об обстоятельствах

Чтобы что‑то сказать,
дайте это понять жестом.
Скорее всего, судья даст
вам слово

Чтобы что‑то сказать,
дайте это понять жестом.
Скорее всего, судья даст
вам слово

Если истец не докажет свои
требования — проиграет иск

Заранее выключите или обеззвучьте телефон

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

Вынос­ные линии должны быть тон­кими: не более 20% чёр­ного на экране или 0,25 п. на бумаге
Они не должны пере­се­каться между собой и должны как можно меньше пере­се­кать изоб­ра­же­ние
Вынос­ные линии не должны вты­каться в ука­зы­ва­е­мую деталь
Не должны сов­па­дать или идти парал­лельно с бли­жай­шими лини­ями самой иллю­стра­ции
Вынос­ные линии должны иметь доста­точ­ную длину, чтобы их было легко заме­тить

Чаще всего подписи располагаются снизу или сбоку от своих объектов

Однако поля ввода подписывают слева или сверху, чтобы их названия были видны заранее

Шрифт подпи­сей обычно отли­ча­ется от основ­ного тек­ста мень­шим кег­лем или начертанием.

В конце подпи­сей точка не ста­вится, двое­то­чия в под­пи­сях к полям ввода необязательны.

Чаще всего подписи располагаются снизу или сбоку от своих объектов

Шрифт подписей обычно отличается от основного текста меньшим кеглем или начертанием.

Однако поля ввода подписывают слева или сверху, чтобы их названия были видны заранее

В конце подписей точка не ставится, двоеточия в подписях к полям ввода необязательны.

Тест по базовым элементам

На иллюстрации простые заголовки текстовых блоков. Укажите заголовки с ошибками и моветоном в оформлении.

Выберите приемлемые варианты вёрстки заголовка трёхколоночного модуля.

Как выглядит хорошо свёрстанный левым флагом текст?

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

Выберите варианты с правильным положением картины Жака‑Луи Давида относительно текста.

Перечислите недостатки «обтравленной» иллюстрации.

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

Перечислите визуальные недостатки формы заказа звонка.

У кнопки недостаточные боковые поля
Верхнее поле влезает в интерлиньяж подписи «Имя»
Надпись «Заказать звонок» визуально провалилась вниз
Нет графы «Фамилия»

Выберите предпочтительные варианты выделения ссылки в тексте.

Отметьте «бракованные» выносные линии на иллюстрации.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест по базовым элементам

На иллюстрации простые заголовки текстовых блоков. Укажите заголовки с ошибками и моветоном в оформлении.

Выберите приемлемые варианты вёрстки заголовка трёхколоночного модуля.

Как выглядит хорошо свёрстанный левым флагом текст?

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

Выберите варианты с правильным положением картины Жака‑Луи Давида относительно текста.

Перечислите недостатки «обтравленной» иллюстрации.

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

Перечислите визуальные недостатки формы заказа звонка.

У кнопки недостаточные боковые поля
Верхнее поле влезает в интерлиньяж подписи «Имя»
Надпись «Заказать звонок» визуально провалилась вниз
Нет графы «Фамилия»

Выберите предпочтительные варианты выделения ссылки в тексте.

Отметьте «бракованные» выносные линии на иллюстрации.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать
Скрыт 101 разворот

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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