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

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

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

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

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

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

Проблемная иллюстрация «в подмышке» не отделяет заголовок от начала текста, если стоит справа:

Плохо

Левая подмышка

Иллюстрация отделяет заголовок от текста

Хорошо

Правая подмышка

Нью‑Йорк Таймс

Про­блем­ная иллю­стра­ция «в под­мышке» не отде­ляет заго­ло­вок от начала тек­ста, если стоит справа:

Плохо

Левая подмышка

Хорошо

Правая подмышка

Иллюстрация отделяет заголовок от текста

Нью‑Йорк Таймс

Би‑би‑си

Ю‑Эс‑Эй Тудей

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

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

Как и в случае с висячими бирками в лентах, могут потребоваться дополнительные линейки и отступы.

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

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

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

Би‑би‑си

Ю‑Эс‑Эй Тудей

Плохо

Лучше

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

Текст неожиданно меняет левый край в случайном месте. С первого взгляда глаз выхватывает и воспринимает это место как начало текста. А при последовательном чтении сверху вниз — спотыкается в попытке найти начало съехавшей строки.

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

Ничто не выгля­дит так урод­ливо и нечи­та­емо, как обте­ка­ние иллю­стра­ции тек­стом справа.

Текст неожи­данно меняет левый край в слу­чай­ном месте. С пер­вого взгляда глаз выхва­ты­вает и вос­при­ни­мает это место как начало тек­ста. А при после­до­ва­тель­ном чте­нии сверху вниз — спо­ты­ка­ется в попытке найти начало съе­хав­шей строки.

Как и в слу­чае с «под­мыш­кой», доста­точно пере­ста­вить кар­тинку вправо.

Плохо

Лучше

хорошо

Сайт «Зе Вилладж»

плохо

Сайт «Зе Вилладж»

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

Это прекрасно выглядит, если иллюстрация согласована с текстом.

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

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

Это пре­красно выгля­дит, если иллю­стра­ция согла­со­вана с текстом.

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

хорошо

Сайт «Зе Вилладж»

плохо

Сайт «Зе Вилладж»

Фрагмент интерфейса Бейскемпа

Поиск «Советов»

Твитер

Промостраница юридического сервиса «Договоры»

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

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

Другой способ — систематизировать размеры «превьюшек» и расположить прямоугольной матрицей.

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

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

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

Дру­гой спо­соб — систе­ма­ти­зи­ро­вать раз­меры «пре­вью­шек» и рас­по­ло­жить пря­мо­уголь­ной матрицей.

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

Фрагмент интерфейса Бейскемпа

Поиск «Советов»

Твитер

Промостраница юридического сервиса «Договоры»

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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