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

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

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

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

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

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

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

Верно и обратное: случайное выравнивание создаёт новый псевдомодуль.

Новостной блок имеет вид шахматной доски: статьи справа подозрительно связались с крупной фотографией Кудрина, а заголовок заметки о нём — с авторской колонкой Дениса Самсонова.

На макете плаката подпись к верхней иллюстрации с процентами — «В России совершается 49% абортов» — выровнена по верху изображения рекламируемого презерватива, а слоган — по низу. Эти две надписи и изображение упаковки образуют модуль, и фраза об абортах увязывается с товаром. Как будто это презервативы во всём виноваты.

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

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние создаёт новый псевдомодуль.

Новост­ной блок имеет вид шах­мат­ной доски: ста­тьи справа подо­зри­тельно свя­за­лись с круп­ной фото­гра­фией Куд­рина, а заго­ло­вок заметки о нём — с автор­ской колон­кой Дениса Самсонова.

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

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

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

Макет меню содержит слишком много элементов и выглядит плохо. Элементы случайно выравниваются и зрительно объединяются в пересекающиеся псевдомодули.

Обратите внимание, как блок кнопки «Получить доступ» выравнивается сверху с надписями «Айфон» и «Андроид», а снизу — со строкой меню в левой части. В итоге две не связанные строки объединились в псевдомодуль, который пересекается с блоком новостей слева сверху.

Красноватым показаны области пересечения.

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

Правила модульной вёрстки

  • Модуль имеет форму прямоугольника или формирует его антипространством.

  • Внутренние элементы модуля согласованы по направлению чтения.

  • Выравнивание ширины, высоты и положения элементов создаёт новый модуль (или псевдомодуль).

  • Модули не должны пересекаться между собой и влезать в пространство друг друга.

  • Соседние модули не должны вводить читателя в заблуждение.

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

Макет меню содер­жит слиш­ком много эле­мен­тов и выгля­дит плохо. Эле­менты слу­чайно вырав­ни­ва­ются и зри­тельно объ­еди­ня­ются в пере­се­ка­ю­щи­еся псевдомодули.

Обра­тите вни­ма­ние, как блок кнопки «Полу­чить доступ» вырав­ни­ва­ется сверху с над­пи­сями «Айфон» и «Андроид», а снизу — со стро­кой меню в левой части. В итоге две не свя­зан­ные строки объ­еди­ни­лись в псев­до­мо­дуль, кото­рый пере­се­ка­ется с бло­ком ново­стей слева сверху.

Крас­но­ва­тым пока­заны обла­сти пересечения.

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

Пра­вила модуль­ной вёрстки

  • Модуль имеет форму пря­мо­уголь­ника или фор­ми­рует его антипространством.

  • Внут­рен­ние эле­менты модуля согла­со­ваны по направ­ле­нию чтения.

  • Вырав­ни­ва­ние ширины, высоты и поло­же­ния эле­мен­тов создаёт новый модуль (или псевдомодуль).

  • Модули не должны пере­се­каться между собой и вле­зать в про­стран­ство друг друга.

  • Сосед­ние модули не должны вво­дить чита­теля в заблуждение.

Доминирующие и вспомогательные иллюстрации

Регулярность скучна и утомительна. Запирающиеся шкафчики в супермаркете, кресла в кинотеатре, подъезды многоквартирного дома, ячейки таблицы, квадратные фотографии в интерфейсах — неотличимы, унылы и оставляют нас в сомнениях.

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

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

Так себе

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

Лучше

Доминирующая иллюстрация однозначно указывает: «Здесь начало осмотра». Но остальные иллюстрации по‑прежнему безуспешно спорят друг с другом

Хорошо

Взгляд свободно и уверенно скользит по странице с явной визуальной иерархией

Доминирующие и вспомогательные иллюстрации

Регу­ляр­ность скучна и уто­ми­тельна. Запи­ра­ю­щи­еся шкаф­чики в супер­мар­кете, кресла в кино­те­атре, подъ­езды мно­го­квар­тир­ного дома, ячейки таб­лицы, квад­рат­ные фото­гра­фии в интер­фей­сах — неот­ли­чимы, унылы и остав­ляют нас в сомнениях.

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

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

Так себе

Лучше

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

Доминирующая иллюстрация однозначно указывает: «Здесь начало осмотра». Но остальные иллюстрации по‑прежнему безуспешно спорят друг с другом

Хорошо

Взгляд свободно и уверенно скользит по странице с явной визуальной иерархией

Для начала попробуем простой способ — поставить иллюстрации рядом в общий прямоугольный блок:

Сойдёт

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

Гораздо реже попадается вёрстка иллюстраций друг под другом сбоку от текста:

Непривычно

При такой компоновке сложнее сохранить доминирующую иллюстрацию, а нижняя имеет не очень естественные пропорции

Если довести идею до абсурда, «пирог» из узких иллюстраций превращается в интересную декорацию, как на сайте компании «Реатон»:

Сайт компании «Реатон»

А бутерброд из двух иллюстраций над текстом — неудачная идея:

Плохо

Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста

Для начала попро­буем про­стой спо­соб — поста­вить иллю­стра­ции рядом в общий пря­мо­уголь­ный блок:

сойдёт

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

Гораздо реже попа­да­ется вёрстка иллю­стра­ций друг под дру­гом сбоку от текста:

Непривычно

При такой компоновке сложнее сохранить доминирующую иллюстрацию, а нижняя имеет не очень естественные пропорции

Если дове­сти идею до абсурда, «пирог» из узких иллю­стра­ций пре­вра­ща­ется в инте­рес­ную деко­ра­цию, как на сайте ком­па­нии «Реатон».

А бутер­брод из двух иллю­стра­ций над тек­стом — неудач­ная идея:

Плохо

Иллюстрации образуют массивный кирпичный блок, слишком удалённый от текста

Сайт компании «Реатон»

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

А теперь скомбинируем два базовых дизайна: поставим вспомогательную картинку сбоку от текста, а сверху накроем модуль доминирующей иллюстрацией:

Хорошо

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

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

Хорошо

Майспейс

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

Хуже

Старый дизайн ленты Фейсбука

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

А теперь ском­би­ни­руем два базо­вых дизайна: поста­вим вспо­мо­га­тель­ную кар­тинку сбоку от тек­ста, а сверху накроем модуль доми­ни­ру­ю­щей иллюстрацией:

Хорошо

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

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

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

Хорошо

Майспейс

Хуже

Старый дизайн ленты Фейсбука

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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