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

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

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

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

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

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

Вве­дём новый приём — плашку. Плашка помо­гает отде­лить модуль от сосед­него и объ­еди­нить его соб­ствен­ные части:

Плашка выде­ляет модуль на стра­нице. Поэтому из сосед­них бло­ков нужно ста­вить на плашку более важный.

Суще­ствует мил­лион раз­но­вид­но­стей сти­лей пла­шек и рамок от плос­ких мини­ма­ли­стич­ных до объ­ём­ных с гра­ди­ен­тами и тенями.

Оформ­ле­ние плашки — дань теку­щей моде или фир­мен­ному стилю, но её функ­ция оста­ётся одной и той же — объ­еди­нять и выделять.

Введём новый приём — плашку. Плашка помогает отделить модуль от соседнего и объединить его собственные части:

Плашка выделяет модуль на странице. Поэтому из соседних блоков нужно ставить на плашку более важный.

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

Оформление плашки — дань текущей моде или фирменному стилю, но её функция остаётся одной и той же — объединять и выделять.

Хорошая идея — одновременно сломать сетку важного модуля и поставить его на плашку. Плашка и особый ритм выделят блок среди других, при этом плашка «склеит» нестандартный модуль.

Если бутерброд выглядит суховато, вертикальная колонка разбавит горизонтальную монотонность.

Хоро­шая идея — одно­вре­менно сло­мать сетку важ­ного модуля и поста­вить его на плашку. Плашка и осо­бый ритм выде­лят блок среди дру­гих, при этом плашка «склеит» нестан­дарт­ный модуль.

Если бутер­брод выгля­дит сухо­вато, вер­ти­каль­ная колонка раз­ба­вит гори­зон­таль­ную монотонность.

С иллюстрациями

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

Стра­ница выросла в раз­ме­рах, но не зря — с иллю­стра­ци­ями на неё при­хо­дит жизнь.

С иллюстрациями

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

Страница выросла в размерах, но не зря — с иллюстрациями на неё приходит жизнь.

Плохо

Плохо

Если все картинки слишком маленькие и одинаковые по размерам, страница выглядит слабо. Хороший верстальщик выделяет главное. Читатель справедливо сочтёт главным самый большой элемент в начале страницы, поэтому одна из иллюстраций должна быть крупной и доминировать над остальными.

Хорошо

При этом доминирующая иллюстрация не обязана стоять на самом верху, однако лучше чувствует себя в верхней части страницы.

Плохо

Плохо

Хорошо

Если все кар­тинки слиш­ком малень­кие и оди­на­ко­вые по раз­ме­рам, стра­ница выгля­дит слабо. Хоро­ший вер­сталь­щик выде­ляет глав­ное. Чита­тель спра­вед­ливо сочтёт глав­ным самый боль­шой эле­мент в начале стра­ницы, поэтому одна из иллю­стра­ций должна быть круп­ной и доми­ни­ро­вать над остальными.

При этом доми­ни­ру­ю­щая иллю­стра­ция не обя­зана сто­ять на самом верху, однако лучше чув­ствует себя в верх­ней части страницы.

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

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

Ошибкой было бы собрать все иллюстрации в самом верху, далеко внизу или у одной из сторон.

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

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

Ошиб­кой было бы собрать все иллю­стра­ции в самом верху, далеко внизу или у одной из сторон.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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