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

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

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

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

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

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

Плохо

Небо сливается с белым фоном страницы

Хорошо

Лёгкая рамка
решает проблему

Фото­гра­фия должна быть чётко огра­ни­чена соб­ствен­ным фоном или тон­кой пря­мо­уголь­ной рам­кой. Облака, схо­дя­щие «на нет» — ошибка.

То же отно­сится к гра­ни­цам обтрав­лен­ных иллю­стра­ций: они должны быть чётко очерчены.

Плохо

Небо сливается с белым фоном страницы

Фотография должна быть чётко ограничена собственным фоном или тонкой прямоугольной рамкой. Облака, сходящие «на нет» — ошибка.

Хорошо

Лёгкая рамка решает проблему

То же относится к границам обтравленных иллюстраций: они должны быть чётко очерчены.

При уменьшении портрета важно, чтобы лицо оставалось узнаваемым. Это тоже причина подрезать фотографию.

Плохо

Хорошо

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

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

Плохо

Любовь Котова:
Отчет­ность за полу­го­дие в элек­трон­ном
виде сдают ком­па­нии, у кото­рых
за про­шлый год сред­не­спи­соч­ная
чис­лен­ность пре­вы­сила 50 человек

Хорошо

Любовь Котова:
Отчет­ность за полу­го­дие в элек­трон­ном
виде сдают ком­па­нии, у кото­рых
за про­шлый год сред­не­спи­соч­ная
чис­лен­ность пре­вы­сила 50 человек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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