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

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

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

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

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

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

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

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

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

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

Так себе

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

Лучше

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

Хорошо

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

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

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

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

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

Так себе

Лучше

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

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

Хорошо

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

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

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

Сойдёт

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

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

Непривычно

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

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

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

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

Плохо

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

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

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

сойдёт

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

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

Непривычно

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

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

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

Плохо

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

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

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

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

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

Хорошо

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

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

Хорошо

Майспейс

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

Хуже

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

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

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

Хорошо

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

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

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

Хорошо

Майспейс

Хуже

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

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

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

Хорошо

Плохо

Помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста

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

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

Хорошо

Плохо

Помните, что «подмышка» бывает только правой — фотография не должна отделять заголовок от начала текста

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

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

Хорошо

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

Хорошо

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

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

Макет страницы «Магазина горящих путёвок»

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

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

Хорошо

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

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

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

Макет страницы «Магазина горящих путёвок»

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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